@payloadcms/next 3.0.0-canary.6de2b29 → 3.0.0-canary.78bbed6

package/dist/cjs/withPayload.cjs

@@ -31,16 +31,23 @@ const withPayload = (nextConfig = {})=>{
         env: {
             ...nextConfig?.env || {}
         },
+        outputFileTracingExcludes: {
+            ...nextConfig?.outputFileTracingExcludes || {},
+            '**/*': [
+                ...nextConfig?.outputFileTracingExcludes?.['**/*'] || [],
+                'drizzle-kit',
+                'drizzle-kit/api'
+            ]
+        },
+        outputFileTracingIncludes: {
+            ...nextConfig?.outputFileTracingIncludes || {},
+            '**/*': [
+                ...nextConfig?.outputFileTracingIncludes?.['**/*'] || [],
+                '@libsql/client'
+            ]
+        },
         experimental: {
             ...nextConfig?.experimental || {},
-            outputFileTracingExcludes: {
-                '**/*': [
-                    ...nextConfig.experimental?.outputFileTracingExcludes?.['**/*'] || [],
-                    'drizzle-kit',
-                    'drizzle-kit/payload',
-                    'libsql'
-                ]
-            },
             turbo: {
                 ...nextConfig?.experimental?.turbo || {},
                 resolveAlias: {
@@ -75,9 +82,9 @@ const withPayload = (nextConfig = {})=>{
         serverExternalPackages: [
             ...nextConfig?.serverExternalPackages || [],
             'drizzle-kit',
-            'drizzle-kit/payload',
-            'libsql',
+            'drizzle-kit/api',
             'pino',
+            'libsql',
             'pino-pretty',
             'graphql'
         ],
@@ -88,7 +95,7 @@ const withPayload = (nextConfig = {})=>{
                 externals: [
                     ...incomingWebpackConfig?.externals || [],
                     'drizzle-kit',
-                    'drizzle-kit/payload',
+                    'drizzle-kit/api',
                     'sharp',
                     'libsql'
                 ],

package/dist/cjs/withPayload.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/withPayload.js"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;;;;;IAqHH,OAA0B;eAA1B;;IApHa,WAAW;eAAX;;;AAAN,MAAM,cAAc,CAAC,aAAa,CAAC,CAAC;IACzC,IAAI,WAAW,YAAY,EAAE,YAAY,SAAS;QAChD,QAAQ,IAAI,CACV;IAEJ;IAEA;;GAEC,GACD,MAAM,WAAW;QACf,GAAG,UAAU;QACb,KAAK;YACH,GAAI,YAAY,OAAO,CAAC,CAAC;QAC3B;QACA,cAAc;YACZ,GAAI,YAAY,gBAAgB,CAAC,CAAC;YAClC,2BAA2B;gBACzB,QAAQ;uBACF,WAAW,YAAY,EAAE,2BAA2B,CAAC,OAAO,IAAI,EAAE;oBACtE;oBACA;oBACA;iBACD;YACH;YACA,OAAO;gBACL,GAAI,YAAY,cAAc,SAAS,CAAC,CAAC;gBACzC,cAAc;oBACZ,GAAI,YAAY,cAAc,OAAO,gBAAgB,CAAC,CAAC;oBACvD,wBAAwB;gBAC1B;YACF;QACF;QACA,SAAS;YACP,MAAM,oBAAoB,aAAa,aAAa,MAAM,WAAW,OAAO,KAAK,EAAE;YAEnF,OAAO;mBACD,qBAAqB,EAAE;gBAC3B;oBACE,QAAQ;oBACR,SAAS;wBACP;4BACE,KAAK;4BACL,OAAO;wBACT;wBACA;4BACE,KAAK;4BACL,OAAO;wBACT;wBACA;4BACE,KAAK;4BACL,OAAO;wBACT;qBACD;gBACH;aACD;QACH;QACA,wBAAwB;eAClB,YAAY,0BAA0B,EAAE;YAC5C;YACA;YACA;YACA;YACA;YACA;SACD;QACD,SAAS,CAAC,eAAe;YACvB,MAAM,wBACJ,OAAO,WAAW,OAAO,KAAK,aAC1B,WAAW,OAAO,CAAC,eAAe,kBAClC;YAEN,OAAO;gBACL,GAAG,qBAAqB;gBACxB,WAAW;uBACL,uBAAuB,aAAa,EAAE;oBAC1C;oBACA;oBACA;oBACA;iBACD;gBACD,gBAAgB;uBACV,uBAAuB,kBAAkB,EAAE;oBAC/C;wBAAE,QAAQ;oBAAwC;oBAClD;wBAAE,MAAM;oBAAwC;oBAChD;wBAAE,QAAQ;oBAAuC;oBACjD;wBAAE,MAAM;oBAAuC;iBAChD;gBACD,SAAS;oBACP,GAAI,uBAAuB,WAAW,CAAC,CAAC;oBACxC,OAAO;wBACL,GAAI,uBAAuB,SAAS,SAAS,CAAC,CAAC;oBACjD;oBACA,UAAU;wBACR,GAAI,uBAAuB,SAAS,YAAY,CAAC,CAAC;wBAClD,iCAAiC;wBACjC,oBAAoB;wBACpB,MAAM;wBACN,UAAU;wBACV,6BAA6B;wBAC7B,QAAQ;wBACR,kBAAkB;wBAClB,eAAe;oBACjB;gBACF;YACF;QACF;IACF;IAEA,IAAI,WAAW,QAAQ,EAAE;QACvB,SAAS,GAAG,CAAC,cAAc,GAAG,WAAW,QAAQ;IACnD;IAEA,OAAO;AACT;MAEA,WAAe","file":"withPayload.cjs","sourcesContent":["/**\n * @param {import('next').NextConfig} nextConfig\n *\n * @returns {import('next').NextConfig}\n * */\nexport const withPayload = (nextConfig = {}) => {\n  if (nextConfig.experimental?.staleTimes?.dynamic) {\n    console.warn(\n      'Payload detected a non-zero value for the `staleTimes.dynamic` option in your Next.js config. This may cause stale data to load in the Admin Panel. To clear this warning, remove the `staleTimes.dynamic` option from your Next.js config or set it to 0. In the future, Next.js may support scoping this option to specific routes.',\n    )\n  }\n\n  /**\n   * @type {import('next').NextConfig}\n   */\n  const toReturn = {\n    ...nextConfig,\n    env: {\n      ...(nextConfig?.env || {}),\n    },\n    experimental: {\n      ...(nextConfig?.experimental || {}),\n      outputFileTracingExcludes: {\n        '**/*': [\n          ...(nextConfig.experimental?.outputFileTracingExcludes?.['**/*'] || []),\n          'drizzle-kit',\n          'drizzle-kit/payload',\n          'libsql',\n        ],\n      },\n      turbo: {\n        ...(nextConfig?.experimental?.turbo || {}),\n        resolveAlias: {\n          ...(nextConfig?.experimental?.turbo?.resolveAlias || {}),\n          'payload-mock-package': 'payload-mock-package',\n        },\n      },\n    },\n    headers: async () => {\n      const headersFromConfig = 'headers' in nextConfig ? await nextConfig.headers() : []\n\n      return [\n        ...(headersFromConfig || []),\n        {\n          source: '/:path*',\n          headers: [\n            {\n              key: 'Accept-CH',\n              value: 'Sec-CH-Prefers-Color-Scheme',\n            },\n            {\n              key: 'Vary',\n              value: 'Sec-CH-Prefers-Color-Scheme',\n            },\n            {\n              key: 'Critical-CH',\n              value: 'Sec-CH-Prefers-Color-Scheme',\n            },\n          ],\n        },\n      ]\n    },\n    serverExternalPackages: [\n      ...(nextConfig?.serverExternalPackages || []),\n      'drizzle-kit',\n      'drizzle-kit/payload',\n      'libsql',\n      'pino',\n      'pino-pretty',\n      'graphql',\n    ],\n    webpack: (webpackConfig, webpackOptions) => {\n      const incomingWebpackConfig =\n        typeof nextConfig.webpack === 'function'\n          ? nextConfig.webpack(webpackConfig, webpackOptions)\n          : webpackConfig\n\n      return {\n        ...incomingWebpackConfig,\n        externals: [\n          ...(incomingWebpackConfig?.externals || []),\n          'drizzle-kit',\n          'drizzle-kit/payload',\n          'sharp',\n          'libsql',\n        ],\n        ignoreWarnings: [\n          ...(incomingWebpackConfig?.ignoreWarnings || []),\n          { module: /node_modules\\/mongodb\\/lib\\/utils\\.js/ },\n          { file: /node_modules\\/mongodb\\/lib\\/utils\\.js/ },\n          { module: /node_modules\\/mongodb\\/lib\\/bson\\.js/ },\n          { file: /node_modules\\/mongodb\\/lib\\/bson\\.js/ },\n        ],\n        resolve: {\n          ...(incomingWebpackConfig?.resolve || {}),\n          alias: {\n            ...(incomingWebpackConfig?.resolve?.alias || {}),\n          },\n          fallback: {\n            ...(incomingWebpackConfig?.resolve?.fallback || {}),\n            '@aws-sdk/credential-providers': false,\n            '@mongodb-js/zstd': false,\n            aws4: false,\n            kerberos: false,\n            'mongodb-client-encryption': false,\n            snappy: false,\n            'supports-color': false,\n            'yocto-queue': false,\n          },\n        },\n      }\n    },\n  }\n\n  if (nextConfig.basePath) {\n    toReturn.env.NEXT_BASE_PATH = nextConfig.basePath\n  }\n\n  return toReturn\n}\n\nexport default withPayload\n"]}
+{"version":3,"sources":["../../src/withPayload.js"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;;;;;IAyHH,OAA0B;eAA1B;;IAxHa,WAAW;eAAX;;;AAAN,MAAM,cAAc,CAAC,aAAa,CAAC,CAAC;IACzC,IAAI,WAAW,YAAY,EAAE,YAAY,SAAS;QAChD,QAAQ,IAAI,CACV;IAEJ;IAEA;;GAEC,GACD,MAAM,WAAW;QACf,GAAG,UAAU;QACb,KAAK;YACH,GAAI,YAAY,OAAO,CAAC,CAAC;QAC3B;QACA,2BAA2B;YACzB,GAAI,YAAY,6BAA6B,CAAC,CAAC;YAC/C,QAAQ;mBACF,YAAY,2BAA2B,CAAC,OAAO,IAAI,EAAE;gBACzD;gBACA;aACD;QACH;QACA,2BAA2B;YACzB,GAAI,YAAY,6BAA6B,CAAC,CAAC;YAC/C,QAAQ;mBAAK,YAAY,2BAA2B,CAAC,OAAO,IAAI,EAAE;gBAAG;aAAiB;QACxF;QACA,cAAc;YACZ,GAAI,YAAY,gBAAgB,CAAC,CAAC;YAClC,OAAO;gBACL,GAAI,YAAY,cAAc,SAAS,CAAC,CAAC;gBACzC,cAAc;oBACZ,GAAI,YAAY,cAAc,OAAO,gBAAgB,CAAC,CAAC;oBACvD,wBAAwB;gBAC1B;YACF;QACF;QACA,SAAS;YACP,MAAM,oBAAoB,aAAa,aAAa,MAAM,WAAW,OAAO,KAAK,EAAE;YAEnF,OAAO;mBACD,qBAAqB,EAAE;gBAC3B;oBACE,QAAQ;oBACR,SAAS;wBACP;4BACE,KAAK;4BACL,OAAO;wBACT;wBACA;4BACE,KAAK;4BACL,OAAO;wBACT;wBACA;4BACE,KAAK;4BACL,OAAO;wBACT;qBACD;gBACH;aACD;QACH;QACA,wBAAwB;eAClB,YAAY,0BAA0B,EAAE;YAC5C;YACA;YACA;YACA;YACA;YACA;SACD;QACD,SAAS,CAAC,eAAe;YACvB,MAAM,wBACJ,OAAO,WAAW,OAAO,KAAK,aAC1B,WAAW,OAAO,CAAC,eAAe,kBAClC;YAEN,OAAO;gBACL,GAAG,qBAAqB;gBACxB,WAAW;uBACL,uBAAuB,aAAa,EAAE;oBAC1C;oBACA;oBACA;oBACA;iBACD;gBACD,gBAAgB;uBACV,uBAAuB,kBAAkB,EAAE;oBAC/C;wBAAE,QAAQ;oBAAwC;oBAClD;wBAAE,MAAM;oBAAwC;oBAChD;wBAAE,QAAQ;oBAAuC;oBACjD;wBAAE,MAAM;oBAAuC;iBAChD;gBACD,SAAS;oBACP,GAAI,uBAAuB,WAAW,CAAC,CAAC;oBACxC,OAAO;wBACL,GAAI,uBAAuB,SAAS,SAAS,CAAC,CAAC;oBACjD;oBACA,UAAU;wBACR,GAAI,uBAAuB,SAAS,YAAY,CAAC,CAAC;wBAClD,iCAAiC;wBACjC,oBAAoB;wBACpB,MAAM;wBACN,UAAU;wBACV,6BAA6B;wBAC7B,QAAQ;wBACR,kBAAkB;wBAClB,eAAe;oBACjB;gBACF;YACF;QACF;IACF;IAEA,IAAI,WAAW,QAAQ,EAAE;QACvB,SAAS,GAAG,CAAC,cAAc,GAAG,WAAW,QAAQ;IACnD;IAEA,OAAO;AACT;MAEA,WAAe","file":"withPayload.cjs","sourcesContent":["/**\n * @param {import('next').NextConfig} nextConfig\n *\n * @returns {import('next').NextConfig}\n * */\nexport const withPayload = (nextConfig = {}) => {\n  if (nextConfig.experimental?.staleTimes?.dynamic) {\n    console.warn(\n      'Payload detected a non-zero value for the `staleTimes.dynamic` option in your Next.js config. This may cause stale data to load in the Admin Panel. To clear this warning, remove the `staleTimes.dynamic` option from your Next.js config or set it to 0. In the future, Next.js may support scoping this option to specific routes.',\n    )\n  }\n\n  /**\n   * @type {import('next').NextConfig}\n   */\n  const toReturn = {\n    ...nextConfig,\n    env: {\n      ...(nextConfig?.env || {}),\n    },\n    outputFileTracingExcludes: {\n      ...(nextConfig?.outputFileTracingExcludes || {}),\n      '**/*': [\n        ...(nextConfig?.outputFileTracingExcludes?.['**/*'] || []),\n        'drizzle-kit',\n        'drizzle-kit/api',\n      ],\n    },\n    outputFileTracingIncludes: {\n      ...(nextConfig?.outputFileTracingIncludes || {}),\n      '**/*': [...(nextConfig?.outputFileTracingIncludes?.['**/*'] || []), '@libsql/client'],\n    },\n    experimental: {\n      ...(nextConfig?.experimental || {}),\n      turbo: {\n        ...(nextConfig?.experimental?.turbo || {}),\n        resolveAlias: {\n          ...(nextConfig?.experimental?.turbo?.resolveAlias || {}),\n          'payload-mock-package': 'payload-mock-package',\n        },\n      },\n    },\n    headers: async () => {\n      const headersFromConfig = 'headers' in nextConfig ? await nextConfig.headers() : []\n\n      return [\n        ...(headersFromConfig || []),\n        {\n          source: '/:path*',\n          headers: [\n            {\n              key: 'Accept-CH',\n              value: 'Sec-CH-Prefers-Color-Scheme',\n            },\n            {\n              key: 'Vary',\n              value: 'Sec-CH-Prefers-Color-Scheme',\n            },\n            {\n              key: 'Critical-CH',\n              value: 'Sec-CH-Prefers-Color-Scheme',\n            },\n          ],\n        },\n      ]\n    },\n    serverExternalPackages: [\n      ...(nextConfig?.serverExternalPackages || []),\n      'drizzle-kit',\n      'drizzle-kit/api',\n      'pino',\n      'libsql',\n      'pino-pretty',\n      'graphql',\n    ],\n    webpack: (webpackConfig, webpackOptions) => {\n      const incomingWebpackConfig =\n        typeof nextConfig.webpack === 'function'\n          ? nextConfig.webpack(webpackConfig, webpackOptions)\n          : webpackConfig\n\n      return {\n        ...incomingWebpackConfig,\n        externals: [\n          ...(incomingWebpackConfig?.externals || []),\n          'drizzle-kit',\n          'drizzle-kit/api',\n          'sharp',\n          'libsql',\n        ],\n        ignoreWarnings: [\n          ...(incomingWebpackConfig?.ignoreWarnings || []),\n          { module: /node_modules\\/mongodb\\/lib\\/utils\\.js/ },\n          { file: /node_modules\\/mongodb\\/lib\\/utils\\.js/ },\n          { module: /node_modules\\/mongodb\\/lib\\/bson\\.js/ },\n          { file: /node_modules\\/mongodb\\/lib\\/bson\\.js/ },\n        ],\n        resolve: {\n          ...(incomingWebpackConfig?.resolve || {}),\n          alias: {\n            ...(incomingWebpackConfig?.resolve?.alias || {}),\n          },\n          fallback: {\n            ...(incomingWebpackConfig?.resolve?.fallback || {}),\n            '@aws-sdk/credential-providers': false,\n            '@mongodb-js/zstd': false,\n            aws4: false,\n            kerberos: false,\n            'mongodb-client-encryption': false,\n            snappy: false,\n            'supports-color': false,\n            'yocto-queue': false,\n          },\n        },\n      }\n    },\n  }\n\n  if (nextConfig.basePath) {\n    toReturn.env.NEXT_BASE_PATH = nextConfig.basePath\n  }\n\n  return toReturn\n}\n\nexport default withPayload\n"]}

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

@@ -1 +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;AAK9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,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,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAmDA,CAAA"}
+{"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;AAM9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,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,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAwDA,CAAA"}

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

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSearchParams } from '@payloadcms/ui';
+import { formatAdminURL } from '@payloadcms/ui/shared';
 import LinkImport from 'next/link.js';
 import { useParams, usePathname } from 'next/navigation.js';
 import React from 'react';
@@ -12,7 +13,10 @@ export const DocumentTabLink = ({ adminRoute, ariaLabel, baseClass, children, hr
     const locale = 'locale' in searchParams && typeof searchParams.locale === 'string' ? searchParams.locale : undefined;
     const [entityType, entitySlug, segmentThree, segmentFour, ...rest] = params.segments || [];
     const isCollection = entityType === 'collections';
-    let docPath = `${adminRoute}/${isCollection ? 'collections' : 'globals'}/${entitySlug}`;
+    let docPath = formatAdminURL({
+        adminRoute,
+        path: `/${isCollection ? 'collections' : 'globals'}/${entitySlug}`
+    });
     if (isCollection && segmentThree) {
         // doc ID
         docPath += `/${segmentThree}`;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedConfig } from 'payload'\n\nimport { useSearchParams } from '@payloadcms/ui'\nimport LinkImport from 'next/link.js'\nimport { useParams, usePathname } from 'next/navigation.js'\nimport React from 'react'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\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  isCollection?: 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 =\n    'locale' in searchParams && typeof searchParams.locale === 'string'\n      ? searchParams.locale\n      : undefined\n\n  const [entityType, entitySlug, segmentThree, segmentFour, ...rest] = params.segments || []\n  const isCollection = entityType === 'collections'\n  let docPath = `${adminRoute}/${isCollection ? 'collections' : 'globals'}/${entitySlug}`\n  if (isCollection && segmentThree) {\n    // doc ID\n    docPath += `/${segmentThree}`\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    <li\n      aria-label={ariaLabel}\n      className={[baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(' ')}\n    >\n      <Link\n        className={`${baseClass}__link`}\n        href={!isActive || href !== pathname ? hrefWithLocale : ''}\n        {...(newTab && { rel: 'noopener noreferrer', target: '_blank' })}\n        tabIndex={isActive ? -1 : 0}\n      >\n        {children}\n      </Link>\n    </li>\n  )\n}\n"],"names":["useSearchParams","LinkImport","useParams","usePathname","React","Link","default","DocumentTabLink","adminRoute","ariaLabel","baseClass","children","href","hrefFromProps","isActive","isActiveFromProps","newTab","pathname","params","searchParams","locale","undefined","entityType","entitySlug","segmentThree","segmentFour","rest","segments","isCollection","docPath","hrefWithLocale","startsWith","li","aria-label","className","filter","Boolean","join","rel","target","tabIndex"],"mappings":"AAAA;;AAGA,SAASA,eAAe,QAAQ,iBAAgB;AAChD,OAAOC,gBAAgB,eAAc;AACrC,SAASC,SAAS,EAAEC,WAAW,QAAQ,qBAAoB;AAC3D,OAAOC,WAAW,QAAO;AAEzB,MAAMC,OAAQJ,WAAWK,OAAO,IAAIL;AAEpC,OAAO,MAAMM,kBASR,CAAC,EACJC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,MAAMC,aAAa,EACnBC,UAAUC,iBAAiB,EAC3BC,MAAM,EACP;IACC,MAAMC,WAAWd;IACjB,MAAMe,SAAShB;IAEf,MAAM,EAAEiB,YAAY,EAAE,GAAGnB;IAEzB,MAAMoB,SACJ,YAAYD,gBAAgB,OAAOA,aAAaC,MAAM,KAAK,WACvDD,aAAaC,MAAM,GACnBC;IAEN,MAAM,CAACC,YAAYC,YAAYC,cAAcC,aAAa,GAAGC,KAAK,GAAGR,OAAOS,QAAQ,IAAI,EAAE;IAC1F,MAAMC,eAAeN,eAAe;IACpC,IAAIO,UAAU,CAAC,EAAErB,WAAW,CAAC,EAAEoB,eAAe,gBAAgB,UAAU,CAAC,EAAEL,WAAW,CAAC;IACvF,IAAIK,gBAAgBJ,cAAc;QAChC,SAAS;QACTK,WAAW,CAAC,CAAC,EAAEL,aAAa,CAAC;IAC/B;IAEA,MAAMZ,OAAO,CAAC,EAAEiB,QAAQ,EAAEhB,cAAc,CAAC;IACzC,gEAAgE;IAChE,MAAMiB,iBAAiB,CAAC,EAAElB,KAAK,EAAEQ,SAAS,CAAC,QAAQ,EAAEA,OAAO,CAAC,GAAG,GAAG,CAAC;IAEpE,MAAMN,WACJ,AAACF,SAASiB,WAAWZ,aAAaY,WACjCjB,SAASiB,WAAWZ,SAASc,UAAU,CAACnB,SACzCG;IAEF,qBACE,KAACiB;QACCC,cAAYxB;QACZyB,WAAW;YAACxB;YAAWI,YAAY,CAAC,EAAEJ,UAAU,QAAQ,CAAC;SAAC,CAACyB,MAAM,CAACC,SAASC,IAAI,CAAC;kBAEhF,cAAA,KAAChC;YACC6B,WAAW,CAAC,EAAExB,UAAU,MAAM,CAAC;YAC/BE,MAAM,CAACE,YAAYF,SAASK,WAAWa,iBAAiB;YACvD,GAAId,UAAU;gBAAEsB,KAAK;gBAAuBC,QAAQ;YAAS,CAAC;YAC/DC,UAAU1B,WAAW,CAAC,IAAI;sBAEzBH;;;AAIT,EAAC"}
+{"version":3,"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedConfig } from 'payload'\n\nimport { useSearchParams } from '@payloadcms/ui'\nimport { formatAdminURL } from '@payloadcms/ui/shared'\nimport LinkImport from 'next/link.js'\nimport { useParams, usePathname } from 'next/navigation.js'\nimport React from 'react'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\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  isCollection?: 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 =\n    'locale' in searchParams && typeof searchParams.locale === 'string'\n      ? searchParams.locale\n      : undefined\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 && segmentThree) {\n    // doc ID\n    docPath += `/${segmentThree}`\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    <li\n      aria-label={ariaLabel}\n      className={[baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(' ')}\n    >\n      <Link\n        className={`${baseClass}__link`}\n        href={!isActive || href !== pathname ? hrefWithLocale : ''}\n        {...(newTab && { rel: 'noopener noreferrer', target: '_blank' })}\n        tabIndex={isActive ? -1 : 0}\n      >\n        {children}\n      </Link>\n    </li>\n  )\n}\n"],"names":["useSearchParams","formatAdminURL","LinkImport","useParams","usePathname","React","Link","default","DocumentTabLink","adminRoute","ariaLabel","baseClass","children","href","hrefFromProps","isActive","isActiveFromProps","newTab","pathname","params","searchParams","locale","undefined","entityType","entitySlug","segmentThree","segmentFour","rest","segments","isCollection","docPath","path","hrefWithLocale","startsWith","li","aria-label","className","filter","Boolean","join","rel","target","tabIndex"],"mappings":"AAAA;;AAGA,SAASA,eAAe,QAAQ,iBAAgB;AAChD,SAASC,cAAc,QAAQ,wBAAuB;AACtD,OAAOC,gBAAgB,eAAc;AACrC,SAASC,SAAS,EAAEC,WAAW,QAAQ,qBAAoB;AAC3D,OAAOC,WAAW,QAAO;AAEzB,MAAMC,OAAQJ,WAAWK,OAAO,IAAIL;AAEpC,OAAO,MAAMM,kBASR,CAAC,EACJC,UAAU,EACVC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,MAAMC,aAAa,EACnBC,UAAUC,iBAAiB,EAC3BC,MAAM,EACP;IACC,MAAMC,WAAWd;IACjB,MAAMe,SAAShB;IAEf,MAAM,EAAEiB,YAAY,EAAE,GAAGpB;IAEzB,MAAMqB,SACJ,YAAYD,gBAAgB,OAAOA,aAAaC,MAAM,KAAK,WACvDD,aAAaC,MAAM,GACnBC;IAEN,MAAM,CAACC,YAAYC,YAAYC,cAAcC,aAAa,GAAGC,KAAK,GAAGR,OAAOS,QAAQ,IAAI,EAAE;IAC1F,MAAMC,eAAeN,eAAe;IAEpC,IAAIO,UAAU7B,eAAe;QAC3BQ;QACAsB,MAAM,CAAC,CAAC,EAAEF,eAAe,gBAAgB,UAAU,CAAC,EAAEL,WAAW,CAAC;IACpE;IAEA,IAAIK,gBAAgBJ,cAAc;QAChC,SAAS;QACTK,WAAW,CAAC,CAAC,EAAEL,aAAa,CAAC;IAC/B;IAEA,MAAMZ,OAAO,CAAC,EAAEiB,QAAQ,EAAEhB,cAAc,CAAC;IACzC,gEAAgE;IAChE,MAAMkB,iBAAiB,CAAC,EAAEnB,KAAK,EAAEQ,SAAS,CAAC,QAAQ,EAAEA,OAAO,CAAC,GAAG,GAAG,CAAC;IAEpE,MAAMN,WACJ,AAACF,SAASiB,WAAWZ,aAAaY,WACjCjB,SAASiB,WAAWZ,SAASe,UAAU,CAACpB,SACzCG;IAEF,qBACE,KAACkB;QACCC,cAAYzB;QACZ0B,WAAW;YAACzB;YAAWI,YAAY,CAAC,EAAEJ,UAAU,QAAQ,CAAC;SAAC,CAAC0B,MAAM,CAACC,SAASC,IAAI,CAAC;kBAEhF,cAAA,KAACjC;YACC8B,WAAW,CAAC,EAAEzB,UAAU,MAAM,CAAC;YAC/BE,MAAM,CAACE,YAAYF,SAASK,WAAWc,iBAAiB;YACvD,GAAIf,UAAU;gBAAEuB,KAAK;gBAAuBC,QAAQ;YAAS,CAAC;YAC/DC,UAAU3B,WAAW,CAAC,IAAI;sBAEzBH;;;AAIT,EAAC"}

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

@@ -2,5 +2,7 @@ import type { DocumentTabConfig, DocumentTabProps } from 'payload';
 import React from 'react';
 import './index.scss';
 export declare const baseClass = "doc-tab";
-export declare const DocumentTab: React.FC<DocumentTabConfig & DocumentTabProps>;
+export declare const DocumentTab: React.FC<{
+    readonly Pill_Component?: React.FC;
+} & DocumentTabConfig & DocumentTabProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAElE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,YAAY,CAAA;AAElC,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,gBAAgB,CAwEtE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAGlE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,YAAY,CAAA;AAElC,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAChC;IAAE,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;CAAE,GAAG,iBAAiB,GAAG,gBAAgB,CAqF9E,CAAA"}

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RenderComponent, getCreateMappedComponent } from '@payloadcms/ui/shared';
 import React, { Fragment } from 'react';
 import { DocumentTabLink } from './TabLink.js';
 export const baseClass = 'doc-tab';
 export const DocumentTab = (props)=>{
-    const { Pill, apiURL, collectionConfig, condition, config, globalConfig, href: tabHref, i18n, isActive: tabIsActive, label, newTab, permissions } = props;
+    const { Pill, Pill_Component, apiURL, collectionConfig, condition, globalConfig, href: tabHref, i18n, isActive: tabIsActive, label, newTab, payload, permissions } = props;
+    const { config } = payload;
     const { routes } = config;
     let href = typeof tabHref === 'string' ? tabHref : '';
     let isActive = typeof tabIsActive === 'boolean' ? tabIsActive : false;
@@ -30,6 +32,15 @@ export const DocumentTab = (props)=>{
         const labelToRender = typeof label === 'function' ? label({
             t: i18n.t
         }) : label;
+        const createMappedComponent = getCreateMappedComponent({
+            importMap: payload.importMap,
+            serverProps: {
+                i18n,
+                payload,
+                permissions
+            }
+        });
+        const mappedPin = createMappedComponent(Pill, undefined, Pill_Component, 'Pill');
         return /*#__PURE__*/ _jsx(DocumentTabLink, {
             adminRoute: routes.admin,
             ariaLabel: labelToRender,
@@ -42,10 +53,12 @@ export const DocumentTab = (props)=>{
                 className: `${baseClass}__label`,
                 children: [
                     labelToRender,
-                    Pill && /*#__PURE__*/ _jsxs(Fragment, {
+                    mappedPin && /*#__PURE__*/ _jsxs(Fragment, {
                         children: [
                             " ",
-                            /*#__PURE__*/ _jsx(Pill, {})
+                            /*#__PURE__*/ _jsx(RenderComponent, {
+                                mappedComponent: mappedPin
+                            })
                         ]
                     })
                 ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/index.tsx"],"sourcesContent":["import type { DocumentTabConfig, DocumentTabProps } from 'payload'\n\nimport React, { Fragment } from 'react'\n\nimport { DocumentTabLink } from './TabLink.js'\nimport './index.scss'\n\nexport const baseClass = 'doc-tab'\n\nexport const DocumentTab: React.FC<DocumentTabConfig & DocumentTabProps> = (props) => {\n  const {\n    Pill,\n    apiURL,\n    collectionConfig,\n    condition,\n    config,\n    globalConfig,\n    href: tabHref,\n    i18n,\n    isActive: tabIsActive,\n    label,\n    newTab,\n    permissions,\n  } = props\n\n  const { routes } = config\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,\n    })\n  }\n\n  if (typeof tabIsActive === 'function') {\n    isActive = tabIsActive({\n      href,\n    })\n  }\n\n  const meetsCondition =\n    !condition ||\n    (condition && Boolean(condition({ collectionConfig, config, globalConfig, permissions })))\n\n  if (meetsCondition) {\n    const labelToRender =\n      typeof label === 'function'\n        ? label({\n            t: i18n.t,\n          })\n        : label\n\n    return (\n      <DocumentTabLink\n        adminRoute={routes.admin}\n        ariaLabel={labelToRender}\n        baseClass={baseClass}\n        href={href}\n        isActive={isActive}\n        isCollection={!!collectionConfig && !globalConfig}\n        newTab={newTab}\n      >\n        <span className={`${baseClass}__label`}>\n          {labelToRender}\n          {Pill && (\n            <Fragment>\n              &nbsp;\n              <Pill />\n            </Fragment>\n          )}\n        </span>\n      </DocumentTabLink>\n    )\n  }\n\n  return null\n}\n"],"names":["React","Fragment","DocumentTabLink","baseClass","DocumentTab","props","Pill","apiURL","collectionConfig","condition","config","globalConfig","href","tabHref","i18n","isActive","tabIsActive","label","newTab","permissions","routes","collection","global","meetsCondition","Boolean","labelToRender","t","adminRoute","admin","ariaLabel","isCollection","span","className"],"mappings":";AAEA,OAAOA,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,eAAe,QAAQ,eAAc;AAG9C,OAAO,MAAMC,YAAY,UAAS;AAElC,OAAO,MAAMC,cAA8D,CAACC;IAC1E,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,gBAAgB,EAChBC,SAAS,EACTC,MAAM,EACNC,YAAY,EACZC,MAAMC,OAAO,EACbC,IAAI,EACJC,UAAUC,WAAW,EACrBC,KAAK,EACLC,MAAM,EACNC,WAAW,EACZ,GAAGd;IAEJ,MAAM,EAAEe,MAAM,EAAE,GAAGV;IAEnB,IAAIE,OAAO,OAAOC,YAAY,WAAWA,UAAU;IACnD,IAAIE,WAAW,OAAOC,gBAAgB,YAAYA,cAAc;IAEhE,IAAI,OAAOH,YAAY,YAAY;QACjCD,OAAOC,QAAQ;YACbN;YACAc,YAAYb;YACZc,QAAQX;YACRS;QACF;IACF;IAEA,IAAI,OAAOJ,gBAAgB,YAAY;QACrCD,WAAWC,YAAY;YACrBJ;QACF;IACF;IAEA,MAAMW,iBACJ,CAACd,aACAA,aAAae,QAAQf,UAAU;QAAED;QAAkBE;QAAQC;QAAcQ;IAAY;IAExF,IAAII,gBAAgB;QAClB,MAAME,gBACJ,OAAOR,UAAU,aACbA,MAAM;YACJS,GAAGZ,KAAKY,CAAC;QACX,KACAT;QAEN,qBACE,KAACf;YACCyB,YAAYP,OAAOQ,KAAK;YACxBC,WAAWJ;YACXtB,WAAWA;YACXS,MAAMA;YACNG,UAAUA;YACVe,cAAc,CAAC,CAACtB,oBAAoB,CAACG;YACrCO,QAAQA;sBAER,cAAA,MAACa;gBAAKC,WAAW,CAAC,EAAE7B,UAAU,OAAO,CAAC;;oBACnCsB;oBACAnB,sBACC,MAACL;;4BAAS;0CAER,KAACK;;;;;;IAMb;IAEA,OAAO;AACT,EAAC"}
+{"version":3,"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/index.tsx"],"sourcesContent":["import type { DocumentTabConfig, DocumentTabProps } from 'payload'\n\nimport { RenderComponent, getCreateMappedComponent } from '@payloadcms/ui/shared'\nimport React, { Fragment } from 'react'\n\nimport { DocumentTabLink } from './TabLink.js'\nimport './index.scss'\n\nexport const baseClass = 'doc-tab'\n\nexport const DocumentTab: React.FC<\n  { readonly Pill_Component?: React.FC } & DocumentTabConfig & DocumentTabProps\n> = (props) => {\n  const {\n    Pill,\n    Pill_Component,\n    apiURL,\n    collectionConfig,\n    condition,\n    globalConfig,\n    href: tabHref,\n    i18n,\n    isActive: tabIsActive,\n    label,\n    newTab,\n    payload,\n    permissions,\n  } = props\n  const { config } = payload\n  const { routes } = config\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,\n    })\n  }\n\n  if (typeof tabIsActive === 'function') {\n    isActive = tabIsActive({\n      href,\n    })\n  }\n\n  const meetsCondition =\n    !condition ||\n    (condition && Boolean(condition({ collectionConfig, config, globalConfig, permissions })))\n\n  if (meetsCondition) {\n    const labelToRender =\n      typeof label === 'function'\n        ? label({\n            t: i18n.t,\n          })\n        : label\n\n    const createMappedComponent = getCreateMappedComponent({\n      importMap: payload.importMap,\n      serverProps: {\n        i18n,\n        payload,\n        permissions,\n      },\n    })\n\n    const mappedPin = createMappedComponent(Pill, undefined, Pill_Component, 'Pill')\n\n    return (\n      <DocumentTabLink\n        adminRoute={routes.admin}\n        ariaLabel={labelToRender}\n        baseClass={baseClass}\n        href={href}\n        isActive={isActive}\n        isCollection={!!collectionConfig && !globalConfig}\n        newTab={newTab}\n      >\n        <span className={`${baseClass}__label`}>\n          {labelToRender}\n          {mappedPin && (\n            <Fragment>\n              &nbsp;\n              <RenderComponent mappedComponent={mappedPin} />\n            </Fragment>\n          )}\n        </span>\n      </DocumentTabLink>\n    )\n  }\n\n  return null\n}\n"],"names":["RenderComponent","getCreateMappedComponent","React","Fragment","DocumentTabLink","baseClass","DocumentTab","props","Pill","Pill_Component","apiURL","collectionConfig","condition","globalConfig","href","tabHref","i18n","isActive","tabIsActive","label","newTab","payload","permissions","config","routes","collection","global","meetsCondition","Boolean","labelToRender","t","createMappedComponent","importMap","serverProps","mappedPin","undefined","adminRoute","admin","ariaLabel","isCollection","span","className","mappedComponent"],"mappings":";AAEA,SAASA,eAAe,EAAEC,wBAAwB,QAAQ,wBAAuB;AACjF,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,eAAe,QAAQ,eAAc;AAG9C,OAAO,MAAMC,YAAY,UAAS;AAElC,OAAO,MAAMC,cAET,CAACC;IACH,MAAM,EACJC,IAAI,EACJC,cAAc,EACdC,MAAM,EACNC,gBAAgB,EAChBC,SAAS,EACTC,YAAY,EACZC,MAAMC,OAAO,EACbC,IAAI,EACJC,UAAUC,WAAW,EACrBC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,WAAW,EACZ,GAAGf;IACJ,MAAM,EAAEgB,MAAM,EAAE,GAAGF;IACnB,MAAM,EAAEG,MAAM,EAAE,GAAGD;IAEnB,IAAIT,OAAO,OAAOC,YAAY,WAAWA,UAAU;IACnD,IAAIE,WAAW,OAAOC,gBAAgB,YAAYA,cAAc;IAEhE,IAAI,OAAOH,YAAY,YAAY;QACjCD,OAAOC,QAAQ;YACbL;YACAe,YAAYd;YACZe,QAAQb;YACRW;QACF;IACF;IAEA,IAAI,OAAON,gBAAgB,YAAY;QACrCD,WAAWC,YAAY;YACrBJ;QACF;IACF;IAEA,MAAMa,iBACJ,CAACf,aACAA,aAAagB,QAAQhB,UAAU;QAAED;QAAkBY;QAAQV;QAAcS;IAAY;IAExF,IAAIK,gBAAgB;QAClB,MAAME,gBACJ,OAAOV,UAAU,aACbA,MAAM;YACJW,GAAGd,KAAKc,CAAC;QACX,KACAX;QAEN,MAAMY,wBAAwB9B,yBAAyB;YACrD+B,WAAWX,QAAQW,SAAS;YAC5BC,aAAa;gBACXjB;gBACAK;gBACAC;YACF;QACF;QAEA,MAAMY,YAAYH,sBAAsBvB,MAAM2B,WAAW1B,gBAAgB;QAEzE,qBACE,KAACL;YACCgC,YAAYZ,OAAOa,KAAK;YACxBC,WAAWT;YACXxB,WAAWA;YACXS,MAAMA;YACNG,UAAUA;YACVsB,cAAc,CAAC,CAAC5B,oBAAoB,CAACE;YACrCO,QAAQA;sBAER,cAAA,MAACoB;gBAAKC,WAAW,CAAC,EAAEpC,UAAU,OAAO,CAAC;;oBACnCwB;oBACAK,2BACC,MAAC/B;;4BAAS;0CAER,KAACH;gCAAgB0C,iBAAiBR;;;;;;;IAM9C;IAEA,OAAO;AACT,EAAC"}

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

@@ -35,7 +35,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    border-radius: 2px;
+    border-radius: var(--style-radius-s);
     background-color: var(--theme-elevation-50);
     opacity: 0;
   }
@@ -51,6 +51,7 @@
   }
 
   &--active {
+    font-weight: 600;
     &::before {
       opacity: 1;
       background-color: var(--theme-elevation-100);
@@ -78,14 +79,15 @@
     gap: 4px;
     width: 100%;
     height: 100%;
-    padding: calc(var(--base) / 2) calc(var(--base));
+    line-height: base(1.2);
+    padding: base(0.2) base(0.6);
   }
 
   &__count {
-    min-width: 22px;
+    line-height: base(0.8);
+    min-width: base(0.8);
     text-align: center;
-    padding: 2px 7px;
     background-color: var(--theme-elevation-100);
-    border-radius: 1px;
+    border-radius: var(--style-radius-s);
   }
 }

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

@@ -3,7 +3,7 @@ export const getCustomViews = (args)=>{
     const { collectionConfig, globalConfig } = args;
     let customViews;
     if (collectionConfig) {
-        const collectionViewsConfig = typeof collectionConfig?.admin?.components?.views?.Edit === 'object' && typeof collectionConfig?.admin?.components?.views?.Edit !== 'function' ? collectionConfig?.admin?.components?.views?.Edit : undefined;
+        const collectionViewsConfig = typeof collectionConfig?.admin?.components?.views?.edit === 'object' && typeof collectionConfig?.admin?.components?.views?.edit !== 'function' ? collectionConfig?.admin?.components?.views?.edit : undefined;
         customViews = Object.entries(collectionViewsConfig || {}).reduce((prev, [key, view])=>{
             if (documentViewKeys.includes(key)) {
                 return prev;
@@ -18,7 +18,7 @@ export const getCustomViews = (args)=>{
         }, []);
     }
     if (globalConfig) {
-        const globalViewsConfig = typeof globalConfig?.admin?.components?.views?.Edit === 'object' && typeof globalConfig?.admin?.components?.views?.Edit !== 'function' ? globalConfig?.admin?.components?.views?.Edit : undefined;
+        const globalViewsConfig = typeof globalConfig?.admin?.components?.views?.edit === 'object' && typeof globalConfig?.admin?.components?.views?.edit !== 'function' ? globalConfig?.admin?.components?.views?.edit : undefined;
         customViews = Object.entries(globalViewsConfig || {}).reduce((prev, [key, view])=>{
             if (documentViewKeys.includes(key)) {
                 return prev;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/DocumentHeader/Tabs/getCustomViews.ts"],"sourcesContent":["import type { EditViewConfig, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload'\n\nimport { documentViewKeys } from './tabs/index.js'\n\nexport const getCustomViews = (args: {\n  collectionConfig: SanitizedCollectionConfig\n  globalConfig: SanitizedGlobalConfig\n}): EditViewConfig[] => {\n  const { collectionConfig, globalConfig } = args\n\n  let customViews: EditViewConfig[]\n\n  if (collectionConfig) {\n    const collectionViewsConfig =\n      typeof collectionConfig?.admin?.components?.views?.Edit === 'object' &&\n      typeof collectionConfig?.admin?.components?.views?.Edit !== 'function'\n        ? collectionConfig?.admin?.components?.views?.Edit\n        : undefined\n\n    customViews = Object.entries(collectionViewsConfig || {}).reduce((prev, [key, view]) => {\n      if (documentViewKeys.includes(key)) {\n        return prev\n      }\n\n      return [...prev, { ...view, key }]\n    }, [])\n  }\n\n  if (globalConfig) {\n    const globalViewsConfig =\n      typeof globalConfig?.admin?.components?.views?.Edit === 'object' &&\n      typeof globalConfig?.admin?.components?.views?.Edit !== 'function'\n        ? globalConfig?.admin?.components?.views?.Edit\n        : undefined\n\n    customViews = Object.entries(globalViewsConfig || {}).reduce((prev, [key, view]) => {\n      if (documentViewKeys.includes(key)) {\n        return prev\n      }\n\n      return [...prev, { ...view, key }]\n    }, [])\n  }\n\n  return customViews\n}\n"],"names":["documentViewKeys","getCustomViews","args","collectionConfig","globalConfig","customViews","collectionViewsConfig","admin","components","views","Edit","undefined","Object","entries","reduce","prev","key","view","includes","globalViewsConfig"],"mappings":"AAEA,SAASA,gBAAgB,QAAQ,kBAAiB;AAElD,OAAO,MAAMC,iBAAiB,CAACC;IAI7B,MAAM,EAAEC,gBAAgB,EAAEC,YAAY,EAAE,GAAGF;IAE3C,IAAIG;IAEJ,IAAIF,kBAAkB;QACpB,MAAMG,wBACJ,OAAOH,kBAAkBI,OAAOC,YAAYC,OAAOC,SAAS,YAC5D,OAAOP,kBAAkBI,OAAOC,YAAYC,OAAOC,SAAS,aACxDP,kBAAkBI,OAAOC,YAAYC,OAAOC,OAC5CC;QAENN,cAAcO,OAAOC,OAAO,CAACP,yBAAyB,CAAC,GAAGQ,MAAM,CAAC,CAACC,MAAM,CAACC,KAAKC,KAAK;YACjF,IAAIjB,iBAAiBkB,QAAQ,CAACF,MAAM;gBAClC,OAAOD;YACT;YAEA,OAAO;mBAAIA;gBAAM;oBAAE,GAAGE,IAAI;oBAAED;gBAAI;aAAE;QACpC,GAAG,EAAE;IACP;IAEA,IAAIZ,cAAc;QAChB,MAAMe,oBACJ,OAAOf,cAAcG,OAAOC,YAAYC,OAAOC,SAAS,YACxD,OAAON,cAAcG,OAAOC,YAAYC,OAAOC,SAAS,aACpDN,cAAcG,OAAOC,YAAYC,OAAOC,OACxCC;QAENN,cAAcO,OAAOC,OAAO,CAACM,qBAAqB,CAAC,GAAGL,MAAM,CAAC,CAACC,MAAM,CAACC,KAAKC,KAAK;YAC7E,IAAIjB,iBAAiBkB,QAAQ,CAACF,MAAM;gBAClC,OAAOD;YACT;YAEA,OAAO;mBAAIA;gBAAM;oBAAE,GAAGE,IAAI;oBAAED;gBAAI;aAAE;QACpC,GAAG,EAAE;IACP;IAEA,OAAOX;AACT,EAAC"}
+{"version":3,"sources":["../../../../src/elements/DocumentHeader/Tabs/getCustomViews.ts"],"sourcesContent":["import type { EditViewConfig, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload'\n\nimport { documentViewKeys } from './tabs/index.js'\n\nexport const getCustomViews = (args: {\n  collectionConfig: SanitizedCollectionConfig\n  globalConfig: SanitizedGlobalConfig\n}): EditViewConfig[] => {\n  const { collectionConfig, globalConfig } = args\n\n  let customViews: EditViewConfig[]\n\n  if (collectionConfig) {\n    const collectionViewsConfig =\n      typeof collectionConfig?.admin?.components?.views?.edit === 'object' &&\n      typeof collectionConfig?.admin?.components?.views?.edit !== 'function'\n        ? collectionConfig?.admin?.components?.views?.edit\n        : undefined\n\n    customViews = Object.entries(collectionViewsConfig || {}).reduce((prev, [key, view]) => {\n      if (documentViewKeys.includes(key)) {\n        return prev\n      }\n\n      return [...prev, { ...view, key }]\n    }, [])\n  }\n\n  if (globalConfig) {\n    const globalViewsConfig =\n      typeof globalConfig?.admin?.components?.views?.edit === 'object' &&\n      typeof globalConfig?.admin?.components?.views?.edit !== 'function'\n        ? globalConfig?.admin?.components?.views?.edit\n        : undefined\n\n    customViews = Object.entries(globalViewsConfig || {}).reduce((prev, [key, view]) => {\n      if (documentViewKeys.includes(key)) {\n        return prev\n      }\n\n      return [...prev, { ...view, key }]\n    }, [])\n  }\n\n  return customViews\n}\n"],"names":["documentViewKeys","getCustomViews","args","collectionConfig","globalConfig","customViews","collectionViewsConfig","admin","components","views","edit","undefined","Object","entries","reduce","prev","key","view","includes","globalViewsConfig"],"mappings":"AAEA,SAASA,gBAAgB,QAAQ,kBAAiB;AAElD,OAAO,MAAMC,iBAAiB,CAACC;IAI7B,MAAM,EAAEC,gBAAgB,EAAEC,YAAY,EAAE,GAAGF;IAE3C,IAAIG;IAEJ,IAAIF,kBAAkB;QACpB,MAAMG,wBACJ,OAAOH,kBAAkBI,OAAOC,YAAYC,OAAOC,SAAS,YAC5D,OAAOP,kBAAkBI,OAAOC,YAAYC,OAAOC,SAAS,aACxDP,kBAAkBI,OAAOC,YAAYC,OAAOC,OAC5CC;QAENN,cAAcO,OAAOC,OAAO,CAACP,yBAAyB,CAAC,GAAGQ,MAAM,CAAC,CAACC,MAAM,CAACC,KAAKC,KAAK;YACjF,IAAIjB,iBAAiBkB,QAAQ,CAACF,MAAM;gBAClC,OAAOD;YACT;YAEA,OAAO;mBAAIA;gBAAM;oBAAE,GAAGE,IAAI;oBAAED;gBAAI;aAAE;QACpC,GAAG,EAAE;IACP;IAEA,IAAIZ,cAAc;QAChB,MAAMe,oBACJ,OAAOf,cAAcG,OAAOC,YAAYC,OAAOC,SAAS,YACxD,OAAON,cAAcG,OAAOC,YAAYC,OAAOC,SAAS,aACpDN,cAAcG,OAAOC,YAAYC,OAAOC,OACxCC;QAENN,cAAcO,OAAOC,OAAO,CAACM,qBAAqB,CAAC,GAAGL,MAAM,CAAC,CAACC,MAAM,CAACC,KAAKC,KAAK;YAC7E,IAAIjB,iBAAiBkB,QAAQ,CAACF,MAAM;gBAClC,OAAOD;YACT;YAEA,OAAO;mBAAIA;gBAAM;oBAAE,GAAGE,IAAI;oBAAED;gBAAI;aAAE;QACpC,GAAG,EAAE;IACP;IAEA,OAAOX;AACT,EAAC"}

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

@@ -1,11 +1,11 @@
 export const getViewConfig = (args)=>{
     const { name, collectionConfig, globalConfig } = args;
     if (collectionConfig) {
-        const collectionConfigViewsConfig = typeof collectionConfig?.admin?.components?.views?.Edit === 'object' && typeof collectionConfig?.admin?.components?.views?.Edit !== 'function' ? collectionConfig?.admin?.components?.views?.Edit : undefined;
+        const collectionConfigViewsConfig = typeof collectionConfig?.admin?.components?.views?.edit === 'object' && typeof collectionConfig?.admin?.components?.views?.edit !== 'function' ? collectionConfig?.admin?.components?.views?.edit : undefined;
         return collectionConfigViewsConfig?.[name];
     }
     if (globalConfig) {
-        const globalConfigViewsConfig = typeof globalConfig?.admin?.components?.views?.Edit === 'object' && typeof globalConfig?.admin?.components?.views?.Edit !== 'function' ? globalConfig?.admin?.components?.views?.Edit : undefined;
+        const globalConfigViewsConfig = typeof globalConfig?.admin?.components?.views?.edit === 'object' && typeof globalConfig?.admin?.components?.views?.edit !== 'function' ? globalConfig?.admin?.components?.views?.edit : undefined;
         return globalConfigViewsConfig?.[name];
     }
     return null;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/DocumentHeader/Tabs/getViewConfig.ts"],"sourcesContent":["import type { EditViewConfig, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload'\n\nexport const getViewConfig = (args: {\n  collectionConfig: SanitizedCollectionConfig\n  globalConfig: SanitizedGlobalConfig\n  name: string\n}): EditViewConfig => {\n  const { name, collectionConfig, globalConfig } = args\n\n  if (collectionConfig) {\n    const collectionConfigViewsConfig =\n      typeof collectionConfig?.admin?.components?.views?.Edit === 'object' &&\n      typeof collectionConfig?.admin?.components?.views?.Edit !== 'function'\n        ? collectionConfig?.admin?.components?.views?.Edit\n        : undefined\n\n    return collectionConfigViewsConfig?.[name]\n  }\n\n  if (globalConfig) {\n    const globalConfigViewsConfig =\n      typeof globalConfig?.admin?.components?.views?.Edit === 'object' &&\n      typeof globalConfig?.admin?.components?.views?.Edit !== 'function'\n        ? globalConfig?.admin?.components?.views?.Edit\n        : undefined\n\n    return globalConfigViewsConfig?.[name]\n  }\n\n  return null\n}\n"],"names":["getViewConfig","args","name","collectionConfig","globalConfig","collectionConfigViewsConfig","admin","components","views","Edit","undefined","globalConfigViewsConfig"],"mappings":"AAEA,OAAO,MAAMA,gBAAgB,CAACC;IAK5B,MAAM,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,YAAY,EAAE,GAAGH;IAEjD,IAAIE,kBAAkB;QACpB,MAAME,8BACJ,OAAOF,kBAAkBG,OAAOC,YAAYC,OAAOC,SAAS,YAC5D,OAAON,kBAAkBG,OAAOC,YAAYC,OAAOC,SAAS,aACxDN,kBAAkBG,OAAOC,YAAYC,OAAOC,OAC5CC;QAEN,OAAOL,6BAA6B,CAACH,KAAK;IAC5C;IAEA,IAAIE,cAAc;QAChB,MAAMO,0BACJ,OAAOP,cAAcE,OAAOC,YAAYC,OAAOC,SAAS,YACxD,OAAOL,cAAcE,OAAOC,YAAYC,OAAOC,SAAS,aACpDL,cAAcE,OAAOC,YAAYC,OAAOC,OACxCC;QAEN,OAAOC,yBAAyB,CAACT,KAAK;IACxC;IAEA,OAAO;AACT,EAAC"}
+{"version":3,"sources":["../../../../src/elements/DocumentHeader/Tabs/getViewConfig.ts"],"sourcesContent":["import type { EditViewConfig, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload'\n\nexport const getViewConfig = (args: {\n  collectionConfig: SanitizedCollectionConfig\n  globalConfig: SanitizedGlobalConfig\n  name: string\n}): EditViewConfig => {\n  const { name, collectionConfig, globalConfig } = args\n\n  if (collectionConfig) {\n    const collectionConfigViewsConfig =\n      typeof collectionConfig?.admin?.components?.views?.edit === 'object' &&\n      typeof collectionConfig?.admin?.components?.views?.edit !== 'function'\n        ? collectionConfig?.admin?.components?.views?.edit\n        : undefined\n\n    return collectionConfigViewsConfig?.[name]\n  }\n\n  if (globalConfig) {\n    const globalConfigViewsConfig =\n      typeof globalConfig?.admin?.components?.views?.edit === 'object' &&\n      typeof globalConfig?.admin?.components?.views?.edit !== 'function'\n        ? globalConfig?.admin?.components?.views?.edit\n        : undefined\n\n    return globalConfigViewsConfig?.[name]\n  }\n\n  return null\n}\n"],"names":["getViewConfig","args","name","collectionConfig","globalConfig","collectionConfigViewsConfig","admin","components","views","edit","undefined","globalConfigViewsConfig"],"mappings":"AAEA,OAAO,MAAMA,gBAAgB,CAACC;IAK5B,MAAM,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,YAAY,EAAE,GAAGH;IAEjD,IAAIE,kBAAkB;QACpB,MAAME,8BACJ,OAAOF,kBAAkBG,OAAOC,YAAYC,OAAOC,SAAS,YAC5D,OAAON,kBAAkBG,OAAOC,YAAYC,OAAOC,SAAS,aACxDN,kBAAkBG,OAAOC,YAAYC,OAAOC,OAC5CC;QAEN,OAAOL,6BAA6B,CAACH,KAAK;IAC5C;IAEA,IAAIE,cAAc;QAChB,MAAMO,0BACJ,OAAOP,cAAcE,OAAOC,YAAYC,OAAOC,SAAS,YACxD,OAAOL,cAAcE,OAAOC,YAAYC,OAAOC,SAAS,aACpDL,cAAcE,OAAOC,YAAYC,OAAOC,OACxCC;QAEN,OAAOC,yBAAyB,CAACT,KAAK;IACxC;IAEA,OAAO;AACT,EAAC"}

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

@@ -1,12 +1,12 @@
 import type { I18n } from '@payloadcms/translations';
-import type { Permissions, SanitizedCollectionConfig, SanitizedConfig, SanitizedGlobalConfig } from 'payload';
+import type { Payload, Permissions, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload';
 import React from 'react';
 import './index.scss';
 export declare const DocumentTabs: React.FC<{
     collectionConfig: SanitizedCollectionConfig;
-    config: SanitizedConfig;
     globalConfig: SanitizedGlobalConfig;
     i18n: I18n;
+    payload: Payload;
     permissions: Permissions;
 }>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DocumentHeader/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,EACV,WAAW,EACX,yBAAyB,EACzB,eAAe,EACf,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,gBAAgB,EAAE,yBAAyB,CAAA;IAC3C,MAAM,EAAE,eAAe,CAAA;IACvB,YAAY,EAAE,qBAAqB,CAAA;IACnC,IAAI,EAAE,IAAI,CAAA;IACV,WAAW,EAAE,WAAW,CAAA;CACzB,CA8EA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DocumentHeader/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,EACV,OAAO,EACP,WAAW,EACX,yBAAyB,EACzB,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAKrB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,gBAAgB,EAAE,yBAAyB,CAAA;IAC3C,YAAY,EAAE,qBAAqB,CAAA;IACnC,IAAI,EAAE,IAAI,CAAA;IACV,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,WAAW,CAAA;CACzB,CAoGA,CAAA"}

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { isPlainObject } from 'payload';
+import { RenderComponent, getCreateMappedComponent } from '@payloadcms/ui/shared';
 import React from 'react';
 import { ShouldRenderTabs } from './ShouldRenderTabs.js';
 import { DocumentTab } from './Tab/index.js';
@@ -9,7 +8,8 @@ import { getViewConfig } from './getViewConfig.js';
 import { tabs as defaultTabs } from './tabs/index.js';
 const baseClass = 'doc-tabs';
 export const DocumentTabs = (props)=>{
-    const { collectionConfig, config, globalConfig, permissions } = props;
+    const { collectionConfig, globalConfig, i18n, payload, permissions } = props;
+    const { config } = payload;
     const customViews = getCustomViews({
         collectionConfig,
         globalConfig
@@ -33,9 +33,8 @@ export const DocumentTabs = (props)=>{
                                 collectionConfig,
                                 globalConfig
                             });
-                            const tabFromConfig = viewConfig && 'Tab' in viewConfig ? viewConfig.Tab : undefined;
-                            const tabConfig = typeof tabFromConfig === 'object' ? tabFromConfig : undefined;
-                            const { condition } = tabConfig || {};
+                            const tabFromConfig = viewConfig && 'tab' in viewConfig ? viewConfig.tab : undefined;
+                            const { condition } = tabFromConfig || {};
                             const meetsCondition = !condition || condition && Boolean(condition({
                                 collectionConfig,
                                 config,
@@ -52,21 +51,32 @@ export const DocumentTabs = (props)=>{
                             return null;
                         }),
                         customViews?.map((CustomView, index)=>{
-                            if ('Tab' in CustomView) {
-                                const { Tab, path } = CustomView;
-                                if (typeof Tab === 'object' && !isPlainObject(Tab)) {
-                                    throw new Error(`Custom 'Tab' Component for path: "${path}" must be a React Server Component. To use client-side functionality, render your Client Component within a Server Component and pass it only props that are serializable. More info: https://react.dev/reference/react/use-server#serializable-parameters-and-return-values`);
-                                }
-                                if (typeof Tab === 'function') {
-                                    return /*#__PURE__*/ _createElement(Tab, {
-                                        path: path,
-                                        ...props,
-                                        key: `tab-custom-${index}`
+                            if ('tab' in CustomView) {
+                                const { path, tab } = CustomView;
+                                if (tab.Component) {
+                                    const createMappedComponent = getCreateMappedComponent({
+                                        importMap: payload.importMap,
+                                        serverProps: {
+                                            i18n,
+                                            payload,
+                                            permissions,
+                                            ...props,
+                                            key: `tab-custom-${index}`,
+                                            path
+                                        }
                                     });
+                                    const mappedTab = createMappedComponent(tab.Component, undefined, undefined, 'tab.Component');
+                                    return /*#__PURE__*/ _jsx(RenderComponent, {
+                                        clientProps: {
+                                            key: `tab-custom-${index}`,
+                                            path
+                                        },
+                                        mappedComponent: mappedTab
+                                    }, `tab-custom-${index}`);
                                 }
                                 return /*#__PURE__*/ _jsx(DocumentTab, {
                                     ...props,
-                                    ...Tab
+                                    ...tab
                                 }, `tab-custom-${index}`);
                             }
                             return null;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/DocumentHeader/Tabs/index.tsx"],"sourcesContent":["import type { I18n } from '@payloadcms/translations'\nimport type {\n  Permissions,\n  SanitizedCollectionConfig,\n  SanitizedConfig,\n  SanitizedGlobalConfig,\n} from 'payload'\n\nimport { isPlainObject } from 'payload'\nimport React from 'react'\n\nimport { ShouldRenderTabs } from './ShouldRenderTabs.js'\nimport { DocumentTab } from './Tab/index.js'\nimport { getCustomViews } from './getCustomViews.js'\nimport { getViewConfig } from './getViewConfig.js'\nimport './index.scss'\nimport { tabs as defaultTabs } from './tabs/index.js'\n\nconst baseClass = 'doc-tabs'\n\nexport const DocumentTabs: React.FC<{\n  collectionConfig: SanitizedCollectionConfig\n  config: SanitizedConfig\n  globalConfig: SanitizedGlobalConfig\n  i18n: I18n\n  permissions: Permissions\n}> = (props) => {\n  const { collectionConfig, config, globalConfig, permissions } = props\n\n  const customViews = getCustomViews({ collectionConfig, globalConfig })\n\n  return (\n    <ShouldRenderTabs>\n      <div className={baseClass}>\n        <div className={`${baseClass}__tabs-container`}>\n          <ul className={`${baseClass}__tabs`}>\n            {Object.entries(defaultTabs)\n              // sort `defaultViews` based on `order` property from smallest to largest\n              // if no `order`, append the view to the end\n              // TODO: open `order` to the config and merge `defaultViews` with `customViews`\n              ?.sort(([, a], [, b]) => {\n                if (a.order === undefined && b.order === undefined) return 0\n                else if (a.order === undefined) return 1\n                else if (b.order === undefined) return -1\n                return a.order - b.order\n              })\n              ?.map(([name, tab], index) => {\n                const viewConfig = getViewConfig({ name, collectionConfig, globalConfig })\n                const tabFromConfig = viewConfig && 'Tab' in viewConfig ? viewConfig.Tab : undefined\n                const tabConfig = typeof tabFromConfig === 'object' ? tabFromConfig : undefined\n\n                const { condition } = tabConfig || {}\n\n                const meetsCondition =\n                  !condition ||\n                  (condition &&\n                    Boolean(condition({ collectionConfig, config, globalConfig, permissions })))\n\n                if (meetsCondition) {\n                  return (\n                    <DocumentTab\n                      key={`tab-${index}`}\n                      {...{\n                        ...props,\n                        ...(tab || {}),\n                        ...(tabFromConfig || {}),\n                      }}\n                    />\n                  )\n                }\n\n                return null\n              })}\n            {customViews?.map((CustomView, index) => {\n              if ('Tab' in CustomView) {\n                const { Tab, path } = CustomView\n\n                if (typeof Tab === 'object' && !isPlainObject(Tab)) {\n                  throw new Error(\n                    `Custom 'Tab' Component for path: \"${path}\" must be a React Server Component. To use client-side functionality, render your Client Component within a Server Component and pass it only props that are serializable. More info: https://react.dev/reference/react/use-server#serializable-parameters-and-return-values`,\n                  )\n                }\n\n                if (typeof Tab === 'function') {\n                  return <Tab path={path} {...props} key={`tab-custom-${index}`} />\n                }\n\n                return (\n                  <DocumentTab\n                    key={`tab-custom-${index}`}\n                    {...{\n                      ...props,\n                      ...Tab,\n                    }}\n                  />\n                )\n              }\n              return null\n            })}\n          </ul>\n        </div>\n      </div>\n    </ShouldRenderTabs>\n  )\n}\n"],"names":["isPlainObject","React","ShouldRenderTabs","DocumentTab","getCustomViews","getViewConfig","tabs","defaultTabs","baseClass","DocumentTabs","props","collectionConfig","config","globalConfig","permissions","customViews","div","className","ul","Object","entries","sort","a","b","order","undefined","map","name","tab","index","viewConfig","tabFromConfig","Tab","tabConfig","condition","meetsCondition","Boolean","CustomView","path","Error","key"],"mappings":";;AAQA,SAASA,aAAa,QAAQ,UAAS;AACvC,OAAOC,WAAW,QAAO;AAEzB,SAASC,gBAAgB,QAAQ,wBAAuB;AACxD,SAASC,WAAW,QAAQ,iBAAgB;AAC5C,SAASC,cAAc,QAAQ,sBAAqB;AACpD,SAASC,aAAa,QAAQ,qBAAoB;AAElD,SAASC,QAAQC,WAAW,QAAQ,kBAAiB;AAErD,MAAMC,YAAY;AAElB,OAAO,MAAMC,eAMR,CAACC;IACJ,MAAM,EAAEC,gBAAgB,EAAEC,MAAM,EAAEC,YAAY,EAAEC,WAAW,EAAE,GAAGJ;IAEhE,MAAMK,cAAcX,eAAe;QAAEO;QAAkBE;IAAa;IAEpE,qBACE,KAACX;kBACC,cAAA,KAACc;YAAIC,WAAWT;sBACd,cAAA,KAACQ;gBAAIC,WAAW,CAAC,EAAET,UAAU,gBAAgB,CAAC;0BAC5C,cAAA,MAACU;oBAAGD,WAAW,CAAC,EAAET,UAAU,MAAM,CAAC;;wBAChCW,OAAOC,OAAO,CAACb,cAIZc,KAAK,CAAC,GAAGC,EAAE,EAAE,GAAGC,EAAE;4BAClB,IAAID,EAAEE,KAAK,KAAKC,aAAaF,EAAEC,KAAK,KAAKC,WAAW,OAAO;iCACtD,IAAIH,EAAEE,KAAK,KAAKC,WAAW,OAAO;iCAClC,IAAIF,EAAEC,KAAK,KAAKC,WAAW,OAAO,CAAC;4BACxC,OAAOH,EAAEE,KAAK,GAAGD,EAAEC,KAAK;wBAC1B,IACEE,IAAI,CAAC,CAACC,MAAMC,IAAI,EAAEC;4BAClB,MAAMC,aAAazB,cAAc;gCAAEsB;gCAAMhB;gCAAkBE;4BAAa;4BACxE,MAAMkB,gBAAgBD,cAAc,SAASA,aAAaA,WAAWE,GAAG,GAAGP;4BAC3E,MAAMQ,YAAY,OAAOF,kBAAkB,WAAWA,gBAAgBN;4BAEtE,MAAM,EAAES,SAAS,EAAE,GAAGD,aAAa,CAAC;4BAEpC,MAAME,iBACJ,CAACD,aACAA,aACCE,QAAQF,UAAU;gCAAEvB;gCAAkBC;gCAAQC;gCAAcC;4BAAY;4BAE5E,IAAIqB,gBAAgB;gCAClB,qBACE,KAAChC;oCAGG,GAAGO,KAAK;oCACR,GAAIkB,OAAO,CAAC,CAAC;oCACb,GAAIG,iBAAiB,CAAC,CAAC;mCAJpB,CAAC,IAAI,EAAEF,MAAM,CAAC;4BAQzB;4BAEA,OAAO;wBACT;wBACDd,aAAaW,IAAI,CAACW,YAAYR;4BAC7B,IAAI,SAASQ,YAAY;gCACvB,MAAM,EAAEL,GAAG,EAAEM,IAAI,EAAE,GAAGD;gCAEtB,IAAI,OAAOL,QAAQ,YAAY,CAAChC,cAAcgC,MAAM;oCAClD,MAAM,IAAIO,MACR,CAAC,kCAAkC,EAAED,KAAK,4QAA4Q,CAAC;gCAE3T;gCAEA,IAAI,OAAON,QAAQ,YAAY;oCAC7B,qBAAO,eAACA;wCAAIM,MAAMA;wCAAO,GAAG5B,KAAK;wCAAE8B,KAAK,CAAC,WAAW,EAAEX,MAAM,CAAC;;gCAC/D;gCAEA,qBACE,KAAC1B;oCAGG,GAAGO,KAAK;oCACR,GAAGsB,GAAG;mCAHH,CAAC,WAAW,EAAEH,MAAM,CAAC;4BAOhC;4BACA,OAAO;wBACT;;;;;;AAMZ,EAAC"}
+{"version":3,"sources":["../../../../src/elements/DocumentHeader/Tabs/index.tsx"],"sourcesContent":["import type { I18n } from '@payloadcms/translations'\nimport type {\n  Payload,\n  Permissions,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n} from 'payload'\n\nimport { RenderComponent, getCreateMappedComponent } from '@payloadcms/ui/shared'\nimport React from 'react'\n\nimport { ShouldRenderTabs } from './ShouldRenderTabs.js'\nimport { DocumentTab } from './Tab/index.js'\nimport { getCustomViews } from './getCustomViews.js'\nimport { getViewConfig } from './getViewConfig.js'\nimport './index.scss'\nimport { tabs as defaultTabs } from './tabs/index.js'\n\nconst baseClass = 'doc-tabs'\n\nexport const DocumentTabs: React.FC<{\n  collectionConfig: SanitizedCollectionConfig\n  globalConfig: SanitizedGlobalConfig\n  i18n: I18n\n  payload: Payload\n  permissions: Permissions\n}> = (props) => {\n  const { collectionConfig, globalConfig, i18n, payload, permissions } = props\n  const { config } = payload\n\n  const customViews = getCustomViews({ collectionConfig, globalConfig })\n\n  return (\n    <ShouldRenderTabs>\n      <div className={baseClass}>\n        <div className={`${baseClass}__tabs-container`}>\n          <ul className={`${baseClass}__tabs`}>\n            {Object.entries(defaultTabs)\n              // sort `defaultViews` based on `order` property from smallest to largest\n              // if no `order`, append the view to the end\n              // TODO: open `order` to the config and merge `defaultViews` with `customViews`\n              ?.sort(([, a], [, b]) => {\n                if (a.order === undefined && b.order === undefined) return 0\n                else if (a.order === undefined) return 1\n                else if (b.order === undefined) return -1\n                return a.order - b.order\n              })\n              ?.map(([name, tab], index) => {\n                const viewConfig = getViewConfig({ name, collectionConfig, globalConfig })\n                const tabFromConfig = viewConfig && 'tab' in viewConfig ? viewConfig.tab : undefined\n\n                const { condition } = tabFromConfig || {}\n\n                const meetsCondition =\n                  !condition ||\n                  (condition &&\n                    Boolean(condition({ collectionConfig, config, globalConfig, permissions })))\n\n                if (meetsCondition) {\n                  return (\n                    <DocumentTab\n                      key={`tab-${index}`}\n                      {...{\n                        ...props,\n                        ...(tab || {}),\n                        ...(tabFromConfig || {}),\n                      }}\n                    />\n                  )\n                }\n\n                return null\n              })}\n            {customViews?.map((CustomView, index) => {\n              if ('tab' in CustomView) {\n                const { path, tab } = CustomView\n\n                if (tab.Component) {\n                  const createMappedComponent = getCreateMappedComponent({\n                    importMap: payload.importMap,\n                    serverProps: {\n                      i18n,\n                      payload,\n                      permissions,\n                      ...props,\n                      key: `tab-custom-${index}`,\n                      path,\n                    },\n                  })\n\n                  const mappedTab = createMappedComponent(\n                    tab.Component,\n                    undefined,\n                    undefined,\n                    'tab.Component',\n                  )\n\n                  return (\n                    <RenderComponent\n                      clientProps={{\n                        key: `tab-custom-${index}`,\n                        path,\n                      }}\n                      key={`tab-custom-${index}`}\n                      mappedComponent={mappedTab}\n                    />\n                  )\n                }\n\n                return (\n                  <DocumentTab\n                    key={`tab-custom-${index}`}\n                    {...{\n                      ...props,\n                      ...tab,\n                    }}\n                  />\n                )\n              }\n              return null\n            })}\n          </ul>\n        </div>\n      </div>\n    </ShouldRenderTabs>\n  )\n}\n"],"names":["RenderComponent","getCreateMappedComponent","React","ShouldRenderTabs","DocumentTab","getCustomViews","getViewConfig","tabs","defaultTabs","baseClass","DocumentTabs","props","collectionConfig","globalConfig","i18n","payload","permissions","config","customViews","div","className","ul","Object","entries","sort","a","b","order","undefined","map","name","tab","index","viewConfig","tabFromConfig","condition","meetsCondition","Boolean","CustomView","path","Component","createMappedComponent","importMap","serverProps","key","mappedTab","clientProps","mappedComponent"],"mappings":";AAQA,SAASA,eAAe,EAAEC,wBAAwB,QAAQ,wBAAuB;AACjF,OAAOC,WAAW,QAAO;AAEzB,SAASC,gBAAgB,QAAQ,wBAAuB;AACxD,SAASC,WAAW,QAAQ,iBAAgB;AAC5C,SAASC,cAAc,QAAQ,sBAAqB;AACpD,SAASC,aAAa,QAAQ,qBAAoB;AAElD,SAASC,QAAQC,WAAW,QAAQ,kBAAiB;AAErD,MAAMC,YAAY;AAElB,OAAO,MAAMC,eAMR,CAACC;IACJ,MAAM,EAAEC,gBAAgB,EAAEC,YAAY,EAAEC,IAAI,EAAEC,OAAO,EAAEC,WAAW,EAAE,GAAGL;IACvE,MAAM,EAAEM,MAAM,EAAE,GAAGF;IAEnB,MAAMG,cAAcb,eAAe;QAAEO;QAAkBC;IAAa;IAEpE,qBACE,KAACV;kBACC,cAAA,KAACgB;YAAIC,WAAWX;sBACd,cAAA,KAACU;gBAAIC,WAAW,CAAC,EAAEX,UAAU,gBAAgB,CAAC;0BAC5C,cAAA,MAACY;oBAAGD,WAAW,CAAC,EAAEX,UAAU,MAAM,CAAC;;wBAChCa,OAAOC,OAAO,CAACf,cAIZgB,KAAK,CAAC,GAAGC,EAAE,EAAE,GAAGC,EAAE;4BAClB,IAAID,EAAEE,KAAK,KAAKC,aAAaF,EAAEC,KAAK,KAAKC,WAAW,OAAO;iCACtD,IAAIH,EAAEE,KAAK,KAAKC,WAAW,OAAO;iCAClC,IAAIF,EAAEC,KAAK,KAAKC,WAAW,OAAO,CAAC;4BACxC,OAAOH,EAAEE,KAAK,GAAGD,EAAEC,KAAK;wBAC1B,IACEE,IAAI,CAAC,CAACC,MAAMC,IAAI,EAAEC;4BAClB,MAAMC,aAAa3B,cAAc;gCAAEwB;gCAAMlB;gCAAkBC;4BAAa;4BACxE,MAAMqB,gBAAgBD,cAAc,SAASA,aAAaA,WAAWF,GAAG,GAAGH;4BAE3E,MAAM,EAAEO,SAAS,EAAE,GAAGD,iBAAiB,CAAC;4BAExC,MAAME,iBACJ,CAACD,aACAA,aACCE,QAAQF,UAAU;gCAAEvB;gCAAkBK;gCAAQJ;gCAAcG;4BAAY;4BAE5E,IAAIoB,gBAAgB;gCAClB,qBACE,KAAChC;oCAGG,GAAGO,KAAK;oCACR,GAAIoB,OAAO,CAAC,CAAC;oCACb,GAAIG,iBAAiB,CAAC,CAAC;mCAJpB,CAAC,IAAI,EAAEF,MAAM,CAAC;4BAQzB;4BAEA,OAAO;wBACT;wBACDd,aAAaW,IAAI,CAACS,YAAYN;4BAC7B,IAAI,SAASM,YAAY;gCACvB,MAAM,EAAEC,IAAI,EAAER,GAAG,EAAE,GAAGO;gCAEtB,IAAIP,IAAIS,SAAS,EAAE;oCACjB,MAAMC,wBAAwBxC,yBAAyB;wCACrDyC,WAAW3B,QAAQ2B,SAAS;wCAC5BC,aAAa;4CACX7B;4CACAC;4CACAC;4CACA,GAAGL,KAAK;4CACRiC,KAAK,CAAC,WAAW,EAAEZ,MAAM,CAAC;4CAC1BO;wCACF;oCACF;oCAEA,MAAMM,YAAYJ,sBAChBV,IAAIS,SAAS,EACbZ,WACAA,WACA;oCAGF,qBACE,KAAC5B;wCACC8C,aAAa;4CACXF,KAAK,CAAC,WAAW,EAAEZ,MAAM,CAAC;4CAC1BO;wCACF;wCAEAQ,iBAAiBF;uCADZ,CAAC,WAAW,EAAEb,MAAM,CAAC;gCAIhC;gCAEA,qBACE,KAAC5B;oCAGG,GAAGO,KAAK;oCACR,GAAGoB,GAAG;mCAHH,CAAC,WAAW,EAAEC,MAAM,CAAC;4BAOhC;4BACA,OAAO;wBACT;;;;;;AAMZ,EAAC"}

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

@@ -37,7 +37,6 @@
 
     &__tabs {
       padding: 0;
-      margin-left: var(--gutter-h);
     }
   }
 

package/dist/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAiBhC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAkBhC,CAAA"}

package/dist/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDocumentInfo } from '@payloadcms/ui';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { baseClass } from '../../Tab/index.js';
 export const VersionsPill = ()=>{
     const { versions } = useDocumentInfo();
@@ -9,14 +9,12 @@ export const VersionsPill = ()=>{
     // The pill is already conditionally rendered to begin with based on whether the document is version-enabled
     // documents that are version enabled _always_ have at least one version
     const hasVersions = versions?.totalDocs > 0;
-    return /*#__PURE__*/ _jsx("span", {
+    if (hasVersions) return /*#__PURE__*/ _jsx("span", {
         className: [
             `${baseClass}__count`,
             hasVersions ? `${baseClass}__count--has-count` : ''
         ].filter(Boolean).join(' '),
-        children: hasVersions ? versions.totalDocs.toString() : /*#__PURE__*/ _jsx(Fragment, {
-            children: " "
-        })
+        children: versions.totalDocs.toString()
     });
 };
 

package/dist/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx"],"sourcesContent":["'use client'\nimport { useDocumentInfo } from '@payloadcms/ui'\nimport React, { Fragment } from 'react'\n\nimport { baseClass } from '../../Tab/index.js'\n\nexport const VersionsPill: React.FC = () => {\n  const { versions } = useDocumentInfo()\n\n  // To prevent CLS (versions are currently loaded client-side), render non-breaking space if there are no versions\n  // The pill is already conditionally rendered to begin with based on whether the document is version-enabled\n  // documents that are version enabled _always_ have at least one version\n  const hasVersions = versions?.totalDocs > 0\n\n  return (\n    <span\n      className={[`${baseClass}__count`, hasVersions ? `${baseClass}__count--has-count` : '']\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {hasVersions ? versions.totalDocs.toString() : <Fragment>&nbsp;</Fragment>}\n    </span>\n  )\n}\n"],"names":["useDocumentInfo","React","Fragment","baseClass","VersionsPill","versions","hasVersions","totalDocs","span","className","filter","Boolean","join","toString"],"mappings":"AAAA;;AACA,SAASA,eAAe,QAAQ,iBAAgB;AAChD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAEvC,SAASC,SAAS,QAAQ,qBAAoB;AAE9C,OAAO,MAAMC,eAAyB;IACpC,MAAM,EAAEC,QAAQ,EAAE,GAAGL;IAErB,iHAAiH;IACjH,4GAA4G;IAC5G,wEAAwE;IACxE,MAAMM,cAAcD,UAAUE,YAAY;IAE1C,qBACE,KAACC;QACCC,WAAW;YAAC,CAAC,EAAEN,UAAU,OAAO,CAAC;YAAEG,cAAc,CAAC,EAAEH,UAAU,kBAAkB,CAAC,GAAG;SAAG,CACpFO,MAAM,CAACC,SACPC,IAAI,CAAC;kBAEPN,cAAcD,SAASE,SAAS,CAACM,QAAQ,mBAAK,KAACX;sBAAS;;;AAG/D,EAAC"}
+{"version":3,"sources":["../../../../../../src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx"],"sourcesContent":["'use client'\nimport { useDocumentInfo } from '@payloadcms/ui'\nimport React from 'react'\n\nimport { baseClass } from '../../Tab/index.js'\n\nexport const VersionsPill: React.FC = () => {\n  const { versions } = useDocumentInfo()\n\n  // To prevent CLS (versions are currently loaded client-side), render non-breaking space if there are no versions\n  // The pill is already conditionally rendered to begin with based on whether the document is version-enabled\n  // documents that are version enabled _always_ have at least one version\n  const hasVersions = versions?.totalDocs > 0\n\n  if (hasVersions)\n    return (\n      <span\n        className={[`${baseClass}__count`, hasVersions ? `${baseClass}__count--has-count` : '']\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {versions.totalDocs.toString()}\n      </span>\n    )\n}\n"],"names":["useDocumentInfo","React","baseClass","VersionsPill","versions","hasVersions","totalDocs","span","className","filter","Boolean","join","toString"],"mappings":"AAAA;;AACA,SAASA,eAAe,QAAQ,iBAAgB;AAChD,OAAOC,WAAW,QAAO;AAEzB,SAASC,SAAS,QAAQ,qBAAoB;AAE9C,OAAO,MAAMC,eAAyB;IACpC,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;IAErB,iHAAiH;IACjH,4GAA4G;IAC5G,wEAAwE;IACxE,MAAMK,cAAcD,UAAUE,YAAY;IAE1C,IAAID,aACF,qBACE,KAACE;QACCC,WAAW;YAAC,CAAC,EAAEN,UAAU,OAAO,CAAC;YAAEG,cAAc,CAAC,EAAEH,UAAU,kBAAkB,CAAC,GAAG;SAAG,CACpFO,MAAM,CAACC,SACPC,IAAI,CAAC;kBAEPP,SAASE,SAAS,CAACM,QAAQ;;AAGpC,EAAC"}

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

@@ -1,7 +1,9 @@
 import type { DocumentTabConfig } from 'payload';
+import type React from 'react';
 export declare const documentViewKeys: string[];
 export type DocumentViewKey = (typeof documentViewKeys)[number];
 export declare const tabs: Record<DocumentViewKey, {
+    Pill_Component?: React.FC;
     order?: number;
 } & DocumentTabConfig>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/DocumentHeader/Tabs/tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAIhD,eAAO,MAAM,gBAAgB,UAQ5B,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE/D,eAAO,MAAM,IAAI,EAAE,MAAM,CACvB,eAAe,EACf;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,iBAAiB,CA6DtB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/DocumentHeader/Tabs/tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,eAAO,MAAM,gBAAgB,UAQ5B,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE/D,eAAO,MAAM,IAAI,EAAE,MAAM,CACvB,eAAe,EACf;IACE,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GAAG,iBAAiB,CA6DtB,CAAA"}

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

@@ -1,28 +1,28 @@
 import { VersionsPill } from './VersionsPill/index.js';
 export const documentViewKeys = [
-    'API',
-    'Default',
-    'LivePreview',
-    'References',
-    'Relationships',
-    'Version',
-    'Versions'
+    'api',
+    'default',
+    'livePreview',
+    'references',
+    'relationships',
+    'version',
+    'versions'
 ];
 export const tabs = {
-    API: {
+    api: {
         condition: ({ collectionConfig, globalConfig })=>collectionConfig && !collectionConfig?.admin?.hideAPIURL || globalConfig && !globalConfig?.admin?.hideAPIURL,
         href: '/api',
         label: 'API',
         order: 1000
     },
-    Default: {
+    default: {
         href: '',
         // isActive: ({ href, location }) =>
         // location.pathname === href || location.pathname === `${href}/create`,
         label: ({ t })=>t('general:edit'),
         order: 0
     },
-    LivePreview: {
+    livePreview: {
         condition: ({ collectionConfig, config, globalConfig })=>{
             if (collectionConfig) {
                 return Boolean(config?.admin?.livePreview?.collections?.includes(collectionConfig.slug) || collectionConfig?.admin?.livePreview);
@@ -36,17 +36,17 @@ export const tabs = {
         label: ({ t })=>t('general:livePreview'),
         order: 100
     },
-    References: {
+    references: {
         condition: ()=>false
     },
-    Relationships: {
+    relationships: {
         condition: ()=>false
     },
-    Version: {
+    version: {
         condition: ()=>false
     },
-    Versions: {
-        Pill: VersionsPill,
+    versions: {
+        Pill_Component: VersionsPill,
         condition: ({ collectionConfig, globalConfig, permissions })=>Boolean(collectionConfig?.versions && permissions?.collections?.[collectionConfig?.slug]?.readVersions?.permission || globalConfig?.versions && permissions?.globals?.[globalConfig?.slug]?.readVersions?.permission),
         href: '/versions',
         label: ({ t })=>t('version:versions'),