@payloadcms/ui 3.0.0-canary.c696728 → 3.0.0-canary.c96fa61

package/dist/elements/StepNav/index.js

@@ -4,18 +4,19 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React, { Fragment } from 'react';
+import { PayloadIcon } from '../../graphics/Icon/index.js';
 import { useConfig } from '../../providers/Config/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
+import { RenderCustomComponent } from '../RenderCustomComponent/index.js';
 import { StepNavProvider, useStepNav } from './context.js';
 import './index.scss';
 export { SetStepNav } from './SetStepNav.js';
-import { PayloadIcon } from '../../graphics/Icon/index.js';
-import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 const baseClass = 'step-nav';
 const StepNav = t0 => {
-  const $ = _c(8);
+  const $ = _c(9);
   const {
     className,
+    CustomIcon,
     Link
   } = t0;
   const {
@@ -25,7 +26,6 @@ const StepNav = t0 => {
     stepNav
   } = useStepNav();
   const {
-    config,
     config: t1
   } = useConfig();
   const {
@@ -38,20 +38,25 @@ const StepNav = t0 => {
     t
   } = useTranslation();
   const LinkElement = Link || "a";
-  let t3;
-  if ($[0] !== stepNav || $[1] !== className || $[2] !== t || $[3] !== config || $[4] !== admin || $[5] !== LinkElement || $[6] !== i18n) {
-    t3 = _jsx(Fragment, {
+  const t3 = Link ? false : undefined;
+  let t4;
+  if ($[0] !== t3 || $[1] !== stepNav || $[2] !== className || $[3] !== t || $[4] !== CustomIcon || $[5] !== admin || $[6] !== LinkElement || $[7] !== i18n) {
+    const baseLinkProps = {
+      prefetch: t3
+    };
+    t4 = _jsx(Fragment, {
       children: stepNav.length > 0 ? _jsxs("nav", {
         className: [baseClass, className].filter(Boolean).join(" "),
         children: [_jsx(LinkElement, {
           className: `${baseClass}__home`,
           href: admin,
           tabIndex: 0,
+          ...baseLinkProps,
           children: _jsx("span", {
             title: t("general:dashboard"),
-            children: _jsx(RenderComponent, {
-              Component: PayloadIcon,
-              mappedComponent: config?.admin?.components?.graphics?.Icon
+            children: _jsx(RenderCustomComponent, {
+              CustomComponent: CustomIcon,
+              Fallback: _jsx(PayloadIcon, {})
             })
           })
         }), _jsx("span", {
@@ -65,6 +70,7 @@ const StepNav = t0 => {
           }, i) : _jsxs(Fragment, {
             children: [item.url ? _jsx(LinkElement, {
               href: item.url,
+              ...baseLinkProps,
               children: _jsx("span", {
                 children: StepLabel
               }, i)
@@ -82,26 +88,27 @@ const StepNav = t0 => {
           className: `${baseClass}__home`,
           children: _jsx("span", {
             title: t("general:dashboard"),
-            children: _jsx(RenderComponent, {
-              Component: PayloadIcon,
-              mappedComponent: config?.admin?.components?.graphics?.Icon
+            children: _jsx(RenderCustomComponent, {
+              CustomComponent: CustomIcon,
+              Fallback: _jsx(PayloadIcon, {})
             })
           })
         })
       })
     });
-    $[0] = stepNav;
-    $[1] = className;
-    $[2] = t;
-    $[3] = config;
-    $[4] = admin;
-    $[5] = LinkElement;
-    $[6] = i18n;
-    $[7] = t3;
+    $[0] = t3;
+    $[1] = stepNav;
+    $[2] = className;
+    $[3] = t;
+    $[4] = CustomIcon;
+    $[5] = admin;
+    $[6] = LinkElement;
+    $[7] = i18n;
+    $[8] = t4;
   } else {
-    t3 = $[7];
+    t4 = $[8];
   }
-  return t3;
+  return t4;
 };
 export { StepNav, StepNavProvider, useStepNav };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","Fragment","useConfig","useTranslation","StepNavProvider","useStepNav","SetStepNav","PayloadIcon","RenderComponent","baseClass","StepNav","t0","$","className","Link","i18n","stepNav","config","t1","routes","t2","admin","t","LinkElement","t3","_jsx","children","length","_jsxs","filter","Boolean","join","href","tabIndex","title","Component","mappedComponent","components","graphics","Icon","map","item","i","StepLabel","label","isLast","Step","url"],"sources":["../../../src/elements/StepNav/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment } from 'react'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { StepNavProvider, useStepNav } from './context.js'\nimport './index.scss'\nexport { SetStepNav } from './SetStepNav.js'\nimport type { StepNavItem } from './types.js'\n\nimport { PayloadIcon } from '../../graphics/Icon/index.js'\nimport { RenderComponent } from '../../providers/Config/RenderComponent.js'\n\nconst baseClass = 'step-nav'\n\nconst StepNav: React.FC<{\n  readonly className?: string\n  readonly Link?: React.ComponentType\n}> = ({ className, Link }) => {\n  const { i18n } = useTranslation()\n\n  const { stepNav } = useStepNav()\n\n  const {\n    config,\n    config: {\n      routes: { admin },\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const LinkElement = Link || 'a'\n\n  return (\n    <Fragment>\n      {stepNav.length > 0 ? (\n        <nav className={[baseClass, className].filter(Boolean).join(' ')}>\n          <LinkElement className={`${baseClass}__home`} href={admin} tabIndex={0}>\n            <span title={t('general:dashboard')}>\n              <RenderComponent\n                Component={PayloadIcon}\n                mappedComponent={config?.admin?.components?.graphics?.Icon}\n              />\n            </span>\n          </LinkElement>\n          <span>/</span>\n          {stepNav.map((item, i) => {\n            const StepLabel = getTranslation(item.label, i18n)\n            const isLast = stepNav.length === i + 1\n\n            const Step = isLast ? (\n              <span className={`${baseClass}__last`} key={i}>\n                {StepLabel}\n              </span>\n            ) : (\n              <Fragment key={i}>\n                {item.url ? (\n                  <LinkElement href={item.url}>\n                    <span key={i}>{StepLabel}</span>\n                  </LinkElement>\n                ) : (\n                  <span key={i}>{StepLabel}</span>\n                )}\n                <span>/</span>\n              </Fragment>\n            )\n\n            return Step\n          })}\n        </nav>\n      ) : (\n        <div className={[baseClass, className].filter(Boolean).join(' ')}>\n          <div className={`${baseClass}__home`}>\n            <span title={t('general:dashboard')}>\n              <RenderComponent\n                Component={PayloadIcon}\n                mappedComponent={config?.admin?.components?.graphics?.Icon}\n              />\n            </span>\n          </div>\n        </div>\n      )}\n    </Fragment>\n  )\n}\n\nexport { StepNav, StepNavItem, StepNavProvider, useStepNav }\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","Fragment","PayloadIcon","useConfig","useTranslation","RenderCustomComponent","StepNavProvider","useStepNav","SetStepNav","baseClass","StepNav","t0","$","className","CustomIcon","Link","i18n","stepNav","config","t1","routes","t2","admin","t","LinkElement","t3","undefined","t4","baseLinkProps","prefetch","_jsx","children","length","_jsxs","filter","Boolean","join","href","tabIndex","title","CustomComponent","Fallback","map","item","i","StepLabel","label","isLast","Step","url"],"sources":["../../../src/elements/StepNav/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment } from 'react'\n\nimport type { StepNavItem } from './types.js'\n\nimport { PayloadIcon } from '../../graphics/Icon/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { RenderCustomComponent } from '../RenderCustomComponent/index.js'\nimport { StepNavProvider, useStepNav } from './context.js'\nimport './index.scss'\n\nexport { SetStepNav } from './SetStepNav.js'\n\nconst baseClass = 'step-nav'\n\nconst StepNav: React.FC<{\n  readonly className?: string\n  readonly CustomIcon?: React.ReactNode\n  readonly Link?: React.ComponentType\n}> = ({ className, CustomIcon, Link }) => {\n  const { i18n } = useTranslation()\n\n  const { stepNav } = useStepNav()\n\n  const {\n    config: {\n      routes: { admin },\n    },\n  } = useConfig()\n\n  const { t } = useTranslation()\n\n  const LinkElement = Link || 'a'\n\n  const baseLinkProps = {\n    prefetch: Link ? false : undefined,\n  }\n\n  return (\n    <Fragment>\n      {stepNav.length > 0 ? (\n        <nav className={[baseClass, className].filter(Boolean).join(' ')}>\n          <LinkElement\n            className={`${baseClass}__home`}\n            href={admin}\n            tabIndex={0}\n            {...baseLinkProps}\n          >\n            <span title={t('general:dashboard')}>\n              <RenderCustomComponent CustomComponent={CustomIcon} Fallback={<PayloadIcon />} />\n            </span>\n          </LinkElement>\n          <span>/</span>\n          {stepNav.map((item, i) => {\n            const StepLabel = getTranslation(item.label, i18n)\n            const isLast = stepNav.length === i + 1\n\n            const Step = isLast ? (\n              <span className={`${baseClass}__last`} key={i}>\n                {StepLabel}\n              </span>\n            ) : (\n              <Fragment key={i}>\n                {item.url ? (\n                  <LinkElement href={item.url} {...baseLinkProps}>\n                    <span key={i}>{StepLabel}</span>\n                  </LinkElement>\n                ) : (\n                  <span key={i}>{StepLabel}</span>\n                )}\n                <span>/</span>\n              </Fragment>\n            )\n\n            return Step\n          })}\n        </nav>\n      ) : (\n        <div className={[baseClass, className].filter(Boolean).join(' ')}>\n          <div className={`${baseClass}__home`}>\n            <span title={t('general:dashboard')}>\n              <RenderCustomComponent CustomComponent={CustomIcon} Fallback={<PayloadIcon />} />\n            </span>\n          </div>\n        </div>\n      )}\n    </Fragment>\n  )\n}\n\nexport { StepNav, StepNavItem, StepNavProvider, useStepNav }\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/StepNav/index.scss

@@ -1,80 +1,81 @@
 @import '../../scss/styles.scss';
+@layer payload-default {
+  .step-nav {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--base) / 2);
 
-.step-nav {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--base) / 2);
-
-  &::after {
-    content: ' ';
-    position: sticky;
-    top: 0;
-    right: 0;
-    width: var(--base);
-    background: linear-gradient(to right, transparent, var(--theme-bg));
-  }
+    &::after {
+      content: ' ';
+      position: sticky;
+      top: 0;
+      right: 0;
+      width: var(--base);
+      background: linear-gradient(to right, transparent, var(--theme-bg));
+    }
 
-  // Use a pseudo element for the accessability so that it doesn't take up DOM space
-  // Also because the parent element has `overflow: hidden` which would clip an outline
-  &__home {
-    width: 18px;
-    height: 18px;
-    position: relative;
+    // Use a pseudo element for the accessability so that it doesn't take up DOM space
+    // Also because the parent element has `overflow: hidden` which would clip an outline
+    &__home {
+      width: 18px;
+      height: 18px;
+      position: relative;
 
-    &:focus-visible {
-      outline: none;
+      &:focus-visible {
+        outline: none;
 
-      &::after {
-        content: '';
-        border: var(--accessibility-outline);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        pointer-events: none;
+        &::after {
+          content: '';
+          border: var(--accessibility-outline);
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          pointer-events: none;
+        }
       }
     }
-  }
 
-  * {
-    display: block;
-  }
+    * {
+      display: block;
+    }
 
-  a {
-    border: 0;
-    display: flex;
-    align-items: center;
-    font-weight: 600;
-    text-decoration: none;
+    a {
+      border: 0;
+      display: flex;
+      align-items: center;
+      font-weight: 600;
+      text-decoration: none;
 
-    label {
-      cursor: pointer;
-    }
+      label {
+        cursor: pointer;
+      }
 
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
     }
-  }
 
-  span {
-    max-width: base(8);
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
+    span {
+      max-width: base(8);
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
 
-  @include mid-break {
-    .step-nav {
-      &__home {
-        width: 16px;
-        height: 16px;
+    @include mid-break {
+      .step-nav {
+        &__home {
+          width: 16px;
+          height: 16px;
+        }
       }
     }
-  }
 
-  @include small-break {
-    gap: base(0.4);
+    @include small-break {
+      gap: base(0.4);
+    }
   }
 }

package/dist/elements/Table/DefaultCell/fields/Checkbox/index.scss

@@ -1,22 +1,24 @@
 @import '../../../../../scss/styles.scss';
 
-.bool-cell {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  display: inline-flex;
-  vertical-align: middle;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-s;
-  padding: 0 base(0.25);
-  [dir='ltr'] & {
-    padding-left: base(0.0875 + 0.25);
-  }
-  [dir='rtl'] & {
-    padding-right: base(0.0875 + 0.25);
-  }
+@layer payload-default {
+  .bool-cell {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-s;
+    padding: 0 base(0.25);
+    [dir='ltr'] & {
+      padding-left: base(0.0875 + 0.25);
+    }
+    [dir='rtl'] & {
+      padding-right: base(0.0875 + 0.25);
+    }
 
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
+  }
 }

package/dist/elements/Table/DefaultCell/fields/Code/index.scss

@@ -1,27 +1,29 @@
 @import '../../../../../scss/styles.scss';
 
-.code-cell {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  display: inline-flex;
-  vertical-align: middle;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-m;
-  padding: 0 base(0.25);
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
+@layer payload-default {
+  .code-cell {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-m;
+    padding: 0 base(0.25);
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
 
-  [dir='ltr'] & {
-    padding-left: base(0.0875 + 0.25);
-  }
+    [dir='ltr'] & {
+      padding-left: base(0.0875 + 0.25);
+    }
 
-  [dir='rtl'] & {
-    padding-right: base(0.0875 + 0.25);
-  }
+    [dir='rtl'] & {
+      padding-right: base(0.0875 + 0.25);
+    }
 
-  &:hover {
-    text-decoration: inherit;
+    &:hover {
+      text-decoration: inherit;
+    }
   }
 }

package/dist/elements/Table/DefaultCell/fields/File/index.d.ts

@@ -1,7 +1,7 @@
-import type { DefaultCellComponentProps, UploadFieldClient } from 'payload';
+import type { DefaultCellComponentProps, TextFieldClient, UploadFieldClient } from 'payload';
 import React from 'react';
 import './index.scss';
-export interface FileCellProps extends DefaultCellComponentProps<any, UploadFieldClient> {
+export interface FileCellProps extends DefaultCellComponentProps<any, TextFieldClient | UploadFieldClient> {
 }
 export declare const FileCell: React.FC<FileCellProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Table/DefaultCell/fields/File/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAE3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAIrB,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,GAAG,EAAE,iBAAiB,CAAC;CAAG;AAE3F,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuB5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAE5F,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAIrB,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,GAAG,EAAE,eAAe,GAAG,iBAAiB,CAAC;CAAG;AAEhF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqB5C,CAAA"}

package/dist/elements/Table/DefaultCell/fields/File/index.js

@@ -7,25 +7,21 @@ import './index.scss';
 const baseClass = 'file';
 export const FileCell = ({
   cellData: filename,
-  customCellContext,
+  collectionConfig,
   rowData
 }) => {
-  const {
-    collectionSlug,
-    uploadConfig
-  } = customCellContext;
   return /*#__PURE__*/_jsxs("div", {
     className: baseClass,
     children: [/*#__PURE__*/_jsx(Thumbnail, {
       className: `${baseClass}__thumbnail`,
-      collectionSlug: collectionSlug,
+      collectionSlug: collectionConfig?.slug,
       doc: {
         ...rowData,
         filename
       },
       fileSrc: rowData?.thumbnailURL || rowData?.url,
       size: "small",
-      uploadConfig: uploadConfig
+      uploadConfig: collectionConfig?.upload
     }), /*#__PURE__*/_jsx("span", {
       className: `${baseClass}__filename`,
       children: String(filename)

package/dist/elements/Table/DefaultCell/fields/File/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Thumbnail","baseClass","FileCell","cellData","filename","customCellContext","rowData","collectionSlug","uploadConfig","_jsxs","className","_jsx","doc","fileSrc","thumbnailURL","url","size","String"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, UploadFieldClient } from 'payload'\n\nimport React from 'react'\n\nimport { Thumbnail } from '../../../../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file'\n\nexport interface FileCellProps extends DefaultCellComponentProps<any, UploadFieldClient> {}\n\nexport const FileCell: React.FC<FileCellProps> = ({\n  cellData: filename,\n  customCellContext,\n  rowData,\n}) => {\n  const { collectionSlug, uploadConfig } = customCellContext\n\n  return (\n    <div className={baseClass}>\n      <Thumbnail\n        className={`${baseClass}__thumbnail`}\n        collectionSlug={collectionSlug}\n        doc={{\n          ...rowData,\n          filename,\n        }}\n        fileSrc={rowData?.thumbnailURL || rowData?.url}\n        size=\"small\"\n        uploadConfig={uploadConfig}\n      />\n      <span className={`${baseClass}__filename`}>{String(filename)}</span>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAIlB,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAChDC,QAAA,EAAUC,QAAQ;EAClBC,iBAAiB;EACjBC;AAAO,CACR;EACC,MAAM;IAAEC,cAAc;IAAEC;EAAY,CAAE,GAAGH,iBAAA;EAEzC,oBACEI,KAAA,CAAC;IAAIC,SAAA,EAAWT,SAAA;4BACdU,IAAA,CAACX,SAAA;MACCU,SAAA,EAAW,GAAGT,SAAA,aAAsB;MACpCM,cAAA,EAAgBA,cAAA;MAChBK,GAAA,EAAK;QACH,GAAGN,OAAO;QACVF;MACF;MACAS,OAAA,EAASP,OAAA,EAASQ,YAAA,IAAgBR,OAAA,EAASS,GAAA;MAC3CC,IAAA,EAAK;MACLR,YAAA,EAAcA;qBAEhBG,IAAA,CAAC;MAAKD,SAAA,EAAW,GAAGT,SAAA,YAAqB;gBAAGgB,MAAA,CAAOb,QAAA;;;AAGzD","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","Thumbnail","baseClass","FileCell","cellData","filename","collectionConfig","rowData","_jsxs","className","_jsx","collectionSlug","slug","doc","fileSrc","thumbnailURL","url","size","uploadConfig","upload","String"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"sourcesContent":["'use client'\nimport type { DefaultCellComponentProps, TextFieldClient, UploadFieldClient } from 'payload'\n\nimport React from 'react'\n\nimport { Thumbnail } from '../../../../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file'\n\nexport interface FileCellProps\n  extends DefaultCellComponentProps<any, TextFieldClient | UploadFieldClient> {}\n\nexport const FileCell: React.FC<FileCellProps> = ({\n  cellData: filename,\n  collectionConfig,\n  rowData,\n}) => {\n  return (\n    <div className={baseClass}>\n      <Thumbnail\n        className={`${baseClass}__thumbnail`}\n        collectionSlug={collectionConfig?.slug}\n        doc={{\n          ...rowData,\n          filename,\n        }}\n        fileSrc={rowData?.thumbnailURL || rowData?.url}\n        size=\"small\"\n        uploadConfig={collectionConfig?.upload}\n      />\n      <span className={`${baseClass}__filename`}>{String(filename)}</span>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAKlB,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAChDC,QAAA,EAAUC,QAAQ;EAClBC,gBAAgB;EAChBC;AAAO,CACR;EACC,oBACEC,KAAA,CAAC;IAAIC,SAAA,EAAWP,SAAA;4BACdQ,IAAA,CAACT,SAAA;MACCQ,SAAA,EAAW,GAAGP,SAAA,aAAsB;MACpCS,cAAA,EAAgBL,gBAAA,EAAkBM,IAAA;MAClCC,GAAA,EAAK;QACH,GAAGN,OAAO;QACVF;MACF;MACAS,OAAA,EAASP,OAAA,EAASQ,YAAA,IAAgBR,OAAA,EAASS,GAAA;MAC3CC,IAAA,EAAK;MACLC,YAAA,EAAcZ,gBAAA,EAAkBa;qBAElCT,IAAA,CAAC;MAAKD,SAAA,EAAW,GAAGP,SAAA,YAAqB;gBAAGkB,MAAA,CAAOf,QAAA;;;AAGzD","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/File/index.scss

@@ -1,23 +1,25 @@
 @import '../../../../../scss/styles.scss';
 
-.file {
-  display: flex;
-  flex-wrap: nowrap;
+@layer payload-default {
+  .file {
+    display: flex;
+    flex-wrap: nowrap;
 
-  &__thumbnail {
-    display: inline-block;
-    max-width: calc(var(--base) * 2);
-    height: calc(var(--base) * 2);
-    border-radius: var(--style-radius-s);
-  }
-
-  &__filename {
-    align-self: center;
-    [dir='ltr'] & {
-      margin-left: var(--base);
+    &__thumbnail {
+      display: inline-block;
+      max-width: calc(var(--base) * 2);
+      height: calc(var(--base) * 2);
+      border-radius: var(--style-radius-s);
     }
-    [dir='rtl'] & {
-      margin-right: var(--base);
+
+    &__filename {
+      align-self: center;
+      [dir='ltr'] & {
+        margin-left: var(--base);
+      }
+      [dir='rtl'] & {
+        margin-right: var(--base);
+      }
     }
   }
 }

package/dist/elements/Table/DefaultCell/fields/JSON/index.scss

@@ -1,22 +1,24 @@
 @import '../../../../../scss/styles.scss';
 
-.json-cell {
-  font-size: 1rem;
-  line-height: base(1);
-  border: 0;
-  display: inline-flex;
-  vertical-align: middle;
-  background: var(--theme-elevation-150);
-  color: var(--theme-elevation-800);
-  border-radius: $style-radius-m;
-  padding: 0 base(0.25);
-  [dir='ltr'] & {
-    padding-left: base(0.0875 + 0.25);
-  }
-  [dir='rtl'] & {
-    padding-right: base(0.0875 + 0.25);
-  }
+@layer payload-default {
+  .json-cell {
+    font-size: 1rem;
+    line-height: base(1);
+    border: 0;
+    display: inline-flex;
+    vertical-align: middle;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-m;
+    padding: 0 base(0.25);
+    [dir='ltr'] & {
+      padding-left: base(0.0875 + 0.25);
+    }
+    [dir='rtl'] & {
+      padding-right: base(0.0875 + 0.25);
+    }
 
-  background: var(--theme-elevation-100);
-  color: var(--theme-elevation-800);
+    background: var(--theme-elevation-100);
+    color: var(--theme-elevation-800);
+  }
 }

package/dist/elements/Table/DefaultCell/fields/Relationship/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Relationship/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,yBAAyB,EACzB,eAAe,EACf,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAuC,MAAM,OAAO,CAAA;AAS3D,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAC3D,GAAG,EACH,eAAe,GAAG,uBAAuB,GAAG,iBAAiB,CAC9D,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiH5D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Relationship/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,yBAAyB,EACzB,eAAe,EACf,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAuC,MAAM,OAAO,CAAA;AAS3D,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAC3D,GAAG,EACH,eAAe,GAAG,uBAAuB,GAAG,iBAAiB,CAC9D,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoH5D,CAAA"}

package/dist/elements/Table/DefaultCell/fields/Relationship/index.js

@@ -18,7 +18,7 @@ export const RelationshipCell = t0 => {
   const $ = _c(40);
   const {
     cellData: cellDataFromProps,
-    customCellContext,
+    customCellProps: customCellContext,
     field,
     field: t1
   } = t0;
@@ -30,7 +30,8 @@ export const RelationshipCell = t0 => {
   t2 = "collection" in field ? cellDataFromProps?.docs : cellDataFromProps;
   const cellData = t2;
   const {
-    config
+    config,
+    getEntityConfig
   } = useConfig();
   const {
     collections,
@@ -123,20 +124,17 @@ export const RelationshipCell = t0 => {
   }
   useEffect(t6, t7);
   let t8;
-  if ($[19] !== documents || $[20] !== collections || $[21] !== config.admin.dateFormat || $[22] !== t || $[23] !== i18n || $[24] !== field || $[25] !== customCellContext || $[26] !== values || $[27] !== cellData || $[28] !== label || $[29] !== intersectionRef) {
+  if ($[19] !== documents || $[20] !== getEntityConfig || $[21] !== config.admin.dateFormat || $[22] !== t || $[23] !== i18n || $[24] !== field || $[25] !== customCellContext || $[26] !== values || $[27] !== cellData || $[28] !== label || $[29] !== intersectionRef) {
     let t9;
-    if ($[31] !== documents || $[32] !== collections || $[33] !== config.admin.dateFormat || $[34] !== t || $[35] !== i18n || $[36] !== field || $[37] !== customCellContext || $[38] !== values.length) {
+    if ($[31] !== documents || $[32] !== getEntityConfig || $[33] !== config.admin.dateFormat || $[34] !== t || $[35] !== i18n || $[36] !== field || $[37] !== customCellContext || $[38] !== values.length) {
       t9 = (t10, i) => {
         const {
           relationTo: relationTo_0,
           value
         } = t10;
         const document = documents[relationTo_0][value];
-        const relatedCollection = collections.find(t11 => {
-          const {
-            slug
-          } = t11;
-          return slug === relationTo_0;
+        const relatedCollection = getEntityConfig({
+          collectionSlug: relationTo_0
         });
         const label_0 = formatDocTitle({
           collectionConfig: relatedCollection,
@@ -151,8 +149,9 @@ export const RelationshipCell = t0 => {
           const previewAllowed = field.displayPreview || relatedCollectionPreview && field.displayPreview !== false;
           if (previewAllowed && document) {
             fileField = _jsx(FileCell, {
+              collectionConfig: relatedCollection,
               cellData: label_0,
-              customCellContext,
+              customCellProps: customCellContext,
               field,
               rowData: document
             });
@@ -163,7 +162,7 @@ export const RelationshipCell = t0 => {
         }, i);
       };
       $[31] = documents;
-      $[32] = collections;
+      $[32] = getEntityConfig;
       $[33] = config.admin.dateFormat;
       $[34] = t;
       $[35] = i18n;
@@ -185,7 +184,7 @@ export const RelationshipCell = t0 => {
       })]
     });
     $[19] = documents;
-    $[20] = collections;
+    $[20] = getEntityConfig;
     $[21] = config.admin.dateFormat;
     $[22] = t;
     $[23] = i18n;