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

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

@@ -1,6 +1,4 @@
 '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';
@@ -16,111 +14,32 @@ export const DraggableFileDetails = (props)=>{
         id,
         collectionSlug
     });
-    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);
+    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>;
 };
 
 //# 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":["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"}
+{"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"}

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

@@ -1,5 +1,4 @@
 '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';
@@ -7,74 +6,25 @@ import './index.scss';
 const baseClass = 'file-meta';
 export const FileMeta = (props)=>{
     const { filename, filesize, height, mimeType, url: fileURL, width } = props;
-    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);
+    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>;
 };
 
 //# 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,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"}
+{"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"}

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

@@ -1,6 +1,4 @@
 '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';
@@ -11,76 +9,18 @@ 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 /*#__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);
+    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>;
 };
 
 //# 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":["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"}
+{"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"}

package/dist/elements/FileDetails/index.js

@@ -1,26 +1,12 @@
 '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 /*#__PURE__*/ _jsxDEV(DraggableFileDetails, {
-            ...props
-        }, void 0, false, {
-            fileName: "src/elements/FileDetails/index.tsx",
-            lineNumber: 46,
-            columnNumber: 12
-        }, this);
+        return <DraggableFileDetails {...props}/>;
     }
-    return /*#__PURE__*/ _jsxDEV(StaticFileDetails, {
-        ...props
-    }, void 0, false, {
-        fileName: "src/elements/FileDetails/index.tsx",
-        lineNumber: 49,
-        columnNumber: 10
-    }, this);
+    return <StaticFileDetails {...props}/>;
 };
 
 //# 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":["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"}
+{"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"}

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

@@ -1,45 +1,17 @@
 '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 /*#__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);
+    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>;
 }
 export function DroppableBreadcrumb({ id, children, className, onClick }) {
     const { isOver, setNodeRef } = useDroppable({
@@ -49,21 +21,13 @@ export function DroppableBreadcrumb({ id, children, className, onClick }) {
             type: 'folder'
         }
     });
-    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);
+    return <button className={[
+        'droppable-button',
+        className,
+        isOver && 'droppable-button--hover'
+    ].filter(Boolean).join(' ')} onClick={onClick} ref={setNodeRef} type="button">
+      {children}
+    </button>;
 }
 
 //# 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","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"}
+{"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"}

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

@@ -1,6 +1,4 @@
-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';
@@ -11,30 +9,16 @@ export function BrowseByFolderButton({ active }) {
     const { t } = useTranslation();
     const { config } = useConfig();
     const { admin: { routes: { browseByFolder: foldersRoute } }, routes: { admin: adminRoute } } = config;
-    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);
+    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>;
 }
 
 //# sourceMappingURL=index.js.map