@payloadcms/ui 3.49.0-canary.7 → 3.49.0

package/dist/elements/ListHeaderTabs/ByFolderPill.js

@@ -0,0 +1,70 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatAdminURL } from 'payload/shared';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+import './index.scss';
+const baseClass = 'list-pills';
+export function ByFolderPill(t0) {
+  const $ = _c(10);
+  const {
+    collectionConfig,
+    folderCollectionSlug,
+    viewType
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  const {
+    config
+  } = useConfig();
+  if (!folderCollectionSlug) {
+    return null;
+  }
+  const t1 = viewType === "folders" && `${baseClass}__button--active`;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = [`${baseClass}__button`, t1].filter(Boolean);
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = t2.join(" ");
+  const t4 = viewType === "folders";
+  const t5 = viewType === "list" || viewType === "trash" ? "link" : "div";
+  const t6 = `/collections/${collectionConfig.slug}/${folderCollectionSlug}`;
+  let t7;
+  if ($[2] !== config.routes.admin || $[3] !== config.serverURL || $[4] !== t || $[5] !== t3 || $[6] !== t4 || $[7] !== t5 || $[8] !== t6) {
+    t7 = _jsx("div", {
+      className: baseClass,
+      children: _jsx(Button, {
+        buttonStyle: "tab",
+        className: t3,
+        disabled: t4,
+        el: t5,
+        to: formatAdminURL({
+          adminRoute: config.routes.admin,
+          path: t6,
+          serverURL: config.serverURL
+        }),
+        children: t("folder:byFolder")
+      })
+    });
+    $[2] = config.routes.admin;
+    $[3] = config.serverURL;
+    $[4] = t;
+    $[5] = t3;
+    $[6] = t4;
+    $[7] = t5;
+    $[8] = t6;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  return t7;
+}
+//# sourceMappingURL=ByFolderPill.js.map

package/dist/elements/ListHeaderTabs/ByFolderPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ByFolderPill.js","names":["c","_c","formatAdminURL","useConfig","useTranslation","Button","baseClass","ByFolderPill","t0","$","collectionConfig","folderCollectionSlug","viewType","t","config","t1","t2","filter","Boolean","t3","join","t4","t5","t6","slug","t7","routes","admin","serverURL","_jsx","className","children","buttonStyle","disabled","el","to","adminRoute","path"],"sources":["../../../src/elements/ListHeaderTabs/ByFolderPill.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, ViewTypes } from 'payload'\n\nimport { formatAdminURL } from 'payload/shared'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-pills'\n\ntype ByFolderPillProps = {\n  readonly collectionConfig: ClientCollectionConfig\n  readonly folderCollectionSlug: string\n  readonly viewType: ViewTypes\n}\n\nexport function ByFolderPill({\n  collectionConfig,\n  folderCollectionSlug,\n  viewType,\n}: ByFolderPillProps) {\n  const { t } = useTranslation()\n  const { config } = useConfig()\n\n  if (!folderCollectionSlug) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <Button\n        buttonStyle=\"tab\"\n        className={[\n          `${baseClass}__button`,\n          viewType === 'folders' && `${baseClass}__button--active`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        disabled={viewType === 'folders'}\n        el={viewType === 'list' || viewType === 'trash' ? 'link' : 'div'}\n        to={formatAdminURL({\n          adminRoute: config.routes.admin,\n          path: `/collections/${collectionConfig.slug}/${folderCollectionSlug}`,\n          serverURL: config.serverURL,\n        })}\n      >\n        {t('folder:byFolder')}\n      </Button>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAE/B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAQlB,OAAO,SAAAC,aAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAsB;IAAAS,gBAAA;IAAAC,oBAAA;IAAAC;EAAA,IAAAJ,EAIT;EAClB;IAAAK;EAAA,IAAcT,cAAA;EACd;IAAAU;EAAA,IAAmBX,SAAA;EAAA,KAEdQ,oBAAA;IAAA;EAAA;EAUG,MAAAI,EAAA,GAAAH,QAAA,KAAa,aAAa,GAAAN,SAAA,kBAA8B;EAAA,IAAAU,EAAA;EAAA,IAAAP,CAAA,QAAAM,EAAA;IAF/CC,EAAA,IACT,GAAAV,SAAA,UAAsB,EACtBS,EAAwD,EAAAE,MAAA,CAAAC,OAEhD;IAAAT,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAO,EAAA;EAAA;IAAAA,EAAA,GAAAP,CAAA;EAAA;EAJC,MAAAU,EAAA,GAAAH,EAID,CAAAI,IAAA,CACF;EACE,MAAAC,EAAA,GAAAT,QAAA,KAAa;EACnB,MAAAU,EAAA,GAAAV,QAAA,KAAa,UAAUA,QAAA,KAAa,UAAU,SAAS;EAGnD,MAAAW,EAAA,mBAAgBb,gBAAA,CAAAc,IAAA,IAAyBb,oBAAA,EAAsB;EAAA,IAAAc,EAAA;EAAA,IAAAhB,CAAA,QAAAK,MAAA,CAAAY,MAAA,CAAAC,KAAA,IAAAlB,CAAA,QAAAK,MAAA,CAAAc,SAAA,IAAAnB,CAAA,QAAAI,CAAA,IAAAJ,CAAA,QAAAU,EAAA,IAAAV,CAAA,QAAAY,EAAA,IAAAZ,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAc,EAAA;IAb3EE,EAAA,GAAAI,IAAA,CAAC;MAAAC,SAAA,EAAAxB,SAAA;MAAAyB,QAAA,EACCF,IAAA,CAAAxB,MAAA;QAAA2B,WAAA,EACc;QAAAF,SAAA,EACDX,EAKH;QAAAc,QAAA,EACEZ,EAAa;QAAAa,EAAA,EACnBZ,EAAuD;QAAAa,EAAA,EACvDjC,cAAA;UAAAkC,UAAA,EACUtB,MAAA,CAAAY,MAAA,CAAAC,KAAA;UAAAU,IAAA,EACNd,EAA+D;UAAAK,SAAA,EAC1Dd,MAAA,CAAAc;QAAA,CACb;QAAAG,QAAA,EAEClB,CAAA,CAAE;MAAA,C;;;;;;;;;;;;;SAjBPY,E","ignoreList":[]}

package/dist/elements/ListHeaderTabs/DefaultListPill.d.ts

@@ -0,0 +1,9 @@
+import type { ClientCollectionConfig, ViewTypes } from 'payload';
+import './index.scss';
+type DefaultListPillProps = {
+    readonly collectionConfig: ClientCollectionConfig;
+    readonly viewType: ViewTypes;
+};
+export declare function DefaultListPill({ collectionConfig, viewType }: DefaultListPillProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=DefaultListPill.d.ts.map

package/dist/elements/ListHeaderTabs/DefaultListPill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultListPill.d.ts","sourceRoot":"","sources":["../../../src/elements/ListHeaderTabs/DefaultListPill.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAQhE,OAAO,cAAc,CAAA;AAIrB,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAC7B,CAAA;AAED,wBAAgB,eAAe,CAAC,EAAE,gBAAgB,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BA2BnF"}

package/dist/elements/ListHeaderTabs/DefaultListPill.js

@@ -0,0 +1,68 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { formatAdminURL } from 'payload/shared';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+import './index.scss';
+const baseClass = 'list-pills';
+export function DefaultListPill(t0) {
+  const $ = _c(11);
+  const {
+    collectionConfig,
+    viewType
+  } = t0;
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    config
+  } = useConfig();
+  const buttonLabel = `${t("general:all")} ${getTranslation(collectionConfig?.labels?.plural, i18n)}`;
+  let t1;
+  if ($[0] !== buttonLabel || $[1] !== collectionConfig.labels?.plural || $[2] !== collectionConfig.slug || $[3] !== config.routes.admin || $[4] !== config.serverURL || $[5] !== i18n || $[6] !== t || $[7] !== viewType) {
+    const buttonId = buttonLabel.toLowerCase().replace(/\s+/g, "-");
+    const t2 = viewType === "list" && `${baseClass}__button--active`;
+    let t3;
+    if ($[9] !== t2) {
+      t3 = [`${baseClass}__button`, t2].filter(Boolean);
+      $[9] = t2;
+      $[10] = t3;
+    } else {
+      t3 = $[10];
+    }
+    t1 = _jsx("div", {
+      className: baseClass,
+      children: _jsxs(Button, {
+        buttonStyle: "tab",
+        className: t3.join(" "),
+        disabled: viewType === "list",
+        el: viewType === "folders" || viewType === "trash" ? "link" : "div",
+        id: buttonId,
+        to: formatAdminURL({
+          adminRoute: config.routes.admin,
+          path: `/collections/${collectionConfig.slug}`,
+          serverURL: config.serverURL
+        }),
+        children: [t("general:all"), " ", getTranslation(collectionConfig?.labels?.plural, i18n)]
+      })
+    });
+    $[0] = buttonLabel;
+    $[1] = collectionConfig.labels?.plural;
+    $[2] = collectionConfig.slug;
+    $[3] = config.routes.admin;
+    $[4] = config.serverURL;
+    $[5] = i18n;
+    $[6] = t;
+    $[7] = viewType;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  return t1;
+}
+//# sourceMappingURL=DefaultListPill.js.map

package/dist/elements/ListHeaderTabs/DefaultListPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultListPill.js","names":["c","_c","getTranslation","formatAdminURL","useConfig","useTranslation","Button","baseClass","DefaultListPill","t0","$","collectionConfig","viewType","i18n","t","config","buttonLabel","labels","plural","t1","slug","routes","admin","serverURL","buttonId","toLowerCase","replace","t2","t3","filter","Boolean","_jsx","className","children","_jsxs","buttonStyle","join","disabled","el","id","to","adminRoute","path"],"sources":["../../../src/elements/ListHeaderTabs/DefaultListPill.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, ViewTypes } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.scss'\n\nconst baseClass = 'list-pills'\n\ntype DefaultListPillProps = {\n  readonly collectionConfig: ClientCollectionConfig\n  readonly viewType: ViewTypes\n}\n\nexport function DefaultListPill({ collectionConfig, viewType }: DefaultListPillProps) {\n  const { i18n, t } = useTranslation()\n  const { config } = useConfig()\n\n  const buttonLabel = `${t('general:all')} ${getTranslation(collectionConfig?.labels?.plural, i18n)}`\n  const buttonId = buttonLabel.toLowerCase().replace(/\\s+/g, '-')\n\n  return (\n    <div className={baseClass}>\n      <Button\n        buttonStyle=\"tab\"\n        className={[`${baseClass}__button`, viewType === 'list' && `${baseClass}__button--active`]\n          .filter(Boolean)\n          .join(' ')}\n        disabled={viewType === 'list'}\n        el={viewType === 'folders' || viewType === 'trash' ? 'link' : 'div'}\n        id={buttonId}\n        to={formatAdminURL({\n          adminRoute: config.routes.admin,\n          path: `/collections/${collectionConfig.slug}`,\n          serverURL: config.serverURL,\n        })}\n      >\n        {t('general:all')} {getTranslation(collectionConfig?.labels?.plural, i18n)}\n      </Button>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAE/B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,SAAAC,gBAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAyB;IAAAU,gBAAA;IAAAC;EAAA,IAAAH,EAAoD;EAClF;IAAAI,IAAA;IAAAC;EAAA,IAAoBT,cAAA;EACpB;IAAAU;EAAA,IAAmBX,SAAA;EAEnB,MAAAY,WAAA,GAAoB,GAAGF,CAAA,CAAE,kBAAkBZ,cAAA,CAAeS,gBAAA,EAAAM,MAAA,EAAAC,MAAA,EAAkCL,IAAA,GAAO;EAAA,IAAAM,EAAA;EAAA,IAAAT,CAAA,QAAAM,WAAA,IAAAN,CAAA,QAAAC,gBAAA,CAAAM,MAAA,EAAAC,MAAA,IAAAR,CAAA,QAAAC,gBAAA,CAAAS,IAAA,IAAAV,CAAA,QAAAK,MAAA,CAAAM,MAAA,CAAAC,KAAA,IAAAZ,CAAA,QAAAK,MAAA,CAAAQ,SAAA,IAAAb,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAI,CAAA,IAAAJ,CAAA,QAAAE,QAAA;IACnG,MAAAY,QAAA,GAAiBR,WAAA,CAAAS,WAAA,CAAuB,EAAAC,OAAA,SAAmB;IAMjB,MAAAC,EAAA,GAAAf,QAAA,KAAa,UAAU,GAAAL,SAAA,kBAA8B;IAAA,IAAAqB,EAAA;IAAA,IAAAlB,CAAA,QAAAiB,EAAA;MAA9EC,EAAA,IAAC,GAAArB,SAAA,UAAsB,EAAEoB,EAAqD,EAAAE,MAAA,CAAAC,OAC/E;MAAApB,CAAA,MAAAiB,EAAA;MAAAjB,CAAA,OAAAkB,EAAA;IAAA;MAAAA,EAAA,GAAAlB,CAAA;IAAA;IAJdS,EAAA,GAAAY,IAAA,CAAC;MAAAC,SAAA,EAAAzB,SAAA;MAAA0B,QAAA,EACCC,KAAA,CAAA5B,MAAA;QAAA6B,WAAA,EACc;QAAAH,SAAA,EACDJ,EACD,CAAAQ,IAAA,CACF;QAAAC,QAAA,EACEzB,QAAA,KAAa;QAAA0B,EAAA,EACnB1B,QAAA,KAAa,aAAaA,QAAA,KAAa,UAAU,SAAS;QAAA2B,EAAA,EAC1Df,QAAA;QAAAgB,EAAA,EACArC,cAAA;UAAAsC,UAAA,EACU1B,MAAA,CAAAM,MAAA,CAAAC,KAAA;UAAAoB,IAAA,EACN,gBAAgB/B,gBAAA,CAAAS,IAAA,EAAuB;UAAAG,SAAA,EAClCR,MAAA,CAAAQ;QAAA,CACb;QAAAU,QAAA,GAECnB,CAAA,CAAE,gBAAe,KAAEZ,cAAA,CAAeS,gBAAA,EAAAM,MAAA,EAAAC,MAAA,EAAkCL,IAAA;MAAA,C;;;;;;;;;;;;;;SAfzEM,E","ignoreList":[]}

package/dist/elements/ListHeaderTabs/TrashPill.d.ts

@@ -0,0 +1,6 @@
+import type { ClientCollectionConfig, ViewTypes } from 'payload';
+export declare function TrashPill({ collectionConfig, viewType, }: {
+    collectionConfig: ClientCollectionConfig;
+    readonly viewType: ViewTypes;
+}): import("react").JSX.Element;
+//# sourceMappingURL=TrashPill.d.ts.map

package/dist/elements/ListHeaderTabs/TrashPill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrashPill.d.ts","sourceRoot":"","sources":["../../../src/elements/ListHeaderTabs/TrashPill.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAQhE,wBAAgB,SAAS,CAAC,EACxB,gBAAgB,EAChB,QAAQ,GACT,EAAE;IACD,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAC7B,+BAwBA"}

package/dist/elements/ListHeaderTabs/TrashPill.js

@@ -0,0 +1,53 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatAdminURL } from 'payload/shared';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+export function TrashPill(t0) {
+  const $ = _c(7);
+  const {
+    collectionConfig,
+    viewType
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  const {
+    config
+  } = useConfig();
+  if (!collectionConfig.trash) {
+    return null;
+  }
+  const t1 = viewType === "trash";
+  const t2 = viewType === "list" || viewType === "folders" ? "link" : "div";
+  const t3 = `/collections/${collectionConfig.slug}/trash`;
+  let t4;
+  if ($[0] !== config.routes.admin || $[1] !== config.serverURL || $[2] !== t || $[3] !== t1 || $[4] !== t2 || $[5] !== t3) {
+    t4 = _jsx(Button, {
+      buttonStyle: "tab",
+      disabled: t1,
+      el: t2,
+      id: "trash-view-pill",
+      to: formatAdminURL({
+        adminRoute: config.routes.admin,
+        path: t3,
+        serverURL: config.serverURL
+      }),
+      children: t("general:trash")
+    }, "trash-view-pill");
+    $[0] = config.routes.admin;
+    $[1] = config.serverURL;
+    $[2] = t;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  return t4;
+}
+//# sourceMappingURL=TrashPill.js.map

package/dist/elements/ListHeaderTabs/TrashPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrashPill.js","names":["c","_c","formatAdminURL","useConfig","useTranslation","Button","TrashPill","t0","$","collectionConfig","viewType","t","config","trash","t1","t2","t3","slug","t4","routes","admin","serverURL","_jsx","buttonStyle","disabled","el","id","to","adminRoute","path","children"],"sources":["../../../src/elements/ListHeaderTabs/TrashPill.tsx"],"sourcesContent":["'use client'\n\nimport type { ClientCollectionConfig, ViewTypes } from 'payload'\n\nimport { formatAdminURL } from 'payload/shared'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\n\nexport function TrashPill({\n  collectionConfig,\n  viewType,\n}: {\n  collectionConfig: ClientCollectionConfig\n  readonly viewType: ViewTypes\n}) {\n  const { t } = useTranslation()\n  const { config } = useConfig()\n\n  if (!collectionConfig.trash) {\n    return null\n  }\n\n  return (\n    <Button\n      buttonStyle=\"tab\"\n      disabled={viewType === 'trash'}\n      el={viewType === 'list' || viewType === 'folders' ? 'link' : 'div'}\n      id=\"trash-view-pill\"\n      key=\"trash-view-pill\"\n      to={formatAdminURL({\n        adminRoute: config.routes.admin,\n        path: `/collections/${collectionConfig.slug}/trash`,\n        serverURL: config.serverURL,\n      })}\n    >\n      {t('general:trash')}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,SAASC,cAAc,QAAQ;AAE/B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AAEvB,OAAO,SAAAC,UAAAC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAmB;IAAAQ,gBAAA;IAAAC;EAAA,IAAAH,EAMzB;EACC;IAAAI;EAAA,IAAcP,cAAA;EACd;IAAAQ;EAAA,IAAmBT,SAAA;EAAA,KAEdM,gBAAA,CAAAI,KAAA;IAAA;EAAA;EAOS,MAAAC,EAAA,GAAAJ,QAAA,KAAa;EACnB,MAAAK,EAAA,GAAAL,QAAA,KAAa,UAAUA,QAAA,KAAa,YAAY,SAAS;EAKrD,MAAAM,EAAA,mBAAgBP,gBAAA,CAAAQ,IAAA,QAA6B;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAI,MAAA,CAAAO,MAAA,CAAAC,KAAA,IAAAZ,CAAA,QAAAI,MAAA,CAAAS,SAAA,IAAAb,CAAA,QAAAG,CAAA,IAAAH,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAO,EAAA,IAAAP,CAAA,QAAAQ,EAAA;IARvDE,EAAA,GAAAI,IAAA,CAAAjB,MAAA;MAAAkB,WAAA,EACc;MAAAC,QAAA,EACFV,EAAa;MAAAW,EAAA,EACnBV,EAAyD;MAAAW,EAAA,EAC1D;MAAAC,EAAA,EAECzB,cAAA;QAAA0B,UAAA,EACUhB,MAAA,CAAAO,MAAA,CAAAC,KAAA;QAAAS,IAAA,EACNb,EAA6C;QAAAK,SAAA,EACxCT,MAAA,CAAAS;MAAA,CACb;MAAAS,QAAA,EAECnB,CAAA,CAAE;IAAA,GAPC;IAAAH,CAAA,MAAAI,MAAA,CAAAO,MAAA,CAAAC,KAAA;IAAAZ,CAAA,MAAAI,MAAA,CAAAS,SAAA;IAAAb,CAAA,MAAAG,CAAA;IAAAH,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAO,EAAA;IAAAP,CAAA,MAAAQ,EAAA;IAAAR,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAA,OALNU,EAKM;AAAA","ignoreList":[]}

package/dist/elements/{ListFolderPills → ListHeaderTabs}/index.scss

@@ -1,7 +1,6 @@
 @layer payload-default {
-  .list-folder-pills {
+  .list-pills {
     display: flex;
     gap: calc(var(--base) * 0.5);
-    margin-left: calc(var(--base) * 0.5);
   }
 }

package/dist/elements/ListSelection/index.scss

@@ -10,7 +10,7 @@
 
     &__actions {
       display: flex;
-      gap: calc(var(--base) * 0.3);
+      gap: calc(var(--base) * 0.5);
     }
 
     &__button {

package/dist/elements/PageControls/GroupByPageControls.d.ts

@@ -0,0 +1,16 @@
+import type { ClientCollectionConfig, PaginatedDocs } from 'payload';
+import React from 'react';
+/**
+ * If `groupBy` is set in the query, multiple tables will render, one for each group.
+ * In this case, each table needs its own `PageControls` to handle pagination.
+ * These page controls, however, should not modify the global `ListQuery` state.
+ * Instead, they should only handle the pagination for the current group.
+ * To do this, build a wrapper around `PageControlsComponent` that handles the pagination logic for the current group.
+ */
+export declare const GroupByPageControls: React.FC<{
+    AfterPageControls?: React.ReactNode;
+    collectionConfig: ClientCollectionConfig;
+    data: PaginatedDocs;
+    groupByValue?: number | string;
+}>;
+//# sourceMappingURL=GroupByPageControls.d.ts.map

package/dist/elements/PageControls/GroupByPageControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupByPageControls.d.ts","sourceRoot":"","sources":["../../../src/elements/PageControls/GroupByPageControls.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEpE,OAAO,KAAsB,MAAM,OAAO,CAAA;AAO1C;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,IAAI,EAAE,aAAa,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC/B,CAuCA,CAAA"}

package/dist/elements/PageControls/GroupByPageControls.js

@@ -0,0 +1,83 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { useListQuery } from '../../providers/ListQuery/context.js';
+import { PageControlsComponent } from './index.js';
+/**
+ * If `groupBy` is set in the query, multiple tables will render, one for each group.
+ * In this case, each table needs its own `PageControls` to handle pagination.
+ * These page controls, however, should not modify the global `ListQuery` state.
+ * Instead, they should only handle the pagination for the current group.
+ * To do this, build a wrapper around `PageControlsComponent` that handles the pagination logic for the current group.
+ */
+export const GroupByPageControls = t0 => {
+  const $ = _c(12);
+  const {
+    AfterPageControls,
+    collectionConfig,
+    data,
+    groupByValue
+  } = t0;
+  const {
+    refineListData
+  } = useListQuery();
+  let t1;
+  if ($[0] !== groupByValue || $[1] !== refineListData) {
+    t1 = async page => {
+      await refineListData({
+        queryByGroup: {
+          [groupByValue]: {
+            page
+          }
+        }
+      });
+    };
+    $[0] = groupByValue;
+    $[1] = refineListData;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const handlePageChange = t1;
+  let t2;
+  if ($[3] !== groupByValue || $[4] !== refineListData) {
+    t2 = async limit => {
+      await refineListData({
+        queryByGroup: {
+          [groupByValue]: {
+            limit,
+            page: 1
+          }
+        }
+      });
+    };
+    $[3] = groupByValue;
+    $[4] = refineListData;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const handlePerPageChange = t2;
+  let t3;
+  if ($[6] !== AfterPageControls || $[7] !== collectionConfig || $[8] !== data || $[9] !== handlePageChange || $[10] !== handlePerPageChange) {
+    t3 = _jsx(PageControlsComponent, {
+      AfterPageControls,
+      collectionConfig,
+      data,
+      handlePageChange,
+      handlePerPageChange
+    });
+    $[6] = AfterPageControls;
+    $[7] = collectionConfig;
+    $[8] = data;
+    $[9] = handlePageChange;
+    $[10] = handlePerPageChange;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  return t3;
+};
+//# sourceMappingURL=GroupByPageControls.js.map

package/dist/elements/PageControls/GroupByPageControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupByPageControls.js","names":["c","_c","React","useCallback","useListQuery","PageControlsComponent","GroupByPageControls","t0","$","AfterPageControls","collectionConfig","data","groupByValue","refineListData","t1","page","queryByGroup","handlePageChange","t2","limit","handlePerPageChange","t3","_jsx"],"sources":["../../../src/elements/PageControls/GroupByPageControls.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, PaginatedDocs } from 'payload'\n\nimport React, { useCallback } from 'react'\n\nimport type { IListQueryContext } from '../../providers/ListQuery/types.js'\n\nimport { useListQuery } from '../../providers/ListQuery/context.js'\nimport { PageControlsComponent } from './index.js'\n\n/**\n * If `groupBy` is set in the query, multiple tables will render, one for each group.\n * In this case, each table needs its own `PageControls` to handle pagination.\n * These page controls, however, should not modify the global `ListQuery` state.\n * Instead, they should only handle the pagination for the current group.\n * To do this, build a wrapper around `PageControlsComponent` that handles the pagination logic for the current group.\n */\nexport const GroupByPageControls: React.FC<{\n  AfterPageControls?: React.ReactNode\n  collectionConfig: ClientCollectionConfig\n  data: PaginatedDocs\n  groupByValue?: number | string\n}> = ({ AfterPageControls, collectionConfig, data, groupByValue }) => {\n  const { refineListData } = useListQuery()\n\n  const handlePageChange: IListQueryContext['handlePageChange'] = useCallback(\n    async (page) => {\n      await refineListData({\n        queryByGroup: {\n          [groupByValue]: {\n            page,\n          },\n        },\n      })\n    },\n    [refineListData, groupByValue],\n  )\n\n  const handlePerPageChange: IListQueryContext['handlePerPageChange'] = useCallback(\n    async (limit) => {\n      await refineListData({\n        queryByGroup: {\n          [groupByValue]: {\n            limit,\n            page: 1,\n          },\n        },\n      })\n    },\n    [refineListData, groupByValue],\n  )\n\n  return (\n    <PageControlsComponent\n      AfterPageControls={AfterPageControls}\n      collectionConfig={collectionConfig}\n      data={data}\n      handlePageChange={handlePageChange}\n      handlePerPageChange={handlePerPageChange}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAInC,SAASC,YAAY,QAAQ;AAC7B,SAASC,qBAAqB,QAAQ;AAEtC;;;;;;;AAOA,OAAO,MAAMC,mBAAA,GAKRC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,iBAAA;IAAAC,gBAAA;IAAAC,IAAA;IAAAC;EAAA,IAAAL,EAA2D;EAC/D;IAAAM;EAAA,IAA2BT,YAAA;EAAA,IAAAU,EAAA;EAAA,IAAAN,CAAA,QAAAI,YAAA,IAAAJ,CAAA,QAAAK,cAAA;IAGzBC,EAAA,SAAAC,IAAA;MAAA,MACQF,cAAA;QAAAG,YAAA;UAAA,CAEDJ,YAAA;YAAAG;UAAA;QAAA;MAAA,CAIL;IAAA;IACFP,CAAA,MAAAI,YAAA;IAAAJ,CAAA,MAAAK,cAAA;IAAAL,CAAA,MAAAM,EAAA;EAAA;IAAAA,EAAA,GAAAN,CAAA;EAAA;EATF,MAAAS,gBAAA,GAAgEH,EAUhC;EAAA,IAAAI,EAAA;EAAA,IAAAV,CAAA,QAAAI,YAAA,IAAAJ,CAAA,QAAAK,cAAA;IAI9BK,EAAA,SAAAC,KAAA;MAAA,MACQN,cAAA;QAAAG,YAAA;UAAA,CAEDJ,YAAA;YAAAO,KAAA;YAAAJ,IAAA;UAAA;QAAA;MAAA,CAKL;IAAA;IACFP,CAAA,MAAAI,YAAA;IAAAJ,CAAA,MAAAK,cAAA;IAAAL,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAVF,MAAAY,mBAAA,GAAsEF,EAWtC;EAAA,IAAAG,EAAA;EAAA,IAAAb,CAAA,QAAAC,iBAAA,IAAAD,CAAA,QAAAE,gBAAA,IAAAF,CAAA,QAAAG,IAAA,IAAAH,CAAA,QAAAS,gBAAA,IAAAT,CAAA,SAAAY,mBAAA;IAI9BC,EAAA,GAAAC,IAAA,CAAAjB,qBAAA;MAAAI,iBAAA;MAAAC,gBAAA;MAAAC,IAAA;MAAAM,gBAAA;MAAAG;IAAA,C;;;;;;;;;;SAAAC,E;CAQJ","ignoreList":[]}

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

@@ -0,0 +1,17 @@
+import type { ClientCollectionConfig, PaginatedDocs } from 'payload';
+import React from 'react';
+import type { IListQueryContext } from '../../providers/ListQuery/types.js';
+import './index.scss';
+export declare const PageControlsComponent: React.FC<{
+    AfterPageControls?: React.ReactNode;
+    collectionConfig: ClientCollectionConfig;
+    data: PaginatedDocs;
+    handlePageChange?: IListQueryContext['handlePageChange'];
+    handlePerPageChange?: IListQueryContext['handlePerPageChange'];
+    limit?: number;
+}>;
+export declare const PageControls: React.FC<{
+    AfterPageControls?: React.ReactNode;
+    collectionConfig: ClientCollectionConfig;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PageControls/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAGpE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,IAAI,EAAE,aAAa,CAAA;IACnB,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAA;IACxD,mBAAmB,CAAC,EAAE,iBAAiB,CAAC,qBAAqB,CAAC,CAAA;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CA2CA,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,gBAAgB,EAAE,sBAAsB,CAAA;CACzC,CAmBA,CAAA"}

package/dist/elements/PageControls/index.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isNumber } from 'payload/shared';
+import React, { Fragment } from 'react';
+import { Pagination } from '../../elements/Pagination/index.js';
+import { PerPage } from '../../elements/PerPage/index.js';
+import { useListQuery } from '../../providers/ListQuery/context.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
+const baseClass = 'page-controls';
+export const PageControlsComponent = ({
+  AfterPageControls,
+  collectionConfig,
+  data,
+  handlePageChange,
+  handlePerPageChange,
+  limit
+}) => {
+  const {
+    i18n
+  } = useTranslation();
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [/*#__PURE__*/_jsx(Pagination, {
+      hasNextPage: data.hasNextPage,
+      hasPrevPage: data.hasPrevPage,
+      limit: data.limit,
+      nextPage: data.nextPage,
+      numberOfNeighbors: 1,
+      onChange: handlePageChange,
+      page: data.page,
+      prevPage: data.prevPage,
+      totalPages: data.totalPages
+    }), data.totalDocs > 0 && /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__page-info`,
+        children: [data.page * data.limit - (data.limit - 1), "-", data.totalPages > 1 && data.totalPages !== data.page ? data.limit * data.page : data.totalDocs, ' ', i18n.t('general:of'), " ", data.totalDocs]
+      }), /*#__PURE__*/_jsx(PerPage, {
+        handleChange: handlePerPageChange,
+        limit: limit,
+        limits: collectionConfig?.admin?.pagination?.limits,
+        resetPage: data.totalDocs <= data.pagingCounter
+      }), AfterPageControls]
+    })]
+  });
+};
+/*
+ * These page controls are controlled by the global ListQuery state.
+ * To override thi behavior, build your own wrapper around PageControlsComponent.
+ */
+export const PageControls = ({
+  AfterPageControls,
+  collectionConfig
+}) => {
+  const {
+    data,
+    defaultLimit: initialLimit,
+    handlePageChange,
+    handlePerPageChange,
+    query
+  } = useListQuery();
+  return /*#__PURE__*/_jsx(PageControlsComponent, {
+    AfterPageControls: AfterPageControls,
+    collectionConfig: collectionConfig,
+    data: data,
+    handlePageChange: handlePageChange,
+    handlePerPageChange: handlePerPageChange,
+    limit: isNumber(query.limit) ? query.limit : initialLimit
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["isNumber","React","Fragment","Pagination","PerPage","useListQuery","useTranslation","baseClass","PageControlsComponent","AfterPageControls","collectionConfig","data","handlePageChange","handlePerPageChange","limit","i18n","_jsxs","className","_jsx","hasNextPage","hasPrevPage","nextPage","numberOfNeighbors","onChange","page","prevPage","totalPages","totalDocs","t","handleChange","limits","admin","pagination","resetPage","pagingCounter","PageControls","defaultLimit","initialLimit","query"],"sources":["../../../src/elements/PageControls/index.tsx"],"sourcesContent":["import type { ClientCollectionConfig, PaginatedDocs } from 'payload'\n\nimport { isNumber } from 'payload/shared'\nimport React, { Fragment } from 'react'\n\nimport type { IListQueryContext } from '../../providers/ListQuery/types.js'\n\nimport { Pagination } from '../../elements/Pagination/index.js'\nimport { PerPage } from '../../elements/PerPage/index.js'\nimport { useListQuery } from '../../providers/ListQuery/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'page-controls'\n\nexport const PageControlsComponent: React.FC<{\n  AfterPageControls?: React.ReactNode\n  collectionConfig: ClientCollectionConfig\n  data: PaginatedDocs\n  handlePageChange?: IListQueryContext['handlePageChange']\n  handlePerPageChange?: IListQueryContext['handlePerPageChange']\n  limit?: number\n}> = ({\n  AfterPageControls,\n  collectionConfig,\n  data,\n  handlePageChange,\n  handlePerPageChange,\n  limit,\n}) => {\n  const { i18n } = useTranslation()\n\n  return (\n    <div className={baseClass}>\n      <Pagination\n        hasNextPage={data.hasNextPage}\n        hasPrevPage={data.hasPrevPage}\n        limit={data.limit}\n        nextPage={data.nextPage}\n        numberOfNeighbors={1}\n        onChange={handlePageChange}\n        page={data.page}\n        prevPage={data.prevPage}\n        totalPages={data.totalPages}\n      />\n      {data.totalDocs > 0 && (\n        <Fragment>\n          <div className={`${baseClass}__page-info`}>\n            {data.page * data.limit - (data.limit - 1)}-\n            {data.totalPages > 1 && data.totalPages !== data.page\n              ? data.limit * data.page\n              : data.totalDocs}{' '}\n            {i18n.t('general:of')} {data.totalDocs}\n          </div>\n          <PerPage\n            handleChange={handlePerPageChange}\n            limit={limit}\n            limits={collectionConfig?.admin?.pagination?.limits}\n            resetPage={data.totalDocs <= data.pagingCounter}\n          />\n          {AfterPageControls}\n        </Fragment>\n      )}\n    </div>\n  )\n}\n\n/*\n * These page controls are controlled by the global ListQuery state.\n * To override thi behavior, build your own wrapper around PageControlsComponent.\n */\nexport const PageControls: React.FC<{\n  AfterPageControls?: React.ReactNode\n  collectionConfig: ClientCollectionConfig\n}> = ({ AfterPageControls, collectionConfig }) => {\n  const {\n    data,\n    defaultLimit: initialLimit,\n    handlePageChange,\n    handlePerPageChange,\n    query,\n  } = useListQuery()\n\n  return (\n    <PageControlsComponent\n      AfterPageControls={AfterPageControls}\n      collectionConfig={collectionConfig}\n      data={data}\n      handlePageChange={handlePageChange}\n      handlePerPageChange={handlePerPageChange}\n      limit={isNumber(query.limit) ? query.limit : initialLimit}\n    />\n  )\n}\n"],"mappings":";AAEA,SAASA,QAAQ,QAAQ;AACzB,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAIhC,SAASC,UAAU,QAAQ;AAC3B,SAASC,OAAO,QAAQ;AACxB,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAORA,CAAC;EACJC,iBAAiB;EACjBC,gBAAgB;EAChBC,IAAI;EACJC,gBAAgB;EAChBC,mBAAmB;EACnBC;AAAK,CACN;EACC,MAAM;IAAEC;EAAI,CAAE,GAAGT,cAAA;EAEjB,oBACEU,KAAA,CAAC;IAAIC,SAAA,EAAWV,SAAA;4BACdW,IAAA,CAACf,UAAA;MACCgB,WAAA,EAAaR,IAAA,CAAKQ,WAAW;MAC7BC,WAAA,EAAaT,IAAA,CAAKS,WAAW;MAC7BN,KAAA,EAAOH,IAAA,CAAKG,KAAK;MACjBO,QAAA,EAAUV,IAAA,CAAKU,QAAQ;MACvBC,iBAAA,EAAmB;MACnBC,QAAA,EAAUX,gBAAA;MACVY,IAAA,EAAMb,IAAA,CAAKa,IAAI;MACfC,QAAA,EAAUd,IAAA,CAAKc,QAAQ;MACvBC,UAAA,EAAYf,IAAA,CAAKe;QAElBf,IAAA,CAAKgB,SAAS,GAAG,kBAChBX,KAAA,CAACd,QAAA;8BACCc,KAAA,CAAC;QAAIC,SAAA,EAAW,GAAGV,SAAA,aAAsB;mBACtCI,IAAA,CAAKa,IAAI,GAAGb,IAAA,CAAKG,KAAK,IAAIH,IAAA,CAAKG,KAAK,GAAG,IAAG,KAC1CH,IAAA,CAAKe,UAAU,GAAG,KAAKf,IAAA,CAAKe,UAAU,KAAKf,IAAA,CAAKa,IAAI,GACjDb,IAAA,CAAKG,KAAK,GAAGH,IAAA,CAAKa,IAAI,GACtBb,IAAA,CAAKgB,SAAS,EAAE,KACnBZ,IAAA,CAAKa,CAAC,CAAC,eAAc,KAAEjB,IAAA,CAAKgB,SAAS;uBAExCT,IAAA,CAACd,OAAA;QACCyB,YAAA,EAAchB,mBAAA;QACdC,KAAA,EAAOA,KAAA;QACPgB,MAAA,EAAQpB,gBAAA,EAAkBqB,KAAA,EAAOC,UAAA,EAAYF,MAAA;QAC7CG,SAAA,EAAWtB,IAAA,CAAKgB,SAAS,IAAIhB,IAAA,CAAKuB;UAEnCzB,iBAAA;;;AAKX;AAEA;;;;AAIA,OAAO,MAAM0B,YAAA,GAGRA,CAAC;EAAE1B,iBAAiB;EAAEC;AAAgB,CAAE;EAC3C,MAAM;IACJC,IAAI;IACJyB,YAAA,EAAcC,YAAY;IAC1BzB,gBAAgB;IAChBC,mBAAmB;IACnByB;EAAK,CACN,GAAGjC,YAAA;EAEJ,oBACEa,IAAA,CAACV,qBAAA;IACCC,iBAAA,EAAmBA,iBAAA;IACnBC,gBAAA,EAAkBA,gBAAA;IAClBC,IAAA,EAAMA,IAAA;IACNC,gBAAA,EAAkBA,gBAAA;IAClBC,mBAAA,EAAqBA,mBAAA;IACrBC,KAAA,EAAOd,QAAA,CAASsC,KAAA,CAAMxB,KAAK,IAAIwB,KAAA,CAAMxB,KAAK,GAAGuB;;AAGnD","ignoreList":[]}

package/dist/elements/PageControls/index.scss

@@ -0,0 +1,40 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .page-controls {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    &__page-info {
+      [dir='ltr'] & {
+        margin-right: base(1);
+        margin-left: auto;
+      }
+
+      [dir='rtl'] & {
+        margin-left: base(1);
+        margin-right: auto;
+      }
+    }
+
+    @include small-break {
+      flex-wrap: wrap;
+
+      &__page-info {
+        [dir='ltr'] & {
+          margin-left: base(0.5);
+        }
+
+        [dir='rtl'] & {
+          margin-right: 0;
+        }
+      }
+
+      .paginator {
+        width: 100%;
+        margin-bottom: base(0.5);
+      }
+    }
+  }
+}

package/dist/elements/Pagination/ClickableArrow/index.scss

@@ -4,14 +4,14 @@
   .clickable-arrow {
     cursor: pointer;
     @extend %btn-reset;
-    width: base(2);
-    height: base(2);
+    width: base(1.5);
+    height: base(1.5);
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
     outline: 0;
-    padding: base(0.5);
+    padding: base(0.25);
     color: var(--theme-elevation-800);
     line-height: base(1);
 

package/dist/elements/Pagination/index.js

@@ -23,7 +23,7 @@ export const Pagination = props => {
     prevPage = null,
     totalPages = null
   } = props;
-  if (!hasNextPage && !hasPrevPage) {
+  if (!hasPrevPage && !hasNextPage) {
     return null;
   }
   const updatePage = page => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","ClickableArrow","Page","Separator","nodeTypes","baseClass","Pagination","props","hasNextPage","hasPrevPage","nextPage","numberOfNeighbors","onChange","page","currentPage","prevPage","totalPages","updatePage","pages","Array","from","length","_","index","rangeStartIndex","rangeEndIndex","nodes","slice","unshift","type","isFirstPage","push","isLastPage","direction","isDisabled","Math","max","_jsx","className","map","node","i","isCurrent","NodeType"],"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ClickableArrow } from './ClickableArrow/index.js'\nimport './index.scss'\nimport { Page } from './Page/index.js'\nimport { Separator } from './Separator/index.js'\n\nconst nodeTypes = {\n  ClickableArrow,\n  Page,\n  Separator,\n}\n\nconst baseClass = 'paginator'\n\nexport type PaginationProps = {\n  hasNextPage?: boolean\n  hasPrevPage?: boolean\n  limit?: number\n  nextPage?: number\n  numberOfNeighbors?: number\n  onChange?: (page: number) => void\n  page?: number\n  prevPage?: number\n  totalPages?: number\n}\n\nexport type Node =\n  | {\n      props?: {\n        direction?: 'left' | 'right'\n        isDisabled?: boolean\n        isFirstPage?: boolean\n        isLastPage?: boolean\n        page?: number\n        updatePage: (page?: number) => void\n      }\n      type: 'ClickableArrow' | 'Page' | 'Separator'\n    }\n  | number\n\nexport const Pagination: React.FC<PaginationProps> = (props) => {\n  const {\n    hasNextPage = false,\n    hasPrevPage = false,\n    nextPage = null,\n    numberOfNeighbors = 1,\n    onChange,\n    page: currentPage,\n    prevPage = null,\n    totalPages = null,\n  } = props\n\n  if (!hasNextPage && !hasPrevPage) {\n    return null\n  }\n\n  const updatePage = (page) => {\n    if (typeof onChange === 'function') {\n      onChange(page)\n    }\n  }\n\n  // Create array of integers for each page\n  const pages = Array.from({ length: totalPages }, (_, index) => index + 1)\n\n  // Assign indices for start and end of the range of pages that should be shown in paginator\n  let rangeStartIndex = currentPage - 1 - numberOfNeighbors\n\n  // Sanitize rangeStartIndex in case it is less than zero for safe split\n  if (rangeStartIndex <= 0) {\n    rangeStartIndex = 0\n  }\n\n  const rangeEndIndex = currentPage - 1 + numberOfNeighbors + 1\n\n  // Slice out the range of pages that we want to render\n  const nodes: Node[] = pages.slice(rangeStartIndex, rangeEndIndex)\n\n  // Add prev separator if necessary\n  if (currentPage - numberOfNeighbors - 1 >= 2) {\n    nodes.unshift({ type: 'Separator' })\n  }\n\n  // Add first page if necessary\n  if (currentPage > numberOfNeighbors + 1) {\n    nodes.unshift({\n      type: 'Page',\n      props: {\n        isFirstPage: true,\n        page: 1,\n        updatePage,\n      },\n    })\n  }\n\n  // Add next separator if necessary\n  if (currentPage + numberOfNeighbors + 1 < totalPages) {\n    nodes.push({ type: 'Separator' })\n  }\n\n  // Add last page if necessary\n  if (rangeEndIndex < totalPages) {\n    nodes.push({\n      type: 'Page',\n      props: {\n        isLastPage: true,\n        page: totalPages,\n        updatePage,\n      },\n    })\n  }\n\n  // Add prev and next arrows based on necessity\n  nodes.unshift({\n    type: 'ClickableArrow',\n    props: {\n      direction: 'right',\n      isDisabled: !hasNextPage,\n      updatePage: () => updatePage(nextPage ?? currentPage + 1),\n    },\n  })\n\n  nodes.unshift({\n    type: 'ClickableArrow',\n    props: {\n      direction: 'left',\n      isDisabled: !hasPrevPage,\n      updatePage: () => updatePage(prevPage ?? Math.max(1, currentPage - 1)),\n    },\n  })\n\n  return (\n    <div className={baseClass}>\n      {nodes.map((node, i) => {\n        if (typeof node === 'number') {\n          return (\n            <Page isCurrent={currentPage === node} key={i} page={node} updatePage={updatePage} />\n          )\n        }\n\n        const NodeType = nodeTypes[node.type]\n\n        return <NodeType key={i} {...node.props} />\n      })}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","ClickableArrow","Page","Separator","nodeTypes","baseClass","Pagination","props","hasNextPage","hasPrevPage","nextPage","numberOfNeighbors","onChange","page","currentPage","prevPage","totalPages","updatePage","pages","Array","from","length","_","index","rangeStartIndex","rangeEndIndex","nodes","slice","unshift","type","isFirstPage","push","isLastPage","direction","isDisabled","Math","max","_jsx","className","map","node","i","isCurrent","NodeType"],"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ClickableArrow } from './ClickableArrow/index.js'\nimport './index.scss'\nimport { Page } from './Page/index.js'\nimport { Separator } from './Separator/index.js'\n\nconst nodeTypes = {\n  ClickableArrow,\n  Page,\n  Separator,\n}\n\nconst baseClass = 'paginator'\n\nexport type PaginationProps = {\n  hasNextPage?: boolean\n  hasPrevPage?: boolean\n  limit?: number\n  nextPage?: number\n  numberOfNeighbors?: number\n  onChange?: (page: number) => void\n  page?: number\n  prevPage?: number\n  totalPages?: number\n}\n\nexport type Node =\n  | {\n      props?: {\n        direction?: 'left' | 'right'\n        isDisabled?: boolean\n        isFirstPage?: boolean\n        isLastPage?: boolean\n        page?: number\n        updatePage: (page?: number) => void\n      }\n      type: 'ClickableArrow' | 'Page' | 'Separator'\n    }\n  | number\n\nexport const Pagination: React.FC<PaginationProps> = (props) => {\n  const {\n    hasNextPage = false,\n    hasPrevPage = false,\n    nextPage = null,\n    numberOfNeighbors = 1,\n    onChange,\n    page: currentPage,\n    prevPage = null,\n    totalPages = null,\n  } = props\n\n  if (!hasPrevPage && !hasNextPage) {\n    return null\n  }\n\n  const updatePage = (page) => {\n    if (typeof onChange === 'function') {\n      onChange(page)\n    }\n  }\n\n  // Create array of integers for each page\n  const pages = Array.from({ length: totalPages }, (_, index) => index + 1)\n\n  // Assign indices for start and end of the range of pages that should be shown in paginator\n  let rangeStartIndex = currentPage - 1 - numberOfNeighbors\n\n  // Sanitize rangeStartIndex in case it is less than zero for safe split\n  if (rangeStartIndex <= 0) {\n    rangeStartIndex = 0\n  }\n\n  const rangeEndIndex = currentPage - 1 + numberOfNeighbors + 1\n\n  // Slice out the range of pages that we want to render\n  const nodes: Node[] = pages.slice(rangeStartIndex, rangeEndIndex)\n\n  // Add prev separator if necessary\n  if (currentPage - numberOfNeighbors - 1 >= 2) {\n    nodes.unshift({ type: 'Separator' })\n  }\n\n  // Add first page if necessary\n  if (currentPage > numberOfNeighbors + 1) {\n    nodes.unshift({\n      type: 'Page',\n      props: {\n        isFirstPage: true,\n        page: 1,\n        updatePage,\n      },\n    })\n  }\n\n  // Add next separator if necessary\n  if (currentPage + numberOfNeighbors + 1 < totalPages) {\n    nodes.push({ type: 'Separator' })\n  }\n\n  // Add last page if necessary\n  if (rangeEndIndex < totalPages) {\n    nodes.push({\n      type: 'Page',\n      props: {\n        isLastPage: true,\n        page: totalPages,\n        updatePage,\n      },\n    })\n  }\n\n  // Add prev and next arrows based on necessity\n  nodes.unshift({\n    type: 'ClickableArrow',\n    props: {\n      direction: 'right',\n      isDisabled: !hasNextPage,\n      updatePage: () => updatePage(nextPage ?? currentPage + 1),\n    },\n  })\n\n  nodes.unshift({\n    type: 'ClickableArrow',\n    props: {\n      direction: 'left',\n      isDisabled: !hasPrevPage,\n      updatePage: () => updatePage(prevPage ?? Math.max(1, currentPage - 1)),\n    },\n  })\n\n  return (\n    <div className={baseClass}>\n      {nodes.map((node, i) => {\n        if (typeof node === 'number') {\n          return (\n            <Page isCurrent={currentPage === node} key={i} page={node} updatePage={updatePage} />\n          )\n        }\n\n        const NodeType = nodeTypes[node.type]\n\n        return <NodeType key={i} {...node.props} />\n      })}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Pagination/index.scss

@@ -3,7 +3,6 @@
 @layer payload-default {
   .paginator {
     display: flex;
-    margin-bottom: $baseline;
 
     &__page {
       cursor: pointer;
@@ -25,15 +24,16 @@
 
     &__page {
       @extend %btn-reset;
-      width: base(2);
-      height: base(2);
+      width: base(1.5);
+      height: base(1.5);
       display: flex;
       justify-content: center;
       align-content: center;
       outline: 0;
+      border-radius: var(--style-radius-s);
       padding: base(0.5);
       color: var(--theme-elevation-800);
-      line-height: base(1);
+      line-height: 0.9;
 
       &:focus-visible {
         outline: var(--accessibility-outline);

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

@@ -0,0 +1,14 @@
+import type { SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+import type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js';
+export type Props = {
+    readonly buttonId?: string;
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
+    readonly id?: string;
+    readonly onDelete?: DocumentDrawerContextType['onDelete'];
+    readonly redirectAfterDelete?: boolean;
+    readonly singularLabel: SanitizedCollectionConfig['labels']['singular'];
+    readonly title?: string;
+};
+export declare const PermanentlyDeleteButton: React.FC<Props>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PermanentlyDeleteButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAOxD,OAAO,KAAgC,MAAM,OAAO,CAAA;AAGpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAA;AAW9E,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAA;IACzD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IACvE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0InD,CAAA"}