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

package/dist/elements/DocumentDrawer/types.d.ts

@@ -29,11 +29,13 @@ export type DocumentDrawerProps = {
     readonly redirectAfterRestore?: boolean;
 } & Pick<DocumentDrawerContextProps, 'onDelete' | 'onDuplicate' | 'onSave'> & Pick<DrawerProps, 'Header'>;
 export type DocumentTogglerProps = {
+    readonly buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary';
     readonly children?: React.ReactNode;
     readonly className?: string;
     readonly collectionSlug: string;
     readonly disabled?: boolean;
     readonly drawerSlug?: string;
+    readonly extraButtonProps?: Record<string, any>;
     readonly onClick?: () => void;
     readonly operation: Operation;
 } & Readonly<HTMLAttributes<HTMLButtonElement>>;
@@ -45,7 +47,13 @@ export type UseDocumentDrawerContext = {
     openDrawer: () => void;
     toggleDrawer: () => void;
 };
-export type UseDocumentDrawer = (args: Pick<DocumentDrawerProps, 'collectionSlug' | 'id' | 'overrideEntityVisibility'>) => [
+export type UseDocumentDrawer = (args: {
+    /**
+     * Optional custom drawer slug. If provided, this will be used instead of auto-generating one.
+     * Useful for ensuring stable slugs in contexts where component remounting can cause issues.
+     */
+    drawerSlug?: string;
+} & Pick<DocumentDrawerProps, 'collectionSlug' | 'id' | 'overrideEntityVisibility'>) => [
     React.FC<{
         children?: React.ReactNode;
     } & Omit<DocumentDrawerProps, 'collectionSlug' | 'operation'>>,

package/dist/elements/DocumentDrawer/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,qBAAqB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAChF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAE/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC;;OAEG;IACH,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,qBAAqB,GAAG,IAAI,CAAA;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,IAAI,CAAA;IAC3B;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAA;IACjC,QAAQ,CAAC,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAC3C,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,OAAO,CAAA;IACzC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAA;CACxC,GAAG,IAAI,CAAC,0BAA0B,EAAE,UAAU,GAAG,aAAa,GAAG,QAAQ,CAAC,GACzE,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;AAE7B,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAA;CAC9B,GAAG,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,CAAA;AAE/C,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,CAC9B,IAAI,EAAE,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,IAAI,GAAG,0BAA0B,CAAC,KAClF;IAEH,KAAK,CAAC,EAAE,CACN;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAC3B,GAAG,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,WAAW,CAAC,CAC9D;IAED,KAAK,CAAC,EAAE,CACN;QACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;KAC3B,GAAG,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,WAAW,CAAC,CAC/D;IAED,wBAAwB;CACzB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"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"}

package/dist/elements/DocumentDrawer/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type { Data, DefaultDocumentIDType, FormState, Operation } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { Props as DrawerProps } from '../Drawer/types.js'\nimport type { DocumentDrawerContextProps } from './Provider.js'\n\nexport type DocumentDrawerProps = {\n  readonly AfterFields?: React.ReactNode\n  /**\n   * The slug of the collection to which the document belongs.\n   */\n  readonly collectionSlug: string\n  readonly disableActions?: boolean\n  readonly drawerSlug?: string\n  /**\n   * The ID of the document to be edited.\n   * When provided, will be fetched and displayed in the drawer.\n   * If omitted, will render the \"create new\" view for the given collection.\n   */\n  readonly id?: DefaultDocumentIDType | null\n  readonly initialData?: Data\n  /**\n   * @deprecated\n   */\n  readonly initialState?: FormState\n  readonly overrideEntityVisibility?: boolean\n  readonly redirectAfterCreate?: boolean\n  readonly redirectAfterDelete?: boolean\n  readonly redirectAfterDuplicate?: boolean\n  readonly redirectAfterRestore?: boolean\n} & Pick<DocumentDrawerContextProps, 'onDelete' | 'onDuplicate' | 'onSave'> &\n  Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly collectionSlug: string\n  readonly disabled?: boolean\n  readonly drawerSlug?: string\n  readonly onClick?: () => void\n  readonly operation: Operation\n} & Readonly<HTMLAttributes<HTMLButtonElement>>\n\nexport type UseDocumentDrawerContext = {\n  closeDrawer: () => void\n  drawerDepth: number\n  drawerSlug: string\n  isDrawerOpen: boolean\n  openDrawer: () => void\n  toggleDrawer: () => void\n}\n\nexport type UseDocumentDrawer = (\n  args: Pick<DocumentDrawerProps, 'collectionSlug' | 'id' | 'overrideEntityVisibility'>,\n) => [\n  // drawer\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentDrawerProps, 'collectionSlug' | 'operation'>\n  >,\n  // toggler\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentTogglerProps, 'collectionSlug' | 'operation'>\n  >,\n  // context\n  UseDocumentDrawerContext,\n]\n"],"mappings":"AAqDA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/DocumentDrawer/types.ts"],"sourcesContent":["import type { Data, DefaultDocumentIDType, FormState, Operation } from 'payload'\nimport type React from 'react'\nimport type { HTMLAttributes } from 'react'\n\nimport type { Props as DrawerProps } from '../Drawer/types.js'\nimport type { DocumentDrawerContextProps } from './Provider.js'\n\nexport type DocumentDrawerProps = {\n  readonly AfterFields?: React.ReactNode\n  /**\n   * The slug of the collection to which the document belongs.\n   */\n  readonly collectionSlug: string\n  readonly disableActions?: boolean\n  readonly drawerSlug?: string\n  /**\n   * The ID of the document to be edited.\n   * When provided, will be fetched and displayed in the drawer.\n   * If omitted, will render the \"create new\" view for the given collection.\n   */\n  readonly id?: DefaultDocumentIDType | null\n  readonly initialData?: Data\n  /**\n   * @deprecated\n   */\n  readonly initialState?: FormState\n  readonly overrideEntityVisibility?: boolean\n  readonly redirectAfterCreate?: boolean\n  readonly redirectAfterDelete?: boolean\n  readonly redirectAfterDuplicate?: boolean\n  readonly redirectAfterRestore?: boolean\n} & Pick<DocumentDrawerContextProps, 'onDelete' | 'onDuplicate' | 'onSave'> &\n  Pick<DrawerProps, 'Header'>\n\nexport type DocumentTogglerProps = {\n  readonly buttonStyle?: 'dashed' | 'destructive' | 'ghost' | 'pill' | 'primary' | 'secondary'\n  readonly children?: React.ReactNode\n  readonly className?: string\n  readonly collectionSlug: string\n  readonly disabled?: boolean\n  readonly drawerSlug?: string\n  readonly extraButtonProps?: Record<string, any>\n  readonly onClick?: () => void\n  readonly operation: Operation\n} & Readonly<HTMLAttributes<HTMLButtonElement>>\n\nexport type UseDocumentDrawerContext = {\n  closeDrawer: () => void\n  drawerDepth: number\n  drawerSlug: string\n  isDrawerOpen: boolean\n  openDrawer: () => void\n  toggleDrawer: () => void\n}\n\nexport type UseDocumentDrawer = (\n  args: {\n    /**\n     * Optional custom drawer slug. If provided, this will be used instead of auto-generating one.\n     * Useful for ensuring stable slugs in contexts where component remounting can cause issues.\n     */\n    drawerSlug?: string\n  } & Pick<DocumentDrawerProps, 'collectionSlug' | 'id' | 'overrideEntityVisibility'>,\n) => [\n  // drawer\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentDrawerProps, 'collectionSlug' | 'operation'>\n  >,\n  // toggler\n  React.FC<\n    {\n      children?: React.ReactNode\n    } & Omit<DocumentTogglerProps, 'collectionSlug' | 'operation'>\n  >,\n  // context\n  UseDocumentDrawerContext,\n]\n"],"mappings":"AAuDA","ignoreList":[]}

package/dist/elements/DocumentFields/index.css

@@ -0,0 +1,198 @@
+@layer payload-default {
+  .document-fields {
+    width: 100%;
+    display: flex;
+    --doc-sidebar-width: 325px;
+  }
+
+  .document-fields--has-sidebar {
+    --main-width: 66.66%;
+    --main-border: var(--stroke-width-small) solid var(--color-border);
+    --main-field-margin: calc(var(--gutter-h) * -1);
+  }
+
+  .document-fields--has-sidebar:has(
+      .document-fields__sidebar-wrap .document-fields__sidebar-fields > .render-fields:empty
+    ) {
+    --main-width: 100%;
+    --main-border: none;
+    --main-field-margin: initial;
+  }
+
+  .document-fields--has-sidebar .document-fields__main {
+    width: var(--main-width);
+  }
+
+  .document-fields--has-sidebar .document-fields__edit {
+    padding-left: var(--gutter-h);
+    padding-right: var(--gutter-h);
+  }
+
+  [dir='ltr'] .document-fields--has-sidebar .document-fields__edit {
+    top: 0;
+    right: 0;
+    border-right: var(--main-border);
+  }
+
+  [dir='rtl'] .document-fields--has-sidebar .document-fields__edit {
+    top: 0;
+    left: 0;
+    border-left: var(--main-border);
+  }
+
+  .document-fields--has-sidebar .document-fields__fields > .tabs-field {
+    margin-right: var(--main-field-margin);
+  }
+
+  /* Extend group border to the main/sidebar divider */
+  .document-fields--has-sidebar .document-fields__fields > .group-field::before {
+    right: calc(var(--gutter-h) * -1);
+  }
+
+  .document-fields__main {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    flex-grow: 1;
+  }
+
+  .document-fields__edit {
+    padding-top: var(--spacer-4);
+    padding-bottom: var(--spacing-view-bottom);
+    flex-grow: 1;
+  }
+
+  .document-fields__sidebar-wrap {
+    position: var(--sidebar-wrap-position, sticky);
+    top: var(--sidebar-wrap-top, var(--doc-controls-height));
+    width: var(--sidebar-wrap-width, 33.33%);
+    height: var(--sidebar-wrap-height, calc(100vh - var(--doc-controls-height)));
+    min-width: var(--sidebar-wrap-min-width, var(--doc-sidebar-width));
+    flex-shrink: var(--sidebar-wrap-flex-shrink, 0);
+  }
+
+  .document-fields__sidebar-wrap:has(.document-fields__sidebar-fields > .render-fields:empty) {
+    --sidebar-wrap-width: 0;
+    --sidebar-wrap-min-width: 0;
+    --sidebar-wrap-position: initial;
+    --sidebar-wrap-top: initial;
+    --sidebar-wrap-height: initial;
+    --sidebar-wrap-flex-shrink: initial;
+  }
+
+  .document-fields__sidebar {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  .document-fields__sidebar-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-3);
+    padding-top: var(--spacer-5);
+    padding-left: var(--gutter-h);
+    padding-right: var(--gutter-h);
+    padding-bottom: var(--spacing-view-bottom);
+  }
+
+  .document-fields__label {
+    color: var(--color-text-tertiary);
+  }
+
+  .document-fields--force-sidebar-wrap {
+    display: block;
+    isolation: isolate;
+    --main-border: none; /* Reset the sidebar divider — the live preview window provides its own border-left */
+  }
+
+  .document-fields--force-sidebar-wrap .document-fields__main {
+    width: 100%;
+    min-height: initial;
+  }
+
+  .document-fields--force-sidebar-wrap .document-fields__sidebar-wrap {
+    position: static;
+    width: 100%;
+    height: initial;
+    border-left: 0;
+  }
+
+  .document-fields--force-sidebar-wrap .document-fields__sidebar {
+    padding-bottom: calc(var(--spacer-5) * 2);
+    overflow: visible;
+  }
+
+  .document-fields--force-sidebar-wrap .document-fields__sidebar-fields {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  @media (max-width: 1024px) {
+    .document-fields {
+      display: block;
+    }
+
+    .document-fields--has-sidebar .document-fields__main {
+      width: 100%;
+    }
+
+    [dir='ltr'] .document-fields--has-sidebar .document-fields__edit {
+      border-right: 0;
+    }
+
+    [dir='rtl'] .document-fields--has-sidebar .document-fields__edit {
+      border-left: 0;
+    }
+
+    .document-fields--has-sidebar .document-fields__fields > .tabs-field {
+      margin-right: calc(var(--gutter-h) * -1);
+    }
+
+    .document-fields__main {
+      width: 100%;
+      min-height: initial;
+    }
+
+    .document-fields__sidebar-wrap {
+      position: static;
+      width: 100%;
+      height: initial;
+      border-left: 0;
+    }
+
+    .document-fields__form {
+      display: block;
+    }
+
+    .document-fields__sidebar-fields {
+      padding-top: 0;
+      padding-bottom: 0;
+      gap: var(--spacer-2);
+    }
+
+    .document-fields__sidebar {
+      padding-bottom: calc(var(--spacer-5) * 2);
+      overflow: visible;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .document-fields__sidebar-wrap {
+      min-width: initial;
+      width: 100%;
+    }
+
+    .document-fields__edit {
+      padding-top: var(--spacer-2);
+    }
+  }
+
+  .drawer .document-fields__edit {
+    padding: var(--spacer-2-5);
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { ClientField, SanitizedDocumentPermissions } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 type Args = {
     readonly AfterFields?: React.ReactNode;
     readonly BeforeFields?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentFields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAA;AAGxE,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,OAAO,cAAc,CAAA;AAIrB,KAAK,IAAI,GAAG;IACV,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,cAAc,EAAE,4BAA4B,CAAA;IACrD,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,kBAAkB,EAAE,MAAM,EAAE,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CA6EzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentFields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAA;AAGxE,OAAO,KAAkB,MAAM,OAAO,CAAA;AAKtC,OAAO,aAAa,CAAA;AAIpB,KAAK,IAAI,GAAG;IACV,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtC,QAAQ,CAAC,cAAc,EAAE,4BAA4B,CAAA;IACrD,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,kBAAkB,EAAE,MAAM,EAAE,CAAA;CACtC,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CA6EzC,CAAA"}

package/dist/elements/DocumentFields/index.js

@@ -6,7 +6,7 @@ import React, { useMemo } from 'react';
 import { RenderFields } from '../../forms/RenderFields/index.js';
 import { Gutter } from '../Gutter/index.js';
 import { TrashBanner } from '../TrashBanner/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'document-fields';
 export const DocumentFields = ({
   AfterFields,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["fieldIsSidebar","React","useMemo","RenderFields","Gutter","TrashBanner","baseClass","DocumentFields","AfterFields","BeforeFields","docPermissions","fields","forceSidebarWrap","isTrashed","readOnly","schemaPathSegments","hasSidebarFields","mainFields","sidebarFields","reduce","acc","field","push","_jsxs","className","filter","Boolean","join","_jsx","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions"],"sources":["../../../src/elements/DocumentFields/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, SanitizedDocumentPermissions } from 'payload'\n\nimport { fieldIsSidebar } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { TrashBanner } from '../TrashBanner/index.js'\nimport './index.scss'\n\nconst baseClass = 'document-fields'\n\ntype Args = {\n  readonly AfterFields?: React.ReactNode\n  readonly BeforeFields?: React.ReactNode\n  readonly Description?: React.ReactNode\n  readonly docPermissions: SanitizedDocumentPermissions\n  readonly fields: ClientField[]\n  readonly forceSidebarWrap?: boolean\n  readonly isTrashed?: boolean\n  readonly readOnly?: boolean\n  readonly schemaPathSegments: string[]\n}\n\nexport const DocumentFields: React.FC<Args> = ({\n  AfterFields,\n  BeforeFields,\n  docPermissions,\n  fields,\n  forceSidebarWrap,\n  isTrashed = false,\n  readOnly,\n  schemaPathSegments,\n}) => {\n  const { hasSidebarFields, mainFields, sidebarFields } = useMemo(() => {\n    return fields.reduce(\n      (acc, field) => {\n        if (fieldIsSidebar(field)) {\n          acc.sidebarFields.push(field)\n          acc.mainFields.push(null)\n          acc.hasSidebarFields = true\n        } else {\n          acc.mainFields.push(field)\n          acc.sidebarFields.push(null)\n        }\n        return acc\n      },\n      {\n        hasSidebarFields: false,\n        mainFields: [] as ClientField[],\n        sidebarFields: [] as ClientField[],\n      },\n    )\n  }, [fields])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,\n        forceSidebarWrap && `${baseClass}--force-sidebar-wrap`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__main`}>\n        <Gutter className={`${baseClass}__edit`}>\n          {isTrashed && <TrashBanner />}\n          {BeforeFields}\n          <RenderFields\n            className={`${baseClass}__fields`}\n            fields={mainFields}\n            forceRender\n            parentIndexPath=\"\"\n            parentPath=\"\"\n            parentSchemaPath={schemaPathSegments.join('.')}\n            permissions={docPermissions?.fields}\n            readOnly={readOnly}\n          />\n          {AfterFields}\n        </Gutter>\n      </div>\n      {hasSidebarFields ? (\n        <div className={`${baseClass}__sidebar-wrap`}>\n          <div className={`${baseClass}__sidebar`}>\n            <div className={`${baseClass}__sidebar-fields`}>\n              <RenderFields\n                fields={sidebarFields}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\"\n                parentSchemaPath={schemaPathSegments.join('.')}\n                permissions={docPermissions?.fields}\n                readOnly={readOnly}\n              />\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,OAAO,QAAQ;AAE/B,SAASC,YAAY,QAAQ;AAC7B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAclB,OAAO,MAAMC,cAAA,GAAiCA,CAAC;EAC7CC,WAAW;EACXC,YAAY;EACZC,cAAc;EACdC,MAAM;EACNC,gBAAgB;EAChBC,SAAA,GAAY,KAAK;EACjBC,QAAQ;EACRC;AAAkB,CACnB;EACC,MAAM;IAAEC,gBAAgB;IAAEC,UAAU;IAAEC;EAAa,CAAE,GAAGhB,OAAA,CAAQ;IAC9D,OAAOS,MAAA,CAAOQ,MAAM,CAClB,CAACC,GAAA,EAAKC,KAAA;MACJ,IAAIrB,cAAA,CAAeqB,KAAA,GAAQ;QACzBD,GAAA,CAAIF,aAAa,CAACI,IAAI,CAACD,KAAA;QACvBD,GAAA,CAAIH,UAAU,CAACK,IAAI,CAAC;QACpBF,GAAA,CAAIJ,gBAAgB,GAAG;MACzB,OAAO;QACLI,GAAA,CAAIH,UAAU,CAACK,IAAI,CAACD,KAAA;QACpBD,GAAA,CAAIF,aAAa,CAACI,IAAI,CAAC;MACzB;MACA,OAAOF,GAAA;IACT,GACA;MACEJ,gBAAA,EAAkB;MAClBC,UAAA,EAAY,EAAE;MACdC,aAAA,EAAe;IACjB;EAEJ,GAAG,CAACP,MAAA,CAAO;EAEX,oBACEY,KAAA,CAAC;IACCC,SAAA,EAAW,CACTlB,SAAA,EACAU,gBAAA,GAAmB,GAAGV,SAAA,eAAwB,GAAG,GAAGA,SAAA,cAAuB,EAC3EM,gBAAA,IAAoB,GAAGN,SAAA,sBAA+B,CACvD,CACEmB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;4BAERC,IAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGlB,SAAA,QAAiB;gBAClC,aAAAiB,KAAA,CAACnB,MAAA;QAAOoB,SAAA,EAAW,GAAGlB,SAAA,QAAiB;mBACpCO,SAAA,iBAAae,IAAA,CAACvB,WAAA,OACdI,YAAA,E,aACDmB,IAAA,CAACzB,YAAA;UACCqB,SAAA,EAAW,GAAGlB,SAAA,UAAmB;UACjCK,MAAA,EAAQM,UAAA;UACRY,WAAW;UACXC,eAAA,EAAgB;UAChBC,UAAA,EAAW;UACXC,gBAAA,EAAkBjB,kBAAA,CAAmBY,IAAI,CAAC;UAC1CM,WAAA,EAAavB,cAAA,EAAgBC,MAAA;UAC7BG,QAAA,EAAUA;YAEXN,WAAA;;QAGJQ,gBAAA,gBACCY,IAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGlB,SAAA,gBAAyB;gBAC1C,aAAAsB,IAAA,CAAC;QAAIJ,SAAA,EAAW,GAAGlB,SAAA,WAAoB;kBACrC,aAAAsB,IAAA,CAAC;UAAIJ,SAAA,EAAW,GAAGlB,SAAA,kBAA2B;oBAC5C,aAAAsB,IAAA,CAACzB,YAAA;YACCQ,MAAA,EAAQO,aAAA;YACRW,WAAW;YACXC,eAAA,EAAgB;YAChBC,UAAA,EAAW;YACXC,gBAAA,EAAkBjB,kBAAA,CAAmBY,IAAI,CAAC;YAC1CM,WAAA,EAAavB,cAAA,EAAgBC,MAAA;YAC7BG,QAAA,EAAUA;;;;SAKhB;;AAGV","ignoreList":[]}
+{"version":3,"file":"index.js","names":["fieldIsSidebar","React","useMemo","RenderFields","Gutter","TrashBanner","baseClass","DocumentFields","AfterFields","BeforeFields","docPermissions","fields","forceSidebarWrap","isTrashed","readOnly","schemaPathSegments","hasSidebarFields","mainFields","sidebarFields","reduce","acc","field","push","_jsxs","className","filter","Boolean","join","_jsx","forceRender","parentIndexPath","parentPath","parentSchemaPath","permissions"],"sources":["../../../src/elements/DocumentFields/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, SanitizedDocumentPermissions } from 'payload'\n\nimport { fieldIsSidebar } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { RenderFields } from '../../forms/RenderFields/index.js'\nimport { Gutter } from '../Gutter/index.js'\nimport { TrashBanner } from '../TrashBanner/index.js'\nimport './index.css'\n\nconst baseClass = 'document-fields'\n\ntype Args = {\n  readonly AfterFields?: React.ReactNode\n  readonly BeforeFields?: React.ReactNode\n  readonly Description?: React.ReactNode\n  readonly docPermissions: SanitizedDocumentPermissions\n  readonly fields: ClientField[]\n  readonly forceSidebarWrap?: boolean\n  readonly isTrashed?: boolean\n  readonly readOnly?: boolean\n  readonly schemaPathSegments: string[]\n}\n\nexport const DocumentFields: React.FC<Args> = ({\n  AfterFields,\n  BeforeFields,\n  docPermissions,\n  fields,\n  forceSidebarWrap,\n  isTrashed = false,\n  readOnly,\n  schemaPathSegments,\n}) => {\n  const { hasSidebarFields, mainFields, sidebarFields } = useMemo(() => {\n    return fields.reduce(\n      (acc, field) => {\n        if (fieldIsSidebar(field)) {\n          acc.sidebarFields.push(field)\n          acc.mainFields.push(null)\n          acc.hasSidebarFields = true\n        } else {\n          acc.mainFields.push(field)\n          acc.sidebarFields.push(null)\n        }\n        return acc\n      },\n      {\n        hasSidebarFields: false,\n        mainFields: [] as ClientField[],\n        sidebarFields: [] as ClientField[],\n      },\n    )\n  }, [fields])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        hasSidebarFields ? `${baseClass}--has-sidebar` : `${baseClass}--no-sidebar`,\n        forceSidebarWrap && `${baseClass}--force-sidebar-wrap`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__main`}>\n        <Gutter className={`${baseClass}__edit`}>\n          {isTrashed && <TrashBanner />}\n          {BeforeFields}\n          <RenderFields\n            className={`${baseClass}__fields`}\n            fields={mainFields}\n            forceRender\n            parentIndexPath=\"\"\n            parentPath=\"\"\n            parentSchemaPath={schemaPathSegments.join('.')}\n            permissions={docPermissions?.fields}\n            readOnly={readOnly}\n          />\n          {AfterFields}\n        </Gutter>\n      </div>\n      {hasSidebarFields ? (\n        <div className={`${baseClass}__sidebar-wrap`}>\n          <div className={`${baseClass}__sidebar`}>\n            <div className={`${baseClass}__sidebar-fields`}>\n              <RenderFields\n                fields={sidebarFields}\n                forceRender\n                parentIndexPath=\"\"\n                parentPath=\"\"\n                parentSchemaPath={schemaPathSegments.join('.')}\n                permissions={docPermissions?.fields}\n                readOnly={readOnly}\n              />\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,OAAO,QAAQ;AAE/B,SAASC,YAAY,QAAQ;AAC7B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAclB,OAAO,MAAMC,cAAA,GAAiCA,CAAC;EAC7CC,WAAW;EACXC,YAAY;EACZC,cAAc;EACdC,MAAM;EACNC,gBAAgB;EAChBC,SAAA,GAAY,KAAK;EACjBC,QAAQ;EACRC;AAAkB,CACnB;EACC,MAAM;IAAEC,gBAAgB;IAAEC,UAAU;IAAEC;EAAa,CAAE,GAAGhB,OAAA,CAAQ;IAC9D,OAAOS,MAAA,CAAOQ,MAAM,CAClB,CAACC,GAAA,EAAKC,KAAA;MACJ,IAAIrB,cAAA,CAAeqB,KAAA,GAAQ;QACzBD,GAAA,CAAIF,aAAa,CAACI,IAAI,CAACD,KAAA;QACvBD,GAAA,CAAIH,UAAU,CAACK,IAAI,CAAC;QACpBF,GAAA,CAAIJ,gBAAgB,GAAG;MACzB,OAAO;QACLI,GAAA,CAAIH,UAAU,CAACK,IAAI,CAACD,KAAA;QACpBD,GAAA,CAAIF,aAAa,CAACI,IAAI,CAAC;MACzB;MACA,OAAOF,GAAA;IACT,GACA;MACEJ,gBAAA,EAAkB;MAClBC,UAAA,EAAY,EAAE;MACdC,aAAA,EAAe;IACjB;EAEJ,GAAG,CAACP,MAAA,CAAO;EAEX,oBACEY,KAAA,CAAC;IACCC,SAAA,EAAW,CACTlB,SAAA,EACAU,gBAAA,GAAmB,GAAGV,SAAA,eAAwB,GAAG,GAAGA,SAAA,cAAuB,EAC3EM,gBAAA,IAAoB,GAAGN,SAAA,sBAA+B,CACvD,CACEmB,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;4BAERC,IAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGlB,SAAA,QAAiB;gBAClC,aAAAiB,KAAA,CAACnB,MAAA;QAAOoB,SAAA,EAAW,GAAGlB,SAAA,QAAiB;mBACpCO,SAAA,iBAAae,IAAA,CAACvB,WAAA,OACdI,YAAA,E,aACDmB,IAAA,CAACzB,YAAA;UACCqB,SAAA,EAAW,GAAGlB,SAAA,UAAmB;UACjCK,MAAA,EAAQM,UAAA;UACRY,WAAW;UACXC,eAAA,EAAgB;UAChBC,UAAA,EAAW;UACXC,gBAAA,EAAkBjB,kBAAA,CAAmBY,IAAI,CAAC;UAC1CM,WAAA,EAAavB,cAAA,EAAgBC,MAAA;UAC7BG,QAAA,EAAUA;YAEXN,WAAA;;QAGJQ,gBAAA,gBACCY,IAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGlB,SAAA,gBAAyB;gBAC1C,aAAAsB,IAAA,CAAC;QAAIJ,SAAA,EAAW,GAAGlB,SAAA,WAAoB;kBACrC,aAAAsB,IAAA,CAAC;UAAIJ,SAAA,EAAW,GAAGlB,SAAA,kBAA2B;oBAC5C,aAAAsB,IAAA,CAACzB,YAAA;YACCQ,MAAA,EAAQO,aAAA;YACRW,WAAW;YACXC,eAAA,EAAgB;YAChBC,UAAA,EAAW;YACXC,gBAAA,EAAkBjB,kBAAA,CAAmBY,IAAI,CAAC;YAC1CM,WAAA,EAAavB,cAAA,EAAgBC,MAAA;YAC7BG,QAAA,EAAUA;;;;SAKhB;;AAGV","ignoreList":[]}

package/dist/elements/DocumentHeader/Tabs/ShouldRenderTabs.d.ts

@@ -0,0 +1,5 @@
+import type React from 'react';
+export declare const ShouldRenderTabs: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=ShouldRenderTabs.d.ts.map

package/dist/elements/DocumentHeader/Tabs/ShouldRenderTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShouldRenderTabs.d.ts","sourceRoot":"","sources":["../../../../src/elements/DocumentHeader/Tabs/ShouldRenderTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAWA,CAAA"}

package/dist/elements/DocumentHeader/Tabs/ShouldRenderTabs.js

@@ -0,0 +1,19 @@
+'use client';
+
+import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
+export const ShouldRenderTabs = t0 => {
+  const {
+    children
+  } = t0;
+  const {
+    id: idFromContext,
+    collectionSlug,
+    globalSlug
+  } = useDocumentInfo();
+  const id = idFromContext !== "create" ? idFromContext : null;
+  if (collectionSlug && id || globalSlug) {
+    return children;
+  }
+  return null;
+};
+//# sourceMappingURL=ShouldRenderTabs.js.map

package/dist/elements/DocumentHeader/Tabs/ShouldRenderTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShouldRenderTabs.js","names":["useDocumentInfo","ShouldRenderTabs","t0","children","id","idFromContext","collectionSlug","globalSlug"],"sources":["../../../../src/elements/DocumentHeader/Tabs/ShouldRenderTabs.tsx"],"sourcesContent":["'use client'\nimport type React from 'react'\n\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\n\nexport const ShouldRenderTabs: React.FC<{\n  children: React.ReactNode\n}> = ({ children }) => {\n  const { id: idFromContext, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const id = idFromContext !== 'create' ? idFromContext : null\n\n  // Don't show tabs when creating new documents\n  if ((collectionSlug && id) || globalSlug) {\n    return children\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAGA,SAASA,eAAe,QAAQ;AAEhC,OAAO,MAAMC,gBAAA,GAERC,EAAA;EAAC;IAAAC;EAAA,IAAAD,EAAY;EAChB;IAAAE,EAAA,EAAAC,aAAA;IAAAC,cAAA;IAAAC;EAAA,IAA0DP,eAAA;EAE1D,MAAAI,EAAA,GAAWC,aAAA,KAAkB,WAAWA,aAAA,OAAgB;EAAA,IAGpDC,cAAC,IAAkBF,EAAA,IAAOG,UAAA;IAAA,OACrBJ,QAAA;EAAA;EAAA;AAAA,CAIX","ignoreList":[]}

package/dist/elements/DocumentHeader/Tabs/Tab/TabLink.d.ts

@@ -0,0 +1,12 @@
+import type { SanitizedConfig } from 'payload';
+import React from 'react';
+export declare const DocumentTabLink: React.FC<{
+    adminRoute: SanitizedConfig['routes']['admin'];
+    ariaLabel?: string;
+    baseClass: string;
+    children?: React.ReactNode;
+    href: string;
+    isActive?: boolean;
+    newTab?: boolean;
+}>;
+//# sourceMappingURL=TabLink.d.ts.map

package/dist/elements/DocumentHeader/Tabs/Tab/TabLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabLink.d.ts","sourceRoot":"","sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG9C,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,UAAU,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAwDA,CAAA"}

package/dist/elements/DocumentHeader/Tabs/Tab/TabLink.js

@@ -0,0 +1,81 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatAdminURL } from 'payload/shared';
+import React from 'react';
+import { useParams, usePathname, useSearchParams } from '../../../../providers/RouterAdapter/index.js';
+import { Button } from '../../../Button/index.js';
+export const DocumentTabLink = t0 => {
+  const $ = _c(13);
+  const {
+    adminRoute,
+    ariaLabel,
+    baseClass,
+    children,
+    href: hrefFromProps,
+    isActive: isActiveFromProps,
+    newTab
+  } = t0;
+  const pathname = usePathname();
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const locale = searchParams.get("locale");
+  const [entityType, entitySlug, segmentThree, segmentFour] = params.segments || [];
+  const isCollection = entityType === "collections";
+  const t1 = `/${isCollection ? "collections" : "globals"}/${entitySlug}`;
+  let t2;
+  if ($[0] !== adminRoute || $[1] !== t1) {
+    t2 = formatAdminURL({
+      adminRoute,
+      path: t1
+    });
+    $[0] = adminRoute;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let docPath = t2;
+  if (isCollection) {
+    if (segmentThree === "trash" && segmentFour) {
+      docPath = docPath + `/trash/${segmentFour}`;
+    } else {
+      if (segmentThree) {
+        docPath = docPath + `/${segmentThree}`;
+      }
+    }
+  }
+  const href = `${docPath}${hrefFromProps}`;
+  const hrefWithLocale = `${href}${locale ? `?locale=${locale}` : ""}`;
+  let t3;
+  if ($[3] !== ariaLabel || $[4] !== baseClass || $[5] !== children || $[6] !== docPath || $[7] !== href || $[8] !== hrefWithLocale || $[9] !== isActiveFromProps || $[10] !== newTab || $[11] !== pathname) {
+    const isActive = href === docPath && pathname === docPath || href !== docPath && pathname.startsWith(href) || isActiveFromProps;
+    t3 = _jsx(Button, {
+      "aria-label": ariaLabel,
+      buttonStyle: isActive ? "pill" : "ghost",
+      className: [baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(" "),
+      disabled: isActive,
+      el: !isActive || href !== pathname ? "link" : "div",
+      margin: false,
+      newTab,
+      size: "medium",
+      to: !isActive || href !== pathname ? hrefWithLocale : undefined,
+      children
+    });
+    $[3] = ariaLabel;
+    $[4] = baseClass;
+    $[5] = children;
+    $[6] = docPath;
+    $[7] = href;
+    $[8] = hrefWithLocale;
+    $[9] = isActiveFromProps;
+    $[10] = newTab;
+    $[11] = pathname;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  return t3;
+};
+//# sourceMappingURL=TabLink.js.map

package/dist/elements/DocumentHeader/Tabs/Tab/TabLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabLink.js","names":["c","_c","formatAdminURL","React","useParams","usePathname","useSearchParams","Button","DocumentTabLink","t0","$","adminRoute","ariaLabel","baseClass","children","href","hrefFromProps","isActive","isActiveFromProps","newTab","pathname","params","searchParams","locale","get","entityType","entitySlug","segmentThree","segmentFour","segments","isCollection","t1","t2","path","docPath","hrefWithLocale","t3","startsWith","_jsx","buttonStyle","className","filter","Boolean","join","disabled","el","margin","size","to","undefined"],"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedConfig } from 'payload'\n\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport {\n  useParams,\n  usePathname,\n  useSearchParams,\n} from '../../../../providers/RouterAdapter/index.js'\nimport { Button } from '../../../Button/index.js'\n\nexport const DocumentTabLink: React.FC<{\n  adminRoute: SanitizedConfig['routes']['admin']\n  ariaLabel?: string\n  baseClass: string\n  children?: React.ReactNode\n  href: string\n  isActive?: boolean\n  newTab?: boolean\n}> = ({\n  adminRoute,\n  ariaLabel,\n  baseClass,\n  children,\n  href: hrefFromProps,\n  isActive: isActiveFromProps,\n  newTab,\n}) => {\n  const pathname = usePathname()\n  const params = useParams()\n\n  const searchParams = useSearchParams()\n\n  const locale = searchParams.get('locale')\n\n  const [entityType, entitySlug, segmentThree, segmentFour, ...rest] = params.segments || []\n  const isCollection = entityType === 'collections'\n\n  let docPath = formatAdminURL({\n    adminRoute,\n    path: `/${isCollection ? 'collections' : 'globals'}/${entitySlug}`,\n  })\n\n  if (isCollection) {\n    if (segmentThree === 'trash' && segmentFour) {\n      docPath += `/trash/${segmentFour}`\n    } else if (segmentThree) {\n      docPath += `/${segmentThree}`\n    }\n  }\n\n  const href = `${docPath}${hrefFromProps}`\n  // separated the two so it doesn't break checks against pathname\n  const hrefWithLocale = `${href}${locale ? `?locale=${locale}` : ''}`\n\n  const isActive =\n    (href === docPath && pathname === docPath) ||\n    (href !== docPath && pathname.startsWith(href)) ||\n    isActiveFromProps\n\n  return (\n    <Button\n      aria-label={ariaLabel}\n      buttonStyle={isActive ? 'pill' : 'ghost'}\n      className={[baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(' ')}\n      disabled={isActive}\n      el={!isActive || href !== pathname ? 'link' : 'div'}\n      margin={false}\n      newTab={newTab}\n      size=\"medium\"\n      to={!isActive || href !== pathname ? hrefWithLocale : undefined}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SACEC,SAAS,EACTC,WAAW,EACXC,eAAe,QACV;AACP,SAASC,MAAM,QAAQ;AAEvB,OAAO,MAAMC,eAAA,GAQRC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,UAAA;IAAAC,SAAA;IAAAC,SAAA;IAAAC,QAAA;IAAAC,IAAA,EAAAC,aAAA;IAAAC,QAAA,EAAAC,iBAAA;IAAAC;EAAA,IAAAV,EAQL;EACC,MAAAW,QAAA,GAAiBf,WAAA;EACjB,MAAAgB,MAAA,GAAejB,SAAA;EAEf,MAAAkB,YAAA,GAAqBhB,eAAA;EAErB,MAAAiB,MAAA,GAAeD,YAAA,CAAAE,GAAA,CAAiB;EAEhC,OAAAC,UAAA,EAAAC,UAAA,EAAAC,YAAA,EAAAC,WAAA,IAAqEP,MAAA,CAAAQ,QAAA,MAAqB;EAC1F,MAAAC,YAAA,GAAqBL,UAAA,KAAe;EAI5B,MAAAM,EAAA,OAAID,YAAA,GAAe,gBAAgB,aAAaJ,UAAA,EAAY;EAAA,IAAAM,EAAA;EAAA,IAAAtB,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAqB,EAAA;IAFtDC,EAAA,GAAA9B,cAAA;MAAAS,UAAA;MAAAsB,IAAA,EAENF;IAA4D,CACpE;IAAArB,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAqB,EAAA;IAAArB,CAAA,MAAAsB,EAAA;EAAA;IAAAA,EAAA,GAAAtB,CAAA;EAAA;EAHA,IAAAwB,OAAA,GAAcF,EAGd;EAAA,IAEIF,YAAA;IAAA,IACEH,YAAA,KAAiB,WAAWC,WAAA;MAC9BM,OAAA,GAAAA,OAAA,GAAW,UAAUN,WAAA,EAAa;IAAA;MAAA,IACzBD,YAAA;QACTO,OAAA,GAAAA,OAAA,GAAW,IAAIP,YAAA,EAAc;MAAA;IAAA;EAAA;EAIjC,MAAAZ,IAAA,GAAa,GAAGmB,OAAA,GAAUlB,aAAA,EAAe;EAEzC,MAAAmB,cAAA,GAAuB,GAAGpB,IAAA,GAAOQ,MAAA,GAAS,WAAWA,MAAA,EAAQ,GAAG,IAAI;EAAA,IAAAa,EAAA;EAAA,IAAA1B,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAI,QAAA,IAAAJ,CAAA,QAAAwB,OAAA,IAAAxB,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAyB,cAAA,IAAAzB,CAAA,QAAAQ,iBAAA,IAAAR,CAAA,SAAAS,MAAA,IAAAT,CAAA,SAAAU,QAAA;IAEpE,MAAAH,QAAA,GACEF,IAAC,KAASmB,OAAA,IAAWd,QAAA,KAAac,OAAA,IACjCnB,IAAA,KAASmB,OAAA,IAAWd,QAAA,CAAAiB,UAAA,CAAoBtB,IAAA,KACzCG,iBAAA;IAGAkB,EAAA,GAAAE,IAAA,CAAA/B,MAAA;MAAA,cACcK,SAAA;MAAA2B,WAAA,EACCtB,QAAA,GAAW,SAAS;MAAAuB,SAAA,EACtB,CAAC3B,SAAA,EAAWI,QAAA,IAAY,GAAGJ,SAAA,UAAmB,EAAA4B,MAAA,CAAAC,OAAS,EAAAC,IAAA,CAAc;MAAAC,QAAA,EACtE3B,QAAA;MAAA4B,EAAA,EACN,CAAC5B,QAAA,IAAYF,IAAA,KAASK,QAAA,GAAW,SAAS;MAAA0B,MAAA;MAAA3B,MAAA;MAAA4B,IAAA,EAGzC;MAAAC,EAAA,EACD,CAAC/B,QAAA,IAAYF,IAAA,KAASK,QAAA,GAAWe,cAAA,GAAAc,SAAiB;MAAAnC;IAAA,C;;;;;;;;;;;;;;SATxDsB,E;CAcJ","ignoreList":[]}

package/dist/elements/DocumentHeader/Tabs/Tab/index.css

@@ -0,0 +1,47 @@
+@layer payload-default {
+  .doc-tab {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    color: var(--color-text-secondary);
+  }
+
+  .doc-tab:hover {
+    color: var(--color-text);
+  }
+
+  .doc-tab:hover .pill-version-count {
+    background-color: var(--color-bg-tertiary);
+    color: var(--color-text);
+  }
+
+  .doc-tab--active {
+    color: var(--color-text);
+  }
+
+  .doc-tab--active .pill-version-count {
+    background-color: var(--color-bg-tertiary);
+    color: var(--color-text);
+  }
+
+  .doc-tab--active:hover .pill-version-count {
+    background-color: var(--color-bg-tertiary);
+    color: var(--color-text);
+  }
+
+  .doc-tab--active.btn--disabled {
+    color: var(--color-text);
+    cursor: default;
+  }
+
+  .doc-tab__label {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: var(--spacer-1);
+    width: 100%;
+    height: 100%;
+    line-height: var(--spacer-3);
+  }
+}

package/dist/elements/DocumentHeader/Tabs/Tab/index.d.ts

@@ -0,0 +1,16 @@
+import type { DocumentTabConfig, PayloadRequest, SanitizedCollectionConfig, SanitizedGlobalConfig, SanitizedPermissions } from 'payload';
+import type React from 'react';
+import './index.css';
+export declare const baseClass = "doc-tab";
+export declare const DefaultDocumentTab: React.FC<{
+    apiURL?: string;
+    collectionConfig?: SanitizedCollectionConfig;
+    globalConfig?: SanitizedGlobalConfig;
+    path?: string;
+    permissions?: SanitizedPermissions;
+    req: PayloadRequest;
+    tabConfig: {
+        readonly Pill_Component?: React.FC;
+    } & DocumentTabConfig;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/DocumentHeader/Tabs/Tab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EAEjB,cAAc,EACd,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,SAAS,YAAY,CAAA;AAElC,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gBAAgB,CAAC,EAAE,yBAAyB,CAAA;IAC5C,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,GAAG,EAAE,cAAc,CAAA;IACnB,SAAS,EAAE;QAAE,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;KAAE,GAAG,iBAAiB,CAAA;CACtE,CAmEA,CAAA"}

package/dist/elements/DocumentHeader/Tabs/Tab/index.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { DocumentTabLink } from '../../../../exports/client/index.js';
+import { RenderServerComponent } from '../../../RenderServerComponent/index.js';
+import './index.css';
+export const baseClass = 'doc-tab';
+export const DefaultDocumentTab = props => {
+  const {
+    apiURL,
+    collectionConfig,
+    globalConfig,
+    permissions,
+    req,
+    tabConfig: {
+      href: tabHref,
+      isActive: tabIsActive,
+      label,
+      newTab,
+      Pill,
+      Pill_Component
+    }
+  } = props;
+  let href = typeof tabHref === 'string' ? tabHref : '';
+  let isActive = typeof tabIsActive === 'boolean' ? tabIsActive : false;
+  if (typeof tabHref === 'function') {
+    href = tabHref({
+      apiURL,
+      collection: collectionConfig,
+      global: globalConfig,
+      routes: req.payload.config.routes
+    });
+  }
+  if (typeof tabIsActive === 'function') {
+    isActive = tabIsActive({
+      href
+    });
+  }
+  const labelToRender = typeof label === 'function' ? label({
+    t: req.i18n.t
+  }) : label;
+  return /*#__PURE__*/_jsx(DocumentTabLink, {
+    adminRoute: req.payload.config.routes.admin,
+    ariaLabel: labelToRender,
+    baseClass: baseClass,
+    href: href,
+    isActive: isActive,
+    newTab: newTab,
+    children: /*#__PURE__*/_jsxs("span", {
+      className: `${baseClass}__label`,
+      children: [labelToRender, Pill || Pill_Component ? /*#__PURE__*/_jsxs(Fragment, {
+        children: [" ", RenderServerComponent({
+          Component: Pill,
+          Fallback: Pill_Component,
+          importMap: req.payload.importMap,
+          serverProps: {
+            i18n: req.i18n,
+            payload: req.payload,
+            permissions,
+            req,
+            server: req.server,
+            user: req.user
+          }
+        })]
+      }) : null]
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/DocumentHeader/Tabs/Tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Fragment","DocumentTabLink","RenderServerComponent","baseClass","DefaultDocumentTab","props","apiURL","collectionConfig","globalConfig","permissions","req","tabConfig","href","tabHref","isActive","tabIsActive","label","newTab","Pill","Pill_Component","collection","global","routes","payload","config","labelToRender","t","i18n","_jsx","adminRoute","admin","ariaLabel","_jsxs","className","Component","Fallback","importMap","serverProps","server","user"],"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/index.tsx"],"sourcesContent":["import type {\n  DocumentTabConfig,\n  DocumentTabServerPropsOnly,\n  PayloadRequest,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n  SanitizedPermissions,\n} from 'payload'\nimport type React from 'react'\n\nimport { Fragment } from 'react'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary\nimport { DocumentTabLink } from '../../../../exports/client/index.js'\nimport { RenderServerComponent } from '../../../RenderServerComponent/index.js'\nimport './index.css'\n\nexport const baseClass = 'doc-tab'\n\nexport const DefaultDocumentTab: React.FC<{\n  apiURL?: string\n  collectionConfig?: SanitizedCollectionConfig\n  globalConfig?: SanitizedGlobalConfig\n  path?: string\n  permissions?: SanitizedPermissions\n  req: PayloadRequest\n  tabConfig: { readonly Pill_Component?: React.FC } & DocumentTabConfig\n}> = (props) => {\n  const {\n    apiURL,\n    collectionConfig,\n    globalConfig,\n    permissions,\n    req,\n    tabConfig: { href: tabHref, isActive: tabIsActive, label, newTab, Pill, Pill_Component },\n  } = props\n\n  let href = typeof tabHref === 'string' ? tabHref : ''\n  let isActive = typeof tabIsActive === 'boolean' ? tabIsActive : false\n\n  if (typeof tabHref === 'function') {\n    href = tabHref({\n      apiURL,\n      collection: collectionConfig,\n      global: globalConfig,\n      routes: req.payload.config.routes,\n    })\n  }\n\n  if (typeof tabIsActive === 'function') {\n    isActive = tabIsActive({\n      href,\n    })\n  }\n\n  const labelToRender =\n    typeof label === 'function'\n      ? label({\n          t: req.i18n.t,\n        })\n      : label\n\n  return (\n    <DocumentTabLink\n      adminRoute={req.payload.config.routes.admin}\n      ariaLabel={labelToRender}\n      baseClass={baseClass}\n      href={href}\n      isActive={isActive}\n      newTab={newTab}\n    >\n      <span className={`${baseClass}__label`}>\n        {labelToRender}\n        {Pill || Pill_Component ? (\n          <Fragment>\n            &nbsp;\n            {RenderServerComponent({\n              Component: Pill,\n              Fallback: Pill_Component,\n              importMap: req.payload.importMap,\n              serverProps: {\n                i18n: req.i18n,\n                payload: req.payload,\n                permissions,\n                req,\n                server: req.server,\n                user: req.user,\n              } satisfies DocumentTabServerPropsOnly,\n            })}\n          </Fragment>\n        ) : null}\n      </span>\n    </DocumentTabLink>\n  )\n}\n"],"mappings":";AAUA,SAASA,QAAQ,QAAQ;AAEzB;AACA,SAASC,eAAe,QAAQ;AAChC,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,OAAO,MAAMC,SAAA,GAAY;AAEzB,OAAO,MAAMC,kBAAA,GAQPC,KAAA;EACJ,MAAM;IACJC,MAAM;IACNC,gBAAgB;IAChBC,YAAY;IACZC,WAAW;IACXC,GAAG;IACHC,SAAA,EAAW;MAAEC,IAAA,EAAMC,OAAO;MAAEC,QAAA,EAAUC,WAAW;MAAEC,KAAK;MAAEC,MAAM;MAAEC,IAAI;MAAEC;IAAc;EAAE,CACzF,GAAGd,KAAA;EAEJ,IAAIO,IAAA,GAAO,OAAOC,OAAA,KAAY,WAAWA,OAAA,GAAU;EACnD,IAAIC,QAAA,GAAW,OAAOC,WAAA,KAAgB,YAAYA,WAAA,GAAc;EAEhE,IAAI,OAAOF,OAAA,KAAY,YAAY;IACjCD,IAAA,GAAOC,OAAA,CAAQ;MACbP,MAAA;MACAc,UAAA,EAAYb,gBAAA;MACZc,MAAA,EAAQb,YAAA;MACRc,MAAA,EAAQZ,GAAA,CAAIa,OAAO,CAACC,MAAM,CAACF;IAC7B;EACF;EAEA,IAAI,OAAOP,WAAA,KAAgB,YAAY;IACrCD,QAAA,GAAWC,WAAA,CAAY;MACrBH;IACF;EACF;EAEA,MAAMa,aAAA,GACJ,OAAOT,KAAA,KAAU,aACbA,KAAA,CAAM;IACJU,CAAA,EAAGhB,GAAA,CAAIiB,IAAI,CAACD;EACd,KACAV,KAAA;EAEN,oBACEY,IAAA,CAAC3B,eAAA;IACC4B,UAAA,EAAYnB,GAAA,CAAIa,OAAO,CAACC,MAAM,CAACF,MAAM,CAACQ,KAAK;IAC3CC,SAAA,EAAWN,aAAA;IACXtB,SAAA,EAAWA,SAAA;IACXS,IAAA,EAAMA,IAAA;IACNE,QAAA,EAAUA,QAAA;IACVG,MAAA,EAAQA,MAAA;cAER,aAAAe,KAAA,CAAC;MAAKC,SAAA,EAAW,GAAG9B,SAAA,SAAkB;iBACnCsB,aAAA,EACAP,IAAA,IAAQC,cAAA,gBACPa,KAAA,CAAChC,QAAA;mBAAS,KAEPE,qBAAA,CAAsB;UACrBgC,SAAA,EAAWhB,IAAA;UACXiB,QAAA,EAAUhB,cAAA;UACViB,SAAA,EAAW1B,GAAA,CAAIa,OAAO,CAACa,SAAS;UAChCC,WAAA,EAAa;YACXV,IAAA,EAAMjB,GAAA,CAAIiB,IAAI;YACdJ,OAAA,EAASb,GAAA,CAAIa,OAAO;YACpBd,WAAA;YACAC,GAAA;YACA4B,MAAA,EAAQ5B,GAAA,CAAI4B,MAAM;YAClBC,IAAA,EAAM7B,GAAA,CAAI6B;UACZ;QACF;WAEA;;;AAIZ","ignoreList":[]}

package/dist/elements/DocumentHeader/Tabs/index.css

@@ -0,0 +1,43 @@
+@layer payload-default {
+  .doc-tabs {
+    display: flex;
+  }
+
+  .doc-tabs__tabs {
+    display: flex;
+    gap: var(--spacer-1);
+    list-style: none;
+    align-items: center;
+    margin: 0;
+    padding: var(--spacer-1) 0;
+  }
+
+  @media (max-width: 768px) {
+    .doc-tabs {
+      width: 100%;
+      overflow: auto;
+    }
+
+    /* this container has a gradient overlay as visual indication of `overflow: scroll` */
+    .doc-tabs::-webkit-scrollbar {
+      display: none;
+    }
+
+    .doc-tabs::after {
+      content: '';
+      display: block;
+      position: sticky;
+      right: 0;
+      width: var(--spacer-5);
+      height: var(--spacer-5);
+      background: linear-gradient(to right, transparent, var(--color-bg));
+      flex-shrink: 0;
+      z-index: 1111;
+      pointer-events: none;
+    }
+
+    .doc-tabs__tabs-container {
+      margin-right: auto;
+    }
+  }
+}