@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.c2b57ce

package/dist/elements/ArrayAction/index.js

@@ -3,15 +3,16 @@
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { ArrowIcon } from '../../icons/Arrow/index.js';
+import { ClipboardIcon } from '../../icons/Clipboard/index.js';
 import { CopyIcon } from '../../icons/Copy/index.js';
+import { DuplicateIcon } from '../../icons/Duplicate/index.js';
 import { MoreIcon } from '../../icons/More/index.js';
 import { PlusIcon } from '../../icons/Plus/index.js';
 import { XIcon } from '../../icons/X/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import { ClipboardActionLabel } from '../ClipboardAction/ClipboardActionLabel.js';
-import './index.scss';
 import { Popup, PopupList } from '../Popup/index.js';
+import './index.css';
 const baseClass = 'array-actions';
 export const ArrayAction = t0 => {
   const $ = _c(12);
@@ -35,78 +36,88 @@ export const ArrayAction = t0 => {
     t1 = _jsx(Popup, {
       button: _jsx(MoreIcon, {}),
       buttonClassName: `${baseClass}__button`,
+      caret: false,
       className: baseClass,
-      horizontalAlign: "center",
+      horizontalAlign: "right",
       render: t2 => {
         const {
           close
         } = t2;
-        return _jsxs(PopupList.ButtonGroup, {
-          buttonSize: "small",
-          children: [isSortable && index !== 0 && _jsxs(PopupList.Button, {
+        return _jsxs(PopupList.MenuItem, {
+          children: [isSortable && index !== 0 && _jsx(PopupList.Button, {
             className: `${baseClass}__action ${baseClass}__move-up`,
+            icon: _jsx(ArrowIcon, {
+              direction: "up",
+              size: 24
+            }),
             onClick: () => {
               moveRow(index, index - 1);
               close();
             },
-            children: [_jsx("div", {
-              className: `${baseClass}__action-chevron`,
-              children: _jsx(ChevronIcon, {
-                direction: "up"
-              })
-            }), t("general:moveUp")]
-          }), isSortable && index < rowCount - 1 && _jsxs(PopupList.Button, {
+            children: t("general:moveUp")
+          }), isSortable && index < rowCount - 1 && _jsx(PopupList.Button, {
             className: `${baseClass}__action`,
+            icon: _jsx(ArrowIcon, {
+              direction: "down",
+              size: 24
+            }),
             onClick: () => {
               moveRow(index, index + 1);
               close();
             },
-            children: [_jsx("div", {
-              className: `${baseClass}__action-chevron`,
-              children: _jsx(ChevronIcon, {})
-            }), t("general:moveDown")]
+            children: t("general:moveDown")
           }), !hasMaxRows && _jsxs(React.Fragment, {
-            children: [_jsxs(PopupList.Button, {
+            children: [_jsx(PopupList.Button, {
               className: `${baseClass}__action ${baseClass}__add`,
+              icon: _jsx(PlusIcon, {
+                size: 24
+              }),
               onClick: () => {
                 addRow(index + 1);
                 close();
               },
-              children: [_jsx(PlusIcon, {}), t("general:addBelow")]
-            }), _jsxs(PopupList.Button, {
+              children: t("general:addBelow")
+            }), _jsx(PopupList.Button, {
               className: `${baseClass}__action ${baseClass}__duplicate`,
+              icon: _jsx(DuplicateIcon, {
+                size: 24
+              }),
               onClick: () => {
                 duplicateRow(index);
                 close();
               },
-              children: [_jsx(CopyIcon, {}), t("general:duplicate")]
+              children: t("general:duplicate")
             })]
           }), _jsx(PopupList.Button, {
             className: `${baseClass}__action ${baseClass}__copy`,
+            icon: _jsx(CopyIcon, {
+              size: 24
+            }),
             onClick: () => {
               copyRow(index);
               close();
             },
-            children: _jsx(ClipboardActionLabel, {
-              isRow: true
-            })
+            children: t("general:copyRow")
           }), _jsx(PopupList.Button, {
             className: `${baseClass}__action ${baseClass}__paste`,
+            icon: _jsx(ClipboardIcon, {
+              size: 24
+            }),
             onClick: () => {
               pasteRow(index);
               close();
             },
-            children: _jsx(ClipboardActionLabel, {
-              isPaste: true,
-              isRow: true
-            })
-          }), _jsxs(PopupList.Button, {
+            children: t("general:pasteRow")
+          }), _jsx(PopupList.Button, {
             className: `${baseClass}__action ${baseClass}__remove`,
+            icon: _jsx(XIcon, {
+              size: 24
+            }),
             onClick: () => {
               removeRow(index);
               close();
             },
-            children: [_jsx(XIcon, {}), t("general:remove")]
+            children: t("general:remove")
           })]
         });
       },

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","CopyIcon","MoreIcon","PlusIcon","XIcon","useTranslation","ClipboardActionLabel","Popup","PopupList","baseClass","ArrayAction","t0","$","addRow","copyRow","duplicateRow","hasMaxRows","index","isSortable","moveRow","pasteRow","removeRow","rowCount","t","t1","_jsx","button","buttonClassName","className","horizontalAlign","render","t2","close","_jsxs","ButtonGroup","buttonSize","children","Button","onClick","direction","Fragment","isRow","isPaste"],"sources":["../../../src/elements/ArrayAction/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ClipboardActionLabel } from '../ClipboardAction/ClipboardActionLabel.js'\nimport './index.scss'\nimport { Popup, PopupList } from '../Popup/index.js'\n\nconst baseClass = 'array-actions'\n\nexport type Props = {\n  addRow: (current: number, blockType?: string) => Promise<void> | void\n  copyRow: (index: number) => void\n  duplicateRow: (current: number) => void\n  hasMaxRows: boolean\n  index: number\n  isSortable?: boolean\n  moveRow: (from: number, to: number) => void\n  pasteRow: (index: number) => void\n  removeRow: (index: number) => void\n  rowCount: number\n}\n\nexport const ArrayAction: React.FC<Props> = ({\n  addRow,\n  copyRow,\n  duplicateRow,\n  hasMaxRows,\n  index,\n  isSortable,\n  moveRow,\n  pasteRow,\n  removeRow,\n  rowCount,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonClassName={`${baseClass}__button`}\n      className={baseClass}\n      horizontalAlign=\"center\"\n      render={({ close }) => {\n        return (\n          <PopupList.ButtonGroup buttonSize=\"small\">\n            {isSortable && index !== 0 && (\n              <PopupList.Button\n                className={`${baseClass}__action ${baseClass}__move-up`}\n                onClick={() => {\n                  moveRow(index, index - 1)\n                  close()\n                }}\n              >\n                <div className={`${baseClass}__action-chevron`}>\n                  <ChevronIcon direction=\"up\" />\n                </div>\n                {t('general:moveUp')}\n              </PopupList.Button>\n            )}\n            {isSortable && index < rowCount - 1 && (\n              <PopupList.Button\n                className={`${baseClass}__action`}\n                onClick={() => {\n                  moveRow(index, index + 1)\n                  close()\n                }}\n              >\n                <div className={`${baseClass}__action-chevron`}>\n                  <ChevronIcon />\n                </div>\n                {t('general:moveDown')}\n              </PopupList.Button>\n            )}\n            {!hasMaxRows && (\n              <React.Fragment>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__add`}\n                  onClick={() => {\n                    void addRow(index + 1)\n                    close()\n                  }}\n                >\n                  <PlusIcon />\n                  {t('general:addBelow')}\n                </PopupList.Button>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__duplicate`}\n                  onClick={() => {\n                    duplicateRow(index)\n                    close()\n                  }}\n                >\n                  <CopyIcon />\n                  {t('general:duplicate')}\n                </PopupList.Button>\n              </React.Fragment>\n            )}\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__copy`}\n              onClick={() => {\n                copyRow(index)\n                close()\n              }}\n            >\n              <ClipboardActionLabel isRow />\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__paste`}\n              onClick={() => {\n                pasteRow(index)\n                close()\n              }}\n            >\n              <ClipboardActionLabel isPaste isRow />\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__remove`}\n              onClick={() => {\n                removeRow(index)\n                close()\n              }}\n            >\n              <XIcon />\n              {t('general:remove')}\n            </PopupList.Button>\n          </PopupList.ButtonGroup>\n        )\n      }}\n      size=\"medium\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","ArrowIcon","ClipboardIcon","CopyIcon","DuplicateIcon","MoreIcon","PlusIcon","XIcon","useTranslation","Popup","PopupList","baseClass","ArrayAction","t0","$","addRow","copyRow","duplicateRow","hasMaxRows","index","isSortable","moveRow","pasteRow","removeRow","rowCount","t","t1","_jsx","button","buttonClassName","caret","className","horizontalAlign","render","t2","close","_jsxs","MenuItem","children","Button","icon","direction","size","Fragment"],"sources":["../../../src/elements/ArrayAction/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ArrowIcon } from '../../icons/Arrow/index.js'\nimport { ClipboardIcon } from '../../icons/Clipboard/index.js'\nimport { CopyIcon } from '../../icons/Copy/index.js'\nimport { DuplicateIcon } from '../../icons/Duplicate/index.js'\nimport { MoreIcon } from '../../icons/More/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'array-actions'\n\nexport type Props = {\n  addRow: (current: number, blockType?: string) => Promise<void> | void\n  copyRow: (index: number) => void\n  duplicateRow: (current: number) => void\n  hasMaxRows: boolean\n  index: number\n  isSortable?: boolean\n  moveRow: (from: number, to: number) => void\n  pasteRow: (index: number) => void\n  removeRow: (index: number) => void\n  rowCount: number\n}\n\nexport const ArrayAction: React.FC<Props> = ({\n  addRow,\n  copyRow,\n  duplicateRow,\n  hasMaxRows,\n  index,\n  isSortable,\n  moveRow,\n  pasteRow,\n  removeRow,\n  rowCount,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <Popup\n      button={<MoreIcon />}\n      buttonClassName={`${baseClass}__button`}\n      caret={false}\n      className={baseClass}\n      horizontalAlign=\"right\"\n      render={({ close }) => {\n        return (\n          <PopupList.MenuItem>\n            {isSortable && index !== 0 && (\n              <PopupList.Button\n                className={`${baseClass}__action ${baseClass}__move-up`}\n                icon={<ArrowIcon direction=\"up\" size={24} />}\n                onClick={() => {\n                  moveRow(index, index - 1)\n                  close()\n                }}\n              >\n                {t('general:moveUp')}\n              </PopupList.Button>\n            )}\n            {isSortable && index < rowCount - 1 && (\n              <PopupList.Button\n                className={`${baseClass}__action`}\n                icon={<ArrowIcon direction=\"down\" size={24} />}\n                onClick={() => {\n                  moveRow(index, index + 1)\n                  close()\n                }}\n              >\n                {t('general:moveDown')}\n              </PopupList.Button>\n            )}\n            {!hasMaxRows && (\n              <React.Fragment>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__add`}\n                  icon={<PlusIcon size={24} />}\n                  onClick={() => {\n                    void addRow(index + 1)\n                    close()\n                  }}\n                >\n                  {t('general:addBelow')}\n                </PopupList.Button>\n                <PopupList.Button\n                  className={`${baseClass}__action ${baseClass}__duplicate`}\n                  icon={<DuplicateIcon size={24} />}\n                  onClick={() => {\n                    duplicateRow(index)\n                    close()\n                  }}\n                >\n                  {t('general:duplicate')}\n                </PopupList.Button>\n              </React.Fragment>\n            )}\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__copy`}\n              icon={<CopyIcon size={24} />}\n              onClick={() => {\n                copyRow(index)\n                close()\n              }}\n            >\n              {t('general:copyRow')}\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__paste`}\n              icon={<ClipboardIcon size={24} />}\n              onClick={() => {\n                pasteRow(index)\n                close()\n              }}\n            >\n              {t('general:pasteRow')}\n            </PopupList.Button>\n            <PopupList.Button\n              className={`${baseClass}__action ${baseClass}__remove`}\n              icon={<XIcon size={24} />}\n              onClick={() => {\n                removeRow(index)\n                close()\n              }}\n            >\n              {t('general:remove')}\n            </PopupList.Button>\n          </PopupList.MenuItem>\n        )\n      }}\n      size=\"medium\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Autosave/index.css

@@ -0,0 +1,6 @@
+@layer payload-default {
+  .autosave {
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { ClientCollectionConfig, ClientGlobalConfig } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type Props = {
     collection?: ClientCollectionConfig;
     global?: ClientGlobalConfig;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Autosave/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAUzE,OAAO,KAAwD,MAAM,OAAO,CAAA;AAoB5E,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,qBAAqB,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6MpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Autosave/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAUzE,OAAO,KAAwD,MAAM,OAAO,CAAA;AAoB5E,OAAO,aAAa,CAAA;AAMpB,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,sBAAsB,CAAA;IACnC,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,qBAAqB,EAAE,MAAM,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmNpC,CAAA"}

package/dist/elements/Autosave/index.js

@@ -16,7 +16,7 @@ import { useTranslation } from '../../providers/Translation/index.js';
 import { formatTimeToNow } from '../../utilities/formatDocTitle/formatDateTitle.js';
 import { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js';
 import { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'autosave';
 // The minimum time the saving state should be shown
 const minimumAnimationTime = 1000;
@@ -194,15 +194,18 @@ export const Autosave = ({
     }
     setSaving(false);
   });
-  return /*#__PURE__*/_jsxs("div", {
-    className: baseClass,
-    children: [validateOnDraft && !isValid && /*#__PURE__*/_jsx(LeaveWithoutSaving, {}), saving && t('general:saving'), !saving && Boolean(lastUpdateTime) && /*#__PURE__*/_jsx(React.Fragment, {
-      children: t('version:lastSavedAgo', {
-        distance: formatTimeToNow({
-          date: lastUpdateTime,
-          i18n
+  const hasVisibleContent = saving || Boolean(lastUpdateTime);
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [validateOnDraft && !isValid && /*#__PURE__*/_jsx(LeaveWithoutSaving, {}), hasVisibleContent && /*#__PURE__*/_jsxs("div", {
+      className: baseClass,
+      children: [saving && t('general:saving'), !saving && Boolean(lastUpdateTime) && /*#__PURE__*/_jsx(React.Fragment, {
+        children: t('version:lastSavedAgo', {
+          distance: formatTimeToNow({
+            date: lastUpdateTime,
+            i18n
+          })
         })
-      })
+      })]
     })]
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["dequal","formatAdminURL","getAutosaveInterval","hasDraftValidationEnabled","reduceFieldsToValues","qs","React","useDeferredValue","useEffect","useRef","useState","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useEffectEvent","useQueue","useConfig","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValuesWithValidation","LeaveWithoutSaving","baseClass","minimumAnimationTime","Autosave","id","collection","global","globalDoc","config","routes","api","docConfig","lastUpdateTime","mostRecentVersionIsAutosaved","setMostRecentVersionIsAutosaved","setUnpublishedVersionCount","isValid","setBackgroundProcessing","submit","formState","modified","submitted","code","locale","i18n","t","interval","validateOnDraft","_saving","setSaving","saving","debouncedFormState","queueTask","autosaveTimeoutRef","handleAutosave","current","undefined","startTimestamp","endTimestamp","hideIndicator","setTimeout","stopAutoSaveIndicator","Date","getTime","url","method","entitySlug","params","stringify","autosave","depth","draft","addQueryPrefix","slug","apiRoute","path","valid","skipSubmission","result","acceptValues","overrideLocalChanges","action","context","getDocPermissions","incrementVersionCount","disableFormWhileProcessing","disableSuccessStatus","overrides","_status","skipValidation","res","ok","prev","newDate","afterProcess","beforeProcess","didMount","previousDebouncedData","updatedAt","_","formData","__","prevFormData","clearTimeout","_jsxs","className","_jsx","Boolean","Fragment","distance","date"],"sources":["../../../src/elements/Autosave/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'\n\nimport { dequal } from 'dequal/lite'\nimport {\n  formatAdminURL,\n  getAutosaveInterval,\n  hasDraftValidationEnabled,\n  reduceFieldsToValues,\n} from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useDeferredValue, useEffect, useRef, useState } from 'react'\n\nimport type { OnSaveContext } from '../../views/Edit/index.js'\n\nimport {\n  useAllFormFields,\n  useForm,\n  useFormModified,\n  useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useQueue } from '../../hooks/useQueue.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatTimeToNow } from '../../utilities/formatDocTitle/formatDateTitle.js'\nimport { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js'\nimport { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js'\nimport './index.scss'\n\nconst baseClass = 'autosave'\n// The minimum time the saving state should be shown\nconst minimumAnimationTime = 1000\n\nexport type Props = {\n  collection?: ClientCollectionConfig\n  global?: ClientGlobalConfig\n  id?: number | string\n  publishedDocUpdatedAt: string\n}\n\nexport const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc }) => {\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const {\n    docConfig,\n    lastUpdateTime,\n    mostRecentVersionIsAutosaved,\n    setMostRecentVersionIsAutosaved,\n    setUnpublishedVersionCount,\n  } = useDocumentInfo()\n\n  const { isValid, setBackgroundProcessing, submit } = useForm()\n\n  const [formState] = useAllFormFields()\n  const modified = useFormModified()\n  const submitted = useFormSubmitted()\n\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const interval = getAutosaveInterval(docConfig)\n  const validateOnDraft = hasDraftValidationEnabled(docConfig)\n\n  const [_saving, setSaving] = useState(false)\n\n  const saving = useDeferredValue(_saving)\n\n  const debouncedFormState = useDebounce(formState, interval)\n\n  const { queueTask } = useQueue()\n\n  const autosaveTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  const handleAutosave = useEffectEvent(() => {\n    autosaveTimeoutRef.current = undefined\n    // We need to log the time in order to figure out if we need to trigger the state off later\n    let startTimestamp = undefined\n    let endTimestamp = undefined\n\n    const hideIndicator = () => {\n      // If request was faster than minimum animation time, animate the difference\n      if (endTimestamp - startTimestamp < minimumAnimationTime) {\n        autosaveTimeoutRef.current = setTimeout(\n          () => {\n            setSaving(false)\n          },\n          minimumAnimationTime - (endTimestamp - startTimestamp),\n        )\n      } else {\n        stopAutoSaveIndicator()\n      }\n    }\n\n    queueTask(\n      async () => {\n        if (modified) {\n          startTimestamp = new Date().getTime()\n\n          setSaving(true)\n\n          let url: string\n          let method: string\n          let entitySlug: string\n          const params = qs.stringify(\n            {\n              autosave: true,\n              depth: 0,\n              draft: true,\n              'fallback-locale': 'null',\n              locale,\n            },\n            {\n              addQueryPrefix: true,\n            },\n          )\n\n          if (collection && id) {\n            entitySlug = collection.slug\n            url = formatAdminURL({\n              apiRoute: api,\n              path: `/${entitySlug}/${id}${params}`,\n            })\n            method = 'PATCH'\n          }\n\n          if (globalDoc) {\n            entitySlug = globalDoc.slug\n            url = formatAdminURL({\n              apiRoute: api,\n              path: `/globals/${entitySlug}${params}`,\n            })\n            method = 'POST'\n          }\n\n          const { valid } = reduceFieldsToValuesWithValidation(formState, true)\n\n          const skipSubmission = submitted && !valid && validateOnDraft\n\n          if (!skipSubmission && modified && url) {\n            const result = await submit<any, OnSaveContext>({\n              acceptValues: {\n                overrideLocalChanges: false,\n              },\n              action: url,\n              context: {\n                getDocPermissions: false,\n                incrementVersionCount: !mostRecentVersionIsAutosaved,\n              },\n              disableFormWhileProcessing: false,\n              disableSuccessStatus: true,\n              method,\n              overrides: {\n                _status: 'draft',\n              },\n              skipValidation: !validateOnDraft,\n            })\n\n            if (result && result?.res?.ok && !mostRecentVersionIsAutosaved) {\n              setMostRecentVersionIsAutosaved(true)\n              setUnpublishedVersionCount((prev) => prev + 1)\n            }\n\n            const newDate = new Date()\n\n            // We need to log the time in order to figure out if we need to trigger the state off later\n            endTimestamp = newDate.getTime()\n\n            hideIndicator()\n          }\n        }\n      },\n      {\n        afterProcess: () => {\n          setBackgroundProcessing(false)\n        },\n        beforeProcess: () => {\n          setBackgroundProcessing(true)\n        },\n      },\n    )\n  })\n\n  const didMount = useRef(false)\n  const previousDebouncedData = useRef(reduceFieldsToValues(debouncedFormState))\n\n  // When debounced fields change, autosave\n  useEffect(() => {\n    /**\n     * Ensure autosave doesn't run on mount\n     */\n    if (!didMount.current) {\n      didMount.current = true\n      return\n    }\n\n    /**\n     * Ensure autosave only runs if the form data changes, not every time the entire form state changes\n     * Remove `updatedAt` from comparison as it changes on every autosave interval.\n     */\n    const { updatedAt: _, ...formData } = reduceFieldsToValues(debouncedFormState)\n    const { updatedAt: __, ...prevFormData } = previousDebouncedData.current\n\n    if (dequal(formData, prevFormData)) {\n      return\n    }\n\n    previousDebouncedData.current = formData\n\n    handleAutosave()\n  }, [debouncedFormState])\n\n  /**\n   * If component unmounts, clear the autosave timeout\n   */\n  useEffect(() => {\n    return () => {\n      stopAutoSaveIndicator()\n    }\n  }, [])\n\n  const stopAutoSaveIndicator = useEffectEvent(() => {\n    if (autosaveTimeoutRef.current) {\n      clearTimeout(autosaveTimeoutRef.current)\n    }\n\n    setSaving(false)\n  })\n\n  return (\n    <div className={baseClass}>\n      {validateOnDraft && !isValid && <LeaveWithoutSaving />}\n      {saving && t('general:saving')}\n      {!saving && Boolean(lastUpdateTime) && (\n        <React.Fragment>\n          {t('version:lastSavedAgo', {\n            distance: formatTimeToNow({ date: lastUpdateTime, i18n }),\n          })}\n        </React.Fragment>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["dequal","formatAdminURL","getAutosaveInterval","hasDraftValidationEnabled","reduceFieldsToValues","qs","React","useDeferredValue","useEffect","useRef","useState","useAllFormFields","useForm","useFormModified","useFormSubmitted","useDebounce","useEffectEvent","useQueue","useConfig","useDocumentInfo","useLocale","useTranslation","formatTimeToNow","reduceFieldsToValuesWithValidation","LeaveWithoutSaving","baseClass","minimumAnimationTime","Autosave","id","collection","global","globalDoc","config","routes","api","docConfig","lastUpdateTime","mostRecentVersionIsAutosaved","setMostRecentVersionIsAutosaved","setUnpublishedVersionCount","isValid","setBackgroundProcessing","submit","formState","modified","submitted","code","locale","i18n","t","interval","validateOnDraft","_saving","setSaving","saving","debouncedFormState","queueTask","autosaveTimeoutRef","handleAutosave","current","undefined","startTimestamp","endTimestamp","hideIndicator","setTimeout","stopAutoSaveIndicator","Date","getTime","url","method","entitySlug","params","stringify","autosave","depth","draft","addQueryPrefix","slug","apiRoute","path","valid","skipSubmission","result","acceptValues","overrideLocalChanges","action","context","getDocPermissions","incrementVersionCount","disableFormWhileProcessing","disableSuccessStatus","overrides","_status","skipValidation","res","ok","prev","newDate","afterProcess","beforeProcess","didMount","previousDebouncedData","updatedAt","_","formData","__","prevFormData","clearTimeout","hasVisibleContent","Boolean","_jsxs","Fragment","_jsx","className","distance","date"],"sources":["../../../src/elements/Autosave/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, ClientGlobalConfig } from 'payload'\n\nimport { dequal } from 'dequal/lite'\nimport {\n  formatAdminURL,\n  getAutosaveInterval,\n  hasDraftValidationEnabled,\n  reduceFieldsToValues,\n} from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useDeferredValue, useEffect, useRef, useState } from 'react'\n\nimport type { OnSaveContext } from '../../views/Edit/index.js'\n\nimport {\n  useAllFormFields,\n  useForm,\n  useFormModified,\n  useFormSubmitted,\n} from '../../forms/Form/context.js'\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport { useQueue } from '../../hooks/useQueue.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useLocale } from '../../providers/Locale/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { formatTimeToNow } from '../../utilities/formatDocTitle/formatDateTitle.js'\nimport { reduceFieldsToValuesWithValidation } from '../../utilities/reduceFieldsToValuesWithValidation.js'\nimport { LeaveWithoutSaving } from '../LeaveWithoutSaving/index.js'\nimport './index.css'\n\nconst baseClass = 'autosave'\n// The minimum time the saving state should be shown\nconst minimumAnimationTime = 1000\n\nexport type Props = {\n  collection?: ClientCollectionConfig\n  global?: ClientGlobalConfig\n  id?: number | string\n  publishedDocUpdatedAt: string\n}\n\nexport const Autosave: React.FC<Props> = ({ id, collection, global: globalDoc }) => {\n  const {\n    config: {\n      routes: { api },\n    },\n  } = useConfig()\n\n  const {\n    docConfig,\n    lastUpdateTime,\n    mostRecentVersionIsAutosaved,\n    setMostRecentVersionIsAutosaved,\n    setUnpublishedVersionCount,\n  } = useDocumentInfo()\n\n  const { isValid, setBackgroundProcessing, submit } = useForm()\n\n  const [formState] = useAllFormFields()\n  const modified = useFormModified()\n  const submitted = useFormSubmitted()\n\n  const { code: locale } = useLocale()\n  const { i18n, t } = useTranslation()\n\n  const interval = getAutosaveInterval(docConfig)\n  const validateOnDraft = hasDraftValidationEnabled(docConfig)\n\n  const [_saving, setSaving] = useState(false)\n\n  const saving = useDeferredValue(_saving)\n\n  const debouncedFormState = useDebounce(formState, interval)\n\n  const { queueTask } = useQueue()\n\n  const autosaveTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  const handleAutosave = useEffectEvent(() => {\n    autosaveTimeoutRef.current = undefined\n    // We need to log the time in order to figure out if we need to trigger the state off later\n    let startTimestamp = undefined\n    let endTimestamp = undefined\n\n    const hideIndicator = () => {\n      // If request was faster than minimum animation time, animate the difference\n      if (endTimestamp - startTimestamp < minimumAnimationTime) {\n        autosaveTimeoutRef.current = setTimeout(\n          () => {\n            setSaving(false)\n          },\n          minimumAnimationTime - (endTimestamp - startTimestamp),\n        )\n      } else {\n        stopAutoSaveIndicator()\n      }\n    }\n\n    queueTask(\n      async () => {\n        if (modified) {\n          startTimestamp = new Date().getTime()\n\n          setSaving(true)\n\n          let url: string\n          let method: string\n          let entitySlug: string\n          const params = qs.stringify(\n            {\n              autosave: true,\n              depth: 0,\n              draft: true,\n              'fallback-locale': 'null',\n              locale,\n            },\n            {\n              addQueryPrefix: true,\n            },\n          )\n\n          if (collection && id) {\n            entitySlug = collection.slug\n            url = formatAdminURL({\n              apiRoute: api,\n              path: `/${entitySlug}/${id}${params}`,\n            })\n            method = 'PATCH'\n          }\n\n          if (globalDoc) {\n            entitySlug = globalDoc.slug\n            url = formatAdminURL({\n              apiRoute: api,\n              path: `/globals/${entitySlug}${params}`,\n            })\n            method = 'POST'\n          }\n\n          const { valid } = reduceFieldsToValuesWithValidation(formState, true)\n\n          const skipSubmission = submitted && !valid && validateOnDraft\n\n          if (!skipSubmission && modified && url) {\n            const result = await submit<any, OnSaveContext>({\n              acceptValues: {\n                overrideLocalChanges: false,\n              },\n              action: url,\n              context: {\n                getDocPermissions: false,\n                incrementVersionCount: !mostRecentVersionIsAutosaved,\n              },\n              disableFormWhileProcessing: false,\n              disableSuccessStatus: true,\n              method,\n              overrides: {\n                _status: 'draft',\n              },\n              skipValidation: !validateOnDraft,\n            })\n\n            if (result && result?.res?.ok && !mostRecentVersionIsAutosaved) {\n              setMostRecentVersionIsAutosaved(true)\n              setUnpublishedVersionCount((prev) => prev + 1)\n            }\n\n            const newDate = new Date()\n\n            // We need to log the time in order to figure out if we need to trigger the state off later\n            endTimestamp = newDate.getTime()\n\n            hideIndicator()\n          }\n        }\n      },\n      {\n        afterProcess: () => {\n          setBackgroundProcessing(false)\n        },\n        beforeProcess: () => {\n          setBackgroundProcessing(true)\n        },\n      },\n    )\n  })\n\n  const didMount = useRef(false)\n  const previousDebouncedData = useRef(reduceFieldsToValues(debouncedFormState))\n\n  // When debounced fields change, autosave\n  useEffect(() => {\n    /**\n     * Ensure autosave doesn't run on mount\n     */\n    if (!didMount.current) {\n      didMount.current = true\n      return\n    }\n\n    /**\n     * Ensure autosave only runs if the form data changes, not every time the entire form state changes\n     * Remove `updatedAt` from comparison as it changes on every autosave interval.\n     */\n    const { updatedAt: _, ...formData } = reduceFieldsToValues(debouncedFormState)\n    const { updatedAt: __, ...prevFormData } = previousDebouncedData.current\n\n    if (dequal(formData, prevFormData)) {\n      return\n    }\n\n    previousDebouncedData.current = formData\n\n    handleAutosave()\n  }, [debouncedFormState])\n\n  /**\n   * If component unmounts, clear the autosave timeout\n   */\n  useEffect(() => {\n    return () => {\n      stopAutoSaveIndicator()\n    }\n  }, [])\n\n  const stopAutoSaveIndicator = useEffectEvent(() => {\n    if (autosaveTimeoutRef.current) {\n      clearTimeout(autosaveTimeoutRef.current)\n    }\n\n    setSaving(false)\n  })\n\n  const hasVisibleContent = saving || Boolean(lastUpdateTime)\n\n  return (\n    <React.Fragment>\n      {validateOnDraft && !isValid && <LeaveWithoutSaving />}\n      {hasVisibleContent && (\n        <div className={baseClass}>\n          {saving && t('general:saving')}\n          {!saving && Boolean(lastUpdateTime) && (\n            <React.Fragment>\n              {t('version:lastSavedAgo', {\n                distance: formatTimeToNow({ date: lastUpdateTime, i18n }),\n              })}\n            </React.Fragment>\n          )}\n        </div>\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Banner/index.css

@@ -0,0 +1,70 @@
+@layer payload-default {
+  .banner {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-strong-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    line-height: var(--text-body-medium-strong-line-height);
+    letter-spacing: var(--text-letter-spacing);
+    border-radius: var(--radius-medium);
+    padding: var(--spacer-2);
+    color: var(--color-text);
+    background: var(--color-bg-secondary);
+  }
+
+  .banner--has-action {
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+      background: var(--color-bg-hover);
+    }
+
+    &:active {
+      background: var(--color-bg-pressed);
+    }
+  }
+
+  .banner__icon {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .banner--type-danger {
+    background: var(--color-bg-danger-tertiary);
+
+    &.banner--has-action:hover {
+      background: var(--color-bg-danger-tertiary-hover);
+    }
+
+    &.banner--has-action:active {
+      background: var(--color-bg-danger-tertiary-pressed);
+    }
+  }
+
+  .banner--type-brand {
+    background: var(--color-bg-brand-tertiary);
+
+    &.banner--has-action:hover {
+      background: var(--color-bg-brand-tertiary-hover);
+    }
+  }
+
+  .banner--type-success {
+    background: var(--color-bg-success-tertiary);
+
+    &.banner--has-action:hover {
+      background: var(--color-bg-success-tertiary-hover);
+    }
+  }
+
+  .banner--type-warning {
+    background: var(--color-bg-warning-tertiary);
+
+    &.banner--has-action:hover {
+      background: var(--color-bg-warning-tertiary-hover);
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { MouseEvent } from 'react';
 import React from 'react';
-import './index.scss';
+import './index.css';
 type onClick = (event: MouseEvent) => void;
 export type Props = Readonly<{
     alignIcon?: 'left' | 'right';
@@ -9,7 +9,7 @@ export type Props = Readonly<{
     icon?: React.ReactNode;
     onClick?: onClick;
     to?: string;
-    type?: 'default' | 'error' | 'info' | 'success';
+    type?: 'brand' | 'danger' | 'default' | 'success' | 'warning';
 }>;
 export type RenderedTypeProps = {
     children?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Banner/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAKrB,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;AAE1C,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;CAChD,CAAC,CAAA;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqClC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Banner/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAA;AAE1C,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;CAC9D,CAAC,CAAA;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,EAAE,EAAE,MAAM,CAAA;CACX,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuClC,CAAA"}

package/dist/elements/Banner/index.js

@@ -2,18 +2,20 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import { InfoIcon } from '../../icons/Info/index.js';
 import { Link } from '../Link/index.js';
+import './index.css';
 const baseClass = 'banner';
 export const Banner = ({
   type = 'default',
-  alignIcon = 'right',
+  alignIcon = 'left',
   children,
   className,
-  icon,
+  icon: iconFromProps,
   onClick,
   to
 }) => {
+  const icon = iconFromProps === undefined ? /*#__PURE__*/_jsx(InfoIcon, {}) : iconFromProps;
   const classes = [baseClass, `${baseClass}--type-${type}`, className && className, to && `${baseClass}--has-link`, (to || onClick) && `${baseClass}--has-action`, icon && `${baseClass}--has-icon`, icon && `${baseClass}--align-icon-${alignIcon}`].filter(Boolean).join(' ');
   let RenderedType = 'div';
   if (onClick && !to) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Link","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 React from 'react'\n\nimport './index.scss'\nimport { Link } from '../Link/index.js'\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,KAAA,MAAW;AAElB,OAAO;AACP,SAASC,IAAI,QAAQ;AAErB,MAAMC,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,GAAed,IAAA;EACjB;EAEA,oBACEe,KAAA,CAACD,YAAA;IAAaR,SAAA,EAAWI,OAAA;IAASM,IAAA,EAAMP,EAAA,IAAM;IAAMD,OAAA,EAASA,OAAA;eAC1DD,IAAA,IAAQH,SAAA,KAAc,uBAAUa,IAAA,CAAClB,KAAA,CAAMmB,QAAQ;gBAAEX;qBAClDU,IAAA,CAAC;MAAKX,SAAA,EAAW,GAAGL,SAAA,WAAoB;gBAAGI;QAC1CE,IAAA,IAAQH,SAAA,KAAc,wBAAWa,IAAA,CAAClB,KAAA,CAAMmB,QAAQ;gBAAEX;;;AAGzD","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","InfoIcon","Link","baseClass","Banner","type","alignIcon","children","className","icon","iconFromProps","onClick","to","undefined","_jsx","classes","filter","Boolean","join","RenderedType","_jsxs","href","Fragment"],"sources":["../../../src/elements/Banner/index.tsx"],"sourcesContent":["'use client'\nimport type { MouseEvent } from 'react'\n\nimport React from 'react'\n\nimport { InfoIcon } from '../../icons/Info/index.js'\nimport { Link } from '../Link/index.js'\nimport './index.css'\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?: 'brand' | 'danger' | 'default' | 'success' | 'warning'\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 = 'left',\n  children,\n  className,\n  icon: iconFromProps,\n  onClick,\n  to,\n}) => {\n  const icon = iconFromProps === undefined ? <InfoIcon /> : iconFromProps\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,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAqBlB,OAAO,MAAMC,MAAA,GAA0BA,CAAC;EACtCC,IAAA,GAAO,SAAS;EAChBC,SAAA,GAAY,MAAM;EAClBC,QAAQ;EACRC,SAAS;EACTC,IAAA,EAAMC,aAAa;EACnBC,OAAO;EACPC;AAAE,CACH;EACC,MAAMH,IAAA,GAAOC,aAAA,KAAkBG,SAAA,gBAAYC,IAAA,CAACb,QAAA,QAAcS,aAAA;EAE1D,MAAMK,OAAA,GAAU,CACdZ,SAAA,EACA,GAAGA,SAAA,UAAmBE,IAAA,EAAM,EAC5BG,SAAA,IAAaA,SAAA,EACbI,EAAA,IAAM,GAAGT,SAAA,YAAqB,EAC7B,CAAAS,EAAA,IAAMD,OAAM,KAAM,GAAGR,SAAA,cAAuB,EAC7CM,IAAA,IAAQ,GAAGN,SAAA,YAAqB,EAChCM,IAAA,IAAQ,GAAGN,SAAA,gBAAyBG,SAAA,EAAW,CAChD,CACEU,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIC,YAAA,GAA2E;EAE/E,IAAIR,OAAA,IAAW,CAACC,EAAA,EAAI;IAClBO,YAAA,GAAe;EACjB;EACA,IAAIP,EAAA,EAAI;IACNO,YAAA,GAAejB,IAAA;EACjB;EAEA,oBACEkB,KAAA,CAACD,YAAA;IAAaX,SAAA,EAAWO,OAAA;IAASM,IAAA,EAAMT,EAAA,IAAM;IAAMD,OAAA,EAASA,OAAA;eAC1DF,IAAA,IAAQH,SAAA,KAAc,uBAAUQ,IAAA,CAACd,KAAA,CAAMsB,QAAQ;gBAAEb;qBAClDK,IAAA,CAAC;MAAKN,SAAA,EAAW,GAAGL,SAAA,WAAoB;gBAAGI;QAC1CE,IAAA,IAAQH,SAAA,KAAc,wBAAWQ,IAAA,CAACd,KAAA,CAAMsB,QAAQ;gBAAEb;;;AAGzD","ignoreList":[]}

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

@@ -0,0 +1,51 @@
+@layer payload-default {
+  .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);
+  }
+
+  .bulk-upload--actions-bar__navigation {
+    display: flex;
+    gap: var(--spacer-4);
+    align-items: center;
+    width: 100%;
+  }
+
+  .bulk-upload--actions-bar__locationText {
+    font-variant-numeric: tabular-nums;
+    margin: 0;
+  }
+
+  .bulk-upload--actions-bar__controls {
+    display: flex;
+    gap: var(--spacer-2-5);
+
+    .btn {
+      padding: 0;
+    }
+  }
+
+  .bulk-upload--actions-bar__buttons {
+    display: flex;
+    gap: var(--spacer-4);
+    margin-left: auto;
+    white-space: nowrap;
+  }
+
+  @media (max-width: 1024px) {
+    .bulk-upload--actions-bar__navigation {
+      justify-content: space-between;
+    }
+
+    .bulk-upload--actions-bar__saveButtons {
+      display: none;
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { ClientCollectionConfig } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 type Props = {
     readonly collectionConfig: ClientCollectionConfig;
 };

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,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErD,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;CAClD,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,gBAAgB,EAAE,EAAE,KAAK,qBAmDrD;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,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErD,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,aAAa,CAAA;AAIpB,KAAK,KAAK,GAAG;IACX,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;CAClD,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,gBAAgB,EAAE,EAAE,KAAK,qBAmDrD;AAED,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AACD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,EAAE,YAAY,qBA4BlD"}