@payloadcms/ui 4.0.0-canary.0 → 4.0.0-canary.2

package/dist/elements/BulkUpload/EditMany/index.css

@@ -0,0 +1,71 @@
+@layer payload-default {
+  .edit-many-bulk-uploads__form {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    flex-grow: 1;
+  }
+
+  .edit-many-bulk-uploads__header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    padding: var(--spacer-2-5) var(--spacer-3) var(--spacer-2-5) var(--spacer-2);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    background: var(--color-bg);
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  .edit-many-bulk-uploads__header__close {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .edit-many-bulk-uploads__header__title {
+    margin: 0;
+    flex: 1 0 0;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: var(--color-text);
+    font-family: var(--text-body-large-strong-font-family);
+    font-size: var(--text-body-large-strong-font-size);
+    font-weight: var(--text-body-large-strong-font-weight);
+    line-height: var(--text-body-large-strong-line-height);
+    letter-spacing: var(--text-body-large-strong-letter-spacing);
+  }
+
+  .edit-many-bulk-uploads__header__actions {
+    display: flex;
+    gap: var(--spacer-2);
+    align-items: center;
+
+    .btn {
+      margin: 0;
+    }
+  }
+
+  .edit-many-bulk-uploads__body {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .edit-many-bulk-uploads__select-fields {
+    padding: var(--spacer-4);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+
+    .field-select {
+      margin-bottom: 0;
+    }
+  }
+
+  .edit-many-bulk-uploads__edit {
+    padding: var(--spacer-4);
+    flex-grow: 1;
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { ClientCollectionConfig } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const baseClass = "edit-many-bulk-uploads";
 export type EditManyBulkUploadsProps = {
     readonly collection: ClientCollectionConfig;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/EditMany/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErD,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,2BAA2B,CAAA;AAEjD,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,UAAU,EAAE,sBAAsB,CAAA;CAC5C,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAsClE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/EditMany/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErD,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,SAAS,2BAA2B,CAAA;AAEjD,MAAM,MAAM,wBAAwB,GAAG;IACrC,QAAQ,CAAC,UAAU,EAAE,sBAAsB,CAAA;CAC5C,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAsClE,CAAA"}

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

@@ -9,7 +9,7 @@ import { useTranslation } from '../../../providers/Translation/index.js';
 import { Drawer, DrawerToggler } from '../../Drawer/index.js';
 import { useFormsManager } from '../FormsManager/index.js';
 import { EditManyBulkUploadsDrawerContent } from './DrawerContent.js';
-import './index.scss';
+import './index.css';
 export const baseClass = 'edit-many-bulk-uploads';
 export const EditManyBulkUploads = props => {
   const $ = _c(5);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useAuth","EditDepthProvider","useTranslation","Drawer","DrawerToggler","useFormsManager","EditManyBulkUploadsDrawerContent","baseClass","EditManyBulkUploads","props","$","collection","t0","slug","undefined","permissions","t","forms","collectionPermissions","collections","hasUpdatePermission","update","drawerSlug","t1","_jsxs","className","children","_jsx","buttonStyle","Header"],"sources":["../../../../src/elements/BulkUpload/EditMany/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { useAuth } from '../../../providers/Auth/index.js'\nimport { EditDepthProvider } from '../../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Drawer, DrawerToggler } from '../../Drawer/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport { EditManyBulkUploadsDrawerContent } from './DrawerContent.js'\nimport './index.scss'\n\nexport const baseClass = 'edit-many-bulk-uploads'\n\nexport type EditManyBulkUploadsProps = {\n  readonly collection: ClientCollectionConfig\n}\n\nexport const EditManyBulkUploads: React.FC<EditManyBulkUploadsProps> = (props) => {\n  const { collection: { slug } = {}, collection } = props\n\n  const { permissions } = useAuth()\n\n  const { t } = useTranslation()\n  const { forms } = useFormsManager() // Access forms managed in bulk uploads\n\n  const collectionPermissions = permissions?.collections?.[slug]\n  const hasUpdatePermission = collectionPermissions?.update\n\n  const drawerSlug = `edit-${slug}-bulk-uploads`\n\n  if (!hasUpdatePermission) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <DrawerToggler\n        aria-label={t('general:editAll')}\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__toggle`}\n        slug={drawerSlug}\n      >\n        {t('general:editAll')}\n      </DrawerToggler>\n      <EditDepthProvider>\n        <Drawer Header={null} slug={drawerSlug}>\n          <EditManyBulkUploadsDrawerContent\n            collection={collection}\n            drawerSlug={drawerSlug}\n            forms={forms}\n          />\n        </Drawer>\n      </EditDepthProvider>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,EAAEC,aAAa,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAChC,SAASC,gCAAgC,QAAQ;AACjD,OAAO;AAEP,OAAO,MAAMC,SAAA,GAAY;AAMzB,OAAO,MAAMC,mBAAA,GAA0DC,KAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EACrE;IAAAa,UAAA,EAAAC,EAAA;IAAAD;EAAA,IAAkDF,KAAA;EAA9B;IAAAI;EAAA,IAAAD,EAAa,KAAAE,SAAA,QAAbF,EAAa;EAEjC;IAAAG;EAAA,IAAwBf,OAAA;EAExB;IAAAgB;EAAA,IAAcd,cAAA;EACd;IAAAe;EAAA,IAAkBZ,eAAA;EAElB,MAAAa,qBAAA,GAA8BH,WAAA,EAAAI,WAAA,GAA2BN,IAAA;EACzD,MAAAO,mBAAA,GAA4BF,qBAAA,EAAAG,MAAA;EAE5B,MAAAC,UAAA,GAAmB,QAAQT,IAAA,eAAmB;EAAA,KAEzCO,mBAAA;IAAA;EAAA;EAAA,IAAAG,EAAA;EAAA,IAAAb,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAY,UAAA,IAAAZ,CAAA,QAAAO,KAAA,IAAAP,CAAA,QAAAM,CAAA;IAKHO,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAlB,SAAA;MAAAmB,QAAA,GACCC,IAAA,CAAAvB,aAAA;QAAA,cACcY,CAAA,CAAE;QAAAY,WAAA,EACF;QAAAH,SAAA,EACD,GAAAlB,SAAA,UAAsB;QAAAM,IAAA,EAC3BS,UAAA;QAAAI,QAAA,EAELV,CAAA,CAAE;MAAA,C,GAELW,IAAA,CAAA1B,iBAAA;QAAAyB,QAAA,EACEC,IAAA,CAAAxB,MAAA;UAAA0B,MAAA;UAAAhB,IAAA,EAA4BS,UAAA;UAAAA,QAAA,EAC1BK,IAAA,CAAArB,gCAAA;YAAAK,UAAA;YAAAW,UAAA;YAAAL;UAAA,C;;;;;;;;;;;;SAXNM,E;CAoBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useAuth","EditDepthProvider","useTranslation","Drawer","DrawerToggler","useFormsManager","EditManyBulkUploadsDrawerContent","baseClass","EditManyBulkUploads","props","$","collection","t0","slug","undefined","permissions","t","forms","collectionPermissions","collections","hasUpdatePermission","update","drawerSlug","t1","_jsxs","className","children","_jsx","buttonStyle","Header"],"sources":["../../../../src/elements/BulkUpload/EditMany/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { useAuth } from '../../../providers/Auth/index.js'\nimport { EditDepthProvider } from '../../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Drawer, DrawerToggler } from '../../Drawer/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport { EditManyBulkUploadsDrawerContent } from './DrawerContent.js'\nimport './index.css'\n\nexport const baseClass = 'edit-many-bulk-uploads'\n\nexport type EditManyBulkUploadsProps = {\n  readonly collection: ClientCollectionConfig\n}\n\nexport const EditManyBulkUploads: React.FC<EditManyBulkUploadsProps> = (props) => {\n  const { collection: { slug } = {}, collection } = props\n\n  const { permissions } = useAuth()\n\n  const { t } = useTranslation()\n  const { forms } = useFormsManager() // Access forms managed in bulk uploads\n\n  const collectionPermissions = permissions?.collections?.[slug]\n  const hasUpdatePermission = collectionPermissions?.update\n\n  const drawerSlug = `edit-${slug}-bulk-uploads`\n\n  if (!hasUpdatePermission) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <DrawerToggler\n        aria-label={t('general:editAll')}\n        buttonStyle=\"secondary\"\n        className={`${baseClass}__toggle`}\n        slug={drawerSlug}\n      >\n        {t('general:editAll')}\n      </DrawerToggler>\n      <EditDepthProvider>\n        <Drawer Header={null} slug={drawerSlug}>\n          <EditManyBulkUploadsDrawerContent\n            collection={collection}\n            drawerSlug={drawerSlug}\n            forms={forms}\n          />\n        </Drawer>\n      </EditDepthProvider>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,EAAEC,aAAa,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAChC,SAASC,gCAAgC,QAAQ;AACjD,OAAO;AAEP,OAAO,MAAMC,SAAA,GAAY;AAMzB,OAAO,MAAMC,mBAAA,GAA0DC,KAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EACrE;IAAAa,UAAA,EAAAC,EAAA;IAAAD;EAAA,IAAkDF,KAAA;EAA9B;IAAAI;EAAA,IAAAD,EAAa,KAAAE,SAAA,QAAbF,EAAa;EAEjC;IAAAG;EAAA,IAAwBf,OAAA;EAExB;IAAAgB;EAAA,IAAcd,cAAA;EACd;IAAAe;EAAA,IAAkBZ,eAAA;EAElB,MAAAa,qBAAA,GAA8BH,WAAA,EAAAI,WAAA,GAA2BN,IAAA;EACzD,MAAAO,mBAAA,GAA4BF,qBAAA,EAAAG,MAAA;EAE5B,MAAAC,UAAA,GAAmB,QAAQT,IAAA,eAAmB;EAAA,KAEzCO,mBAAA;IAAA;EAAA;EAAA,IAAAG,EAAA;EAAA,IAAAb,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAY,UAAA,IAAAZ,CAAA,QAAAO,KAAA,IAAAP,CAAA,QAAAM,CAAA;IAKHO,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAlB,SAAA;MAAAmB,QAAA,GACCC,IAAA,CAAAvB,aAAA;QAAA,cACcY,CAAA,CAAE;QAAAY,WAAA,EACF;QAAAH,SAAA,EACD,GAAAlB,SAAA,UAAsB;QAAAM,IAAA,EAC3BS,UAAA;QAAAI,QAAA,EAELV,CAAA,CAAE;MAAA,C,GAELW,IAAA,CAAA1B,iBAAA;QAAAyB,QAAA,EACEC,IAAA,CAAAxB,MAAA;UAAA0B,MAAA;UAAAhB,IAAA,EAA4BS,UAAA;UAAAA,QAAA,EAC1BK,IAAA,CAAArB,gCAAA;YAAAK,UAAA;YAAAW,UAAA;YAAAL;UAAA,C;;;;;;;;;;;;SAXNM,E;CAoBJ","ignoreList":[]}

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

@@ -1,25 +1,24 @@
 @layer payload-default {
   .file-selections {
-    --file-gutter-h: calc(var(--gutter-h) / 4);
-    border-right: 1px solid var(--theme-border-color);
+    --file-gutter-h: var(--spacer-2);
+    border-right: 1px solid var(--color-border);
     padding: 0;
     display: flex;
     flex-direction: column;
-    width: 300px;
+    width: 250px;
     overflow: visible;
-    max-height: 100%;
+    max-height: 100dvh;
   }
 
   .file-selections__header {
     position: sticky;
     top: 0;
-    margin-top: var(--spacer-4);
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    background: var(--theme-bg);
+    background: var(--color-bg);
     flex-wrap: wrap;
 
     p {
@@ -27,6 +26,10 @@
     }
   }
 
+  .file-selections__header--hasErrors {
+    padding-top: var(--spacer-2);
+  }
+
   .file-selections__collectionSelect {
     width: 100%;
 
@@ -43,24 +46,26 @@
 
   .file-selections__headerTopRow {
     display: flex;
-    align-items: flex-end;
+    align-items: center;
     justify-content: space-between;
     gap: var(--spacer-4);
     width: 100%;
-    padding-block: var(--spacer-4);
+    padding-block: var(--spacer-2-5);
     padding-inline: var(--file-gutter-h);
   }
 
-  .file-selections__header__text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacer-2);
+  .file-selections__header__error {
+    padding-inline: var(--file-gutter-h);
 
     .error-pill {
       align-self: flex-start;
     }
   }
 
+  .file-selections__selectedCount {
+    margin: 0;
+  }
+
   .file-selections__filesContainer {
     display: flex;
     flex-direction: column;
@@ -94,7 +99,7 @@
     width: 100%;
 
     &:hover {
-      background-color: var(--theme-elevation-100);
+      background-color: var(--color-bg-hover);
     }
 
     .file-selections__thumbnail,
@@ -111,6 +116,11 @@
     }
   }
 
+  .file-selections__fileRowContainer:has(.file-selections__remove--overlay:hover)
+    .file-selections__fileRow {
+    background-color: var(--color-bg-hover);
+  }
+
   .file-selections__fileDetails {
     display: flex;
     flex-direction: column;
@@ -119,7 +129,7 @@
 
   .file-selections__fileRowContainer--active {
     .file-selections__fileRow {
-      background-color: var(--theme-elevation-100);
+      background-color: var(--color-bg-hover);
     }
 
     .file-selections__remove {
@@ -129,25 +139,6 @@
     }
   }
 
-  .file-selections__fileRowContainer--error {
-    .file-selections__fileRow {
-      background-color: var(--theme-error-100);
-    }
-
-    &.file-selections__fileRowContainer--active .file-selections__fileRow,
-    .file-selections__fileRow:hover {
-      background-color: var(--theme-error-200);
-    }
-
-    .file-selections__remove--overlay:hover {
-      background-color: var(--theme-error-50);
-
-      .icon--x {
-        opacity: 1;
-      }
-    }
-  }
-
   .file-selections__errorCount {
     margin-left: auto;
     position: absolute;
@@ -167,7 +158,7 @@
     font-size: var(--text-body-small-font-size);
     font-weight: var(--text-body-small-font-weight);
     line-height: var(--text-body-small-line-height);
-    color: var(--theme-elevation-400);
+    color: var(--color-text-tertiary);
     flex-shrink: 0;
   }
 
@@ -196,14 +187,18 @@
     cursor: pointer;
 
     &:hover {
-      background-color: var(--theme-elevation-200);
+      background-color: var(--color-bg-tertiary);
+
+      .icon--x {
+        opacity: 1;
+      }
     }
   }
 
   .file-selections__header__actions {
     display: flex;
     align-items: center;
-    gap: var(--spacer-4);
+    gap: var(--spacer-2);
   }
 
   .file-selections__toggler {
@@ -212,10 +207,6 @@
     padding-block: 0;
   }
 
-  .file-selections__toggler__text {
-    display: none;
-  }
-
   .file-selections__header__mobileDocActions {
     display: none;
   }
@@ -241,7 +232,7 @@
     }
 
     &::before {
-      background: var(--theme-bg);
+      background: var(--color-bg);
       opacity: 0.75;
     }
 
@@ -279,7 +270,7 @@
       }
 
       &::before {
-        background: var(--theme-bg);
+        background: var(--color-bg);
         opacity: 0.75;
       }
 
@@ -294,73 +285,61 @@
 
     .file-selections__header {
       margin-top: 0;
+      border-top: 1px solid var(--color-border);
+      gap: var(--spacer-2-5);
+      padding-block: var(--spacer-2-5);
+      padding-inline: var(--file-gutter-h);
+    }
+
+    .file-selections__header__error {
+      padding-inline: 0;
     }
 
     .file-selections__headerTopRow {
-      border-top: 1px solid var(--theme-border-color);
-      padding-block: 0 var(--spacer-3) 0;
+      padding-block: 0;
+      padding-inline: 0;
+      flex: 1;
+      width: auto;
     }
 
-    .file-selections__header__text {
+    .file-selections__selectedCount {
       display: none;
     }
 
     .file-selections__header__actions {
-      flex-grow: 2;
       display: flex;
       justify-content: flex-end;
+      padding-block: 0;
     }
 
     .file-selections__header__mobileDocActions {
       position: relative;
       display: flex;
-      width: 100%;
-      padding-block: var(--spacer-3);
-      padding-inline: var(--file-gutter-h);
-      border-top: 1px solid var(--theme-border-color);
+      justify-content: flex-end;
+      margin-inline-start: auto;
+      padding-block: 0;
 
       > div {
         display: flex;
         justify-content: flex-end;
-        width: 100%;
 
         button {
-          flex: 0.5;
+          flex: 0 0 auto;
         }
       }
     }
 
     .file-selections__toggler {
-      padding-right: 0;
-      padding-left: 0;
-      padding-top: var(--spacer-3);
-      padding-bottom: var(--spacer-3);
+      margin: 0;
+      padding-inline-end: 0;
       display: flex;
       justify-content: flex-end;
       flex-grow: 1;
 
-      .btn__label {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-
-      svg {
-        max-width: 1.5rem;
-      }
-
       .btn__content {
         width: 100%;
+        justify-content: space-between;
       }
     }
-
-    .file-selections__toggler__text {
-      display: flex;
-    }
-
-    .file-selections .btn {
-      margin: 0;
-    }
   }
 }

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,aAAa,CAAA;AAQpB,wBAAgB,WAAW,sBA8M1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,OAAO,aAAa,CAAA;AAQpB,wBAAgB,WAAW,sBAsN1B"}

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

@@ -26,7 +26,7 @@ import { useBulkUpload } from '../index.js';
 const addMoreFilesDrawerSlug = 'bulk-upload-drawer--add-more-files';
 const baseClass = 'file-selections';
 export function FileSidebar() {
-  const $ = _c(39);
+  const $ = _c(41);
   const {
     activeIndex,
     addFiles,
@@ -99,29 +99,38 @@ export function FileSidebar() {
   const t4 = t3.join(" ");
   let t5;
   if ($[7] !== activeIndex || $[8] !== breakpoints.m || $[9] !== bulkUploadCollectionSlug || $[10] !== closeModal || $[11] !== forms || $[12] !== getEntityConfig || $[13] !== handleAddFiles || $[14] !== handleRemoveFile || $[15] !== i18n || $[16] !== initialFiles || $[17] !== initialForms || $[18] !== isInitializing || $[19] !== maxFiles || $[20] !== openModal || $[21] !== selectableCollections || $[22] !== setActiveIndex || $[23] !== setCollectionSlug || $[24] !== showFiles || $[25] !== t || $[26] !== t4 || $[27] !== totalErrorCount || $[28] !== totalFileCount) {
-    let t6;
-    if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-      t6 = () => setShowFiles(_temp2);
+    const t6 = totalErrorCount > 0 && `${baseClass}__header--hasErrors`;
+    let t7;
+    if ($[30] !== t6) {
+      t7 = [`${baseClass}__header`, t6].filter(Boolean);
       $[30] = t6;
+      $[31] = t7;
     } else {
-      t6 = $[30];
+      t7 = $[31];
     }
-    let t7;
-    if ($[31] !== closeModal) {
-      t7 = () => closeModal(addMoreFilesDrawerSlug);
-      $[31] = closeModal;
-      $[32] = t7;
+    let t8;
+    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+      t8 = () => setShowFiles(_temp2);
+      $[32] = t8;
     } else {
-      t7 = $[32];
+      t8 = $[32];
     }
-    let t8;
-    if ($[33] !== activeIndex || $[34] !== handleRemoveFile || $[35] !== i18n || $[36] !== setActiveIndex || $[37] !== t) {
-      t8 = (t9, index_0) => {
+    let t9;
+    if ($[33] !== closeModal) {
+      t9 = () => closeModal(addMoreFilesDrawerSlug);
+      $[33] = closeModal;
+      $[34] = t9;
+    } else {
+      t9 = $[34];
+    }
+    let t10;
+    if ($[35] !== activeIndex || $[36] !== handleRemoveFile || $[37] !== i18n || $[38] !== setActiveIndex || $[39] !== t) {
+      t10 = (t11, index_0) => {
         const {
           errorCount,
           formID,
           formState
-        } = t9;
+        } = t11;
         const currentFile = formState?.file?.value || {};
         return _jsxs("div", {
           className: [`${baseClass}__fileRowContainer`, index_0 === activeIndex && `${baseClass}__fileRowContainer--active`, errorCount && errorCount > 0 && `${baseClass}__fileRowContainer--error`].filter(Boolean).join(" "),
@@ -159,21 +168,21 @@ export function FileSidebar() {
           })]
         }, formID);
       };
-      $[33] = activeIndex;
-      $[34] = handleRemoveFile;
-      $[35] = i18n;
-      $[36] = setActiveIndex;
-      $[37] = t;
-      $[38] = t8;
+      $[35] = activeIndex;
+      $[36] = handleRemoveFile;
+      $[37] = i18n;
+      $[38] = setActiveIndex;
+      $[39] = t;
+      $[40] = t10;
     } else {
-      t8 = $[38];
+      t10 = $[40];
     }
     t5 = _jsxs("div", {
       className: t4,
       children: [breakpoints.m && showFiles ? _jsx("div", {
         className: `${baseClass}__mobileBlur`
       }) : null, _jsxs("div", {
-        className: `${baseClass}__header`,
+        className: t7.join(" "),
         children: [selectableCollections?.length > 1 && _jsx(SelectInput, {
           className: `${baseClass}__collectionSelect`,
           isClearable: false,
@@ -194,20 +203,21 @@ export function FileSidebar() {
           path: "groupBy",
           required: true,
           value: bulkUploadCollectionSlug
-        }), _jsxs("div", {
+        }), totalErrorCount > 0 ? _jsx("div", {
+          className: `${baseClass}__header__error`,
+          children: _jsx(ErrorPill, {
+            count: totalErrorCount,
+            i18n,
+            withMessage: true
+          })
+        }) : null, _jsxs("div", {
           className: `${baseClass}__headerTopRow`,
-          children: [_jsxs("div", {
-            className: `${baseClass}__header__text`,
-            children: [_jsx(ErrorPill, {
-              count: totalErrorCount,
-              i18n,
-              withMessage: true
-            }), _jsx("p", {
-              children: _jsxs("strong", {
-                title: `${totalFileCount} ${t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")}`,
-                children: [totalFileCount, " ", t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")]
-              })
-            })]
+          children: [_jsx("p", {
+            className: `${baseClass}__selectedCount`,
+            children: _jsxs("strong", {
+              title: `${totalFileCount} ${t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")}`,
+              children: [totalFileCount, " ", t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")]
+            })
           }), _jsxs("div", {
             className: `${baseClass}__header__actions`,
             children: [(typeof maxFiles === "number" ? totalFileCount < maxFiles : true) ? _jsx(Button, {
@@ -216,24 +226,24 @@ export function FileSidebar() {
               onClick: () => openModal(addMoreFilesDrawerSlug),
               size: "medium",
               children: t("upload:addFile")
-            }) : null, _jsxs(Button, {
+            }) : null, _jsx(Button, {
               buttonStyle: "secondary",
               className: `${baseClass}__toggler`,
-              onClick: t6,
-              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"
-              })]
+              icon: _jsx(ChevronIcon, {
+                direction: showFiles ? "down" : "up",
+                size: 16
+              }),
+              onClick: t8,
+              selected: showFiles,
+              children: _jsxs("strong", {
+                title: `${totalFileCount} ${t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")}`,
+                children: [totalFileCount, " ", t(totalFileCount > 1 ? "upload:filesToUpload" : "upload:fileToUpload")]
+              })
             }), _jsx(Drawer, {
               Header: null,
               slug: addMoreFilesDrawerSlug,
               children: _jsx(AddFilesView, {
-                onCancel: t7,
+                onCancel: t9,
                 onDrop: handleAddFiles
               })
             })]
@@ -243,12 +253,12 @@ export function FileSidebar() {
           children: _jsx(Actions, {})
         })]
       }), _jsx("div", {
-        className: `${baseClass}__animateWrapper`,
+        className: `${baseClass}__animateWrapper scrollbar-thin`,
         children: _jsx(AnimateHeight, {
           height: !breakpoints.m || showFiles ? "auto" : 0,
           children: _jsxs("div", {
             className: `${baseClass}__filesContainer`,
-            children: [isInitializing && forms.length === 0 && (initialFiles?.length > 0 || initialForms?.length > 0) ? (initialFiles ? Array.from(initialFiles) : initialForms).map(_temp3) : null, forms.map(t8)]
+            children: [isInitializing && forms.length === 0 && (initialFiles?.length > 0 || initialForms?.length > 0) ? (initialFiles ? Array.from(initialFiles) : initialForms).map(_temp3) : null, forms.map(t10)]
           })
         })
       })]