@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal-debug.654e4ad

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

@@ -1,4 +1,6 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { Button } from '../../Button/index.js';
 import { Thumbnail } from '../../Thumbnail/index.js';
 import './index.scss';
@@ -14,32 +16,111 @@ export const DraggableFileDetails = (props)=>{
         id,
         collectionSlug
     });
-    return <DraggableSortableItem id={id} key={id}>
-      {(draggableSortableItemProps)=><div className={[
-            baseClass,
-            draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`
-        ].filter(Boolean).join(' ')} ref={draggableSortableItemProps.setNodeRef} style={{
-            transform: draggableSortableItemProps.transform,
-            transition: draggableSortableItemProps.transition,
-            zIndex: draggableSortableItemProps.isDragging ? 1 : undefined
-        }}>
-          <div className={`${baseClass}--drag-wrapper`}>
-            {isSortable && draggableSortableItemProps && <div className={`${baseClass}__drag`} {...draggableSortableItemProps.attributes} {...draggableSortableItemProps.listeners}>
-                <DragHandleIcon/>
-              </div>}
-            <Thumbnail className={`${baseClass}__thumbnail`} collectionSlug={collectionSlug} doc={doc} fileSrc={thumbnailURL || url} imageCacheTag={imageCacheTag} uploadConfig={uploadConfig}/>
-          </div>
-          <div className={`${baseClass}__main-detail`}>{filename}</div>
-
-          <div className={`${baseClass}__actions`}>
-            <DocumentDrawer/>
-            <DocumentDrawerToggler>
-              <EditIcon/>
-            </DocumentDrawerToggler>
-            {!hideRemoveFile && removeItem && <Button buttonStyle="icon-label" className={`${baseClass}__remove`} icon="x" iconStyle="none" onClick={()=>removeItem(rowIndex)} round/>}
-          </div>
-        </div>}
-    </DraggableSortableItem>;
+    return /*#__PURE__*/ _jsxDEV(DraggableSortableItem, {
+        id: id,
+        children: (draggableSortableItemProps)=>/*#__PURE__*/ _jsxDEV("div", {
+                className: [
+                    baseClass,
+                    draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`
+                ].filter(Boolean).join(' '),
+                ref: draggableSortableItemProps.setNodeRef,
+                style: {
+                    transform: draggableSortableItemProps.transform,
+                    transition: draggableSortableItemProps.transition,
+                    zIndex: draggableSortableItemProps.isDragging ? 1 : undefined
+                },
+                children: [
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}--drag-wrapper`,
+                        children: [
+                            isSortable && draggableSortableItemProps && /*#__PURE__*/ _jsxDEV("div", {
+                                className: `${baseClass}__drag`,
+                                ...draggableSortableItemProps.attributes,
+                                ...draggableSortableItemProps.listeners,
+                                children: /*#__PURE__*/ _jsxDEV(DragHandleIcon, {}, void 0, false, {
+                                    fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+                                    lineNumber: 77,
+                                    columnNumber: 17
+                                }, this)
+                            }, void 0, false, {
+                                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+                                lineNumber: 72,
+                                columnNumber: 15
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV(Thumbnail, {
+                                className: `${baseClass}__thumbnail`,
+                                collectionSlug: collectionSlug,
+                                doc: doc,
+                                fileSrc: thumbnailURL || url,
+                                imageCacheTag: imageCacheTag,
+                                uploadConfig: uploadConfig
+                            }, void 0, false, {
+                                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+                                lineNumber: 80,
+                                columnNumber: 13
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+                        lineNumber: 70,
+                        columnNumber: 11
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__main-detail`,
+                        children: filename
+                    }, void 0, false, {
+                        fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+                        lineNumber: 89,
+                        columnNumber: 11
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__actions`,
+                        children: [
+                            /*#__PURE__*/ _jsxDEV(DocumentDrawer, {}, void 0, false, {
+                                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+                                lineNumber: 92,
+                                columnNumber: 13
+                            }, this),
+                            /*#__PURE__*/ _jsxDEV(DocumentDrawerToggler, {
+                                children: /*#__PURE__*/ _jsxDEV(EditIcon, {}, void 0, false, {
+                                    fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+                                    lineNumber: 94,
+                                    columnNumber: 15
+                                }, this)
+                            }, void 0, false, {
+                                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+                                lineNumber: 93,
+                                columnNumber: 13
+                            }, this),
+                            !hideRemoveFile && removeItem && /*#__PURE__*/ _jsxDEV(Button, {
+                                buttonStyle: "icon-label",
+                                className: `${baseClass}__remove`,
+                                icon: "x",
+                                iconStyle: "none",
+                                onClick: ()=>removeItem(rowIndex),
+                                round: true
+                            }, void 0, false, {
+                                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+                                lineNumber: 97,
+                                columnNumber: 15
+                            }, this)
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+                        lineNumber: 91,
+                        columnNumber: 11
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+                lineNumber: 56,
+                columnNumber: 9
+            }, this)
+    }, id, false, {
+        fileName: "src/elements/FileDetails/DraggableFileDetails/index.tsx",
+        lineNumber: 54,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details-draggable'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\n\nexport type DraggableFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  hasImageSizes?: boolean\n  hasMany: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: string\n  isSortable?: boolean\n  removeItem?: (index: number) => void\n  rowIndex: number\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const DraggableFileDetails: React.FC<DraggableFileDetailsProps> = (props) => {\n  const {\n    collectionSlug,\n    doc,\n    hideRemoveFile,\n    imageCacheTag,\n    isSortable,\n    removeItem,\n    rowIndex,\n    uploadConfig,\n  } = props\n\n  const { id, filename, thumbnailURL, url } = doc\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug,\n  })\n\n  return (\n    <DraggableSortableItem id={id} key={id}>\n      {(draggableSortableItemProps) => (\n        <div\n          className={[\n            baseClass,\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          <div className={`${baseClass}--drag-wrapper`}>\n            {isSortable && draggableSortableItemProps && (\n              <div\n                className={`${baseClass}__drag`}\n                {...draggableSortableItemProps.attributes}\n                {...draggableSortableItemProps.listeners}\n              >\n                <DragHandleIcon />\n              </div>\n            )}\n            <Thumbnail\n              className={`${baseClass}__thumbnail`}\n              collectionSlug={collectionSlug}\n              doc={doc}\n              fileSrc={thumbnailURL || url}\n              imageCacheTag={imageCacheTag}\n              uploadConfig={uploadConfig}\n            />\n          </div>\n          <div className={`${baseClass}__main-detail`}>{filename}</div>\n\n          <div className={`${baseClass}__actions`}>\n            <DocumentDrawer />\n            <DocumentDrawerToggler>\n              <EditIcon />\n            </DocumentDrawerToggler>\n            {!hideRemoveFile && removeItem && (\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"none\"\n                onClick={() => removeItem(rowIndex)}\n                round\n              />\n            )}\n          </div>\n        </div>\n      )}\n    </DraggableSortableItem>\n  )\n}\n"],"names":["Button","Thumbnail","baseClass","DraggableSortableItem","DragHandleIcon","EditIcon","useDocumentDrawer","DraggableFileDetails","props","collectionSlug","doc","hideRemoveFile","imageCacheTag","isSortable","removeItem","rowIndex","uploadConfig","id","filename","thumbnailURL","url","DocumentDrawer","DocumentDrawerToggler","key","draggableSortableItemProps","div","className","filter","Boolean","join","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","attributes","listeners","fileSrc","buttonStyle","icon","iconStyle","onClick","round"],"mappings":"AAAA;AAGA,SAASA,MAAM,QAAQ,wBAAuB;AAC9C,SAASC,SAAS,QAAQ,2BAA0B;AACpD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAIlB,SAASC,qBAAqB,QAAQ,qEAAoE;AAC1G,SAASC,cAAc,QAAQ,qCAAoC;AACnE,SAASC,QAAQ,QAAQ,+BAA8B;AACvD,SAASC,iBAAiB,QAAQ,gCAA+B;AAmBjE,OAAO,MAAMC,uBAA4D,CAACC;IACxE,MAAM,EACJC,cAAc,EACdC,GAAG,EACHC,cAAc,EACdC,aAAa,EACbC,UAAU,EACVC,UAAU,EACVC,QAAQ,EACRC,YAAY,EACb,GAAGR;IAEJ,MAAM,EAAES,EAAE,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,EAAE,GAAGV;IAE5C,MAAM,CAACW,gBAAgBC,sBAAsB,GAAGhB,kBAAkB;QAChEW;QACAR;IACF;IAEA,QACGN,sBAAsBc,IAAIA,IAAIM,KAAKN,IAAI;MACtC,CAAC,CAACO,8BACCC,IACCC,WAAW;YACTxB;YACAsB,8BAA8BX,cAAc,GAAGX,UAAU,iBAAiB,CAAC;SAC5E,CACEyB,MAAM,CAACC,SACPC,IAAI,CAAC,MACRC,KAAKN,2BAA2BO,UAAU,EAC1CC,OAAO;YACLC,WAAWT,2BAA2BS,SAAS;YAC/CC,YAAYV,2BAA2BU,UAAU;YACjDC,QAAQX,2BAA2BY,UAAU,GAAG,IAAIC;QACtD,GACD;UACC,CAACZ,IAAIC,WAAW,GAAGxB,UAAU,cAAc,CAAC,EAAE;YAC5C,CAACW,cAAcW,+BACZC,IACCC,WAAW,GAAGxB,UAAU,MAAM,CAAC,GAC9B,GAAGsB,2BAA2Bc,UAAU,GACxC,GAAGd,2BAA2Be,SAAS,EACzC;gBACC,CAACnC,gBAAiB;cACpB,EAAEqB,KACF;YACF,CAACxB,UACCyB,WAAW,GAAGxB,UAAU,WAAW,CAAC,EACpCO,gBAAgBA,gBAChBC,KAAKA,KACL8B,SAASrB,gBAAgBC,KACzBR,eAAeA,eACfI,cAAcA,eACd;UACJ,EAAES,IAAI;UACN,CAACA,IAAIC,WAAW,GAAGxB,UAAU,aAAa,CAAC,GAAGgB,WAAWO,IAAI;;UAE7D,CAACA,IAAIC,WAAW,GAAGxB,UAAU,SAAS,CAAC,EAAE;YACvC,CAACmB,gBAAiB;YAClB,CAACC,sBAAsB;cACrB,CAACjB,UAAW;YACd,EAAEiB,sBAAsB;YACxB,CAAC,CAACX,kBAAkBG,eACjBd,OACCyC,YAAY,aACZf,WAAW,GAAGxB,UAAU,QAAQ,CAAC,EACjCwC,KAAK,IACLC,UAAU,OACVC,SAAS,IAAM9B,WAAWC,WAC1B8B,QAEF;UACJ,EAAEpB,IAAI;QACR,EAAEA,KACF;IACJ,EAAEtB;AAEN,EAAC"}
+{"version":3,"sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details-draggable'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\n\nexport type DraggableFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  hasImageSizes?: boolean\n  hasMany: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: string\n  isSortable?: boolean\n  removeItem?: (index: number) => void\n  rowIndex: number\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const DraggableFileDetails: React.FC<DraggableFileDetailsProps> = (props) => {\n  const {\n    collectionSlug,\n    doc,\n    hideRemoveFile,\n    imageCacheTag,\n    isSortable,\n    removeItem,\n    rowIndex,\n    uploadConfig,\n  } = props\n\n  const { id, filename, thumbnailURL, url } = doc\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug,\n  })\n\n  return (\n    <DraggableSortableItem id={id} key={id}>\n      {(draggableSortableItemProps) => (\n        <div\n          className={[\n            baseClass,\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          <div className={`${baseClass}--drag-wrapper`}>\n            {isSortable && draggableSortableItemProps && (\n              <div\n                className={`${baseClass}__drag`}\n                {...draggableSortableItemProps.attributes}\n                {...draggableSortableItemProps.listeners}\n              >\n                <DragHandleIcon />\n              </div>\n            )}\n            <Thumbnail\n              className={`${baseClass}__thumbnail`}\n              collectionSlug={collectionSlug}\n              doc={doc}\n              fileSrc={thumbnailURL || url}\n              imageCacheTag={imageCacheTag}\n              uploadConfig={uploadConfig}\n            />\n          </div>\n          <div className={`${baseClass}__main-detail`}>{filename}</div>\n\n          <div className={`${baseClass}__actions`}>\n            <DocumentDrawer />\n            <DocumentDrawerToggler>\n              <EditIcon />\n            </DocumentDrawerToggler>\n            {!hideRemoveFile && removeItem && (\n              <Button\n                buttonStyle=\"icon-label\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                iconStyle=\"none\"\n                onClick={() => removeItem(rowIndex)}\n                round\n              />\n            )}\n          </div>\n        </div>\n      )}\n    </DraggableSortableItem>\n  )\n}\n"],"names":["React","Button","Thumbnail","baseClass","DraggableSortableItem","DragHandleIcon","EditIcon","useDocumentDrawer","DraggableFileDetails","props","collectionSlug","doc","hideRemoveFile","imageCacheTag","isSortable","removeItem","rowIndex","uploadConfig","id","filename","thumbnailURL","url","DocumentDrawer","DocumentDrawerToggler","draggableSortableItemProps","div","className","filter","Boolean","join","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","attributes","listeners","fileSrc","buttonStyle","icon","iconStyle","onClick","round"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,MAAM,QAAQ,wBAAuB;AAC9C,SAASC,SAAS,QAAQ,2BAA0B;AACpD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAIlB,SAASC,qBAAqB,QAAQ,qEAAoE;AAC1G,SAASC,cAAc,QAAQ,qCAAoC;AACnE,SAASC,QAAQ,QAAQ,+BAA8B;AACvD,SAASC,iBAAiB,QAAQ,gCAA+B;AAmBjE,OAAO,MAAMC,uBAA4D,CAACC;IACxE,MAAM,EACJC,cAAc,EACdC,GAAG,EACHC,cAAc,EACdC,aAAa,EACbC,UAAU,EACVC,UAAU,EACVC,QAAQ,EACRC,YAAY,EACb,GAAGR;IAEJ,MAAM,EAAES,EAAE,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,EAAE,GAAGV;IAE5C,MAAM,CAACW,gBAAgBC,sBAAsB,GAAGhB,kBAAkB;QAChEW;QACAR;IACF;IAEA,qBACE,QAACN;QAAsBc,IAAIA;kBACxB,CAACM,2CACA,QAACC;gBACCC,WAAW;oBACTvB;oBACAqB,8BAA8BV,cAAc,GAAGX,UAAU,iBAAiB,CAAC;iBAC5E,CACEwB,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRC,KAAKN,2BAA2BO,UAAU;gBAC1CC,OAAO;oBACLC,WAAWT,2BAA2BS,SAAS;oBAC/CC,YAAYV,2BAA2BU,UAAU;oBACjDC,QAAQX,2BAA2BY,UAAU,GAAG,IAAIC;gBACtD;;kCAEA,QAACZ;wBAAIC,WAAW,GAAGvB,UAAU,cAAc,CAAC;;4BACzCW,cAAcU,4CACb,QAACC;gCACCC,WAAW,GAAGvB,UAAU,MAAM,CAAC;gCAC9B,GAAGqB,2BAA2Bc,UAAU;gCACxC,GAAGd,2BAA2Be,SAAS;0CAExC,cAAA,QAAClC;;;;;;;;;;0CAGL,QAACH;gCACCwB,WAAW,GAAGvB,UAAU,WAAW,CAAC;gCACpCO,gBAAgBA;gCAChBC,KAAKA;gCACL6B,SAASpB,gBAAgBC;gCACzBR,eAAeA;gCACfI,cAAcA;;;;;;;;;;;;kCAGlB,QAACQ;wBAAIC,WAAW,GAAGvB,UAAU,aAAa,CAAC;kCAAGgB;;;;;;kCAE9C,QAACM;wBAAIC,WAAW,GAAGvB,UAAU,SAAS,CAAC;;0CACrC,QAACmB;;;;;0CACD,QAACC;0CACC,cAAA,QAACjB;;;;;;;;;;4BAEF,CAACM,kBAAkBG,4BAClB,QAACd;gCACCwC,aAAY;gCACZf,WAAW,GAAGvB,UAAU,QAAQ,CAAC;gCACjCuC,MAAK;gCACLC,WAAU;gCACVC,SAAS,IAAM7B,WAAWC;gCAC1B6B,KAAK;;;;;;;;;;;;;;;;;;OAjDmB3B;;;;;AAyDxC,EAAC"}

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

@@ -1,4 +1,5 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { formatFilesize } from 'payload/shared';
 import React from 'react';
 import { CopyToClipboard } from '../../CopyToClipboard/index.js';
@@ -6,25 +7,74 @@ import './index.scss';
 const baseClass = 'file-meta';
 export const FileMeta = (props)=>{
     const { filename, filesize, height, mimeType, url: fileURL, width } = props;
-    return <div className={baseClass}>
-      <div className={`${baseClass}__url`}>
-        <a href={fileURL} rel="noopener noreferrer" target="_blank">
-          {filename}
-        </a>
-        <CopyToClipboard defaultMessage="Copy URL" value={fileURL}/>
-      </div>
-      <div className={`${baseClass}__size-type`}>
-        {formatFilesize(filesize)}
-        {typeof width === 'number' && typeof height === 'number' && <React.Fragment>
-            &nbsp;-&nbsp;
-            {width}x{height}
-          </React.Fragment>}
-        {mimeType && <React.Fragment>
-            &nbsp;-&nbsp;
-            {mimeType}
-          </React.Fragment>}
-      </div>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        children: [
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__url`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("a", {
+                        href: fileURL,
+                        rel: "noopener noreferrer",
+                        target: "_blank",
+                        children: filename
+                    }, void 0, false, {
+                        fileName: "src/elements/FileDetails/FileMeta/index.tsx",
+                        lineNumber: 26,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV(CopyToClipboard, {
+                        defaultMessage: "Copy URL",
+                        value: fileURL
+                    }, void 0, false, {
+                        fileName: "src/elements/FileDetails/FileMeta/index.tsx",
+                        lineNumber: 29,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/FileDetails/FileMeta/index.tsx",
+                lineNumber: 25,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__size-type`,
+                children: [
+                    formatFilesize(filesize),
+                    typeof width === 'number' && typeof height === 'number' && /*#__PURE__*/ _jsxDEV(React.Fragment, {
+                        children: [
+                            " - ",
+                            width,
+                            "x",
+                            height
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/FileDetails/FileMeta/index.tsx",
+                        lineNumber: 34,
+                        columnNumber: 11
+                    }, this),
+                    mimeType && /*#__PURE__*/ _jsxDEV(React.Fragment, {
+                        children: [
+                            " - ",
+                            mimeType
+                        ]
+                    }, void 0, true, {
+                        fileName: "src/elements/FileDetails/FileMeta/index.tsx",
+                        lineNumber: 40,
+                        columnNumber: 11
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/FileDetails/FileMeta/index.tsx",
+                lineNumber: 31,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/FileDetails/FileMeta/index.tsx",
+        lineNumber: 24,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/FileDetails/FileMeta/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["'use client'\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nexport type FileMetaProps = {\n  filename: string\n  filesize: number\n  height?: number\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {typeof width === 'number' && typeof height === 'number' && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["formatFilesize","React","CopyToClipboard","baseClass","FileMeta","props","filename","filesize","height","mimeType","url","fileURL","width","div","className","a","href","rel","target","defaultMessage","value","Fragment"],"mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,WAAW,QAAO;AAYzB,SAASC,eAAe,QAAQ,iCAAgC;AAChE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,WAAoC,CAACC;IAChD,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAKC,OAAO,EAAEC,KAAK,EAAE,GAAGP;IAEtE,QACGQ,IAAIC,WAAWX,WAAW;MACzB,CAACU,IAAIC,WAAW,GAAGX,UAAU,KAAK,CAAC,EAAE;QACnC,CAACY,EAAEC,MAAML,SAASM,IAAI,sBAAsBC,OAAO,SAAS;UAC1D,CAACZ,SAAS;QACZ,EAAES,EAAE;QACJ,CAACb,gBAAgBiB,eAAe,WAAWC,OAAOT,UAAW;MAC/D,EAAEE,IAAI;MACN,CAACA,IAAIC,WAAW,GAAGX,UAAU,WAAW,CAAC,EAAE;QACzC,CAACH,eAAeO,UAAU;QAC1B,CAAC,OAAOK,UAAU,YAAY,OAAOJ,WAAW,aAC7CP,MAAMoB,SAAS;;YAEd,CAACT,MAAM,CAAC,CAACJ,OAAO;UAClB,EAAEP,MAAMoB,UACR;QACF,CAACZ,aACER,MAAMoB,SAAS;;YAEd,CAACZ,SAAS;UACZ,EAAER,MAAMoB,UACR;MACJ,EAAER,IAAI;IACR,EAAEA;AAEN,EAAC"}
+{"version":3,"sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"sourcesContent":["'use client'\nimport { formatFilesize } from 'payload/shared'\nimport React from 'react'\n\nexport type FileMetaProps = {\n  filename: string\n  filesize: number\n  height?: number\n  mimeType: string\n  sizes?: unknown\n  url: string\n  width?: number\n}\n\nimport { CopyToClipboard } from '../../CopyToClipboard/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-meta'\n\nexport const FileMeta: React.FC<FileMetaProps> = (props) => {\n  const { filename, filesize, height, mimeType, url: fileURL, width } = props\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__url`}>\n        <a href={fileURL} rel=\"noopener noreferrer\" target=\"_blank\">\n          {filename}\n        </a>\n        <CopyToClipboard defaultMessage=\"Copy URL\" value={fileURL} />\n      </div>\n      <div className={`${baseClass}__size-type`}>\n        {formatFilesize(filesize)}\n        {typeof width === 'number' && typeof height === 'number' && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {width}x{height}\n          </React.Fragment>\n        )}\n        {mimeType && (\n          <React.Fragment>\n            &nbsp;-&nbsp;\n            {mimeType}\n          </React.Fragment>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["formatFilesize","React","CopyToClipboard","baseClass","FileMeta","props","filename","filesize","height","mimeType","url","fileURL","width","div","className","a","href","rel","target","defaultMessage","value","Fragment"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,iBAAgB;AAC/C,OAAOC,WAAW,QAAO;AAYzB,SAASC,eAAe,QAAQ,iCAAgC;AAChE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,WAAoC,CAACC;IAChD,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,KAAKC,OAAO,EAAEC,KAAK,EAAE,GAAGP;IAEtE,qBACE,QAACQ;QAAIC,WAAWX;;0BACd,QAACU;gBAAIC,WAAW,GAAGX,UAAU,KAAK,CAAC;;kCACjC,QAACY;wBAAEC,MAAML;wBAASM,KAAI;wBAAsBC,QAAO;kCAChDZ;;;;;;kCAEH,QAACJ;wBAAgBiB,gBAAe;wBAAWC,OAAOT;;;;;;;;;;;;0BAEpD,QAACE;gBAAIC,WAAW,GAAGX,UAAU,WAAW,CAAC;;oBACtCH,eAAeO;oBACf,OAAOK,UAAU,YAAY,OAAOJ,WAAW,0BAC9C,QAACP,MAAMoB,QAAQ;;4BAAC;4BAEbT;4BAAM;4BAAEJ;;;;;;;oBAGZC,0BACC,QAACR,MAAMoB,QAAQ;;4BAAC;4BAEbZ;;;;;;;;;;;;;;;;;;;AAMb,EAAC"}

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

@@ -1,4 +1,6 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { Button } from '../../Button/index.js';
 import { Thumbnail } from '../../Thumbnail/index.js';
 import { UploadActions } from '../../Upload/index.js';
@@ -9,18 +11,76 @@ export const StaticFileDetails = (props)=>{
     const { customUploadActions, doc, enableAdjustments, handleRemove, hasImageSizes, hideRemoveFile, imageCacheTag, uploadConfig } = props;
     const { filename, filesize, height, mimeType, thumbnailURL, url, width } = doc;
     const previewAllowed = uploadConfig.displayPreview ?? true;
-    return <div className={baseClass}>
-      <header>
-        {previewAllowed && <Thumbnail // size="small"
-    className={`${baseClass}__thumbnail`} doc={doc} fileSrc={thumbnailURL || url} imageCacheTag={imageCacheTag} uploadConfig={uploadConfig}/>}
-        <div className={`${baseClass}__main-detail`}>
-          <FileMeta filename={filename} filesize={filesize} height={height} mimeType={mimeType} url={url} width={width}/>
-
-          {(enableAdjustments || hasImageSizes && doc.filename || customUploadActions) && <UploadActions customActions={customUploadActions} enableAdjustments={Boolean(enableAdjustments)} enablePreviewSizes={hasImageSizes && doc.filename} mimeType={mimeType}/>}
-        </div>
-        {!hideRemoveFile && handleRemove && <Button buttonStyle="icon-label" className={`${baseClass}__remove`} icon="x" iconStyle="with-border" onClick={handleRemove} round/>}
-      </header>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        children: /*#__PURE__*/ _jsxDEV("header", {
+            children: [
+                previewAllowed && /*#__PURE__*/ _jsxDEV(Thumbnail, {
+                    // size="small"
+                    className: `${baseClass}__thumbnail`,
+                    doc: doc,
+                    fileSrc: thumbnailURL || url,
+                    imageCacheTag: imageCacheTag,
+                    uploadConfig: uploadConfig
+                }, void 0, false, {
+                    fileName: "src/elements/FileDetails/StaticFileDetails/index.tsx",
+                    lineNumber: 47,
+                    columnNumber: 11
+                }, this),
+                /*#__PURE__*/ _jsxDEV("div", {
+                    className: `${baseClass}__main-detail`,
+                    children: [
+                        /*#__PURE__*/ _jsxDEV(FileMeta, {
+                            filename: filename,
+                            filesize: filesize,
+                            height: height,
+                            mimeType: mimeType,
+                            url: url,
+                            width: width
+                        }, void 0, false, {
+                            fileName: "src/elements/FileDetails/StaticFileDetails/index.tsx",
+                            lineNumber: 57,
+                            columnNumber: 11
+                        }, this),
+                        (enableAdjustments || hasImageSizes && doc.filename || customUploadActions) && /*#__PURE__*/ _jsxDEV(UploadActions, {
+                            customActions: customUploadActions,
+                            enableAdjustments: Boolean(enableAdjustments),
+                            enablePreviewSizes: hasImageSizes && doc.filename,
+                            mimeType: mimeType
+                        }, void 0, false, {
+                            fileName: "src/elements/FileDetails/StaticFileDetails/index.tsx",
+                            lineNumber: 67,
+                            columnNumber: 13
+                        }, this)
+                    ]
+                }, void 0, true, {
+                    fileName: "src/elements/FileDetails/StaticFileDetails/index.tsx",
+                    lineNumber: 56,
+                    columnNumber: 9
+                }, this),
+                !hideRemoveFile && handleRemove && /*#__PURE__*/ _jsxDEV(Button, {
+                    buttonStyle: "icon-label",
+                    className: `${baseClass}__remove`,
+                    icon: "x",
+                    iconStyle: "with-border",
+                    onClick: handleRemove,
+                    round: true
+                }, void 0, false, {
+                    fileName: "src/elements/FileDetails/StaticFileDetails/index.tsx",
+                    lineNumber: 76,
+                    columnNumber: 11
+                }, this)
+            ]
+        }, void 0, true, {
+            fileName: "src/elements/FileDetails/StaticFileDetails/index.tsx",
+            lineNumber: 45,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/FileDetails/StaticFileDetails/index.tsx",
+        lineNumber: 44,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

package/dist/elements/FileDetails/StaticFileDetails/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { UploadActions } from '../../Upload/index.js'\nimport { FileMeta } from '../FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nexport type StaticFileDetailsProps = {\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {\n  const {\n    customUploadActions,\n    doc,\n    enableAdjustments,\n    handleRemove,\n    hasImageSizes,\n    hideRemoveFile,\n    imageCacheTag,\n    uploadConfig,\n  } = props\n\n  const { filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  const previewAllowed = uploadConfig.displayPreview ?? true\n\n  return (\n    <div className={baseClass}>\n      <header>\n        {previewAllowed && (\n          <Thumbnail\n            // size=\"small\"\n            className={`${baseClass}__thumbnail`}\n            doc={doc}\n            fileSrc={thumbnailURL || url}\n            imageCacheTag={imageCacheTag}\n            uploadConfig={uploadConfig}\n          />\n        )}\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {(enableAdjustments || (hasImageSizes && doc.filename) || customUploadActions) && (\n            <UploadActions\n              customActions={customUploadActions}\n              enableAdjustments={Boolean(enableAdjustments)}\n              enablePreviewSizes={hasImageSizes && doc.filename}\n              mimeType={mimeType}\n            />\n          )}\n        </div>\n        {!hideRemoveFile && handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"names":["Button","Thumbnail","UploadActions","FileMeta","baseClass","StaticFileDetails","props","customUploadActions","doc","enableAdjustments","handleRemove","hasImageSizes","hideRemoveFile","imageCacheTag","uploadConfig","filename","filesize","height","mimeType","thumbnailURL","url","width","previewAllowed","displayPreview","div","className","header","fileSrc","customActions","Boolean","enablePreviewSizes","buttonStyle","icon","iconStyle","onClick","round"],"mappings":"AAAA;AAGA,SAASA,MAAM,QAAQ,wBAAuB;AAC9C,SAASC,SAAS,QAAQ,2BAA0B;AACpD,SAASC,aAAa,QAAQ,wBAAuB;AACrD,SAASC,QAAQ,QAAQ,uBAAsB;AAC/C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAiBlB,OAAO,MAAMC,oBAAsD,CAACC;IAClE,MAAM,EACJC,mBAAmB,EACnBC,GAAG,EACHC,iBAAiB,EACjBC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,aAAa,EACbC,YAAY,EACb,GAAGR;IAEJ,MAAM,EAAES,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,EAAEC,KAAK,EAAE,GAAGb;IAE3E,MAAMc,iBAAiBR,aAAaS,cAAc,IAAI;IAEtD,QACGC,IAAIC,WAAWrB,WAAW;MACzB,CAACsB,OAAO;QACN,CAACJ,mBACErB,UACC,eAAe;IACfwB,WAAW,GAAGrB,UAAU,WAAW,CAAC,EACpCI,KAAKA,KACLmB,SAASR,gBAAgBC,KACzBP,eAAeA,eACfC,cAAcA,gBAEhB;QACF,CAACU,IAAIC,WAAW,GAAGrB,UAAU,aAAa,CAAC,EAAE;UAC3C,CAACD,SACCY,UAAUA,UACVC,UAAUA,UACVC,QAAQA,QACRC,UAAUA,UACVE,KAAKA,KACLC,OAAOA,QACP;;UAEF,CAAC,AAACZ,CAAAA,qBAAsBE,iBAAiBH,IAAIO,QAAQ,IAAKR,mBAAkB,MACzEL,cACC0B,eAAerB,qBACfE,mBAAmBoB,QAAQpB,oBAC3BqB,oBAAoBnB,iBAAiBH,IAAIO,QAAQ,EACjDG,UAAUA,YAEZ;QACJ,EAAEM,IAAI;QACN,CAAC,CAACZ,kBAAkBF,iBACjBV,OACC+B,YAAY,aACZN,WAAW,GAAGrB,UAAU,QAAQ,CAAC,EACjC4B,KAAK,IACLC,UAAU,cACVC,SAASxB,cACTyB,QAEF;MACJ,EAAET,OAAO;IACX,EAAEF;AAEN,EAAC"}
+{"version":3,"sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport { UploadActions } from '../../Upload/index.js'\nimport { FileMeta } from '../FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nexport type StaticFileDetailsProps = {\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const StaticFileDetails: React.FC<StaticFileDetailsProps> = (props) => {\n  const {\n    customUploadActions,\n    doc,\n    enableAdjustments,\n    handleRemove,\n    hasImageSizes,\n    hideRemoveFile,\n    imageCacheTag,\n    uploadConfig,\n  } = props\n\n  const { filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  const previewAllowed = uploadConfig.displayPreview ?? true\n\n  return (\n    <div className={baseClass}>\n      <header>\n        {previewAllowed && (\n          <Thumbnail\n            // size=\"small\"\n            className={`${baseClass}__thumbnail`}\n            doc={doc}\n            fileSrc={thumbnailURL || url}\n            imageCacheTag={imageCacheTag}\n            uploadConfig={uploadConfig}\n          />\n        )}\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {(enableAdjustments || (hasImageSizes && doc.filename) || customUploadActions) && (\n            <UploadActions\n              customActions={customUploadActions}\n              enableAdjustments={Boolean(enableAdjustments)}\n              enablePreviewSizes={hasImageSizes && doc.filename}\n              mimeType={mimeType}\n            />\n          )}\n        </div>\n        {!hideRemoveFile && handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"names":["React","Button","Thumbnail","UploadActions","FileMeta","baseClass","StaticFileDetails","props","customUploadActions","doc","enableAdjustments","handleRemove","hasImageSizes","hideRemoveFile","imageCacheTag","uploadConfig","filename","filesize","height","mimeType","thumbnailURL","url","width","previewAllowed","displayPreview","div","className","header","fileSrc","customActions","Boolean","enablePreviewSizes","buttonStyle","icon","iconStyle","onClick","round"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,MAAM,QAAQ,wBAAuB;AAC9C,SAASC,SAAS,QAAQ,2BAA0B;AACpD,SAASC,aAAa,QAAQ,wBAAuB;AACrD,SAASC,QAAQ,QAAQ,uBAAsB;AAC/C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAiBlB,OAAO,MAAMC,oBAAsD,CAACC;IAClE,MAAM,EACJC,mBAAmB,EACnBC,GAAG,EACHC,iBAAiB,EACjBC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,aAAa,EACbC,YAAY,EACb,GAAGR;IAEJ,MAAM,EAAES,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,EAAEC,KAAK,EAAE,GAAGb;IAE3E,MAAMc,iBAAiBR,aAAaS,cAAc,IAAI;IAEtD,qBACE,QAACC;QAAIC,WAAWrB;kBACd,cAAA,QAACsB;;gBACEJ,gCACC,QAACrB;oBACC,eAAe;oBACfwB,WAAW,GAAGrB,UAAU,WAAW,CAAC;oBACpCI,KAAKA;oBACLmB,SAASR,gBAAgBC;oBACzBP,eAAeA;oBACfC,cAAcA;;;;;;8BAGlB,QAACU;oBAAIC,WAAW,GAAGrB,UAAU,aAAa,CAAC;;sCACzC,QAACD;4BACCY,UAAUA;4BACVC,UAAUA;4BACVC,QAAQA;4BACRC,UAAUA;4BACVE,KAAKA;4BACLC,OAAOA;;;;;;wBAGPZ,CAAAA,qBAAsBE,iBAAiBH,IAAIO,QAAQ,IAAKR,mBAAkB,mBAC1E,QAACL;4BACC0B,eAAerB;4BACfE,mBAAmBoB,QAAQpB;4BAC3BqB,oBAAoBnB,iBAAiBH,IAAIO,QAAQ;4BACjDG,UAAUA;;;;;;;;;;;;gBAIf,CAACN,kBAAkBF,8BAClB,QAACV;oBACC+B,aAAY;oBACZN,WAAW,GAAGrB,UAAU,QAAQ,CAAC;oBACjC4B,MAAK;oBACLC,WAAU;oBACVC,SAASxB;oBACTyB,KAAK;;;;;;;;;;;;;;;;;AAMjB,EAAC"}

package/dist/elements/FileDetails/index.js

@@ -1,12 +1,26 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { DraggableFileDetails } from './DraggableFileDetails/index.js';
 import { StaticFileDetails } from './StaticFileDetails/index.js';
 export const FileDetails = (props)=>{
     const { hasMany } = props;
     if (hasMany) {
-        return <DraggableFileDetails {...props}/>;
+        return /*#__PURE__*/ _jsxDEV(DraggableFileDetails, {
+            ...props
+        }, void 0, false, {
+            fileName: "src/elements/FileDetails/index.tsx",
+            lineNumber: 46,
+            columnNumber: 12
+        }, this);
     }
-    return <StaticFileDetails {...props}/>;
+    return /*#__PURE__*/ _jsxDEV(StaticFileDetails, {
+        ...props
+    }, void 0, false, {
+        fileName: "src/elements/FileDetails/index.tsx",
+        lineNumber: 49,
+        columnNumber: 10
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { DraggableFileDetails } from './DraggableFileDetails/index.js'\nimport { StaticFileDetails } from './StaticFileDetails/index.js'\n\ntype SharedFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  hasImageSizes?: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\ntype StaticFileDetailsProps = {\n  draggableItemProps?: never\n  handleRemove?: () => void\n  hasMany?: never\n  isSortable?: never\n  removeItem?: never\n  rowIndex?: never\n}\n\ntype DraggableFileDetailsProps = {\n  handleRemove?: never\n  hasMany: boolean\n  isSortable?: boolean\n  removeItem?: (index: number) => void\n  rowIndex: number\n}\n\nexport type FileDetailsProps = (DraggableFileDetailsProps | StaticFileDetailsProps) &\n  SharedFileDetailsProps\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const { hasMany } = props\n\n  if (hasMany) {\n    return <DraggableFileDetails {...props} />\n  }\n\n  return <StaticFileDetails {...props} />\n}\n"],"names":["DraggableFileDetails","StaticFileDetails","FileDetails","props","hasMany"],"mappings":"AAAA;AAKA,SAASA,oBAAoB,QAAQ,kCAAiC;AACtE,SAASC,iBAAiB,QAAQ,+BAA8B;AAmChE,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,IAAIC,SAAS;QACX,QAAQJ,sBAAsB,GAAGG,KAAK;IACxC;IAEA,QAAQF,mBAAmB,GAAGE,KAAK;AACrC,EAAC"}
+{"version":3,"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { DraggableFileDetails } from './DraggableFileDetails/index.js'\nimport { StaticFileDetails } from './StaticFileDetails/index.js'\n\ntype SharedFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  hasImageSizes?: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\ntype StaticFileDetailsProps = {\n  draggableItemProps?: never\n  handleRemove?: () => void\n  hasMany?: never\n  isSortable?: never\n  removeItem?: never\n  rowIndex?: never\n}\n\ntype DraggableFileDetailsProps = {\n  handleRemove?: never\n  hasMany: boolean\n  isSortable?: boolean\n  removeItem?: (index: number) => void\n  rowIndex: number\n}\n\nexport type FileDetailsProps = (DraggableFileDetailsProps | StaticFileDetailsProps) &\n  SharedFileDetailsProps\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const { hasMany } = props\n\n  if (hasMany) {\n    return <DraggableFileDetails {...props} />\n  }\n\n  return <StaticFileDetails {...props} />\n}\n"],"names":["React","DraggableFileDetails","StaticFileDetails","FileDetails","props","hasMany"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AAEzB,SAASC,oBAAoB,QAAQ,kCAAiC;AACtE,SAASC,iBAAiB,QAAQ,+BAA8B;AAmChE,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,IAAIC,SAAS;QACX,qBAAO,QAACJ;YAAsB,GAAGG,KAAK;;;;;;IACxC;IAEA,qBAAO,QAACF;QAAmB,GAAGE,KAAK;;;;;;AACrC,EAAC"}

package/dist/elements/FolderView/Breadcrumbs/index.js

@@ -1,17 +1,45 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useDroppable } from '@dnd-kit/core';
+import React from 'react';
 import { ChevronIcon } from '../../../icons/Chevron/index.js';
 import './index.scss';
 const baseClass = 'folderBreadcrumbs';
 export function FolderBreadcrumbs({ breadcrumbs, className }) {
-    return <div className={`${baseClass} ${className || ''}`.trim()}>
-      {breadcrumbs?.map((crumb, index)=><div className={`${baseClass}__crumb`} key={index}>
-          {crumb.onClick ? <DroppableBreadcrumb className={`${baseClass}__crumb-item`} id={crumb.id} onClick={crumb.onClick}>
-              {crumb.name}
-            </DroppableBreadcrumb> : crumb.name}
-          {breadcrumbs.length > 0 && index !== breadcrumbs.length - 1 && <ChevronIcon className={`${baseClass}__crumb-chevron`} direction="right"/>}
-        </div>)}
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: `${baseClass} ${className || ''}`.trim(),
+        children: breadcrumbs?.map((crumb, index)=>/*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__crumb`,
+                children: [
+                    crumb.onClick ? /*#__PURE__*/ _jsxDEV(DroppableBreadcrumb, {
+                        className: `${baseClass}__crumb-item`,
+                        id: crumb.id,
+                        onClick: crumb.onClick,
+                        children: crumb.name
+                    }, void 0, false, {
+                        fileName: "src/elements/FolderView/Breadcrumbs/index.tsx",
+                        lineNumber: 27,
+                        columnNumber: 13
+                    }, this) : crumb.name,
+                    breadcrumbs.length > 0 && index !== breadcrumbs.length - 1 && /*#__PURE__*/ _jsxDEV(ChevronIcon, {
+                        className: `${baseClass}__crumb-chevron`,
+                        direction: "right"
+                    }, void 0, false, {
+                        fileName: "src/elements/FolderView/Breadcrumbs/index.tsx",
+                        lineNumber: 38,
+                        columnNumber: 13
+                    }, this)
+                ]
+            }, index, true, {
+                fileName: "src/elements/FolderView/Breadcrumbs/index.tsx",
+                lineNumber: 25,
+                columnNumber: 9
+            }, this))
+    }, void 0, false, {
+        fileName: "src/elements/FolderView/Breadcrumbs/index.tsx",
+        lineNumber: 23,
+        columnNumber: 5
+    }, this);
 }
 export function DroppableBreadcrumb({ id, children, className, onClick }) {
     const { isOver, setNodeRef } = useDroppable({
@@ -21,13 +49,21 @@ export function DroppableBreadcrumb({ id, children, className, onClick }) {
             type: 'folder'
         }
     });
-    return <button className={[
-        'droppable-button',
-        className,
-        isOver && 'droppable-button--hover'
-    ].filter(Boolean).join(' ')} onClick={onClick} ref={setNodeRef} type="button">
-      {children}
-    </button>;
+    return /*#__PURE__*/ _jsxDEV("button", {
+        className: [
+            'droppable-button',
+            className,
+            isOver && 'droppable-button--hover'
+        ].filter(Boolean).join(' '),
+        onClick: onClick,
+        ref: setNodeRef,
+        type: "button",
+        children: children
+    }, void 0, false, {
+        fileName: "src/elements/FolderView/Breadcrumbs/index.tsx",
+        lineNumber: 65,
+        columnNumber: 5
+    }, this);
 }
 
 //# sourceMappingURL=index.js.map

package/dist/elements/FolderView/Breadcrumbs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FolderView/Breadcrumbs/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FolderBreadcrumb } from 'payload/shared'\n\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport './index.scss'\n\nconst baseClass = 'folderBreadcrumbs'\n\ntype Props = {\n  readonly breadcrumbs: {\n    id: null | number | string\n    name: React.ReactNode | string\n    onClick: () => void\n  }[]\n  className?: string\n}\nexport function FolderBreadcrumbs({ breadcrumbs, className }: Props) {\n  return (\n    <div className={`${baseClass} ${className || ''}`.trim()}>\n      {breadcrumbs?.map((crumb, index) => (\n        <div className={`${baseClass}__crumb`} key={index}>\n          {crumb.onClick ? (\n            <DroppableBreadcrumb\n              className={`${baseClass}__crumb-item`}\n              id={crumb.id}\n              onClick={crumb.onClick}\n            >\n              {crumb.name}\n            </DroppableBreadcrumb>\n          ) : (\n            crumb.name\n          )}\n          {breadcrumbs.length > 0 && index !== breadcrumbs.length - 1 && (\n            <ChevronIcon className={`${baseClass}__crumb-chevron`} direction=\"right\" />\n          )}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport function DroppableBreadcrumb({\n  id,\n  children,\n  className,\n  onClick,\n}: {\n  children: React.ReactNode\n  className?: string\n  onClick: () => void\n} & Pick<FolderBreadcrumb, 'id'>) {\n  const { isOver, setNodeRef } = useDroppable({\n    id: `folder-${id}`,\n    data: {\n      id,\n      type: 'folder',\n    },\n  })\n\n  return (\n    <button\n      className={['droppable-button', className, isOver && 'droppable-button--hover']\n        .filter(Boolean)\n        .join(' ')}\n      onClick={onClick}\n      ref={setNodeRef}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"names":["useDroppable","ChevronIcon","baseClass","FolderBreadcrumbs","breadcrumbs","className","div","trim","map","crumb","index","key","onClick","DroppableBreadcrumb","id","name","length","direction","children","isOver","setNodeRef","data","type","button","filter","Boolean","join","ref"],"mappings":"AAAA;AAIA,SAASA,YAAY,QAAQ,gBAAe;AAG5C,SAASC,WAAW,QAAQ,kCAAiC;AAC7D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAUlB,OAAO,SAASC,kBAAkB,EAAEC,WAAW,EAAEC,SAAS,EAAS;IACjE,QACGC,IAAID,WAAW,GAAGH,UAAU,CAAC,EAAEG,aAAa,IAAI,CAACE,IAAI,IAAI;MACxD,CAACH,aAAaI,IAAI,CAACC,OAAOC,SACvBJ,IAAID,WAAW,GAAGH,UAAU,OAAO,CAAC,EAAES,KAAKD,OAAO;UACjD,CAACD,MAAMG,OAAO,IACXC,oBACCR,WAAW,GAAGH,UAAU,YAAY,CAAC,EACrCY,IAAIL,MAAMK,EAAE,EACZF,SAASH,MAAMG,OAAO,EACvB;cACC,CAACH,MAAMM,IAAI,CAAC;YACd,EAAEF,uBAEFJ,MAAMM,IAAI,CACV;UACF,CAACX,YAAYY,MAAM,GAAG,KAAKN,UAAUN,YAAYY,MAAM,GAAG,MACvDf,YAAYI,WAAW,GAAGH,UAAU,eAAe,CAAC,EAAEe,UAAU,UACjE;QACJ,EAAEX,MACD;IACL,EAAEA;AAEN;AAEA,OAAO,SAASO,oBAAoB,EAClCC,EAAE,EACFI,QAAQ,EACRb,SAAS,EACTO,OAAO,EAKuB;IAC9B,MAAM,EAAEO,MAAM,EAAEC,UAAU,EAAE,GAAGpB,aAAa;QAC1Cc,IAAI,CAAC,OAAO,EAAEA,IAAI;QAClBO,MAAM;YACJP;YACAQ,MAAM;QACR;IACF;IAEA,QACGC,OACClB,WAAW;QAAC;QAAoBA;QAAWc,UAAU;KAA0B,CAC5EK,MAAM,CAACC,SACPC,IAAI,CAAC,MACRd,SAASA,SACTe,KAAKP,YACLE,KAAK,SACN;MACC,CAACJ,SAAS;IACZ,EAAEK;AAEN"}
+{"version":3,"sources":["../../../../src/elements/FolderView/Breadcrumbs/index.tsx"],"sourcesContent":["'use client'\n\nimport type { FolderBreadcrumb } from 'payload/shared'\n\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport './index.scss'\n\nconst baseClass = 'folderBreadcrumbs'\n\ntype Props = {\n  readonly breadcrumbs: {\n    id: null | number | string\n    name: React.ReactNode | string\n    onClick: () => void\n  }[]\n  className?: string\n}\nexport function FolderBreadcrumbs({ breadcrumbs, className }: Props) {\n  return (\n    <div className={`${baseClass} ${className || ''}`.trim()}>\n      {breadcrumbs?.map((crumb, index) => (\n        <div className={`${baseClass}__crumb`} key={index}>\n          {crumb.onClick ? (\n            <DroppableBreadcrumb\n              className={`${baseClass}__crumb-item`}\n              id={crumb.id}\n              onClick={crumb.onClick}\n            >\n              {crumb.name}\n            </DroppableBreadcrumb>\n          ) : (\n            crumb.name\n          )}\n          {breadcrumbs.length > 0 && index !== breadcrumbs.length - 1 && (\n            <ChevronIcon className={`${baseClass}__crumb-chevron`} direction=\"right\" />\n          )}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport function DroppableBreadcrumb({\n  id,\n  children,\n  className,\n  onClick,\n}: {\n  children: React.ReactNode\n  className?: string\n  onClick: () => void\n} & Pick<FolderBreadcrumb, 'id'>) {\n  const { isOver, setNodeRef } = useDroppable({\n    id: `folder-${id}`,\n    data: {\n      id,\n      type: 'folder',\n    },\n  })\n\n  return (\n    <button\n      className={['droppable-button', className, isOver && 'droppable-button--hover']\n        .filter(Boolean)\n        .join(' ')}\n      onClick={onClick}\n      ref={setNodeRef}\n      type=\"button\"\n    >\n      {children}\n    </button>\n  )\n}\n"],"names":["useDroppable","React","ChevronIcon","baseClass","FolderBreadcrumbs","breadcrumbs","className","div","trim","map","crumb","index","onClick","DroppableBreadcrumb","id","name","length","direction","children","isOver","setNodeRef","data","type","button","filter","Boolean","join","ref"],"mappings":"AAAA;;AAIA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,OAAOC,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,kCAAiC;AAC7D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAUlB,OAAO,SAASC,kBAAkB,EAAEC,WAAW,EAAEC,SAAS,EAAS;IACjE,qBACE,QAACC;QAAID,WAAW,GAAGH,UAAU,CAAC,EAAEG,aAAa,IAAI,CAACE,IAAI;kBACnDH,aAAaI,IAAI,CAACC,OAAOC,sBACxB,QAACJ;gBAAID,WAAW,GAAGH,UAAU,OAAO,CAAC;;oBAClCO,MAAME,OAAO,iBACZ,QAACC;wBACCP,WAAW,GAAGH,UAAU,YAAY,CAAC;wBACrCW,IAAIJ,MAAMI,EAAE;wBACZF,SAASF,MAAME,OAAO;kCAErBF,MAAMK,IAAI;;;;;+BAGbL,MAAMK,IAAI;oBAEXV,YAAYW,MAAM,GAAG,KAAKL,UAAUN,YAAYW,MAAM,GAAG,mBACxD,QAACd;wBAAYI,WAAW,GAAGH,UAAU,eAAe,CAAC;wBAAEc,WAAU;;;;;;;eAbzBN;;;;;;;;;;AAmBpD;AAEA,OAAO,SAASE,oBAAoB,EAClCC,EAAE,EACFI,QAAQ,EACRZ,SAAS,EACTM,OAAO,EAKuB;IAC9B,MAAM,EAAEO,MAAM,EAAEC,UAAU,EAAE,GAAGpB,aAAa;QAC1Cc,IAAI,CAAC,OAAO,EAAEA,IAAI;QAClBO,MAAM;YACJP;YACAQ,MAAM;QACR;IACF;IAEA,qBACE,QAACC;QACCjB,WAAW;YAAC;YAAoBA;YAAWa,UAAU;SAA0B,CAC5EK,MAAM,CAACC,SACPC,IAAI,CAAC;QACRd,SAASA;QACTe,KAAKP;QACLE,MAAK;kBAEJJ;;;;;;AAGP"}

package/dist/elements/FolderView/BrowseByFolderButton/index.js

@@ -1,4 +1,6 @@
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { formatAdminURL } from 'payload/shared';
+import React from 'react';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Link } from '../../Link/index.js';
@@ -9,16 +11,30 @@ export function BrowseByFolderButton({ active }) {
     const { t } = useTranslation();
     const { config } = useConfig();
     const { admin: { routes: { browseByFolder: foldersRoute } }, routes: { admin: adminRoute } } = config;
-    return <Link className={[
-        baseClass,
-        active && 'active'
-    ].filter(Boolean).join(' ')} href={formatAdminURL({
-        adminRoute,
-        path: foldersRoute
-    })} id="browse-by-folder" prefetch={false}>
-      <ColoredFolderIcon/>
-      {t('folder:browseByFolder')}
-    </Link>;
+    return /*#__PURE__*/ _jsxDEV(Link, {
+        className: [
+            baseClass,
+            active && 'active'
+        ].filter(Boolean).join(' '),
+        href: formatAdminURL({
+            adminRoute,
+            path: foldersRoute
+        }),
+        id: "browse-by-folder",
+        prefetch: false,
+        children: [
+            /*#__PURE__*/ _jsxDEV(ColoredFolderIcon, {}, void 0, false, {
+                fileName: "src/elements/FolderView/BrowseByFolderButton/index.tsx",
+                lineNumber: 32,
+                columnNumber: 7
+            }, this),
+            t('folder:browseByFolder')
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/FolderView/BrowseByFolderButton/index.tsx",
+        lineNumber: 23,
+        columnNumber: 5
+    }, this);
 }
 
 //# sourceMappingURL=index.js.map