@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.4804abd

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

@@ -2,17 +2,20 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
 import React from 'react';
+import { WriteIcon } from '../../../icons/Write/index.js';
 import { useAuth } from '../../../providers/Auth/index.js';
 import { EditDepthProvider } from '../../../providers/EditDepth/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import { Drawer, DrawerToggler } from '../../Drawer/index.js';
+import { Button } from '../../Button/index.js';
+import { Drawer } 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);
+  const $ = _c(9);
   const {
     collection: t0,
     collection
@@ -29,6 +32,9 @@ export const EditManyBulkUploads = props => {
   const {
     forms
   } = useFormsManager();
+  const {
+    openModal
+  } = useModal();
   const collectionPermissions = permissions?.collections?.[slug];
   const hasUpdatePermission = collectionPermissions?.update;
   const drawerSlug = `edit-${slug}-bulk-uploads`;
@@ -36,13 +42,25 @@ export const EditManyBulkUploads = props => {
     return null;
   }
   let t1;
-  if ($[0] !== collection || $[1] !== drawerSlug || $[2] !== forms || $[3] !== t) {
+  if ($[0] !== collection || $[1] !== drawerSlug || $[2] !== forms || $[3] !== openModal || $[4] !== t) {
+    let t2;
+    if ($[6] !== drawerSlug || $[7] !== openModal) {
+      t2 = () => openModal(drawerSlug);
+      $[6] = drawerSlug;
+      $[7] = openModal;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
     t1 = _jsxs("div", {
       className: baseClass,
-      children: [_jsx(DrawerToggler, {
-        "aria-label": t("general:editAll"),
-        className: `${baseClass}__toggle`,
-        slug: drawerSlug,
+      children: [_jsx(Button, {
+        buttonStyle: "secondary",
+        icon: _jsx(WriteIcon, {
+          size: 24
+        }),
+        iconPosition: "left",
+        onClick: t2,
         children: t("general:editAll")
       }), _jsx(EditDepthProvider, {
         children: _jsx(Drawer, {
@@ -59,10 +77,11 @@ export const EditManyBulkUploads = props => {
     $[0] = collection;
     $[1] = drawerSlug;
     $[2] = forms;
-    $[3] = t;
-    $[4] = t1;
+    $[3] = openModal;
+    $[4] = t;
+    $[5] = t1;
   } else {
-    t1 = $[4];
+    t1 = $[5];
   }
   return t1;
 };

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","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        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;QAAAS,SAAA,EACH,GAAAlB,SAAA,UAAsB;QAAAM,IAAA,EAC3BS,UAAA;QAAAI,QAAA,EAELV,CAAA,CAAE;MAAA,C,GAELW,IAAA,CAAA1B,iBAAA;QAAAyB,QAAA,EACEC,IAAA,CAAAxB,MAAA;UAAAyB,MAAA;UAAAf,IAAA,EAA4BS,UAAA;UAAAI,QAAA,EAC1BC,IAAA,CAAArB,gCAAA;YAAAK,UAAA;YAAAW,UAAA;YAAAL;UAAA,C;;;;;;;;;;;;SAVNM,E;CAmBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useModal","React","WriteIcon","useAuth","EditDepthProvider","useTranslation","Button","Drawer","useFormsManager","EditManyBulkUploadsDrawerContent","baseClass","EditManyBulkUploads","props","$","collection","t0","slug","undefined","permissions","t","forms","openModal","collectionPermissions","collections","hasUpdatePermission","update","drawerSlug","t1","t2","_jsxs","className","children","_jsx","buttonStyle","icon","size","onClick","Header"],"sources":["../../../../src/elements/BulkUpload/EditMany/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport React from 'react'\n\nimport { WriteIcon } from '../../../icons/Write/index.js'\nimport { useAuth } from '../../../providers/Auth/index.js'\nimport { EditDepthProvider } from '../../../providers/EditDepth/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Drawer } from '../../Drawer/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport { EditManyBulkUploadsDrawerContent } from './DrawerContent.js'\nimport './index.css'\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  const { openModal } = useModal()\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      <Button\n        buttonStyle=\"secondary\"\n        icon={<WriteIcon size={24} />}\n        iconPosition=\"left\"\n        onClick={() => openModal(drawerSlug)}\n      >\n        {t('general:editAll')}\n      </Button>\n\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,SAASC,QAAQ,QAAQ;AACzB,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,OAAO,QAAQ;AACxB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,eAAe,QAAQ;AAChC,SAASC,gCAAgC,QAAQ;AACjD,OAAO;AACP,OAAO,MAAMC,SAAA,GAAY;AAMzB,OAAO,MAAMC,mBAAA,GAA0DC,KAAA;EAAA,MAAAC,CAAA,GAAAd,EAAA;EACrE;IAAAe,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;EAClB;IAAAa;EAAA,IAAsBrB,QAAA;EAEtB,MAAAsB,qBAAA,GAA8BJ,WAAA,EAAAK,WAAA,GAA2BP,IAAA;EACzD,MAAAQ,mBAAA,GAA4BF,qBAAA,EAAAG,MAAA;EAE5B,MAAAC,UAAA,GAAmB,QAAQV,IAAA,eAAmB;EAAA,KAEzCQ,mBAAA;IAAA;EAAA;EAAA,IAAAG,EAAA;EAAA,IAAAd,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAa,UAAA,IAAAb,CAAA,QAAAO,KAAA,IAAAP,CAAA,QAAAQ,SAAA,IAAAR,CAAA,QAAAM,CAAA;IAAA,IAAAS,EAAA;IAAA,IAAAf,CAAA,QAAAa,UAAA,IAAAb,CAAA,QAAAQ,SAAA;MAUUO,EAAA,GAAAA,CAAA,KAAMP,SAAA,CAAUK,UAAA;MAAAb,CAAA,MAAAa,UAAA;MAAAb,CAAA,MAAAQ,SAAA;MAAAR,CAAA,MAAAe,EAAA;IAAA;MAAAA,EAAA,GAAAf,CAAA;IAAA;IAL7Bc,EAAA,GAAAE,KAAA,CAAC;MAAAC,SAAA,EAAApB,SAAA;MAAAqB,QAAA,GACCC,IAAA,CAAA1B,MAAA;QAAA2B,WAAA,EACc;QAAAC,IAAA,EACNF,IAAA,CAAA9B,SAAA;UAAAiC,IAAA;QAAA,C;sBACO;QAAAC,OAAA,EACJR,EAAgB;QAAAG,QAAA,EAExBZ,CAAA,CAAE;MAAA,C,GAGLa,IAAA,CAAA5B,iBAAA;QAAA2B,QAAA,EACEC,IAAA,CAAAzB,MAAA;UAAA8B,MAAA;UAAArB,IAAA,EAA4BU,UAAA;UAAAA,QAAA,EAC1BM,IAAA,CAAAvB,gCAAA;YAAAK,UAAA;YAAAY,UAAA;YAAAN;UAAA,C;;;;;;;;;;;;;SAZNO,E;CAqBJ","ignoreList":[]}

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

@@ -0,0 +1,265 @@
+@layer payload-default {
+  .file-selections {
+    --file-gutter-h: var(--spacer-2);
+    border-right: var(--stroke-width-small) solid var(--color-border);
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    /* File tree takes 3fr of the 3fr : 4fr : 5fr file-manager layout (≈236px). */
+    flex: 3 1 0;
+    min-width: 0;
+    overflow: visible;
+    max-height: 100dvh;
+  }
+
+  .file-selections__header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    background: var(--color-bg);
+    flex-wrap: wrap;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .file-selections__collectionSelect {
+    width: 100%;
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+
+    .react-select {
+      width: 100%;
+    }
+
+    .field-type__wrap {
+      width: 100%;
+      padding-block: var(--spacer-2-5);
+      padding-inline: var(--file-gutter-h);
+    }
+  }
+
+  .file-selections__filesContainer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    margin-top: var(--spacer-2);
+    width: 100%;
+    padding-inline: var(--file-gutter-h);
+
+    .shimmer-effect {
+      border-radius: var(--radius-medium);
+    }
+  }
+
+  .file-selections__fileRowContainer {
+    --rowPadding: var(--spacer-2);
+    position: relative;
+
+    &:last-child {
+      margin-bottom: var(--spacer-2);
+    }
+  }
+
+  .file-selections__fileRow {
+    display: flex;
+    padding: var(--rowPadding);
+    align-items: center;
+    gap: var(--spacer-2-5);
+    border-radius: var(--radius-medium);
+    max-width: 100%;
+    cursor: pointer;
+    width: 100%;
+
+    &:hover {
+      background-color: var(--color-bg-hover);
+    }
+
+    .file-selections__thumbnail,
+    .file-selections__thumbnail-shimmer {
+      width: var(--spacer-4);
+      height: var(--spacer-4);
+      border-radius: var(--radius-small);
+      flex-shrink: 0;
+      object-fit: cover;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .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;
+    min-width: 0;
+  }
+
+  .file-selections__fileRowContainer--active {
+    .file-selections__fileRow {
+      background-color: var(--color-bg-hover);
+    }
+
+    .file-selections__remove {
+      .icon--x {
+        opacity: 1;
+      }
+    }
+  }
+
+  .file-selections__errorCount {
+    margin-left: auto;
+    position: absolute;
+    transform: translate(50%, -50%);
+    top: 0;
+    right: 0;
+  }
+
+  .file-selections__fileName {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .file-selections__fileSize {
+    font-family: var(--text-body-small-font-family);
+    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(--color-text-tertiary);
+    flex-shrink: 0;
+  }
+
+  .file-selections__remove {
+    margin: 0;
+    margin-left: auto;
+
+    .icon--x {
+      opacity: 0.75;
+    }
+  }
+
+  .file-selections__remove--underlay {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  .file-selections__remove--overlay {
+    position: absolute;
+    top: 50%;
+    right: var(--rowPadding);
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--radius-medium);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--color-bg-tertiary);
+
+      .icon--x {
+        opacity: 1;
+      }
+    }
+  }
+
+  .file-selections__animateWrapper {
+    overflow: auto;
+  }
+
+  @media (max-width: 1024px) {
+    .file-selections {
+      --file-gutter-h: var(--gutter-h);
+      flex-direction: column-reverse;
+      width: 100%;
+      position: sticky;
+      bottom: 0;
+      flex-shrink: 0;
+      border-right: 0;
+      border-top: var(--stroke-width-small) solid var(--color-border);
+      background: var(--color-bg);
+      flex: 1;
+    }
+
+    /* The file list becomes a horizontal thumbnail carousel that scrolls sideways along the bottom
+       of the body instead of stacking vertically. */
+    .file-selections__animateWrapper {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+
+    .file-selections__filesContainer {
+      flex-direction: row;
+      margin-top: 0;
+      padding-block: var(--spacer-2);
+      width: max-content;
+      min-width: 100%;
+    }
+
+    .file-selections__fileRowContainer {
+      z-index: 1;
+      flex: 0 0 auto;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    /* Each carousel item is a compact thumbnail; the file name, size and the desktop remove-button
+       spacer are hidden to keep the strip tight (the active file's name shows in the preview area). */
+    .file-selections__fileRow {
+      gap: 0;
+      padding: var(--spacer-1);
+
+      .file-selections__thumbnail,
+      .file-selections__thumbnail-shimmer {
+        width: var(--spacer-6);
+        height: var(--spacer-6);
+      }
+    }
+
+    .file-selections__fileDetails,
+    .file-selections__fileSize,
+    .file-selections__remove--underlay {
+      display: none;
+    }
+
+    .file-selections__fileRowContainer--active .file-selections__thumbnail {
+      outline: var(--stroke-width-small) solid var(--color-text);
+      outline-offset: 2px;
+    }
+
+    .file-selections__remove--overlay {
+      top: var(--spacer-1);
+      right: var(--spacer-1);
+      transform: none;
+      width: 20px;
+      height: 20px;
+      background: var(--color-bg);
+    }
+
+    .file-selections__header {
+      margin-top: 0;
+      border-top: var(--stroke-width-small) 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;
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare function FileSidebar(): React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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;AAiBzB,OAAO,cAAc,CAAA;AAQrB,wBAAgB,WAAW,sBA6M1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/FileSidebar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,aAAa,CAAA;AAMpB,wBAAgB,WAAW,sBA8H1B"}

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

@@ -2,58 +2,37 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useModal } from '@faceless-ui/modal';
-import { useWindowInfo } from '@faceless-ui/window-info';
 import { isImage } from 'payload/shared';
 import React from 'react';
 import { SelectInput } from '../../../fields/Select/Input.js';
-import { ChevronIcon } from '../../../icons/Chevron/index.js';
 import { XIcon } from '../../../icons/X/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import { AnimateHeight } from '../../AnimateHeight/index.js';
-import { Button } from '../../Button/index.js';
-import { Drawer } from '../../Drawer/index.js';
 import { ErrorPill } from '../../ErrorPill/index.js';
-import { Pill } from '../../Pill/index.js';
 import { ShimmerEffect } from '../../ShimmerEffect/index.js';
 import { createThumbnail } from '../../Thumbnail/createThumbnail.js';
 import { Thumbnail } from '../../Thumbnail/index.js';
-import { Actions } from '../ActionsBar/index.js';
-import { AddFilesView } from '../AddFilesView/index.js';
-import './index.scss';
+import './index.css';
 import { useFormsManager } from '../FormsManager/index.js';
 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(22);
   const {
     activeIndex,
-    addFiles,
     forms,
     isInitializing,
     removeFile,
-    setActiveIndex,
-    totalErrorCount
+    setActiveIndex
   } = useFormsManager();
   const {
     initialFiles,
-    initialForms,
-    maxFiles
+    initialForms
   } = useBulkUpload();
   const {
     i18n,
     t
   } = useTranslation();
-  const {
-    closeModal,
-    openModal
-  } = useModal();
-  const [showFiles, setShowFiles] = React.useState(false);
-  const {
-    breakpoints
-  } = useWindowInfo();
   let t0;
   if ($[0] !== removeFile) {
     t0 = indexToRemove => {
@@ -65,21 +44,7 @@ export function FileSidebar() {
     t0 = $[1];
   }
   const handleRemoveFile = t0;
-  let t1;
-  if ($[2] !== addFiles || $[3] !== closeModal) {
-    t1 = filelist => {
-      addFiles(filelist);
-      closeModal(addMoreFilesDrawerSlug);
-    };
-    $[2] = addFiles;
-    $[3] = closeModal;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
-  const handleAddFiles = t1;
   const getFileSize = _temp;
-  const totalFileCount = isInitializing ? initialFiles?.length ?? initialForms?.length : forms.length;
   const {
     collectionSlug: bulkUploadCollectionSlug,
     selectableCollections,
@@ -88,41 +53,16 @@ export function FileSidebar() {
   const {
     getEntityConfig
   } = useConfig();
-  const t2 = showFiles && `${baseClass}__showingFiles`;
-  let t3;
-  if ($[5] !== t2) {
-    t3 = [baseClass, t2].filter(Boolean);
-    $[5] = t2;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  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);
-      $[30] = t6;
-    } else {
-      t6 = $[30];
-    }
-    let t7;
-    if ($[31] !== closeModal) {
-      t7 = () => closeModal(addMoreFilesDrawerSlug);
-      $[31] = closeModal;
-      $[32] = t7;
-    } else {
-      t7 = $[32];
-    }
-    let t8;
-    if ($[33] !== activeIndex || $[34] !== handleRemoveFile || $[35] !== i18n || $[36] !== setActiveIndex || $[37] !== t) {
-      t8 = (t9, index_0) => {
+  let t1;
+  if ($[2] !== activeIndex || $[3] !== bulkUploadCollectionSlug || $[4] !== forms || $[5] !== getEntityConfig || $[6] !== handleRemoveFile || $[7] !== i18n || $[8] !== initialFiles || $[9] !== initialForms || $[10] !== isInitializing || $[11] !== selectableCollections || $[12] !== setActiveIndex || $[13] !== setCollectionSlug || $[14] !== t) {
+    let t2;
+    if ($[16] !== activeIndex || $[17] !== handleRemoveFile || $[18] !== i18n || $[19] !== setActiveIndex || $[20] !== t) {
+      t2 = (t3, index_0) => {
         const {
           errorCount,
           formID,
           formState
-        } = t9;
+        } = t3;
         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(" "),
@@ -160,22 +100,20 @@ export function FileSidebar() {
           })]
         }, formID);
       };
-      $[33] = activeIndex;
-      $[34] = handleRemoveFile;
-      $[35] = i18n;
-      $[36] = setActiveIndex;
-      $[37] = t;
-      $[38] = t8;
+      $[16] = activeIndex;
+      $[17] = handleRemoveFile;
+      $[18] = i18n;
+      $[19] = setActiveIndex;
+      $[20] = t;
+      $[21] = t2;
     } else {
-      t8 = $[38];
+      t2 = $[21];
     }
-    t5 = _jsxs("div", {
-      className: t4,
-      children: [breakpoints.m && showFiles ? _jsx("div", {
-        className: `${baseClass}__mobileBlur`
-      }) : null, _jsxs("div", {
+    t1 = _jsxs("div", {
+      className: baseClass,
+      children: [selectableCollections?.length > 1 && _jsx("div", {
         className: `${baseClass}__header`,
-        children: [selectableCollections?.length > 1 && _jsx(SelectInput, {
+        children: _jsx(SelectInput, {
           className: `${baseClass}__collectionSelect`,
           isClearable: false,
           name: "groupBy",
@@ -195,102 +133,40 @@ export function FileSidebar() {
           path: "groupBy",
           required: true,
           value: bulkUploadCollectionSlug
-        }), _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")]
-              })
-            })]
-          }), _jsxs("div", {
-            className: `${baseClass}__header__actions`,
-            children: [(typeof maxFiles === "number" ? totalFileCount < maxFiles : true) ? _jsx(Pill, {
-              className: `${baseClass}__header__addFile`,
-              onClick: () => openModal(addMoreFilesDrawerSlug),
-              size: "small",
-              children: t("upload:addFile")
-            }) : null, _jsxs(Button, {
-              buttonStyle: "ghost",
-              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"
-              })]
-            }), _jsx(Drawer, {
-              gutter: false,
-              Header: null,
-              slug: addMoreFilesDrawerSlug,
-              children: _jsx(AddFilesView, {
-                onCancel: t7,
-                onDrop: handleAddFiles
-              })
-            })]
-          })]
-        }), _jsx("div", {
-          className: `${baseClass}__header__mobileDocActions`,
-          children: _jsx(Actions, {})
-        })]
+        })
       }), _jsx("div", {
-        className: `${baseClass}__animateWrapper`,
-        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)]
-          })
+        className: `${baseClass}__animateWrapper scrollbar-thin`,
+        children: _jsxs("div", {
+          className: `${baseClass}__filesContainer`,
+          children: [isInitializing && forms.length === 0 && (initialFiles?.length > 0 || initialForms?.length > 0) ? (initialFiles ? Array.from(initialFiles) : initialForms).map(_temp2) : null, forms.map(t2)]
         })
       })]
     });
-    $[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;
-    $[29] = t5;
+    $[2] = activeIndex;
+    $[3] = bulkUploadCollectionSlug;
+    $[4] = forms;
+    $[5] = getEntityConfig;
+    $[6] = handleRemoveFile;
+    $[7] = i18n;
+    $[8] = initialFiles;
+    $[9] = initialForms;
+    $[10] = isInitializing;
+    $[11] = selectableCollections;
+    $[12] = setActiveIndex;
+    $[13] = setCollectionSlug;
+    $[14] = t;
+    $[15] = t1;
   } else {
-    t5 = $[29];
+    t1 = $[15];
   }
-  return t5;
+  return t1;
 }
-function _temp3(file_0, index) {
+function _temp2(file_0, index) {
   return _jsx(ShimmerEffect, {
     animationDelay: `calc(${index} * ${60}ms)`,
     height: "35px"
   }, index);
 }
-function _temp2(prev) {
-  return !prev;
-}
 function _temp(file) {
   const size = file.size;
   const i = size === 0 ? 0 : Math.floor(Math.log(size) / Math.log(1024));