@payloadcms/ui 3.0.0-canary.a5aaf21 → 3.0.0-canary.a6e7305

package/dist/elements/Autosave/index.scss

@@ -1,5 +1,7 @@
 @import '../../scss/styles.scss';
 
-.autosave {
-  white-space: nowrap;
+@layer payload-default {
+  .autosave {
+    white-space: nowrap;
+  }
 }

package/dist/elements/Banner/index.scss

@@ -1,71 +1,73 @@
 @import '../../scss/styles.scss';
 
-.banner {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  vertical-align: middle;
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-m;
-  padding: base(0.5);
-  margin-bottom: $baseline;
+@layer payload-default {
+  .banner {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    vertical-align: middle;
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-m;
+    padding: base(0.5);
+    margin-bottom: $baseline;
 
-  &--has-action {
-    cursor: pointer;
-    text-decoration: none;
-  }
-
-  &--has-icon {
-    display: flex;
-
-    svg {
-      display: block;
+    &--has-action {
+      cursor: pointer;
+      text-decoration: none;
     }
-  }
 
-  &--type-default {
-    &.button--has-action {
-      &:hover {
-        background: var(--theme-elevation-900);
-      }
+    &--has-icon {
+      display: flex;
 
-      &:active {
-        background: var(--theme-elevation-950);
+      svg {
+        display: block;
       }
     }
-  }
 
-  &--type-error {
-    background: var(--theme-error-100);
-    color: var(--theme-error-600);
+    &--type-default {
+      &.button--has-action {
+        &:hover {
+          background: var(--theme-elevation-900);
+        }
 
-    svg {
-      @include color-svg(var(--theme-error-600));
+        &:active {
+          background: var(--theme-elevation-950);
+        }
+      }
     }
 
-    &.button--has-action {
-      &:hover {
-        background: var(--theme-error-200);
+    &--type-error {
+      background: var(--theme-error-100);
+      color: var(--theme-error-600);
+
+      svg {
+        @include color-svg(var(--theme-error-600));
       }
 
-      &:active {
-        background: var(--theme-error-300);
+      &.button--has-action {
+        &:hover {
+          background: var(--theme-error-200);
+        }
+
+        &:active {
+          background: var(--theme-error-300);
+        }
       }
     }
-  }
 
-  &--type-success {
-    background: var(--theme-success-100);
-    color: var(--theme-success-600);
+    &--type-success {
+      background: var(--theme-success-100);
+      color: var(--theme-success-600);
 
-    &.button--has-action {
-      &:hover {
-        background: var(--theme-success-200);
-      }
+      &.button--has-action {
+        &:hover {
+          background: var(--theme-success-200);
+        }
 
-      &:active {
-        background: var(--theme-success-200);
+        &:active {
+          background: var(--theme-success-200);
+        }
       }
     }
   }

package/dist/elements/BulkUpload/ActionsBar/index.scss

@@ -1,59 +1,65 @@
 @import '../../../scss/styles.scss';
 
-.bulk-upload--actions-bar {
-  display: flex;
-  padding-inline: var(--gutter-h);
-  align-items: center;
-  border-bottom: 1px solid var(--theme-border-color);
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  background-color: var(--theme-bg);
-  height: var(--doc-controls-height);
-
-  &__navigation {
+@layer payload-default {
+  .bulk-upload--actions-bar {
     display: flex;
-    gap: var(--base);
+    padding-inline: var(--gutter-h);
     align-items: center;
-    width: 100%;
-  }
+    border-bottom: 1px solid var(--theme-border-color);
+    position: sticky;
+    z-index: 1;
+    top: 0;
+    background-color: var(--theme-bg);
+    height: var(--doc-controls-height);
 
-  &__locationText {
-    font-variant-numeric: tabular-nums;
-    margin: 0;
-  }
+    &__navigation {
+      display: flex;
+      gap: var(--base);
+      align-items: center;
+      width: 100%;
+    }
 
-  &__controls {
-    display: flex;
-    gap: calc(var(--base) / 2);
+    &__locationText {
+      font-variant-numeric: tabular-nums;
+      margin: 0;
+    }
 
-    .btn {
-      background-color: var(--theme-elevation-100);
-      width: calc(var(--base) * 1.2);
-      height: calc(var(--base) * 1.2);
+    &__controls {
+      display: flex;
+      gap: calc(var(--base) / 2);
 
-      &:hover {
-        background-color: var(--theme-elevation-200);
-      }
+      .btn {
+        background-color: var(--theme-elevation-100);
+        width: calc(var(--base) * 1.2);
+        height: calc(var(--base) * 1.2);
+
+        svg {
+          max-width: 1rem;
+        }
+
+        &:hover {
+          background-color: var(--theme-elevation-200);
+        }
 
-      &__label {
-        display: flex;
+        &__label {
+          display: flex;
+        }
       }
     }
-  }
-
-  &__buttons {
-    display: flex;
-    gap: var(--base);
-    margin-left: auto;
-  }
 
-  @include mid-break {
-    &__navigation {
-      justify-content: space-between;
+    &__buttons {
+      display: flex;
+      gap: var(--base);
+      margin-left: auto;
     }
-    &__saveButtons {
-      display: none;
+
+    @include mid-break {
+      &__navigation {
+        justify-content: space-between;
+      }
+      &__saveButtons {
+        display: none;
+      }
     }
   }
 }

package/dist/elements/BulkUpload/AddFilesView/index.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import './index.scss';
 type Props = {
+    readonly acceptMimeTypes?: string;
     readonly onCancel: () => void;
     readonly onDrop: (acceptedFiles: FileList) => void;
 };
-export declare function AddFilesView({ onCancel, onDrop }: Props): React.JSX.Element;
+export declare function AddFilesView({ acceptMimeTypes, onCancel, onDrop }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/BulkUpload/AddFilesView/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAA;CACnD,CAAA;AACD,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,KAAK,qBA2CvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAA;IACjC,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAA;CACnD,CAAA;AACD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,KAAK,qBA4CxE"}

package/dist/elements/BulkUpload/AddFilesView/index.js

@@ -9,6 +9,7 @@ import { DrawerHeader } from '../Header/index.js';
 import './index.scss';
 const baseClass = 'bulk-upload--add-files';
 export function AddFilesView({
+  acceptMimeTypes,
   onCancel,
   onDrop
 }) {
@@ -37,6 +38,7 @@ export function AddFilesView({
           size: "small",
           children: t('upload:selectFile')
         }), /*#__PURE__*/_jsx("input", {
+          accept: acceptMimeTypes,
           "aria-hidden": "true",
           className: `${baseClass}__hidden-input`,
           hidden: true,

package/dist/elements/BulkUpload/AddFilesView/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useTranslation","Button","Dropzone","DrawerHeader","baseClass","AddFilesView","onCancel","onDrop","t","inputRef","useRef","_jsxs","className","_jsx","onClose","title","multipleFiles","onChange","buttonStyle","iconPosition","onClick","current","click","size","hidden","multiple","e","target","files","length","ref","type"],"sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Dropzone } from '../../Dropzone/index.js'\nimport { DrawerHeader } from '../Header/index.js'\nimport './index.scss'\n\nconst baseClass = 'bulk-upload--add-files'\n\ntype Props = {\n  readonly onCancel: () => void\n  readonly onDrop: (acceptedFiles: FileList) => void\n}\nexport function AddFilesView({ onCancel, onDrop }: Props) {\n  const { t } = useTranslation()\n\n  const inputRef = React.useRef(null)\n\n  return (\n    <div className={baseClass}>\n      <DrawerHeader onClose={onCancel} title={t('upload:addFiles')} />\n      <div className={`${baseClass}__dropArea`}>\n        <Dropzone multipleFiles onChange={onDrop}>\n          <Button\n            buttonStyle=\"pill\"\n            iconPosition=\"left\"\n            onClick={() => {\n              if (inputRef.current) {\n                inputRef.current.click()\n              }\n            }}\n            size=\"small\"\n          >\n            {t('upload:selectFile')}\n          </Button>\n          <input\n            aria-hidden=\"true\"\n            className={`${baseClass}__hidden-input`}\n            hidden\n            multiple\n            onChange={(e) => {\n              if (e.target.files && e.target.files.length > 0) {\n                onDrop(e.target.files)\n              }\n            }}\n            ref={inputRef}\n            type=\"file\"\n          />\n\n          <p className={`${baseClass}__dragAndDropText`}>\n            {t('general:or')} {t('upload:dragAndDrop')}\n          </p>\n        </Dropzone>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,SAASC,aAAa;EAAEC,QAAQ;EAAEC;AAAM,CAAS;EACtD,MAAM;IAAEC;EAAC,CAAE,GAAGR,cAAA;EAEd,MAAMS,QAAA,GAAWV,KAAA,CAAMW,MAAM,CAAC;EAE9B,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAWR,SAAA;4BACdS,IAAA,CAACV,YAAA;MAAaW,OAAA,EAASR,QAAA;MAAUS,KAAA,EAAOP,CAAA,CAAE;qBAC1CK,IAAA,CAAC;MAAID,SAAA,EAAW,GAAGR,SAAA,YAAqB;gBACtC,aAAAO,KAAA,CAACT,QAAA;QAASc,aAAa;QAACC,QAAA,EAAUV,MAAA;gCAChCM,IAAA,CAACZ,MAAA;UACCiB,WAAA,EAAY;UACZC,YAAA,EAAa;UACbC,OAAA,EAASA,CAAA;YACP,IAAIX,QAAA,CAASY,OAAO,EAAE;cACpBZ,QAAA,CAASY,OAAO,CAACC,KAAK;YACxB;UACF;UACAC,IAAA,EAAK;oBAEJf,CAAA,CAAE;yBAELK,IAAA,CAAC;UACC,eAAY;UACZD,SAAA,EAAW,GAAGR,SAAA,gBAAyB;UACvCoB,MAAM;UACNC,QAAQ;UACRR,QAAA,EAAWS,CAAA;YACT,IAAIA,CAAA,CAAEC,MAAM,CAACC,KAAK,IAAIF,CAAA,CAAEC,MAAM,CAACC,KAAK,CAACC,MAAM,GAAG,GAAG;cAC/CtB,MAAA,CAAOmB,CAAA,CAAEC,MAAM,CAACC,KAAK;YACvB;UACF;UACAE,GAAA,EAAKrB,QAAA;UACLsB,IAAA,EAAK;yBAGPpB,KAAA,CAAC;UAAEC,SAAA,EAAW,GAAGR,SAAA,mBAA4B;qBAC1CI,CAAA,CAAE,eAAc,KAAEA,CAAA,CAAE;;;;;AAMjC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useTranslation","Button","Dropzone","DrawerHeader","baseClass","AddFilesView","acceptMimeTypes","onCancel","onDrop","t","inputRef","useRef","_jsxs","className","_jsx","onClose","title","multipleFiles","onChange","buttonStyle","iconPosition","onClick","current","click","size","accept","hidden","multiple","e","target","files","length","ref","type"],"sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Dropzone } from '../../Dropzone/index.js'\nimport { DrawerHeader } from '../Header/index.js'\nimport './index.scss'\n\nconst baseClass = 'bulk-upload--add-files'\n\ntype Props = {\n  readonly acceptMimeTypes?: string\n  readonly onCancel: () => void\n  readonly onDrop: (acceptedFiles: FileList) => void\n}\nexport function AddFilesView({ acceptMimeTypes, onCancel, onDrop }: Props) {\n  const { t } = useTranslation()\n\n  const inputRef = React.useRef(null)\n\n  return (\n    <div className={baseClass}>\n      <DrawerHeader onClose={onCancel} title={t('upload:addFiles')} />\n      <div className={`${baseClass}__dropArea`}>\n        <Dropzone multipleFiles onChange={onDrop}>\n          <Button\n            buttonStyle=\"pill\"\n            iconPosition=\"left\"\n            onClick={() => {\n              if (inputRef.current) {\n                inputRef.current.click()\n              }\n            }}\n            size=\"small\"\n          >\n            {t('upload:selectFile')}\n          </Button>\n          <input\n            accept={acceptMimeTypes}\n            aria-hidden=\"true\"\n            className={`${baseClass}__hidden-input`}\n            hidden\n            multiple\n            onChange={(e) => {\n              if (e.target.files && e.target.files.length > 0) {\n                onDrop(e.target.files)\n              }\n            }}\n            ref={inputRef}\n            type=\"file\"\n          />\n\n          <p className={`${baseClass}__dragAndDropText`}>\n            {t('general:or')} {t('upload:dragAndDrop')}\n          </p>\n        </Dropzone>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,SAASC,aAAa;EAAEC,eAAe;EAAEC,QAAQ;EAAEC;AAAM,CAAS;EACvE,MAAM;IAAEC;EAAC,CAAE,GAAGT,cAAA;EAEd,MAAMU,QAAA,GAAWX,KAAA,CAAMY,MAAM,CAAC;EAE9B,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAWT,SAAA;4BACdU,IAAA,CAACX,YAAA;MAAaY,OAAA,EAASR,QAAA;MAAUS,KAAA,EAAOP,CAAA,CAAE;qBAC1CK,IAAA,CAAC;MAAID,SAAA,EAAW,GAAGT,SAAA,YAAqB;gBACtC,aAAAQ,KAAA,CAACV,QAAA;QAASe,aAAa;QAACC,QAAA,EAAUV,MAAA;gCAChCM,IAAA,CAACb,MAAA;UACCkB,WAAA,EAAY;UACZC,YAAA,EAAa;UACbC,OAAA,EAASA,CAAA;YACP,IAAIX,QAAA,CAASY,OAAO,EAAE;cACpBZ,QAAA,CAASY,OAAO,CAACC,KAAK;YACxB;UACF;UACAC,IAAA,EAAK;oBAEJf,CAAA,CAAE;yBAELK,IAAA,CAAC;UACCW,MAAA,EAAQnB,eAAA;UACR,eAAY;UACZO,SAAA,EAAW,GAAGT,SAAA,gBAAyB;UACvCsB,MAAM;UACNC,QAAQ;UACRT,QAAA,EAAWU,CAAA;YACT,IAAIA,CAAA,CAAEC,MAAM,CAACC,KAAK,IAAIF,CAAA,CAAEC,MAAM,CAACC,KAAK,CAACC,MAAM,GAAG,GAAG;cAC/CvB,MAAA,CAAOoB,CAAA,CAAEC,MAAM,CAACC,KAAK;YACvB;UACF;UACAE,GAAA,EAAKtB,QAAA;UACLuB,IAAA,EAAK;yBAGPrB,KAAA,CAAC;UAAEC,SAAA,EAAW,GAAGT,SAAA,mBAA4B;qBAC1CK,CAAA,CAAE,eAAc,KAAEA,CAAA,CAAE;;;;;AAMjC","ignoreList":[]}

package/dist/elements/BulkUpload/AddFilesView/index.scss

@@ -1,28 +1,30 @@
-.bulk-upload--add-files {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  &__dropArea {
+@layer payload-default {
+  .bulk-upload--add-files {
     height: 100%;
-    padding: calc(var(--base) * 2) var(--gutter-h);
-  }
-
-  .dropzone {
-    flex-direction: column;
-    justify-content: center;
     display: flex;
-    gap: var(--base);
-    background-color: var(--theme-elevation-50);
+    flex-direction: column;
 
-    p {
-      margin: 0;
+    &__dropArea {
+      height: 100%;
+      padding: calc(var(--base) * 2) var(--gutter-h);
+    }
+
+    .dropzone {
+      flex-direction: column;
+      justify-content: center;
+      display: flex;
+      gap: var(--base);
+      background-color: var(--theme-elevation-50);
+
+      p {
+        margin: 0;
+      }
     }
-  }
 
-  &__dragAndDropText {
-    margin: 0;
-    text-transform: lowercase;
-    align-self: center;
+    &__dragAndDropText {
+      margin: 0;
+      text-transform: lowercase;
+      align-self: center;
+    }
   }
 }

package/dist/elements/BulkUpload/AddingFilesView/index.scss

@@ -1,23 +1,25 @@
 @import '../../../scss/styles.scss';
 
-.bulk-upload--file-manager {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-
-  &__editView {
-    flex-grow: 1;
+@layer payload-default {
+  .bulk-upload--file-manager {
+    display: flex;
     height: 100%;
-    max-height: 100%;
-    overflow: auto;
-  }
-
-  @include mid-break {
-    flex-direction: column-reverse;
+    width: 100%;
+    overflow: hidden;
 
     &__editView {
       flex-grow: 1;
+      height: 100%;
+      max-height: 100%;
+      overflow: auto;
+    }
+
+    @include mid-break {
+      flex-direction: column-reverse;
+
+      &__editView {
+        flex-grow: 1;
+      }
     }
   }
 }

package/dist/elements/BulkUpload/DrawerCloseButton/index.scss

@@ -1,27 +1,29 @@
-.drawer-close-button {
-  --size: calc(var(--base) * 1.2);
-  border: 0;
-  background-color: transparent;
-  padding: 0;
-  cursor: pointer;
-  overflow: hidden;
-  direction: ltr;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--size);
-  height: var(--size);
+@layer payload-default {
+  .drawer-close-button {
+    --size: calc(var(--base) * 1.2);
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    cursor: pointer;
+    overflow: hidden;
+    direction: ltr;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--size);
+    height: var(--size);
 
-  svg {
-    margin: calc(-1 * var(--size));
-    width: calc(var(--size) * 2);
-    height: calc(var(--size) * 2);
+    svg {
+      margin: calc(-1 * var(--size));
+      width: calc(var(--size) * 2);
+      height: calc(var(--size) * 2);
 
-    position: relative;
+      position: relative;
 
-    .stroke {
-      stroke-width: 1px;
-      vector-effect: non-scaling-stroke;
+      .stroke {
+        stroke-width: 1px;
+        vector-effect: non-scaling-stroke;
+      }
     }
   }
 }

package/dist/elements/BulkUpload/EditForm/index.scss

@@ -1,9 +1,11 @@
 @import '../../../scss/styles.scss';
 
-.collection-edit {
-  width: 100%;
+@layer payload-default {
+  .collection-edit {
+    width: 100%;
 
-  &__form {
-    height: auto;
+    &__form {
+      height: auto;
+    }
   }
 }

package/dist/elements/BulkUpload/FileSidebar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,OAAO,cAAc,CAAA;AASrB,wBAAgB,WAAW,sBA+J1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,OAAO,cAAc,CAAA;AASrB,wBAAgB,WAAW,sBAsK1B"}

package/dist/elements/BulkUpload/FileSidebar/index.js

@@ -25,7 +25,7 @@ const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
 const addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files';
 const baseClass = 'file-selections';
 export function FileSidebar() {
-  const $ = _c(34);
+  const $ = _c(36);
   const {
     activeIndex,
     addFiles,
@@ -33,6 +33,7 @@ export function FileSidebar() {
     isInitializing,
     removeFile,
     setActiveIndex,
+    thumbnailUrls,
     totalErrorCount
   } = useFormsManager();
   const {
@@ -88,24 +89,24 @@ export function FileSidebar() {
   }
   const t4 = t3.join(" ");
   let t5;
-  if ($[7] !== breakpoints.m || $[8] !== showFiles || $[9] !== totalErrorCount || $[10] !== i18n || $[11] !== totalFileCount || $[12] !== t || $[13] !== maxFiles || $[14] !== openModal || $[15] !== closeModal || $[16] !== handleAddFiles || $[17] !== isInitializing || $[18] !== forms || $[19] !== initialFiles || $[20] !== activeIndex || $[21] !== setActiveIndex || $[22] !== handleRemoveFile || $[23] !== t4) {
+  if ($[7] !== breakpoints.m || $[8] !== showFiles || $[9] !== totalErrorCount || $[10] !== i18n || $[11] !== totalFileCount || $[12] !== t || $[13] !== maxFiles || $[14] !== openModal || $[15] !== closeModal || $[16] !== handleAddFiles || $[17] !== isInitializing || $[18] !== forms || $[19] !== initialFiles || $[20] !== activeIndex || $[21] !== setActiveIndex || $[22] !== thumbnailUrls || $[23] !== handleRemoveFile || $[24] !== t4) {
     let t6;
-    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
       t6 = () => setShowFiles(prev => !prev);
-      $[25] = t6;
+      $[26] = t6;
     } else {
-      t6 = $[25];
+      t6 = $[26];
     }
     let t7;
-    if ($[26] !== closeModal) {
+    if ($[27] !== closeModal) {
       t7 = () => closeModal(addMoreFilesDrawerSlug);
-      $[26] = closeModal;
-      $[27] = t7;
+      $[27] = closeModal;
+      $[28] = t7;
     } else {
-      t7 = $[27];
+      t7 = $[28];
     }
     let t8;
-    if ($[28] !== activeIndex || $[29] !== setActiveIndex || $[30] !== i18n || $[31] !== t || $[32] !== handleRemoveFile) {
+    if ($[29] !== activeIndex || $[30] !== setActiveIndex || $[31] !== thumbnailUrls || $[32] !== i18n || $[33] !== t || $[34] !== handleRemoveFile) {
       t8 = (t9, index_0) => {
         const {
           errorCount,
@@ -120,7 +121,7 @@ export function FileSidebar() {
             type: "button",
             children: [_jsx(Thumbnail, {
               className: `${baseClass}__thumbnail`,
-              fileSrc: isImage(currentFile.type) ? URL.createObjectURL(currentFile) : undefined
+              fileSrc: isImage(currentFile.type) ? thumbnailUrls[index_0] : undefined
             }), _jsx("div", {
               className: `${baseClass}__fileDetails`,
               children: _jsx("p", {
@@ -148,14 +149,15 @@ export function FileSidebar() {
           })]
         }, index_0);
       };
-      $[28] = activeIndex;
-      $[29] = setActiveIndex;
-      $[30] = i18n;
-      $[31] = t;
-      $[32] = handleRemoveFile;
-      $[33] = t8;
+      $[29] = activeIndex;
+      $[30] = setActiveIndex;
+      $[31] = thumbnailUrls;
+      $[32] = i18n;
+      $[33] = t;
+      $[34] = handleRemoveFile;
+      $[35] = t8;
     } else {
-      t8 = $[33];
+      t8 = $[35];
     }
     t5 = _jsxs("div", {
       className: t4,
@@ -182,13 +184,19 @@ export function FileSidebar() {
             children: [typeof maxFiles === "number" && totalFileCount < maxFiles ? _jsx(Pill, {
               onClick: () => openModal(addMoreFilesDrawerSlug),
               children: t("upload:addFile")
-            }) : null, _jsx(Button, {
+            }) : null, _jsxs(Button, {
               buttonStyle: "transparent",
               className: `${baseClass}__toggler`,
               onClick: t6,
-              children: _jsx(ChevronIcon, {
+              children: [_jsx("span", {
+                className: `${baseClass}__toggler__label`,
+                children: _jsxs("strong", {
+                  title: `${totalFileCount} ${t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")}`,
+                  children: [totalFileCount, " ", t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")]
+                })
+              }), _jsx(ChevronIcon, {
                 direction: showFiles ? "down" : "up"
-              })
+              })]
             }), _jsx(Drawer, {
               gutter: false,
               Header: null,
@@ -230,11 +238,12 @@ export function FileSidebar() {
     $[19] = initialFiles;
     $[20] = activeIndex;
     $[21] = setActiveIndex;
-    $[22] = handleRemoveFile;
-    $[23] = t4;
-    $[24] = t5;
+    $[22] = thumbnailUrls;
+    $[23] = handleRemoveFile;
+    $[24] = t4;
+    $[25] = t5;
   } else {
-    t5 = $[24];
+    t5 = $[25];
   }
   return t5;
 }