@payloadcms/ui 3.0.0-canary.ff8c8fd → 3.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["LinkImport","React","Link","default","baseClass","Banner","type","alignIcon","children","className","icon","onClick","to","classes","filter","Boolean","join","RenderedType","_jsxs","href","_jsx","Fragment"],"sources":["../../../src/elements/Banner/index.tsx"],"sourcesContent":["'use client'\nimport LinkImport from 'next/link.js' // TODO: abstract this out to support all routers\nimport type { MouseEvent } from 'react'\n\nimport React from 'react'\n\nimport './index.scss'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nconst baseClass = 'banner'\n\ntype onClick = (event: MouseEvent) => void\n\nexport type Props = Readonly<{\n  alignIcon?: 'left' | 'right'\n  children?: React.ReactNode\n  className?: string\n  icon?: React.ReactNode\n  onClick?: onClick\n  to?: string\n  type?: 'default' | 'error' | 'info' | 'success'\n}>\n\nexport type RenderedTypeProps = {\n  children?: React.ReactNode\n  className?: string\n  onClick?: onClick\n  to: string\n}\n\nexport const Banner: React.FC<Props> = ({\n  type = 'default',\n  alignIcon = 'right',\n  children,\n  className,\n  icon,\n  onClick,\n  to,\n}) => {\n  const classes = [\n    baseClass,\n    `${baseClass}--type-${type}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let RenderedType: React.ComponentType<RenderedTypeProps> | React.ElementType = 'div'\n\n  if (onClick && !to) RenderedType = 'button'\n  if (to) RenderedType = Link\n\n  return (\n    <RenderedType className={classes} href={to || null} onClick={onClick}>\n      {icon && alignIcon === 'left' && <React.Fragment>{icon}</React.Fragment>}\n      <span className={`${baseClass}__content`}>{children}</span>\n      {icon && alignIcon === 'right' && <React.Fragment>{icon}</React.Fragment>}\n    </RenderedType>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,UAAA,MAAgB,eAAc,CAAC;AAGtC,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,IAAA,GAAQF,UAAA,CAAWG,OAAO,IAAIH,UAAA;AAEpC,MAAMI,SAAA,GAAY;AAqBlB,OAAO,MAAMC,MAAA,GAA0BA,CAAC;EACtCC,IAAA,GAAO,SAAS;EAChBC,SAAA,GAAY,OAAO;EACnBC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,OAAO;EACPC;AAAE,CACH;EACC,MAAMC,OAAA,GAAU,CACdT,SAAA,EACA,GAAGA,SAAA,UAAmBE,IAAA,EAAM,EAC5BG,SAAA,IAAaA,SAAA,EACbG,EAAA,IAAM,GAAGR,SAAA,YAAqB,EAC7B,CAAAQ,EAAA,IAAMD,OAAM,KAAM,GAAGP,SAAA,cAAuB,EAC7CM,IAAA,IAAQ,GAAGN,SAAA,YAAqB,EAChCM,IAAA,IAAQ,GAAGN,SAAA,gBAAyBG,SAAA,EAAW,CAChD,CACEO,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIC,YAAA,GAA2E;EAE/E,IAAIN,OAAA,IAAW,CAACC,EAAA,EAAIK,YAAA,GAAe;EACnC,IAAIL,EAAA,EAAIK,YAAA,GAAef,IAAA;EAEvB,oBACEgB,KAAA,CAACD,YAAA;IAAaR,SAAA,EAAWI,OAAA;IAASM,IAAA,EAAMP,EAAA,IAAM;IAAMD,OAAA,EAASA,OAAA;eAC1DD,IAAA,IAAQH,SAAA,KAAc,uBAAUa,IAAA,CAACnB,KAAA,CAAMoB,QAAQ;gBAAEX;qBAClDU,IAAA,CAAC;MAAKX,SAAA,EAAW,GAAGL,SAAA,WAAoB;gBAAGI;QAC1CE,IAAA,IAAQH,SAAA,KAAc,wBAAWa,IAAA,CAACnB,KAAA,CAAMoB,QAAQ;gBAAEX;;;AAGzD","ignoreList":[]}
+{"version":3,"file":"index.js","names":["LinkImport","React","Link","default","baseClass","Banner","type","alignIcon","children","className","icon","onClick","to","classes","filter","Boolean","join","RenderedType","_jsxs","href","_jsx","Fragment"],"sources":["../../../src/elements/Banner/index.tsx"],"sourcesContent":["'use client'\nimport type { MouseEvent } from 'react'\n\nimport LinkImport from 'next/link.js' // TODO: abstract this out to support all routers\nimport React from 'react'\n\nimport './index.scss'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nconst baseClass = 'banner'\n\ntype onClick = (event: MouseEvent) => void\n\nexport type Props = Readonly<{\n  alignIcon?: 'left' | 'right'\n  children?: React.ReactNode\n  className?: string\n  icon?: React.ReactNode\n  onClick?: onClick\n  to?: string\n  type?: 'default' | 'error' | 'info' | 'success'\n}>\n\nexport type RenderedTypeProps = {\n  children?: React.ReactNode\n  className?: string\n  onClick?: onClick\n  to: string\n}\n\nexport const Banner: React.FC<Props> = ({\n  type = 'default',\n  alignIcon = 'right',\n  children,\n  className,\n  icon,\n  onClick,\n  to,\n}) => {\n  const classes = [\n    baseClass,\n    `${baseClass}--type-${type}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let RenderedType: React.ComponentType<RenderedTypeProps> | React.ElementType = 'div'\n\n  if (onClick && !to) {\n    RenderedType = 'button'\n  }\n  if (to) {\n    RenderedType = Link\n  }\n\n  return (\n    <RenderedType className={classes} href={to || null} onClick={onClick}>\n      {icon && alignIcon === 'left' && <React.Fragment>{icon}</React.Fragment>}\n      <span className={`${baseClass}__content`}>{children}</span>\n      {icon && alignIcon === 'right' && <React.Fragment>{icon}</React.Fragment>}\n    </RenderedType>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,UAAA,MAAgB,eAAc,CAAC;AACtC,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,IAAA,GAAQF,UAAA,CAAWG,OAAO,IAAIH,UAAA;AAEpC,MAAMI,SAAA,GAAY;AAqBlB,OAAO,MAAMC,MAAA,GAA0BA,CAAC;EACtCC,IAAA,GAAO,SAAS;EAChBC,SAAA,GAAY,OAAO;EACnBC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,OAAO;EACPC;AAAE,CACH;EACC,MAAMC,OAAA,GAAU,CACdT,SAAA,EACA,GAAGA,SAAA,UAAmBE,IAAA,EAAM,EAC5BG,SAAA,IAAaA,SAAA,EACbG,EAAA,IAAM,GAAGR,SAAA,YAAqB,EAC7B,CAAAQ,EAAA,IAAMD,OAAM,KAAM,GAAGP,SAAA,cAAuB,EAC7CM,IAAA,IAAQ,GAAGN,SAAA,YAAqB,EAChCM,IAAA,IAAQ,GAAGN,SAAA,gBAAyBG,SAAA,EAAW,CAChD,CACEO,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIC,YAAA,GAA2E;EAE/E,IAAIN,OAAA,IAAW,CAACC,EAAA,EAAI;IAClBK,YAAA,GAAe;EACjB;EACA,IAAIL,EAAA,EAAI;IACNK,YAAA,GAAef,IAAA;EACjB;EAEA,oBACEgB,KAAA,CAACD,YAAA;IAAaR,SAAA,EAAWI,OAAA;IAASM,IAAA,EAAMP,EAAA,IAAM;IAAMD,OAAA,EAASA,OAAA;eAC1DD,IAAA,IAAQH,SAAA,KAAc,uBAAUa,IAAA,CAACnB,KAAA,CAAMoB,QAAQ;gBAAEX;qBAClDU,IAAA,CAAC;MAAKX,SAAA,EAAW,GAAGL,SAAA,WAAoB;gBAAGI;QAC1CE,IAAA,IAAQH,SAAA,KAAc,wBAAWa,IAAA,CAACnB,KAAA,CAAMoB,QAAQ;gBAAEX;;;AAGzD","ignoreList":[]}

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,wBAAgB,UAAU,sBA4CzB;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AACD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE,YAAY,qBA4BlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,cAAc,CAAA;AAIrB,wBAAgB,UAAU,sBAkDzB;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AACD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE,YAAY,qBA4BlD"}

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

@@ -104,12 +104,12 @@ export function ActionsBar() {
   return t1;
 }
 export function Actions(t0) {
-  const $ = _c(14);
+  const $ = _c(12);
   const {
     className
   } = t0;
   const {
-    config
+    getEntityConfig
   } = useConfig();
   const {
     t
@@ -121,34 +121,28 @@ export function Actions(t0) {
     saveAllDocs
   } = useFormsManager();
   let t1;
-  if ($[0] !== collectionSlug || $[1] !== config.collections) {
-    let t2;
-    if ($[3] !== collectionSlug) {
-      t2 = c => c.slug === collectionSlug;
-      $[3] = collectionSlug;
-      $[4] = t2;
-    } else {
-      t2 = $[4];
-    }
-    t1 = config.collections.find(t2);
+  if ($[0] !== collectionSlug || $[1] !== getEntityConfig) {
+    t1 = getEntityConfig({
+      collectionSlug
+    });
     $[0] = collectionSlug;
-    $[1] = config.collections;
+    $[1] = getEntityConfig;
     $[2] = t1;
   } else {
     t1 = $[2];
   }
   const collectionConfig = t1;
   let t2;
-  if ($[5] !== className) {
+  if ($[3] !== className) {
     t2 = [`${baseClass}__buttons`, className].filter(Boolean);
-    $[5] = className;
-    $[6] = t2;
+    $[3] = className;
+    $[4] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[4];
   }
   const t3 = t2.join(" ");
   let t4;
-  if ($[7] !== collectionConfig || $[8] !== hasSavePermission || $[9] !== saveAllDocs || $[10] !== t || $[11] !== hasPublishPermission || $[12] !== t3) {
+  if ($[5] !== collectionConfig?.versions?.drafts || $[6] !== hasSavePermission || $[7] !== saveAllDocs || $[8] !== t || $[9] !== hasPublishPermission || $[10] !== t3) {
     t4 = _jsxs("div", {
       className: t3,
       children: [collectionConfig?.versions?.drafts && hasSavePermission ? _jsx(Button, {
@@ -171,15 +165,15 @@ export function Actions(t0) {
         children: t("general:save")
       }) : null]
     });
-    $[7] = collectionConfig;
-    $[8] = hasSavePermission;
-    $[9] = saveAllDocs;
-    $[10] = t;
-    $[11] = hasPublishPermission;
-    $[12] = t3;
-    $[13] = t4;
+    $[5] = collectionConfig?.versions?.drafts;
+    $[6] = hasSavePermission;
+    $[7] = saveAllDocs;
+    $[8] = t;
+    $[9] = hasPublishPermission;
+    $[10] = t3;
+    $[11] = t4;
   } else {
-    t4 = $[13];
+    t4 = $[11];
   }
   return t4;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useConfig","useTranslation","Button","useFormsManager","baseClass","ActionsBar","$","activeIndex","forms","setActiveIndex","t","t0","t1","length","t2","nextIndex","t3","nextIndex_0","_jsxs","className","children","_jsx","buttonStyle","onClick","type","direction","Actions","config","collectionSlug","hasPublishPermission","hasSavePermission","saveAllDocs","collections","slug","find","collectionConfig","filter","Boolean","join","t4","versions","drafts","overrides","_status"],"sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport './index.scss'\n\nconst baseClass = 'bulk-upload--actions-bar'\n\nexport function ActionsBar() {\n  const { activeIndex, forms, setActiveIndex } = useFormsManager()\n  const { t } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__navigation`}>\n        <p className={`${baseClass}__locationText`}>\n          <strong>{activeIndex + 1}</strong>\n          {' of '}\n          <strong>{forms.length}</strong>\n        </p>\n\n        <div className={`${baseClass}__controls`}>\n          <Button\n            aria-label={t('general:previous')}\n            buttonStyle=\"none\"\n            onClick={() => {\n              const nextIndex = activeIndex - 1\n              if (nextIndex < 0) setActiveIndex(forms.length - 1)\n              else setActiveIndex(nextIndex)\n            }}\n            type=\"button\"\n          >\n            <ChevronIcon direction=\"left\" />\n          </Button>\n          <Button\n            aria-label={t('general:next')}\n            buttonStyle=\"none\"\n            onClick={() => {\n              const nextIndex = activeIndex + 1\n              if (nextIndex === forms.length) setActiveIndex(0)\n              else setActiveIndex(nextIndex)\n            }}\n            type=\"button\"\n          >\n            <ChevronIcon direction=\"right\" />\n          </Button>\n        </div>\n      </div>\n\n      <Actions className={`${baseClass}__saveButtons`} />\n    </div>\n  )\n}\n\ntype ActionsProps = {\n  readonly className?: string\n}\nexport function Actions({ className }: ActionsProps) {\n  const { config } = useConfig()\n  const { t } = useTranslation()\n  const { collectionSlug, hasPublishPermission, hasSavePermission, saveAllDocs } = useFormsManager()\n\n  const collectionConfig = config.collections.find((c) => c.slug === collectionSlug)\n\n  return (\n    <div className={[`${baseClass}__buttons`, className].filter(Boolean).join(' ')}>\n      {collectionConfig?.versions?.drafts && hasSavePermission ? (\n        <Button\n          buttonStyle=\"secondary\"\n          onClick={() => void saveAllDocs({ overrides: { _status: 'draft' } })}\n        >\n          {t('version:saveDraft')}\n        </Button>\n      ) : null}\n      {collectionConfig?.versions?.drafts && hasPublishPermission ? (\n        <Button onClick={() => void saveAllDocs({ overrides: { _status: 'published' } })}>\n          {t('version:publish')}\n        </Button>\n      ) : null}\n\n      {!collectionConfig?.versions?.drafts && hasSavePermission ? (\n        <Button onClick={() => void saveAllDocs()}>{t('general:save')}</Button>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,SAAAC,WAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACL;IAAAU,WAAA;IAAAC,KAAA;IAAAC;EAAA,IAA+CN,eAAA;EAC/C;IAAAO;EAAA,IAAcT,cAAA;EAMG,MAAAU,EAAA,GAAAJ,WAAA,IAAc;EAAA,IAAAK,EAAA;EAAA,IAAAN,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAE,KAAA,CAAAK,MAAA,IAAAP,CAAA,QAAAI,CAAA,IAAAJ,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAG,cAAA;IAAA,IAAAK,EAAA;IAAA,IAAAR,CAAA,QAAAC,WAAA,IAAAD,CAAA,QAAAG,cAAA,IAAAH,CAAA,QAAAE,KAAA,CAAAK,MAAA;MASZC,EAAA,GAAAA,CAAA;QACP,MAAAC,SAAA,GAAkBR,WAAA,IAAc;QAAA,IAC5BQ,SAAA,IAAY;UAAGN,cAAA,CAAeD,KAAA,CAAAK,MAAA,IAAe;QAAA;UAC5CJ,cAAA,CAAeM,SAAA;QAAA;MAAA;MACtBT,CAAA,MAAAC,WAAA;MAAAD,CAAA,MAAAG,cAAA;MAAAH,CAAA,MAAAE,KAAA,CAAAK,MAAA;MAAAP,CAAA,MAAAQ,EAAA;IAAA;MAAAA,EAAA,GAAAR,CAAA;IAAA;IAAA,IAAAU,EAAA;IAAA,IAAAV,CAAA,SAAAC,WAAA,IAAAD,CAAA,SAAAE,KAAA,CAAAK,MAAA,IAAAP,CAAA,SAAAG,cAAA;MAQSO,EAAA,GAAAA,CAAA;QACP,MAAAC,WAAA,GAAkBV,WAAA,IAAc;QAAA,IAC5BQ,WAAA,KAAcP,KAAA,CAAAK,MAAY;UAAEJ,cAAA,EAAe;QAAA;UAC1CA,cAAA,CAAeM,WAAA;QAAA;MAAA;MACtBT,CAAA,OAAAC,WAAA;MAAAD,CAAA,OAAAE,KAAA,CAAAK,MAAA;MAAAP,CAAA,OAAAG,cAAA;MAAAH,CAAA,OAAAU,EAAA;IAAA;MAAAA,EAAA,GAAAV,CAAA;IAAA;IA5BRM,EAAA,GAAAM,KAAA,CAAC;MAAAC,SAAA,EAAAf,SAAA;MAAAgB,QAAA,GACCF,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAAf,SAAA,cAA0B;QAAAgB,QAAA,GACxCF,KAAA,CAAC;UAAAC,SAAA,EAAa,GAAAf,SAAA,gBAA4B;UAAAgB,QAAA,GACxCC,IAAA,CAAC;YAAAD,QAAA,EAAQT;UAAc,C,GACtB,QACDU,IAAA,CAAC;YAAAD,QAAA,EAAQZ,KAAA,CAAAK;UAAA,C;YAGXK,KAAA,CAAC;UAAAC,SAAA,EAAe,GAAAf,SAAA,YAAwB;UAAAgB,QAAA,GACtCC,IAAA,CAAAnB,MAAA;YAAA,cACcQ,CAAA,CAAE;YAAAY,WAAA,EACF;YAAAC,OAAA,EACHT,EAIT;YAAAU,IAAA,EACK;YAAAJ,QAAA,EAELC,IAAA,CAAAtB,WAAA;cAAA0B,SAAA,EAAuB;YAAA,C;cAEzBJ,IAAA,CAAAnB,MAAA;YAAA,cACcQ,CAAA,CAAE;YAAAY,WAAA,EACF;YAAAC,OAAA,EACHP,EAIT;YAAAQ,IAAA,EACK;YAAAJ,QAAA,EAELC,IAAA,CAAAtB,WAAA;cAAA0B,SAAA,EAAuB;YAAA,C;;;UAK7BJ,IAAA,CAAAK,OAAA;QAAAP,SAAA,EAAoB,GAAAf,SAAA;MAA2B,C;;;;;;;;;;;SApCjDQ,E;;AA4CJ,OAAO,SAAAc,QAAAf,EAAA;EAAA,MAAAL,CAAA,GAAAT,EAAA;EAAiB;IAAAsB;EAAA,IAAAR,EAA2B;EACjD;IAAAgB;EAAA,IAAmB3B,SAAA;EACnB;IAAAU;EAAA,IAAcT,cAAA;EACd;IAAA2B,cAAA;IAAAC,oBAAA;IAAAC,iBAAA;IAAAC;EAAA,IAAiF5B,eAAA;EAAA,IAAAS,EAAA;EAAA,IAAAN,CAAA,QAAAsB,cAAA,IAAAtB,CAAA,QAAAqB,MAAA,CAAAK,WAAA;IAAA,IAAAlB,EAAA;IAAA,IAAAR,CAAA,QAAAsB,cAAA;MAEhCd,EAAA,GAAAlB,CAAA,IAAOA,CAAA,CAAAqC,IAAA,KAAWL,cAAA;MAAAtB,CAAA,MAAAsB,cAAA;MAAAtB,CAAA,MAAAQ,EAAA;IAAA;MAAAA,EAAA,GAAAR,CAAA;IAAA;IAA1CM,EAAA,GAAAe,MAAA,CAAAK,WAAA,CAAAE,IAAA,CAAwBpB,EAAkB;IAAAR,CAAA,MAAAsB,cAAA;IAAAtB,CAAA,MAAAqB,MAAA,CAAAK,WAAA;IAAA1B,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EAAnE,MAAA6B,gBAAA,GAAyBvB,EAA0C;EAAA,IAAAE,EAAA;EAAA,IAAAR,CAAA,QAAAa,SAAA;IAGjDL,EAAA,IAAC,GAAAV,SAAA,WAAuB,EAAEe,SAAA,EAAAiB,MAAA,CAAAC,OAAkB;IAAA/B,CAAA,MAAAa,SAAA;IAAAb,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAA5C,MAAAU,EAAA,GAAAF,EAA4C,CAAAwB,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAjC,CAAA,QAAA6B,gBAAA,IAAA7B,CAAA,QAAAwB,iBAAA,IAAAxB,CAAA,QAAAyB,WAAA,IAAAzB,CAAA,SAAAI,CAAA,IAAAJ,CAAA,SAAAuB,oBAAA,IAAAvB,CAAA,SAAAU,EAAA;IAA1EuB,EAAA,GAAArB,KAAA,CAAC;MAAAC,SAAA,EAAeH,EAA0D;MAAAI,QAAA,GACvEe,gBAAA,EAAAK,QAAA,EAAAC,MAAA,IAAsCX,iBAAA,GACrCT,IAAA,CAAAnB,MAAA;QAAAoB,WAAA,EACc;QAAAC,OAAA,EAAAA,CAAA,UACQQ,WAAA;UAAAW,SAAA;YAAAC,OAAA,EAAoC;UAAA;QAAA,CAAU;QAAAvB,QAAA,EAEjEV,CAAA,CAAE;MAAA,C,QAEH,EACHyB,gBAAA,EAAAK,QAAA,EAAAC,MAAA,IAAsCZ,oBAAA,GACrCR,IAAA,CAAAnB,MAAA;QAAAqB,OAAA,EAAAA,CAAA,UAA4BQ,WAAA;UAAAW,SAAA;YAAAC,OAAA,EAAoC;UAAA;QAAA,CAAc;QAAAvB,QAAA,EAC3EV,CAAA,CAAE;MAAA,C,QAEH,EAEH,CAACyB,gBAAA,EAAAK,QAAA,EAAAC,MAAA,IAAsCX,iBAAA,GACtCT,IAAA,CAAAnB,MAAA;QAAAqB,OAAA,EAAAA,CAAA,UAA4BQ,WAAA;QAAAX,QAAA,EAAgBV,CAAA,CAAE;MAAA,C,QAC5C;IAAA,C;;;;;;;;;;;SAjBN6B,E","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","useConfig","useTranslation","Button","useFormsManager","baseClass","ActionsBar","$","activeIndex","forms","setActiveIndex","t","t0","t1","length","t2","nextIndex","t3","nextIndex_0","_jsxs","className","children","_jsx","buttonStyle","onClick","type","direction","Actions","getEntityConfig","collectionSlug","hasPublishPermission","hasSavePermission","saveAllDocs","collectionConfig","filter","Boolean","join","t4","versions","drafts","overrides","_status"],"sources":["../../../../src/elements/BulkUpload/ActionsBar/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { useFormsManager } from '../FormsManager/index.js'\nimport './index.scss'\n\nconst baseClass = 'bulk-upload--actions-bar'\n\nexport function ActionsBar() {\n  const { activeIndex, forms, setActiveIndex } = useFormsManager()\n  const { t } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__navigation`}>\n        <p className={`${baseClass}__locationText`}>\n          <strong>{activeIndex + 1}</strong>\n          {' of '}\n          <strong>{forms.length}</strong>\n        </p>\n\n        <div className={`${baseClass}__controls`}>\n          <Button\n            aria-label={t('general:previous')}\n            buttonStyle=\"none\"\n            onClick={() => {\n              const nextIndex = activeIndex - 1\n              if (nextIndex < 0) {\n                setActiveIndex(forms.length - 1)\n              } else {\n                setActiveIndex(nextIndex)\n              }\n            }}\n            type=\"button\"\n          >\n            <ChevronIcon direction=\"left\" />\n          </Button>\n          <Button\n            aria-label={t('general:next')}\n            buttonStyle=\"none\"\n            onClick={() => {\n              const nextIndex = activeIndex + 1\n              if (nextIndex === forms.length) {\n                setActiveIndex(0)\n              } else {\n                setActiveIndex(nextIndex)\n              }\n            }}\n            type=\"button\"\n          >\n            <ChevronIcon direction=\"right\" />\n          </Button>\n        </div>\n      </div>\n\n      <Actions className={`${baseClass}__saveButtons`} />\n    </div>\n  )\n}\n\ntype ActionsProps = {\n  readonly className?: string\n}\nexport function Actions({ className }: ActionsProps) {\n  const { getEntityConfig } = useConfig()\n  const { t } = useTranslation()\n  const { collectionSlug, hasPublishPermission, hasSavePermission, saveAllDocs } = useFormsManager()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  return (\n    <div className={[`${baseClass}__buttons`, className].filter(Boolean).join(' ')}>\n      {collectionConfig?.versions?.drafts && hasSavePermission ? (\n        <Button\n          buttonStyle=\"secondary\"\n          onClick={() => void saveAllDocs({ overrides: { _status: 'draft' } })}\n        >\n          {t('version:saveDraft')}\n        </Button>\n      ) : null}\n      {collectionConfig?.versions?.drafts && hasPublishPermission ? (\n        <Button onClick={() => void saveAllDocs({ overrides: { _status: 'published' } })}>\n          {t('version:publish')}\n        </Button>\n      ) : null}\n\n      {!collectionConfig?.versions?.drafts && hasSavePermission ? (\n        <Button onClick={() => void saveAllDocs()}>{t('general:save')}</Button>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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%;
-  }
-  
-  &__locationText {
-    font-variant-numeric: tabular-nums;
-    margin: 0;
-  }
-  
-  &__controls {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    
-    .btn {
-      background-color: var(--theme-elevation-100);
-      width: calc(var(--base) * 1.2);
-      height: calc(var(--base) * 1.2);
-  
-      &:hover {
-        background-color: var(--theme-elevation-200);
-      }
+    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);
 
-      &__label {
-        display: flex;
-      }
+    &__navigation {
+      display: flex;
+      gap: var(--base);
+      align-items: center;
+      width: 100%;
     }
-  }
 
-  &__buttons {
-    display: flex;
-    gap: var(--base);
-    margin-left: auto;
-  }
+    &__locationText {
+      font-variant-numeric: tabular-nums;
+      margin: 0;
+    }
 
-  @include mid-break {
-    &__navigation {
-      justify-content: space-between;
+    &__controls {
+      display: flex;
+      gap: calc(var(--base) / 2);
+
+      .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;
+        }
+      }
     }
-    &__saveButtons {
-      display: none;
+
+    &__buttons {
+      display: flex;
+      gap: var(--base);
+      margin-left: auto;
+    }
+
+    @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;AAKzB,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,qBAWvD"}
+{"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

@@ -1,44 +1,61 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { useTranslation } from '../../../providers/Translation/index.js';
+import { Button } from '../../Button/index.js';
 import { Dropzone } from '../../Dropzone/index.js';
 import { DrawerHeader } from '../Header/index.js';
 import './index.scss';
 const baseClass = 'bulk-upload--add-files';
-export function AddFilesView(t0) {
-  const $ = _c(4);
-  const {
-    onCancel,
-    onDrop
-  } = t0;
+export function AddFilesView({
+  acceptMimeTypes,
+  onCancel,
+  onDrop
+}) {
   const {
     t
   } = useTranslation();
-  let t1;
-  if ($[0] !== t || $[1] !== onCancel || $[2] !== onDrop) {
-    t1 = _jsxs("div", {
-      className: baseClass,
-      children: [_jsx(DrawerHeader, {
-        onClose: onCancel,
-        title: t("upload:addFiles")
-      }), _jsx("div", {
-        className: `${baseClass}__dropArea`,
-        children: _jsx(Dropzone, {
-          multipleFiles: true,
-          onChange: onDrop
-        })
-      })]
-    });
-    $[0] = t;
-    $[1] = onCancel;
-    $[2] = onDrop;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
+  const inputRef = React.useRef(null);
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [/*#__PURE__*/_jsx(DrawerHeader, {
+      onClose: onCancel,
+      title: t('upload:addFiles')
+    }), /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__dropArea`,
+      children: /*#__PURE__*/_jsxs(Dropzone, {
+        multipleFiles: true,
+        onChange: onDrop,
+        children: [/*#__PURE__*/_jsx(Button, {
+          buttonStyle: "pill",
+          iconPosition: "left",
+          onClick: () => {
+            if (inputRef.current) {
+              inputRef.current.click();
+            }
+          },
+          size: "small",
+          children: t('upload:selectFile')
+        }), /*#__PURE__*/_jsx("input", {
+          accept: acceptMimeTypes,
+          "aria-hidden": "true",
+          className: `${baseClass}__hidden-input`,
+          hidden: true,
+          multiple: true,
+          onChange: e => {
+            if (e.target.files && e.target.files.length > 0) {
+              onDrop(e.target.files);
+            }
+          },
+          ref: inputRef,
+          type: "file"
+        }), /*#__PURE__*/_jsxs("p", {
+          className: `${baseClass}__dragAndDropText`,
+          children: [t('general:or'), " ", t('upload:dragAndDrop')]
+        })]
+      })
+    })]
+  });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","Dropzone","DrawerHeader","baseClass","AddFilesView","t0","$","onCancel","onDrop","t","t1","_jsxs","className","children","_jsx","onClose","title","multipleFiles","onChange"],"sources":["../../../../src/elements/BulkUpload/AddFilesView/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../providers/Translation/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  return (\n    <div className={baseClass}>\n      <DrawerHeader onClose={onCancel} title={t('upload:addFiles')} />\n      <div className={`${baseClass}__dropArea`}>\n        <Dropzone multipleFiles onChange={onDrop} />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,QAAQ,QAAQ;AACzB,SAASC,YAAY,QAAQ;AAC7B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAMlB,OAAO,SAAAC,aAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAsB;IAAAS,QAAA;IAAAC;EAAA,IAAAH,EAA2B;EACtD;IAAAI;EAAA,IAAcT,cAAA;EAAA,IAAAU,EAAA;EAAA,IAAAJ,CAAA,QAAAG,CAAA,IAAAH,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAE,MAAA;IAGZE,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAT,SAAA;MAAAU,QAAA,GACCC,IAAA,CAAAZ,YAAA;QAAAa,OAAA,EAAuBR,QAAA;QAAAS,KAAA,EAAiBP,CAAA,CAAE;MAAA,C,GAC1CK,IAAA,CAAC;QAAAF,SAAA,EAAe,GAAAT,SAAA,YAAwB;QAAAU,QAAA,EACtCC,IAAA,CAAAb,QAAA;UAAAgB,aAAA;UAAAC,QAAA,EAAkCV;QAAA,C;;;;;;;;;;SAHtCE,E","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,15 +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 {
+    display: flex;
     flex-direction: column;
-    justify-content: center;
+
+    &__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;
+    }
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddingFilesView/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,cAAc,CAAA;AAIrB,wBAAgB,eAAe,sBA0C9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/BulkUpload/AddingFilesView/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,OAAO,cAAc,CAAA;AAIrB,wBAAgB,eAAe,sBAwD9B"}