@payloadcms/ui 4.0.0-internal.a0ef1b8 → 4.0.0-internal.bc5cf8c

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

@@ -0,0 +1,140 @@
+@layer payload-default {
+  .file-details {
+    background: var(--theme-elevation-50);
+    border: var(--stroke-width-small) solid var(--theme-border-color);
+    border-radius: var(--radius-medium);
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  .file-details:not(:disabled):hover {
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
+  }
+
+  .file-details header {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    position: relative;
+  }
+
+  .file-details__remove {
+    position: absolute;
+    margin: 0;
+    top: var(--spacer-4);
+    right: var(--spacer-4);
+  }
+
+  .file-details__remove .btn__icon {
+    border: var(--stroke-width-small) solid var(--theme-border-color);
+    background: var(--theme-input-bg);
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
+    transition: border 100ms cubic-bezier(0, 0.2, 0.2, 1);
+  }
+
+  .file-details__remove .btn__icon:not(:disabled):hover {
+    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
+  }
+
+  .file-details__remove .btn__icon:hover {
+    border: var(--stroke-width-small) solid var(--theme-elevation-400);
+  }
+
+  .file-details__main-detail {
+    padding: var(--spacer-3) var(--spacer-4);
+    width: auto;
+    flex-grow: 1;
+    min-width: 280px;
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-self: stretch;
+    gap: var(--spacer-1);
+  }
+
+  .file-details__toggle-more-info {
+    font-weight: 600;
+    text-decoration: none;
+  }
+
+  .file-details__toggle-more-info:hover,
+  .file-details__toggle-more-info:focus-visible {
+    text-decoration: underline;
+  }
+
+  .file-details__toggle-icon {
+    padding: var(--spacer-1);
+  }
+
+  .file-details__sizes {
+    margin: 0;
+    padding: var(--spacer-5) var(--spacer-4) 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .file-details__sizes li {
+    width: 50%;
+    padding: 0 var(--spacer-2);
+    margin-bottom: var(--spacer-4);
+  }
+
+  .file-details__size-label {
+    color: var(--theme-elevation-400);
+  }
+
+  .file-details__file-mutation {
+    display: flex;
+    margin-top: var(--spacer-1);
+    gap: var(--spacer-2);
+  }
+
+  .file-details__edit {
+    cursor: pointer;
+    background-color: var(--theme-elevation-150);
+    border: none;
+    border-radius: var(--radius-medium);
+    padding: var(--spacer-1) var(--spacer-2);
+  }
+
+  .file-details__edit:hover {
+    background-color: var(--theme-elevation-100);
+  }
+
+  @media (max-width: 1440px) {
+    .file-details__main-detail {
+      padding: var(--spacer-4);
+    }
+
+    .file-details__sizes {
+      display: block;
+      padding: var(--spacer-4) var(--spacer-4) var(--spacer-2);
+    }
+
+    .file-details__sizes li {
+      padding: 0;
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .file-details header {
+      flex-wrap: wrap;
+    }
+
+    .file-details .thumbnail {
+      width: 50%;
+      order: 1;
+    }
+
+    .file-details__remove {
+      order: 2;
+    }
+
+    .file-details__main-detail {
+      order: 3;
+      width: 100%;
+    }
+  }
+}

package/dist/elements/FileDetails/StaticFileDetails/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
 export type StaticFileDetailsProps = {
     customUploadActions?: React.ReactNode[];
@@ -10,7 +10,7 @@ export type StaticFileDetailsProps = {
     handleRemove?: () => void;
     hasImageSizes?: boolean;
     hideRemoveFile?: boolean;
-    imageCacheTag?: string;
+    imageCacheTag?: false | string;
     uploadConfig: SanitizedCollectionConfig['upload'];
 };
 export declare const StaticFileDetails: React.FC<StaticFileDetailsProps>;

package/dist/elements/FileDetails/StaticFileDetails/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,MAAM,MAAM,sBAAsB,GAAG;IACnC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA4D9D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/StaticFileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAIpB,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,MAAM,MAAM,sBAAsB,GAAG;IACnC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC9B,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA4D9D,CAAA"}

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

@@ -6,7 +6,7 @@ import { Button } from '../../Button/index.js';
 import { Thumbnail } from '../../Thumbnail/index.js';
 import { UploadActions } from '../../Upload/index.js';
 import { FileMeta } from '../FileMeta/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'file-details';
 export const StaticFileDetails = props => {
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","_jsx","className","_jsxs","fileSrc","customActions","Boolean","enablePreviewSizes","buttonStyle","icon","onClick","round"],"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=\"ghost\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,SAASC,SAAS,QAAQ;AAC1B,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB,OAAO,MAAMC,iBAAA,GAAuDC,KAAA;EAClE,MAAM;IACJC,mBAAmB;IACnBC,GAAG;IACHC,iBAAiB;IACjBC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,aAAa;IACbC;EAAY,CACb,GAAGR,KAAA;EAEJ,MAAM;IAAES,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,GAAG;IAAEC;EAAK,CAAE,GAAGb,GAAA;EAE3E,MAAMc,cAAA,GAAiBR,YAAA,CAAaS,cAAc,IAAI;EAEtD,oBACEC,IAAA,CAAC;IAAIC,SAAA,EAAWrB,SAAA;cACd,aAAAsB,KAAA,CAAC;iBACEJ,cAAA,iBACCE,IAAA,CAACvB,SAAA;QACC;QACAwB,SAAA,EAAW,GAAGrB,SAAA,aAAsB;QACpCI,GAAA,EAAKA,GAAA;QACLmB,OAAA,EAASR,YAAA,IAAgBC,GAAA;QACzBP,aAAA,EAAeA,aAAA;QACfC,YAAA,EAAcA;uBAGlBY,KAAA,CAAC;QAAID,SAAA,EAAW,GAAGrB,SAAA,eAAwB;gCACzCoB,IAAA,CAACrB,QAAA;UACCY,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVC,MAAA,EAAQA,MAAA;UACRC,QAAA,EAAUA,QAAA;UACVE,GAAA,EAAKA,GAAA;UACLC,KAAA,EAAOA;YAGP,CAAAZ,iBAAA,IAAsBE,aAAA,IAAiBH,GAAA,CAAIO,QAAQ,IAAKR,mBAAkB,kBAC1EiB,IAAA,CAACtB,aAAA;UACC0B,aAAA,EAAerB,mBAAA;UACfE,iBAAA,EAAmBoB,OAAA,CAAQpB,iBAAA;UAC3BqB,kBAAA,EAAoBnB,aAAA,IAAiBH,GAAA,CAAIO,QAAQ;UACjDG,QAAA,EAAUA;;UAIf,CAACN,cAAA,IAAkBF,YAAA,iBAClBc,IAAA,CAACxB,MAAA;QACC+B,WAAA,EAAY;QACZN,SAAA,EAAW,GAAGrB,SAAA,UAAmB;QACjC4B,IAAA,EAAK;QACLC,OAAA,EAASvB,YAAA;QACTwB,KAAK;;;;AAMjB","ignoreList":[]}
+{"version":3,"file":"index.js","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","_jsx","className","_jsxs","fileSrc","customActions","Boolean","enablePreviewSizes","buttonStyle","icon","onClick","round"],"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.css'\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?: false | 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=\"ghost\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,SAASC,SAAS,QAAQ;AAC1B,SAASC,aAAa,QAAQ;AAC9B,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB,OAAO,MAAMC,iBAAA,GAAuDC,KAAA;EAClE,MAAM;IACJC,mBAAmB;IACnBC,GAAG;IACHC,iBAAiB;IACjBC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,aAAa;IACbC;EAAY,CACb,GAAGR,KAAA;EAEJ,MAAM;IAAES,QAAQ;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,GAAG;IAAEC;EAAK,CAAE,GAAGb,GAAA;EAE3E,MAAMc,cAAA,GAAiBR,YAAA,CAAaS,cAAc,IAAI;EAEtD,oBACEC,IAAA,CAAC;IAAIC,SAAA,EAAWrB,SAAA;cACd,aAAAsB,KAAA,CAAC;iBACEJ,cAAA,iBACCE,IAAA,CAACvB,SAAA;QACC;QACAwB,SAAA,EAAW,GAAGrB,SAAA,aAAsB;QACpCI,GAAA,EAAKA,GAAA;QACLmB,OAAA,EAASR,YAAA,IAAgBC,GAAA;QACzBP,aAAA,EAAeA,aAAA;QACfC,YAAA,EAAcA;uBAGlBY,KAAA,CAAC;QAAID,SAAA,EAAW,GAAGrB,SAAA,eAAwB;gCACzCoB,IAAA,CAACrB,QAAA;UACCY,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVC,MAAA,EAAQA,MAAA;UACRC,QAAA,EAAUA,QAAA;UACVE,GAAA,EAAKA,GAAA;UACLC,KAAA,EAAOA;YAGP,CAAAZ,iBAAA,IAAsBE,aAAA,IAAiBH,GAAA,CAAIO,QAAQ,IAAKR,mBAAkB,kBAC1EiB,IAAA,CAACtB,aAAA;UACC0B,aAAA,EAAerB,mBAAA;UACfE,iBAAA,EAAmBoB,OAAA,CAAQpB,iBAAA;UAC3BqB,kBAAA,EAAoBnB,aAAA,IAAiBH,GAAA,CAAIO,QAAQ;UACjDG,QAAA,EAAUA;;UAIf,CAACN,cAAA,IAAkBF,YAAA,iBAClBc,IAAA,CAACxB,MAAA;QACC+B,WAAA,EAAY;QACZN,SAAA,EAAW,GAAGrB,SAAA,UAAmB;QACjC4B,IAAA,EAAK;QACLC,OAAA,EAASvB,YAAA;QACTwB,KAAK;;;;AAMjB","ignoreList":[]}

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

@@ -9,7 +9,7 @@ type SharedFileDetailsProps = {
     enableAdjustments?: boolean;
     hasImageSizes?: boolean;
     hideRemoveFile?: boolean;
-    imageCacheTag?: string;
+    imageCacheTag?: false | string;
     uploadConfig: SanitizedCollectionConfig['upload'];
 };
 type StaticFileDetailsProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,sBAAsB,GAAG;IAC5B,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,KAAK,sBAAsB,GAAG;IAC5B,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,CAAA;AAED,KAAK,yBAAyB,GAAG;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,yBAAyB,GAAG,sBAAsB,CAAC,GACjF,sBAAsB,CAAA;AAExB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAQlD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,sBAAsB,GAAG;IAC5B,cAAc,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IACvC,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC9B,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,KAAK,sBAAsB,GAAG;IAC5B,kBAAkB,CAAC,EAAE,KAAK,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,CAAA;AAED,KAAK,yBAAyB,GAAG;IAC/B,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,yBAAyB,GAAG,sBAAsB,CAAC,GACjF,sBAAsB,CAAA;AAExB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAQlD,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","DraggableFileDetails","StaticFileDetails","FileDetails","props","hasMany","_jsx"],"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"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAmClC,OAAO,MAAMC,WAAA,GAA2CC,KAAA;EACtD,MAAM;IAAEC;EAAO,CAAE,GAAGD,KAAA;EAEpB,IAAIC,OAAA,EAAS;IACX,oBAAOC,IAAA,CAACL,oBAAA;MAAsB,GAAGG;;EACnC;EAEA,oBAAOE,IAAA,CAACJ,iBAAA;IAAmB,GAAGE;;AAChC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","DraggableFileDetails","StaticFileDetails","FileDetails","props","hasMany","_jsx"],"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?: false | 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"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,iBAAiB,QAAQ;AAmClC,OAAO,MAAMC,WAAA,GAA2CC,KAAA;EACtD,MAAM;IAAEC;EAAO,CAAE,GAAGD,KAAA;EAEpB,IAAIC,OAAA,EAAS;IACX,oBAAOC,IAAA,CAACL,oBAAA;MAAsB,GAAGG;;EACnC;EAEA,oBAAOE,IAAA,CAACJ,iBAAA;IAAmB,GAAGE;;AAChC","ignoreList":[]}

package/dist/elements/FileManager/FilePreview/AudioPreview/index.css

@@ -0,0 +1,8 @@
+@layer payload-default {
+  .audio-preview {
+    --audio-preview-max-width: 480px;
+
+    width: 100%;
+    max-width: var(--audio-preview-max-width);
+  }
+}

package/dist/elements/FileManager/FilePreview/AudioPreview/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.css';
+/**
+ * Built-in preview for native audio files, rendered inside the file manager when the
+ * uploaded file's mime type is `audio/*` and no custom file preview is provided.
+ */
+export declare const AudioPreview: React.FC<{
+    fileSrc: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FileManager/FilePreview/AudioPreview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/FileManager/FilePreview/AudioPreview/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAKtD,CAAA"}

package/dist/elements/FileManager/FilePreview/AudioPreview/index.js

@@ -0,0 +1,24 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.css';
+const baseClass = 'audio-preview';
+/**
+ * Built-in preview for native audio files, rendered inside the file manager when the
+ * uploaded file's mime type is `audio/*` and no custom file preview is provided.
+ */
+export const AudioPreview = ({
+  fileSrc
+}) => {
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption -- user-uploaded media, captions unknown
+    /*#__PURE__*/
+    _jsx("audio", {
+      className: baseClass,
+      controls: true,
+      src: fileSrc
+    })
+  );
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/FileManager/FilePreview/AudioPreview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","AudioPreview","fileSrc","_jsx","className","controls","src"],"sources":["../../../../../src/elements/FileManager/FilePreview/AudioPreview/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'audio-preview'\n\n/**\n * Built-in preview for native audio files, rendered inside the file manager when the\n * uploaded file's mime type is `audio/*` and no custom file preview is provided.\n */\nexport const AudioPreview: React.FC<{ fileSrc: string }> = ({ fileSrc }) => {\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption -- user-uploaded media, captions unknown\n    <audio className={baseClass} controls src={fileSrc} />\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB;;;;AAIA,OAAO,MAAMC,YAAA,GAA8CA,CAAC;EAAEC;AAAO,CAAE;EACrE;IACE;;IACAC,IAAA,CAAC;MAAMC,SAAA,EAAWJ,SAAA;MAAWK,QAAQ;MAACC,GAAA,EAAKJ;;;AAE/C","ignoreList":[]}

package/dist/elements/FileManager/FilePreview/PdfPreview/index.css

@@ -0,0 +1,9 @@
+@layer payload-default {
+  .pdf-preview {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    border-radius: var(--radius-small);
+    background: var(--color-bg);
+  }
+}

package/dist/elements/FileManager/FilePreview/PdfPreview/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.css';
+/**
+ * Built-in preview for PDF files, rendered inside the file manager when the uploaded file's
+ * mime type is `application/pdf` and no custom file preview is provided. Uses the browser's
+ * native PDF viewer via an iframe.
+ */
+export declare const PdfPreview: React.FC<{
+    fileSrc: string;
+    title?: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FileManager/FilePreview/PdfPreview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/FileManager/FilePreview/PdfPreview/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAOpE,CAAA"}

package/dist/elements/FileManager/FilePreview/PdfPreview/index.js

@@ -0,0 +1,27 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.css';
+const baseClass = 'pdf-preview';
+/**
+ * Built-in preview for PDF files, rendered inside the file manager when the uploaded file's
+ * mime type is `application/pdf` and no custom file preview is provided. Uses the browser's
+ * native PDF viewer via an iframe.
+ */
+export const PdfPreview = ({
+  fileSrc,
+  title
+}) => {
+  // Deliberately no `sandbox` attribute: Chromium disables its built-in PDF viewer inside
+  // sandboxed iframes (regardless of which tokens are allowed), so any sandbox value breaks the
+  // preview entirely. The file is served same-origin with an `application/pdf` content type, which
+  // the browser renders as a PDF document rather than as executable HTML.
+  // eslint-disable-next-line @eslint-react/dom/no-missing-iframe-sandbox -- sandboxing disables Chromium's PDF viewer; same-origin application/pdf is rendered as a document, not HTML
+  return /*#__PURE__*/_jsx("iframe", {
+    className: baseClass,
+    src: fileSrc,
+    title: title ?? 'PDF preview'
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/FileManager/FilePreview/PdfPreview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","PdfPreview","fileSrc","title","_jsx","className","src"],"sources":["../../../../../src/elements/FileManager/FilePreview/PdfPreview/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'pdf-preview'\n\n/**\n * Built-in preview for PDF files, rendered inside the file manager when the uploaded file's\n * mime type is `application/pdf` and no custom file preview is provided. Uses the browser's\n * native PDF viewer via an iframe.\n */\nexport const PdfPreview: React.FC<{ fileSrc: string; title?: string }> = ({ fileSrc, title }) => {\n  // Deliberately no `sandbox` attribute: Chromium disables its built-in PDF viewer inside\n  // sandboxed iframes (regardless of which tokens are allowed), so any sandbox value breaks the\n  // preview entirely. The file is served same-origin with an `application/pdf` content type, which\n  // the browser renders as a PDF document rather than as executable HTML.\n  // eslint-disable-next-line @eslint-react/dom/no-missing-iframe-sandbox -- sandboxing disables Chromium's PDF viewer; same-origin application/pdf is rendered as a document, not HTML\n  return <iframe className={baseClass} src={fileSrc} title={title ?? 'PDF preview'} />\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB;;;;;AAKA,OAAO,MAAMC,UAAA,GAA4DA,CAAC;EAAEC,OAAO;EAAEC;AAAK,CAAE;EAC1F;EACA;EACA;EACA;EACA;EACA,oBAAOC,IAAA,CAAC;IAAOC,SAAA,EAAWL,SAAA;IAAWM,GAAA,EAAKJ,OAAA;IAASC,KAAA,EAAOA,KAAA,IAAS;;AACrE","ignoreList":[]}

package/dist/elements/FileManager/FilePreview/VideoPreview/index.css

@@ -0,0 +1,8 @@
+@layer payload-default {
+  .video-preview {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--radius-small);
+    background: var(--color-bg);
+  }
+}

package/dist/elements/FileManager/FilePreview/VideoPreview/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.css';
+/**
+ * Built-in preview for native video files, rendered inside the file manager when the
+ * uploaded file's mime type is `video/*` and no custom file preview is provided.
+ */
+export declare const VideoPreview: React.FC<{
+    fileSrc: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FileManager/FilePreview/VideoPreview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/FileManager/FilePreview/VideoPreview/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAKtD,CAAA"}

package/dist/elements/FileManager/FilePreview/VideoPreview/index.js

@@ -0,0 +1,24 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.css';
+const baseClass = 'video-preview';
+/**
+ * Built-in preview for native video files, rendered inside the file manager when the
+ * uploaded file's mime type is `video/*` and no custom file preview is provided.
+ */
+export const VideoPreview = ({
+  fileSrc
+}) => {
+  return (
+    // eslint-disable-next-line jsx-a11y/media-has-caption -- user-uploaded media, captions unknown
+    /*#__PURE__*/
+    _jsx("video", {
+      className: baseClass,
+      controls: true,
+      src: fileSrc
+    })
+  );
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/FileManager/FilePreview/VideoPreview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","VideoPreview","fileSrc","_jsx","className","controls","src"],"sources":["../../../../../src/elements/FileManager/FilePreview/VideoPreview/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'video-preview'\n\n/**\n * Built-in preview for native video files, rendered inside the file manager when the\n * uploaded file's mime type is `video/*` and no custom file preview is provided.\n */\nexport const VideoPreview: React.FC<{ fileSrc: string }> = ({ fileSrc }) => {\n  return (\n    // eslint-disable-next-line jsx-a11y/media-has-caption -- user-uploaded media, captions unknown\n    <video className={baseClass} controls src={fileSrc} />\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB;;;;AAIA,OAAO,MAAMC,YAAA,GAA8CA,CAAC;EAAEC;AAAO,CAAE;EACrE;IACE;;IACAC,IAAA,CAAC;MAAMC,SAAA,EAAWJ,SAAA;MAAWK,QAAQ;MAACC,GAAA,EAAKJ;;;AAE/C","ignoreList":[]}

package/dist/elements/FileManager/FilePreview/index.css

@@ -0,0 +1,83 @@
+@layer payload-default {
+  .file-preview {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 0;
+    min-height: 0;
+    /* Visible so the mini carousel can grow past the panel as the headers scroll away. */
+    overflow: visible;
+  }
+
+  .file-preview__main {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+    min-width: 0;
+    background: var(--color-bg-secondary);
+    padding: var(--spacer-3) var(--gutter-h);
+    gap: var(--spacer-3);
+    overflow: hidden;
+  }
+
+  .file-preview__image-wrap {
+    /* Take the remaining space but allow shrinking so the info row below is never clipped
+       on short viewports. min-height: 0 lets this flex item shrink below its content size. */
+    flex: 1 1 0;
+    min-height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+
+    .thumbnail {
+      max-width: 100%;
+      max-height: 100%;
+
+      img,
+      svg {
+        object-fit: scale-down;
+      }
+    }
+  }
+
+  .file-preview__info {
+    display: flex;
+    align-items: center;
+    align-self: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+    min-width: 0;
+    margin-top: auto;
+  }
+
+  .file-preview__info-label {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 var(--spacer-2);
+    border-radius: var(--radius-medium);
+    background: var(--color-bg-secondary-hover);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    color: var(--color-text);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .file-preview__info-meta {
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  @container edit-main (max-width: 768px) {
+    .file-preview {
+      flex-direction: column-reverse;
+    }
+  }
+}

package/dist/elements/FileManager/FilePreview/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { FileManagerProps } from '../index.js';
+import './index.css';
+type Props = {
+    readonly data: Record<string, unknown>;
+    readonly imageCacheTag?: false | string;
+    readonly selectedSize?: null | string;
+    readonly selectedSizeData?: null | Record<string, unknown>;
+    readonly setSelectedSize: (size: null | string) => void;
+} & Pick<FileManagerProps, 'collectionSlug' | 'uploadConfig' | 'UploadFilePreview'>;
+export declare const FilePreview: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FileManager/FilePreview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileManager/FilePreview/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AASnD,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IACvC,QAAQ,CAAC,YAAY,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACrC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC1D,QAAQ,CAAC,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;CACxD,GAAG,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,GAAG,cAAc,GAAG,mBAAmB,CAAC,CAAA;AAEnF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyFvC,CAAA"}

package/dist/elements/FileManager/FilePreview/index.js

@@ -0,0 +1,140 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatFilesize, isImage } from 'payload/shared';
+import React from 'react';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { appendCacheTag } from '../../../utilities/appendCacheTag.js';
+import { MiniCarousel } from '../../MiniCarousel/index.js';
+import { Thumbnail } from '../../Thumbnail/index.js';
+import { AudioPreview } from './AudioPreview/index.js';
+import { PdfPreview } from './PdfPreview/index.js';
+import { VideoPreview } from './VideoPreview/index.js';
+import './index.css';
+const baseClass = 'file-preview';
+export const FilePreview = t0 => {
+  const $ = _c(19);
+  const {
+    collectionSlug,
+    data,
+    imageCacheTag,
+    selectedSize,
+    selectedSizeData,
+    setSelectedSize,
+    uploadConfig,
+    UploadFilePreview
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  const hasImageSizes = uploadConfig?.imageSizes?.length > 0;
+  const mimeType = data?.mimeType ?? "";
+  let t1;
+  if ($[0] !== UploadFilePreview || $[1] !== collectionSlug || $[2] !== data || $[3] !== hasImageSizes || $[4] !== imageCacheTag || $[5] !== mimeType || $[6] !== selectedSize || $[7] !== selectedSizeData || $[8] !== setSelectedSize || $[9] !== t || $[10] !== uploadConfig) {
+    const isImageFile = isImage(mimeType);
+    const fileSrc = selectedSizeData?.url ?? data?.thumbnailURL ?? data?.url ?? null;
+    const originalUrl = data?.url;
+    const nativePreviewSrc = originalUrl ? appendCacheTag(originalUrl, imageCacheTag) : undefined;
+    const renderBuiltInPreview = () => {
+      if (nativePreviewSrc && !isImageFile) {
+        if (mimeType.startsWith("video/")) {
+          return _jsx(VideoPreview, {
+            fileSrc: nativePreviewSrc
+          });
+        }
+        if (mimeType.startsWith("audio/")) {
+          return _jsx(AudioPreview, {
+            fileSrc: nativePreviewSrc
+          });
+        }
+        if (mimeType === "application/pdf") {
+          return _jsx(PdfPreview, {
+            fileSrc: nativePreviewSrc,
+            title: data?.filename
+          });
+        }
+      }
+      return _jsx(Thumbnail, {
+        className: `${baseClass}__thumbnail`,
+        collectionSlug,
+        doc: selectedSizeData || data,
+        fileSrc,
+        imageCacheTag,
+        size: "expand",
+        uploadConfig
+      });
+    };
+    const w = selectedSizeData?.width ?? data?.width;
+    const h = selectedSizeData?.height ?? data?.height;
+    let parts;
+    if ($[12] !== data || $[13] !== h || $[14] !== selectedSizeData?.filesize || $[15] !== w) {
+      parts = [];
+      if (typeof w === "number" && typeof h === "number") {
+        parts.push(`${w} × ${h}`);
+      }
+      const t2 = (selectedSizeData?.filesize ?? data?.filesize) || 0;
+      let t3;
+      if ($[17] !== t2) {
+        t3 = formatFilesize(t2);
+        $[17] = t2;
+        $[18] = t3;
+      } else {
+        t3 = $[18];
+      }
+      parts.push(t3);
+      if (data?.mimeType) {
+        parts.push(data.mimeType);
+      }
+      $[12] = data;
+      $[13] = h;
+      $[14] = selectedSizeData?.filesize;
+      $[15] = w;
+      $[16] = parts;
+    } else {
+      parts = $[16];
+    }
+    const metaString = parts.join(" \u2013 ");
+    t1 = _jsxs("div", {
+      className: baseClass,
+      children: [hasImageSizes && isImageFile && _jsx(MiniCarousel, {
+        doc: data,
+        imageCacheTag,
+        onSelect: setSelectedSize,
+        selectedSize,
+        uploadConfig
+      }), _jsxs("div", {
+        className: `${baseClass}__main`,
+        children: [_jsx("div", {
+          className: `${baseClass}__image-wrap`,
+          children: UploadFilePreview ?? renderBuiltInPreview()
+        }), _jsxs("div", {
+          className: `${baseClass}__info`,
+          children: [_jsx("span", {
+            className: `${baseClass}__info-label`,
+            children: selectedSize ?? t("general:original")
+          }), _jsx("span", {
+            className: `${baseClass}__info-meta`,
+            children: metaString
+          })]
+        })]
+      })]
+    });
+    $[0] = UploadFilePreview;
+    $[1] = collectionSlug;
+    $[2] = data;
+    $[3] = hasImageSizes;
+    $[4] = imageCacheTag;
+    $[5] = mimeType;
+    $[6] = selectedSize;
+    $[7] = selectedSizeData;
+    $[8] = setSelectedSize;
+    $[9] = t;
+    $[10] = uploadConfig;
+    $[11] = t1;
+  } else {
+    t1 = $[11];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map