@payloadcms/ui 4.0.0-internal.5f0cd13 → 4.0.0-internal.688c4d0

package/dist/elements/RenderTitle/index.js

@@ -2,67 +2,92 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { formatAdminURL } from 'payload/shared';
 import React, { Fragment } from 'react';
+import { Link } from '../../elements/Link/index.js';
+import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { useDocumentTitle } from '../../providers/DocumentTitle/index.js';
 import { IDLabel } from '../IDLabel/index.js';
 import './index.css';
 const baseClass = 'render-title';
 export const RenderTitle = props => {
-  const $ = _c(10);
+  const $ = _c(14);
   const {
     className,
     element: t0,
     fallback,
+    renderAsLink,
     title: titleFromProps
   } = props;
   const element = t0 === undefined ? "h1" : t0;
   const {
     id,
+    collectionSlug,
+    globalSlug,
     isInitializing
   } = useDocumentInfo();
   const {
     title: titleFromContext
   } = useDocumentTitle();
+  const {
+    config: t1
+  } = useConfig();
+  const {
+    routes: t2
+  } = t1;
+  const {
+    admin: adminRoute
+  } = t2;
   const title = titleFromProps || titleFromContext || fallback;
   const idAsTitle = title === id;
   const Tag = element;
-  let t1;
-  if ($[0] !== Tag || $[1] !== className || $[2] !== id || $[3] !== idAsTitle || $[4] !== isInitializing || $[5] !== title) {
+  let t3;
+  if ($[0] !== Tag || $[1] !== adminRoute || $[2] !== className || $[3] !== collectionSlug || $[4] !== globalSlug || $[5] !== id || $[6] !== idAsTitle || $[7] !== isInitializing || $[8] !== renderAsLink || $[9] !== title) {
     const EmptySpace = _jsx(Fragment, {
       children: "\xA0"
     });
-    const t2 = idAsTitle && `${baseClass}--has-id`;
-    let t3;
-    if ($[7] !== className || $[8] !== t2) {
-      t3 = [className, baseClass, t2].filter(Boolean);
-      $[7] = className;
-      $[8] = t2;
-      $[9] = t3;
+    const docPath = renderAsLink && id && (collectionSlug || globalSlug) ? formatAdminURL({
+      adminRoute,
+      path: `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`
+    }) : null;
+    const t4 = idAsTitle && `${baseClass}--has-id`;
+    let t5;
+    if ($[11] !== className || $[12] !== t4) {
+      t5 = [className, baseClass, t4].filter(Boolean);
+      $[11] = className;
+      $[12] = t4;
+      $[13] = t5;
     } else {
-      t3 = $[9];
+      t5 = $[13];
     }
-    t1 = _jsx(Tag, {
-      className: t3.join(" "),
+    t3 = _jsx(Tag, {
+      className: t5.join(" "),
       "data-doc-id": id,
       title,
-      children: isInitializing ? EmptySpace : _jsx(Fragment, {
-        children: idAsTitle ? _jsx(IDLabel, {
-          className: `${baseClass}__id`,
-          id
-        }) : title || EmptySpace
-      })
+      children: isInitializing ? EmptySpace : idAsTitle ? _jsx(IDLabel, {
+        className: `${baseClass}__id`,
+        id
+      }) : docPath ? _jsx(Link, {
+        className: `${baseClass}__link`,
+        href: docPath,
+        children: title || EmptySpace
+      }) : title || EmptySpace
     });
     $[0] = Tag;
-    $[1] = className;
-    $[2] = id;
-    $[3] = idAsTitle;
-    $[4] = isInitializing;
-    $[5] = title;
-    $[6] = t1;
+    $[1] = adminRoute;
+    $[2] = className;
+    $[3] = collectionSlug;
+    $[4] = globalSlug;
+    $[5] = id;
+    $[6] = idAsTitle;
+    $[7] = isInitializing;
+    $[8] = renderAsLink;
+    $[9] = title;
+    $[10] = t3;
   } else {
-    t1 = $[6];
+    t3 = $[10];
   }
-  return t1;
+  return t3;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Fragment","useDocumentInfo","useDocumentTitle","IDLabel","baseClass","RenderTitle","props","$","className","element","t0","fallback","title","titleFromProps","undefined","id","isInitializing","titleFromContext","idAsTitle","Tag","t1","EmptySpace","_jsx","children","t2","t3","filter","Boolean","join"],"sources":["../../../src/elements/RenderTitle/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment } from 'react'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useDocumentTitle } from '../../providers/DocumentTitle/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport './index.css'\n\nconst baseClass = 'render-title'\n\nexport type RenderTitleProps = {\n  className?: string\n  element?: React.ElementType\n  fallback?: string\n  fallbackToID?: boolean\n  title?: string\n}\n\nexport const RenderTitle: React.FC<RenderTitleProps> = (props) => {\n  const { className, element = 'h1', fallback, title: titleFromProps } = props\n\n  const { id, isInitializing } = useDocumentInfo()\n  const { title: titleFromContext } = useDocumentTitle()\n\n  const title = titleFromProps || titleFromContext || fallback\n\n  const idAsTitle = title === id\n\n  const Tag = element\n\n  // Render and invisible character to prevent layout shift when the title populates from context\n  const EmptySpace = <Fragment>&nbsp;</Fragment>\n\n  return (\n    <Tag\n      className={[className, baseClass, idAsTitle && `${baseClass}--has-id`]\n        .filter(Boolean)\n        .join(' ')}\n      data-doc-id={id}\n      title={title}\n    >\n      {isInitializing ? (\n        EmptySpace\n      ) : (\n        <Fragment>\n          {idAsTitle ? <IDLabel className={`${baseClass}__id`} id={id} /> : title || EmptySpace}\n        </Fragment>\n      )}\n    </Tag>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,eAAe,QAAQ;AAChC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAUlB,OAAO,MAAMC,WAAA,GAA0CC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EACrD;IAAAU,SAAA;IAAAC,OAAA,EAAAC,EAAA;IAAAC,QAAA;IAAAC,KAAA,EAAAC;EAAA,IAAuEP,KAAA;EAApD,MAAAG,OAAA,GAAAC,EAAc,KAAAI,SAAA,GAAJ,IAAI,GAAdJ,EAAc;EAEjC;IAAAK,EAAA;IAAAC;EAAA,IAA+Bf,eAAA;EAC/B;IAAAW,KAAA,EAAAK;EAAA,IAAoCf,gBAAA;EAEpC,MAAAU,KAAA,GAAcC,cAAA,IAAkBI,gBAAA,IAAoBN,QAAA;EAEpD,MAAAO,SAAA,GAAkBN,KAAA,KAAUG,EAAA;EAE5B,MAAAI,GAAA,GAAYV,OAAA;EAAA,IAAAW,EAAA;EAAA,IAAAb,CAAA,QAAAY,GAAA,IAAAZ,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAQ,EAAA,IAAAR,CAAA,QAAAW,SAAA,IAAAX,CAAA,QAAAS,cAAA,IAAAT,CAAA,QAAAK,KAAA;IAGZ,MAAAS,UAAA,GAAmBC,IAAA,CAAAtB,QAAA;MAAAuB,QAAA,EAAU;IAAA,C;IAIS,MAAAC,EAAA,GAAAN,SAAA,IAAa,GAAAd,SAAA,UAAsB;IAAA,IAAAqB,EAAA;IAAA,IAAAlB,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAiB,EAAA;MAA1DC,EAAA,IAACjB,SAAA,EAAAJ,SAAA,EAAsBoB,EAAmC,EAAAE,MAAA,CAAAC,OAC3D;MAAApB,CAAA,MAAAC,SAAA;MAAAD,CAAA,MAAAiB,EAAA;MAAAjB,CAAA,MAAAkB,EAAA;IAAA;MAAAA,EAAA,GAAAlB,CAAA;IAAA;IAFZa,EAAA,GAAAE,IAAA,CAACH,GAAA;MAAAX,SAAA,EACYiB,EACD,CAAAG,IAAA,CACF;MAAA,eACKb,EAAA;MAAAH,KAAA;MAAAW,QAAA,EAGZP,cAAA,GACCK,UAAA,GAEAC,IAAA,CAAAtB,QAAA;QAAAuB,QAAA,EACGL,SAAA,GAAYI,IAAA,CAAAnB,OAAA;UAAAK,SAAA,EAAoB,GAAAJ,SAAA,MAAkB;UAAAW;QAAA,C,IAAeH,KAAA,IAASS;MAAA,C;;;;;;;;;;;;SAXjFD,E;CAgBJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","formatAdminURL","React","Fragment","Link","useConfig","useDocumentInfo","useDocumentTitle","IDLabel","baseClass","RenderTitle","props","$","className","element","t0","fallback","renderAsLink","title","titleFromProps","undefined","id","collectionSlug","globalSlug","isInitializing","titleFromContext","config","t1","routes","t2","admin","adminRoute","idAsTitle","Tag","t3","EmptySpace","_jsx","children","docPath","path","t4","t5","filter","Boolean","join","href"],"sources":["../../../src/elements/RenderTitle/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { Fragment } from 'react'\n\nimport { Link } from '../../elements/Link/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useDocumentTitle } from '../../providers/DocumentTitle/index.js'\nimport { IDLabel } from '../IDLabel/index.js'\nimport './index.css'\n\nconst baseClass = 'render-title'\n\nexport type RenderTitleProps = {\n  className?: string\n  element?: React.ElementType\n  fallback?: string\n  fallbackToID?: boolean\n  /**\n   * When true, renders the title as a link to the document. Useful inside drawers\n   * to navigate to the full document view.\n   */\n  renderAsLink?: boolean\n  title?: string\n}\n\nexport const RenderTitle: React.FC<RenderTitleProps> = (props) => {\n  const { className, element = 'h1', fallback, renderAsLink, title: titleFromProps } = props\n\n  const { id, collectionSlug, globalSlug, isInitializing } = useDocumentInfo()\n  const { title: titleFromContext } = useDocumentTitle()\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n  } = useConfig()\n\n  const title = titleFromProps || titleFromContext || fallback\n\n  const idAsTitle = title === id\n\n  const Tag = element\n\n  // Render and invisible character to prevent layout shift when the title populates from context\n  const EmptySpace = <Fragment>&nbsp;</Fragment>\n\n  const docPath =\n    renderAsLink && id && (collectionSlug || globalSlug)\n      ? formatAdminURL({\n          adminRoute,\n          path: `/${collectionSlug ? `collections/${collectionSlug}` : `globals/${globalSlug}`}/${id}`,\n        })\n      : null\n\n  return (\n    <Tag\n      className={[className, baseClass, idAsTitle && `${baseClass}--has-id`]\n        .filter(Boolean)\n        .join(' ')}\n      data-doc-id={id}\n      title={title}\n    >\n      {isInitializing ? (\n        EmptySpace\n      ) : idAsTitle ? (\n        <IDLabel className={`${baseClass}__id`} id={id} />\n      ) : docPath ? (\n        <Link className={`${baseClass}__link`} href={docPath}>\n          {title || EmptySpace}\n        </Link>\n      ) : (\n        title || EmptySpace\n      )}\n    </Tag>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,IAAI,QAAQ;AACrB,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,gBAAgB,QAAQ;AACjC,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAelB,OAAO,MAAMC,WAAA,GAA0CC,KAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EACrD;IAAAa,SAAA;IAAAC,OAAA,EAAAC,EAAA;IAAAC,QAAA;IAAAC,YAAA;IAAAC,KAAA,EAAAC;EAAA,IAAqFR,KAAA;EAAlE,MAAAG,OAAA,GAAAC,EAAc,KAAAK,SAAA,GAAJ,IAAI,GAAdL,EAAc;EAEjC;IAAAM,EAAA;IAAAC,cAAA;IAAAC,UAAA;IAAAC;EAAA,IAA2DlB,eAAA;EAC3D;IAAAY,KAAA,EAAAO;EAAA,IAAoClB,gBAAA;EACpC;IAAAmB,MAAA,EAAAC;EAAA,IAIItB,SAAA;EAHM;IAAAuB,MAAA,EAAAC;EAAA,IAAAF,EAEP;EADS;IAAAG,KAAA,EAAAC;EAAA,IAAAF,EAAqB;EAIjC,MAAAX,KAAA,GAAcC,cAAA,IAAkBM,gBAAA,IAAoBT,QAAA;EAEpD,MAAAgB,SAAA,GAAkBd,KAAA,KAAUG,EAAA;EAE5B,MAAAY,GAAA,GAAYnB,OAAA;EAAA,IAAAoB,EAAA;EAAA,IAAAtB,CAAA,QAAAqB,GAAA,IAAArB,CAAA,QAAAmB,UAAA,IAAAnB,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAU,cAAA,IAAAV,CAAA,QAAAW,UAAA,IAAAX,CAAA,QAAAS,EAAA,IAAAT,CAAA,QAAAoB,SAAA,IAAApB,CAAA,QAAAY,cAAA,IAAAZ,CAAA,QAAAK,YAAA,IAAAL,CAAA,QAAAM,KAAA;IAGZ,MAAAiB,UAAA,GAAmBC,IAAA,CAAAjC,QAAA;MAAAkC,QAAA,EAAU;IAAA,C;IAE7B,MAAAC,OAAA,GACErB,YAAA,IAAgBI,EAAA,KAAOC,cAAA,IAAkBC,UAAS,IAC9CtB,cAAA;MAAA8B,UAAA;MAAAQ,IAAA,EAEQ,IAAIjB,cAAA,GAAiB,eAAeA,cAAA,EAAgB,GAAG,WAAWC,UAAA,EAAY,IAAIF,EAAA;IAAI,CAC9F,QACA;IAIgC,MAAAmB,EAAA,GAAAR,SAAA,IAAa,GAAAvB,SAAA,UAAsB;IAAA,IAAAgC,EAAA;IAAA,IAAA7B,CAAA,SAAAC,SAAA,IAAAD,CAAA,SAAA4B,EAAA;MAA1DC,EAAA,IAAC5B,SAAA,EAAAJ,SAAA,EAAsB+B,EAAmC,EAAAE,MAAA,CAAAC,OAC3D;MAAA/B,CAAA,OAAAC,SAAA;MAAAD,CAAA,OAAA4B,EAAA;MAAA5B,CAAA,OAAA6B,EAAA;IAAA;MAAAA,EAAA,GAAA7B,CAAA;IAAA;IAFZsB,EAAA,GAAAE,IAAA,CAACH,GAAA;MAAApB,SAAA,EACY4B,EACD,CAAAG,IAAA,CACF;MAAA,eACKvB,EAAA;MAAAH,KAAA;MAAAmB,QAAA,EAGZb,cAAA,GACCW,UAAA,GACEH,SAAA,GACFI,IAAA,CAAA5B,OAAA;QAAAK,SAAA,EAAoB,GAAAJ,SAAA,MAAkB;QAAAY;MAAA,C,IACpCiB,OAAA,GACFF,IAAA,CAAAhC,IAAA;QAAAS,SAAA,EAAiB,GAAAJ,SAAA,QAAoB;QAAAoC,IAAA,EAAQP,OAAA;QAAAD,QAAA,EAC1CnB,KAAA,IAASiB;MAAA,C,IAGZjB,KAAA,IAASiB;IAAA,C;;;;;;;;;;;;;;;SAhBbD,E;CAoBJ","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SchedulePublishButton/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAWhD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAsElE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SchedulePublishButton/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAWhD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CA8ElE,CAAA"}

package/dist/elements/SchedulePublishButton/index.js

@@ -20,6 +20,8 @@ export const SchedulePublishButton = ({
     collectionSlug,
     globalSlug,
     hasPublishPermission,
+    hasScheduledPublish,
+    setHasScheduledPublish,
     unpublishedVersionCount
   } = useDocumentInfo();
   const {
@@ -65,7 +67,9 @@ export const SchedulePublishButton = ({
       children: [/*#__PURE__*/_jsx(Button, {
         buttonStyle: "ghost",
         disabled: disabled,
-        icon: /*#__PURE__*/_jsx(ScheduleIcon, {}),
+        icon: /*#__PURE__*/_jsx(ScheduleIcon, {
+          active: hasScheduledPublish
+        }),
         id: "schedule-publish-button",
         onClick: () => toggleModal(drawerSlug)
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -75,6 +79,7 @@ export const SchedulePublishButton = ({
       })]
     }), isModalOpen(drawerSlug) && /*#__PURE__*/_jsx(ScheduleDrawer, {
       defaultType: !hasNewerVersions ? 'unpublish' : 'publish',
+      onUpcomingChange: setHasScheduledPublish,
       schedulePublishConfig: scheduledPublishEnabled && typeof entityConfig.versions.drafts.schedulePublish === 'object' ? entityConfig.versions.drafts.schedulePublish : undefined,
       slug: drawerSlug
     })]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","hasAutosaveEnabled","hasScheduledPublishEnabled","React","useMemo","useState","useFormModified","ScheduleIcon","useConfig","useDocumentInfo","useTranslation","Button","ScheduleDrawer","Tooltip","SchedulePublishButton","disabled","id","collectionSlug","globalSlug","hasPublishPermission","unpublishedVersionCount","getEntityConfig","isModalOpen","toggleModal","t","modified","hovered","setHovered","entityConfig","scheduledPublishEnabled","hasAutosave","canSchedulePublish","Boolean","drawerSlug","hasNewerVersions","label","_jsxs","Fragment","onPointerEnter","onPointerLeave","style","position","_jsx","buttonStyle","icon","onClick","delay","show","defaultType","schedulePublishConfig","versions","drafts","schedulePublish","undefined","slug"],"sources":["../../../src/elements/SchedulePublishButton/index.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { hasAutosaveEnabled, hasScheduledPublishEnabled } from 'payload/shared'\nimport React, { useMemo, useState } from 'react'\n\nimport { useFormModified } from '../../forms/Form/context.js'\nimport { ScheduleIcon } from '../../icons/Schedule/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { ScheduleDrawer } from '../PublishButton/ScheduleDrawer/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\n\nexport const SchedulePublishButton: React.FC<{ disabled?: boolean }> = ({ disabled }) => {\n  const { id, collectionSlug, globalSlug, hasPublishPermission, unpublishedVersionCount } =\n    useDocumentInfo()\n\n  const { getEntityConfig } = useConfig()\n  const { isModalOpen, toggleModal } = useModal()\n  const { t } = useTranslation()\n  const modified = useFormModified()\n  const [hovered, setHovered] = useState(false)\n\n  const entityConfig = useMemo(() => {\n    if (collectionSlug) {\n      return getEntityConfig({ collectionSlug })\n    }\n    if (globalSlug) {\n      return getEntityConfig({ globalSlug })\n    }\n  }, [collectionSlug, globalSlug, getEntityConfig])\n\n  const scheduledPublishEnabled = hasScheduledPublishEnabled(entityConfig)\n  const hasAutosave = hasAutosaveEnabled(entityConfig)\n\n  const canSchedulePublish = Boolean(\n    scheduledPublishEnabled &&\n      hasPublishPermission &&\n      (globalSlug || (collectionSlug && id)) &&\n      (hasAutosave || !modified),\n  )\n\n  const drawerSlug = `schedule-publish-${id}`\n  const hasNewerVersions = unpublishedVersionCount > 0\n\n  if (!canSchedulePublish) {\n    return null\n  }\n\n  const label = t('version:schedulePublish')\n\n  return (\n    <React.Fragment>\n      <span\n        onPointerEnter={() => setHovered(true)}\n        onPointerLeave={() => setHovered(false)}\n        style={{ position: 'relative' }}\n      >\n        <Button\n          buttonStyle=\"ghost\"\n          disabled={disabled}\n          icon={<ScheduleIcon />}\n          id=\"schedule-publish-button\"\n          onClick={() => toggleModal(drawerSlug)}\n        />\n        <Tooltip delay={0} show={hovered}>\n          {label}\n        </Tooltip>\n      </span>\n      {isModalOpen(drawerSlug) && (\n        <ScheduleDrawer\n          defaultType={!hasNewerVersions ? 'unpublish' : 'publish'}\n          schedulePublishConfig={\n            scheduledPublishEnabled &&\n            typeof entityConfig.versions.drafts.schedulePublish === 'object'\n              ? entityConfig.versions.drafts.schedulePublish\n              : undefined\n          }\n          slug={drawerSlug}\n        />\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,SAASA,QAAQ,QAAQ;AACzB,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ;AAC/D,OAAOC,KAAA,IAASC,OAAO,EAAEC,QAAQ,QAAQ;AAEzC,SAASC,eAAe,QAAQ;AAChC,SAASC,YAAY,QAAQ;AAC7B,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AAExB,OAAO,MAAMC,qBAAA,GAA0DA,CAAC;EAAEC;AAAQ,CAAE;EAClF,MAAM;IAAEC,EAAE;IAAEC,cAAc;IAAEC,UAAU;IAAEC,oBAAoB;IAAEC;EAAuB,CAAE,GACrFX,eAAA;EAEF,MAAM;IAAEY;EAAe,CAAE,GAAGb,SAAA;EAC5B,MAAM;IAAEc,WAAW;IAAEC;EAAW,CAAE,GAAGvB,QAAA;EACrC,MAAM;IAAEwB;EAAC,CAAE,GAAGd,cAAA;EACd,MAAMe,QAAA,GAAWnB,eAAA;EACjB,MAAM,CAACoB,OAAA,EAASC,UAAA,CAAW,GAAGtB,QAAA,CAAS;EAEvC,MAAMuB,YAAA,GAAexB,OAAA,CAAQ;IAC3B,IAAIa,cAAA,EAAgB;MAClB,OAAOI,eAAA,CAAgB;QAAEJ;MAAe;IAC1C;IACA,IAAIC,UAAA,EAAY;MACd,OAAOG,eAAA,CAAgB;QAAEH;MAAW;IACtC;EACF,GAAG,CAACD,cAAA,EAAgBC,UAAA,EAAYG,eAAA,CAAgB;EAEhD,MAAMQ,uBAAA,GAA0B3B,0BAAA,CAA2B0B,YAAA;EAC3D,MAAME,WAAA,GAAc7B,kBAAA,CAAmB2B,YAAA;EAEvC,MAAMG,kBAAA,GAAqBC,OAAA,CACzBH,uBAAA,IACEV,oBAAA,KACCD,UAAA,IAAeD,cAAA,IAAkBD,EAAE,MACnCc,WAAA,IAAe,CAACL,QAAO;EAG5B,MAAMQ,UAAA,GAAa,oBAAoBjB,EAAA,EAAI;EAC3C,MAAMkB,gBAAA,GAAmBd,uBAAA,GAA0B;EAEnD,IAAI,CAACW,kBAAA,EAAoB;IACvB,OAAO;EACT;EAEA,MAAMI,KAAA,GAAQX,CAAA,CAAE;EAEhB,oBACEY,KAAA,CAACjC,KAAA,CAAMkC,QAAQ;4BACbD,KAAA,CAAC;MACCE,cAAA,EAAgBA,CAAA,KAAMX,UAAA,CAAW;MACjCY,cAAA,EAAgBA,CAAA,KAAMZ,UAAA,CAAW;MACjCa,KAAA,EAAO;QAAEC,QAAA,EAAU;MAAW;8BAE9BC,IAAA,CAAC/B,MAAA;QACCgC,WAAA,EAAY;QACZ5B,QAAA,EAAUA,QAAA;QACV6B,IAAA,eAAMF,IAAA,CAACnC,YAAA;QACPS,EAAA,EAAG;QACH6B,OAAA,EAASA,CAAA,KAAMtB,WAAA,CAAYU,UAAA;uBAE7BS,IAAA,CAAC7B,OAAA;QAAQiC,KAAA,EAAO;QAAGC,IAAA,EAAMrB,OAAA;kBACtBS;;QAGJb,WAAA,CAAYW,UAAA,kBACXS,IAAA,CAAC9B,cAAA;MACCoC,WAAA,EAAa,CAACd,gBAAA,GAAmB,cAAc;MAC/Ce,qBAAA,EACEpB,uBAAA,IACA,OAAOD,YAAA,CAAasB,QAAQ,CAACC,MAAM,CAACC,eAAe,KAAK,WACpDxB,YAAA,CAAasB,QAAQ,CAACC,MAAM,CAACC,eAAe,GAC5CC,SAAA;MAENC,IAAA,EAAMrB;;;AAKhB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","hasAutosaveEnabled","hasScheduledPublishEnabled","React","useMemo","useState","useFormModified","ScheduleIcon","useConfig","useDocumentInfo","useTranslation","Button","ScheduleDrawer","Tooltip","SchedulePublishButton","disabled","id","collectionSlug","globalSlug","hasPublishPermission","hasScheduledPublish","setHasScheduledPublish","unpublishedVersionCount","getEntityConfig","isModalOpen","toggleModal","t","modified","hovered","setHovered","entityConfig","scheduledPublishEnabled","hasAutosave","canSchedulePublish","Boolean","drawerSlug","hasNewerVersions","label","_jsxs","Fragment","onPointerEnter","onPointerLeave","style","position","_jsx","buttonStyle","icon","active","onClick","delay","show","defaultType","onUpcomingChange","schedulePublishConfig","versions","drafts","schedulePublish","undefined","slug"],"sources":["../../../src/elements/SchedulePublishButton/index.tsx"],"sourcesContent":["'use client'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { hasAutosaveEnabled, hasScheduledPublishEnabled } from 'payload/shared'\nimport React, { useMemo, useState } from 'react'\n\nimport { useFormModified } from '../../forms/Form/context.js'\nimport { ScheduleIcon } from '../../icons/Schedule/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { ScheduleDrawer } from '../PublishButton/ScheduleDrawer/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\n\nexport const SchedulePublishButton: React.FC<{ disabled?: boolean }> = ({ disabled }) => {\n  const {\n    id,\n    collectionSlug,\n    globalSlug,\n    hasPublishPermission,\n    hasScheduledPublish,\n    setHasScheduledPublish,\n    unpublishedVersionCount,\n  } = useDocumentInfo()\n\n  const { getEntityConfig } = useConfig()\n  const { isModalOpen, toggleModal } = useModal()\n  const { t } = useTranslation()\n  const modified = useFormModified()\n  const [hovered, setHovered] = useState(false)\n\n  const entityConfig = useMemo(() => {\n    if (collectionSlug) {\n      return getEntityConfig({ collectionSlug })\n    }\n    if (globalSlug) {\n      return getEntityConfig({ globalSlug })\n    }\n  }, [collectionSlug, globalSlug, getEntityConfig])\n\n  const scheduledPublishEnabled = hasScheduledPublishEnabled(entityConfig)\n  const hasAutosave = hasAutosaveEnabled(entityConfig)\n\n  const canSchedulePublish = Boolean(\n    scheduledPublishEnabled &&\n      hasPublishPermission &&\n      (globalSlug || (collectionSlug && id)) &&\n      (hasAutosave || !modified),\n  )\n\n  const drawerSlug = `schedule-publish-${id}`\n  const hasNewerVersions = unpublishedVersionCount > 0\n\n  if (!canSchedulePublish) {\n    return null\n  }\n\n  const label = t('version:schedulePublish')\n\n  return (\n    <React.Fragment>\n      <span\n        onPointerEnter={() => setHovered(true)}\n        onPointerLeave={() => setHovered(false)}\n        style={{ position: 'relative' }}\n      >\n        <Button\n          buttonStyle=\"ghost\"\n          disabled={disabled}\n          icon={<ScheduleIcon active={hasScheduledPublish} />}\n          id=\"schedule-publish-button\"\n          onClick={() => toggleModal(drawerSlug)}\n        />\n        <Tooltip delay={0} show={hovered}>\n          {label}\n        </Tooltip>\n      </span>\n      {isModalOpen(drawerSlug) && (\n        <ScheduleDrawer\n          defaultType={!hasNewerVersions ? 'unpublish' : 'publish'}\n          onUpcomingChange={setHasScheduledPublish}\n          schedulePublishConfig={\n            scheduledPublishEnabled &&\n            typeof entityConfig.versions.drafts.schedulePublish === 'object'\n              ? entityConfig.versions.drafts.schedulePublish\n              : undefined\n          }\n          slug={drawerSlug}\n        />\n      )}\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,SAASA,QAAQ,QAAQ;AACzB,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ;AAC/D,OAAOC,KAAA,IAASC,OAAO,EAAEC,QAAQ,QAAQ;AAEzC,SAASC,eAAe,QAAQ;AAChC,SAASC,YAAY,QAAQ;AAC7B,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AAExB,OAAO,MAAMC,qBAAA,GAA0DA,CAAC;EAAEC;AAAQ,CAAE;EAClF,MAAM;IACJC,EAAE;IACFC,cAAc;IACdC,UAAU;IACVC,oBAAoB;IACpBC,mBAAmB;IACnBC,sBAAsB;IACtBC;EAAuB,CACxB,GAAGb,eAAA;EAEJ,MAAM;IAAEc;EAAe,CAAE,GAAGf,SAAA;EAC5B,MAAM;IAAEgB,WAAW;IAAEC;EAAW,CAAE,GAAGzB,QAAA;EACrC,MAAM;IAAE0B;EAAC,CAAE,GAAGhB,cAAA;EACd,MAAMiB,QAAA,GAAWrB,eAAA;EACjB,MAAM,CAACsB,OAAA,EAASC,UAAA,CAAW,GAAGxB,QAAA,CAAS;EAEvC,MAAMyB,YAAA,GAAe1B,OAAA,CAAQ;IAC3B,IAAIa,cAAA,EAAgB;MAClB,OAAOM,eAAA,CAAgB;QAAEN;MAAe;IAC1C;IACA,IAAIC,UAAA,EAAY;MACd,OAAOK,eAAA,CAAgB;QAAEL;MAAW;IACtC;EACF,GAAG,CAACD,cAAA,EAAgBC,UAAA,EAAYK,eAAA,CAAgB;EAEhD,MAAMQ,uBAAA,GAA0B7B,0BAAA,CAA2B4B,YAAA;EAC3D,MAAME,WAAA,GAAc/B,kBAAA,CAAmB6B,YAAA;EAEvC,MAAMG,kBAAA,GAAqBC,OAAA,CACzBH,uBAAA,IACEZ,oBAAA,KACCD,UAAA,IAAeD,cAAA,IAAkBD,EAAE,MACnCgB,WAAA,IAAe,CAACL,QAAO;EAG5B,MAAMQ,UAAA,GAAa,oBAAoBnB,EAAA,EAAI;EAC3C,MAAMoB,gBAAA,GAAmBd,uBAAA,GAA0B;EAEnD,IAAI,CAACW,kBAAA,EAAoB;IACvB,OAAO;EACT;EAEA,MAAMI,KAAA,GAAQX,CAAA,CAAE;EAEhB,oBACEY,KAAA,CAACnC,KAAA,CAAMoC,QAAQ;4BACbD,KAAA,CAAC;MACCE,cAAA,EAAgBA,CAAA,KAAMX,UAAA,CAAW;MACjCY,cAAA,EAAgBA,CAAA,KAAMZ,UAAA,CAAW;MACjCa,KAAA,EAAO;QAAEC,QAAA,EAAU;MAAW;8BAE9BC,IAAA,CAACjC,MAAA;QACCkC,WAAA,EAAY;QACZ9B,QAAA,EAAUA,QAAA;QACV+B,IAAA,eAAMF,IAAA,CAACrC,YAAA;UAAawC,MAAA,EAAQ3B;;QAC5BJ,EAAA,EAAG;QACHgC,OAAA,EAASA,CAAA,KAAMvB,WAAA,CAAYU,UAAA;uBAE7BS,IAAA,CAAC/B,OAAA;QAAQoC,KAAA,EAAO;QAAGC,IAAA,EAAMtB,OAAA;kBACtBS;;QAGJb,WAAA,CAAYW,UAAA,kBACXS,IAAA,CAAChC,cAAA;MACCuC,WAAA,EAAa,CAACf,gBAAA,GAAmB,cAAc;MAC/CgB,gBAAA,EAAkB/B,sBAAA;MAClBgC,qBAAA,EACEtB,uBAAA,IACA,OAAOD,YAAA,CAAawB,QAAQ,CAACC,MAAM,CAACC,eAAe,KAAK,WACpD1B,YAAA,CAAawB,QAAQ,CAACC,MAAM,CAACC,eAAe,GAC5CC,SAAA;MAENC,IAAA,EAAMvB;;;AAKhB","ignoreList":[]}

package/dist/elements/SelectMany/index.js

@@ -18,7 +18,7 @@ export const SelectMany = props => {
     return null;
   }
   return /*#__PURE__*/_jsxs(Button, {
-    buttonStyle: "pill",
+    buttonStyle: "primary",
     onClick: () => {
       if (typeof onClick === 'function') {
         onClick(selected);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useSelection","useTranslation","Button","SelectMany","props","onClick","count","selected","t","_jsxs","buttonStyle","size"],"sources":["../../../src/elements/SelectMany/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\n\nexport const SelectMany: React.FC<{\n  onClick?: (ids: ReturnType<typeof useSelection>['selected']) => void\n}> = (props) => {\n  const { onClick } = props\n\n  const { count, selected } = useSelection()\n  const { t } = useTranslation()\n\n  if (!selected || !count) {\n    return null\n  }\n\n  return (\n    <Button\n      buttonStyle=\"pill\"\n      onClick={() => {\n        if (typeof onClick === 'function') {\n          onClick(selected)\n        }\n      }}\n      size=\"medium\"\n    >\n      {t('general:select')} {count}\n    </Button>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AAEvB,OAAO,MAAMC,UAAA,GAEPC,KAAA;EACJ,MAAM;IAAEC;EAAO,CAAE,GAAGD,KAAA;EAEpB,MAAM;IAAEE,KAAK;IAAEC;EAAQ,CAAE,GAAGP,YAAA;EAC5B,MAAM;IAAEQ;EAAC,CAAE,GAAGP,cAAA;EAEd,IAAI,CAACM,QAAA,IAAY,CAACD,KAAA,EAAO;IACvB,OAAO;EACT;EAEA,oBACEG,KAAA,CAACP,MAAA;IACCQ,WAAA,EAAY;IACZL,OAAA,EAASA,CAAA;MACP,IAAI,OAAOA,OAAA,KAAY,YAAY;QACjCA,OAAA,CAAQE,QAAA;MACV;IACF;IACAI,IAAA,EAAK;eAEJH,CAAA,CAAE,mBAAkB,KAAEF,KAAA;;AAG7B","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useSelection","useTranslation","Button","SelectMany","props","onClick","count","selected","t","_jsxs","buttonStyle","size"],"sources":["../../../src/elements/SelectMany/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useSelection } from '../../providers/Selection/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\n\nexport const SelectMany: React.FC<{\n  onClick?: (ids: ReturnType<typeof useSelection>['selected']) => void\n}> = (props) => {\n  const { onClick } = props\n\n  const { count, selected } = useSelection()\n  const { t } = useTranslation()\n\n  if (!selected || !count) {\n    return null\n  }\n\n  return (\n    <Button\n      buttonStyle=\"primary\"\n      onClick={() => {\n        if (typeof onClick === 'function') {\n          onClick(selected)\n        }\n      }}\n      size=\"medium\"\n    >\n      {t('general:select')} {count}\n    </Button>\n  )\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,YAAY,QAAQ;AAC7B,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AAEvB,OAAO,MAAMC,UAAA,GAEPC,KAAA;EACJ,MAAM;IAAEC;EAAO,CAAE,GAAGD,KAAA;EAEpB,MAAM;IAAEE,KAAK;IAAEC;EAAQ,CAAE,GAAGP,YAAA;EAC5B,MAAM;IAAEQ;EAAC,CAAE,GAAGP,cAAA;EAEd,IAAI,CAACM,QAAA,IAAY,CAACD,KAAA,EAAO;IACvB,OAAO;EACT;EAEA,oBACEG,KAAA,CAACP,MAAA;IACCQ,WAAA,EAAY;IACZL,OAAA,EAASA,CAAA;MACP,IAAI,OAAOA,OAAA,KAAY,YAAY;QACjCA,OAAA,CAAQE,QAAA;MACV;IACF;IACAI,IAAA,EAAK;eAEJH,CAAA,CAAE,mBAAkB,KAAEF,KAAA;;AAG7B","ignoreList":[]}

package/dist/elements/ShimmerEffect/index.css

@@ -0,0 +1,40 @@
+@layer payload-default {
+  .shimmer-effect {
+    --shine-bg: var(--color-bg-secondary);
+    --shine-fg: var(--color-bg-tertiary);
+
+    position: relative;
+    overflow: hidden;
+    background-color: var(--shine-bg);
+    border-radius: var(--radius-medium);
+  }
+
+  .shimmer-effect__shine {
+    position: absolute;
+    scale: 1.5;
+    width: 100%;
+    height: 100%;
+    transform: translateX(-100%);
+    animation: shimmer 1.75s infinite;
+    opacity: 0.75;
+    background: linear-gradient(
+      100deg,
+      var(--shine-bg) 0%,
+      var(--shine-bg) 15%,
+      var(--shine-fg) 50%,
+      var(--shine-bg) 85%,
+      var(--shine-bg) 100%
+    );
+  }
+
+  .shimmer-effect--transparent {
+    --shine-bg: transparent;
+    --shine-fg: var(--color-border);
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './index.scss';
+import './index.css';
 export type ShimmerEffectProps = {
     readonly animationDelay?: string;
     readonly className?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ShimmerEffect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACjC,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAIxC,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6BtD,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6B9D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ShimmerEffect/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACjC,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAIxC,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6BtD,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6B9D,CAAA"}

package/dist/elements/ShimmerEffect/index.js

@@ -4,7 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useDelay } from '../../hooks/useDelay.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'shimmer-effect';
 export const ShimmerEffect = ({
   animationDelay = '0ms',

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useDelay","baseClass","ShimmerEffect","animationDelay","className","disableInlineStyles","height","transparent","width","rest","_jsx","filter","Boolean","join","style","StaggeredShimmers","t0","$","count","renderDelay","t1","shimmerDelay","t2","shimmerItemClassName","undefined","shimmerDelayToPass","hasDelayed","t3","Array","t4","children","map","_","i"],"sources":["../../../src/elements/ShimmerEffect/index.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { useDelay } from '../../hooks/useDelay.js'\nimport './index.scss'\n\nexport type ShimmerEffectProps = {\n  readonly animationDelay?: string\n  readonly className?: string\n  readonly disableInlineStyles?: boolean\n  readonly height?: number | string\n  /**\n   * When true, adjusts the gradient to allow the natural background of the element to shine through.\n   */\n  transparent?: boolean\n  readonly width?: number | string\n} & React.HTMLAttributes<HTMLDivElement>\n\nconst baseClass = 'shimmer-effect'\n\nexport const ShimmerEffect: React.FC<ShimmerEffectProps> = ({\n  animationDelay = '0ms',\n  className,\n  disableInlineStyles = false,\n  height = '60px',\n  transparent,\n  width = '100%',\n  ...rest\n}) => {\n  return (\n    <div\n      {...rest}\n      className={[baseClass, transparent && `${baseClass}--transparent`, className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...(rest?.style || {}),\n        height: !disableInlineStyles && (typeof height === 'number' ? `${height}px` : height),\n        width: !disableInlineStyles && (typeof width === 'number' ? `${width}px` : width),\n      }}\n    >\n      <div\n        className=\"shimmer-effect__shine\"\n        style={{\n          animationDelay,\n        }}\n      />\n    </div>\n  )\n}\n\nexport type StaggeredShimmersProps = {\n  className?: string\n  count: number\n  height?: number | string\n  renderDelay?: number\n  shimmerDelay?: number | string\n  shimmerItemClassName?: string\n  width?: number | string\n}\n\nexport const StaggeredShimmers: React.FC<StaggeredShimmersProps> = ({\n  className,\n  count,\n  height,\n  renderDelay = 500,\n  shimmerDelay = 25,\n  shimmerItemClassName,\n  width,\n}) => {\n  const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay\n  const [hasDelayed] = useDelay(renderDelay, true)\n\n  if (!hasDelayed) {\n    return null\n  }\n\n  return (\n    <div className={className}>\n      {[...Array(count)].map((_, i) => (\n        <div className={shimmerItemClassName} key={i}>\n          <ShimmerEffect\n            animationDelay={`calc(${i} * ${shimmerDelayToPass})`}\n            height={height}\n            width={width}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,YAAYC,KAAA,MAAW;AAEvB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAcP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CA,CAAC;EAC1DC,cAAA,GAAiB,KAAK;EACtBC,SAAS;EACTC,mBAAA,GAAsB,KAAK;EAC3BC,MAAA,GAAS,MAAM;EACfC,WAAW;EACXC,KAAA,GAAQ,MAAM;EACd,GAAGC;AAAA,CACJ;EACC,oBACEC,IAAA,CAAC;IACE,GAAGD,IAAI;IACRL,SAAA,EAAW,CAACH,SAAA,EAAWM,WAAA,IAAe,GAAGN,SAAA,eAAwB,EAAEG,SAAA,CAAU,CAC1EO,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRC,KAAA,EAAO;MACL,IAAIL,IAAA,EAAMK,KAAA,IAAS,CAAC,CAAC;MACrBR,MAAA,EAAQ,CAACD,mBAAA,KAAwB,OAAOC,MAAA,KAAW,WAAW,GAAGA,MAAA,IAAU,GAAGA,MAAK;MACnFE,KAAA,EAAO,CAACH,mBAAA,KAAwB,OAAOG,KAAA,KAAU,WAAW,GAAGA,KAAA,IAAS,GAAGA,KAAI;IACjF;cAEA,aAAAE,IAAA,CAAC;MACCN,SAAA,EAAU;MACVU,KAAA,EAAO;QACLX;MACF;;;AAIR;AAYA,OAAO,MAAMY,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAnB,EAAA;EAAC;IAAAM,SAAA;IAAAc,KAAA;IAAAZ,MAAA;IAAAa,WAAA,EAAAC,EAAA;IAAAC,YAAA,EAAAC,EAAA;IAAAC,oBAAA;IAAAf;EAAA,IAAAQ,EAQnE;EAJC,MAAAG,WAAA,GAAAC,EAAiB,KAAAI,SAAA,SAAjBJ,EAAiB;EACjB,MAAAC,YAAA,GAAAC,EAAiB,KAAAE,SAAA,QAAjBF,EAAiB;EAIjB,MAAAG,kBAAA,GAA2B,OAAOJ,YAAA,KAAiB,WAAW,GAAGA,YAAA,IAAgB,GAAGA,YAAA;EACpF,OAAAK,UAAA,IAAqB1B,QAAA,CAASmB,WAAA,MAAa;EAAA,KAEtCO,UAAA;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAC,KAAA;IAMAS,EAAA,OAAIC,KAAA,CAAMV,KAAA;IAAOD,CAAA,MAAAC,KAAA;IAAAD,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAA,IAAAY,EAAA;EAAA,IAAAZ,CAAA,QAAAb,SAAA,IAAAa,CAAA,QAAAX,MAAA,IAAAW,CAAA,QAAAQ,kBAAA,IAAAR,CAAA,QAAAM,oBAAA,IAAAN,CAAA,QAAAU,EAAA,IAAAV,CAAA,QAAAT,KAAA;IADpBqB,EAAA,GAAAnB,IAAA,CAAC;MAAAN,SAAA;MAAA0B,QAAA,EACEH,EAAiB,CAAAI,GAAA,EAAAC,CAAA,EAAAC,CAAA,KAChBvB,IAAA,CAAC;QAAAN,SAAA,EAAemB,oBAAA;QAAAO,QAAA,EACdpB,IAAA,CAAAR,aAAA;UAAAC,cAAA,EACkB,QAAQ8B,CAAA,MAAOR,kBAAA,GAAqB;UAAAnB,MAAA;UAAAE;QAAA,C;SAFbyB,CAAA;IAAA,C;;;;;;;;;;;SAF/CJ,E;CAYJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useDelay","baseClass","ShimmerEffect","animationDelay","className","disableInlineStyles","height","transparent","width","rest","_jsx","filter","Boolean","join","style","StaggeredShimmers","t0","$","count","renderDelay","t1","shimmerDelay","t2","shimmerItemClassName","undefined","shimmerDelayToPass","hasDelayed","t3","Array","t4","children","map","_","i"],"sources":["../../../src/elements/ShimmerEffect/index.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\n\nimport { useDelay } from '../../hooks/useDelay.js'\nimport './index.css'\n\nexport type ShimmerEffectProps = {\n  readonly animationDelay?: string\n  readonly className?: string\n  readonly disableInlineStyles?: boolean\n  readonly height?: number | string\n  /**\n   * When true, adjusts the gradient to allow the natural background of the element to shine through.\n   */\n  transparent?: boolean\n  readonly width?: number | string\n} & React.HTMLAttributes<HTMLDivElement>\n\nconst baseClass = 'shimmer-effect'\n\nexport const ShimmerEffect: React.FC<ShimmerEffectProps> = ({\n  animationDelay = '0ms',\n  className,\n  disableInlineStyles = false,\n  height = '60px',\n  transparent,\n  width = '100%',\n  ...rest\n}) => {\n  return (\n    <div\n      {...rest}\n      className={[baseClass, transparent && `${baseClass}--transparent`, className]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...(rest?.style || {}),\n        height: !disableInlineStyles && (typeof height === 'number' ? `${height}px` : height),\n        width: !disableInlineStyles && (typeof width === 'number' ? `${width}px` : width),\n      }}\n    >\n      <div\n        className=\"shimmer-effect__shine\"\n        style={{\n          animationDelay,\n        }}\n      />\n    </div>\n  )\n}\n\nexport type StaggeredShimmersProps = {\n  className?: string\n  count: number\n  height?: number | string\n  renderDelay?: number\n  shimmerDelay?: number | string\n  shimmerItemClassName?: string\n  width?: number | string\n}\n\nexport const StaggeredShimmers: React.FC<StaggeredShimmersProps> = ({\n  className,\n  count,\n  height,\n  renderDelay = 500,\n  shimmerDelay = 25,\n  shimmerItemClassName,\n  width,\n}) => {\n  const shimmerDelayToPass = typeof shimmerDelay === 'number' ? `${shimmerDelay}ms` : shimmerDelay\n  const [hasDelayed] = useDelay(renderDelay, true)\n\n  if (!hasDelayed) {\n    return null\n  }\n\n  return (\n    <div className={className}>\n      {[...Array(count)].map((_, i) => (\n        <div className={shimmerItemClassName} key={i}>\n          <ShimmerEffect\n            animationDelay={`calc(${i} * ${shimmerDelayToPass})`}\n            height={height}\n            width={width}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,YAAYC,KAAA,MAAW;AAEvB,SAASC,QAAQ,QAAQ;AACzB,OAAO;AAcP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA8CA,CAAC;EAC1DC,cAAA,GAAiB,KAAK;EACtBC,SAAS;EACTC,mBAAA,GAAsB,KAAK;EAC3BC,MAAA,GAAS,MAAM;EACfC,WAAW;EACXC,KAAA,GAAQ,MAAM;EACd,GAAGC;AAAA,CACJ;EACC,oBACEC,IAAA,CAAC;IACE,GAAGD,IAAI;IACRL,SAAA,EAAW,CAACH,SAAA,EAAWM,WAAA,IAAe,GAAGN,SAAA,eAAwB,EAAEG,SAAA,CAAU,CAC1EO,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRC,KAAA,EAAO;MACL,IAAIL,IAAA,EAAMK,KAAA,IAAS,CAAC,CAAC;MACrBR,MAAA,EAAQ,CAACD,mBAAA,KAAwB,OAAOC,MAAA,KAAW,WAAW,GAAGA,MAAA,IAAU,GAAGA,MAAK;MACnFE,KAAA,EAAO,CAACH,mBAAA,KAAwB,OAAOG,KAAA,KAAU,WAAW,GAAGA,KAAA,IAAS,GAAGA,KAAI;IACjF;cAEA,aAAAE,IAAA,CAAC;MACCN,SAAA,EAAU;MACVU,KAAA,EAAO;QACLX;MACF;;;AAIR;AAYA,OAAO,MAAMY,iBAAA,GAAsDC,EAAA;EAAA,MAAAC,CAAA,GAAAnB,EAAA;EAAC;IAAAM,SAAA;IAAAc,KAAA;IAAAZ,MAAA;IAAAa,WAAA,EAAAC,EAAA;IAAAC,YAAA,EAAAC,EAAA;IAAAC,oBAAA;IAAAf;EAAA,IAAAQ,EAQnE;EAJC,MAAAG,WAAA,GAAAC,EAAiB,KAAAI,SAAA,SAAjBJ,EAAiB;EACjB,MAAAC,YAAA,GAAAC,EAAiB,KAAAE,SAAA,QAAjBF,EAAiB;EAIjB,MAAAG,kBAAA,GAA2B,OAAOJ,YAAA,KAAiB,WAAW,GAAGA,YAAA,IAAgB,GAAGA,YAAA;EACpF,OAAAK,UAAA,IAAqB1B,QAAA,CAASmB,WAAA,MAAa;EAAA,KAEtCO,UAAA;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAV,CAAA,QAAAC,KAAA;IAMAS,EAAA,OAAIC,KAAA,CAAMV,KAAA;IAAOD,CAAA,MAAAC,KAAA;IAAAD,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAAA,IAAAY,EAAA;EAAA,IAAAZ,CAAA,QAAAb,SAAA,IAAAa,CAAA,QAAAX,MAAA,IAAAW,CAAA,QAAAQ,kBAAA,IAAAR,CAAA,QAAAM,oBAAA,IAAAN,CAAA,QAAAU,EAAA,IAAAV,CAAA,QAAAT,KAAA;IADpBqB,EAAA,GAAAnB,IAAA,CAAC;MAAAN,SAAA;MAAA0B,QAAA,EACEH,EAAiB,CAAAI,GAAA,EAAAC,CAAA,EAAAC,CAAA,KAChBvB,IAAA,CAAC;QAAAN,SAAA,EAAemB,oBAAA;QAAAO,QAAA,EACdpB,IAAA,CAAAR,aAAA;UAAAC,cAAA,EACkB,QAAQ8B,CAAA,MAAOR,kBAAA,GAAqB;UAAAnB,MAAA;UAAAE;QAAA,C;SAFbyB,CAAA;IAAA,C;;;;;;;;;;;SAF/CJ,E;CAYJ","ignoreList":[]}

package/dist/elements/Spinner/index.css

@@ -13,4 +13,20 @@
   .spinner--sm .spinner__text {
     font-size: var(--text-caption-font-size);
   }
+
+  .spinner--md .spinner__text {
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+  }
+
+  .spinner--lg .spinner__text {
+    font-family: var(--text-body-large-font-family);
+    font-size: var(--text-body-large-font-size);
+    font-weight: var(--text-body-large-font-weight);
+    line-height: var(--text-body-large-line-height);
+    letter-spacing: var(--text-body-large-letter-spacing);
+  }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,iBAAiB,CAAC;CAAG;AAExF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2ChD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,iBAAiB,CAAC;CAAG;AAExF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwChD,CAAA"}

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

@@ -13,7 +13,6 @@ export const BlocksCell = t0 => {
     field: t1
   } = t0;
   const {
-    blockReferences,
     blocks,
     labels
   } = t1;
@@ -24,7 +23,7 @@ export const BlocksCell = t0 => {
     config
   } = useConfig();
   const selectedBlocks = Array.isArray(cellData) ? cellData.map(_temp) : [];
-  const translatedBlockLabels = (blockReferences ?? blocks)?.map(b => {
+  const translatedBlockLabels = blocks.map(b => {
     const block = typeof b === "string" ? config.blocksMap[b] : b;
     return {
       slug: block.slug,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useConfig","useTranslation","BlocksCell","t0","$","cellData","field","t1","blockReferences","blocks","labels","i18n","config","selectedBlocks","Array","isArray","map","_temp","translatedBlockLabels","b","block","blocksMap","slug","label","singular","plural","formatBlockList","blocks_0","b_0","filtered","filter","f","join","length","more","t","count","items","slice","t2","_jsx","children","blockType"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"sourcesContent":["'use client'\nimport type { BlocksFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface BlocksCellProps extends DefaultCellComponentProps<BlocksFieldClient> {}\n\nexport const BlocksCell: React.FC<BlocksCellProps> = ({\n  cellData,\n  field: { blockReferences, blocks, labels },\n}) => {\n  const { i18n } = useTranslation()\n  const { config } = useConfig()\n\n  const selectedBlocks = Array.isArray(cellData) ? cellData.map(({ blockType }) => blockType) : []\n\n  const translatedBlockLabels = (blockReferences ?? blocks)?.map((b) => {\n    const block = typeof b === 'string' ? config.blocksMap[b] : b\n    return {\n      slug: block.slug,\n      label: getTranslation(block.labels.singular, i18n),\n    }\n  })\n\n  let label = `0 ${getTranslation(labels?.plural, i18n)}`\n\n  const formatBlockList = (blocks) =>\n    blocks\n      .map((b) => {\n        const filtered = translatedBlockLabels.filter((f) => f.slug === b)?.[0]\n        return filtered?.label\n      })\n      .join(', ')\n\n  const itemsToShow = 5\n\n  if (selectedBlocks.length > itemsToShow) {\n    const more = selectedBlocks.length - itemsToShow\n    label = `${selectedBlocks.length} ${getTranslation(labels?.plural, i18n)} - ${i18n.t(\n      'fields:itemsAndMore',\n      { count: more, items: formatBlockList(selectedBlocks.slice(0, itemsToShow)) },\n    )}`\n  } else if (selectedBlocks.length > 0) {\n    label = `${selectedBlocks.length} ${getTranslation(\n      selectedBlocks.length === 1 ? labels?.singular : labels?.plural,\n      i18n,\n    )} - ${formatBlockList(selectedBlocks)}`\n  }\n\n  return <span>{label}</span>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAI/B,OAAO,MAAMC,UAAA,GAAwCC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,QAAA;IAAAC,KAAA,EAAAC;EAAA,IAAAJ,EAGrD;EADQ;IAAAK,eAAA;IAAAC,MAAA;IAAAC;EAAA,IAAAH,EAAmC;EAE1C;IAAAI;EAAA,IAAiBV,cAAA;EACjB;IAAAW;EAAA,IAAmBZ,SAAA;EAEnB,MAAAa,cAAA,GAAuBC,KAAA,CAAAC,OAAA,CAAcV,QAAA,IAAYA,QAAA,CAAAW,GAAA,CAAAC,KAAgC,MAAe;EAEhG,MAAAC,qBAAA,IAA+BV,eAAA,IAAmBC,MAAK,GAAAO,GAAA,CAAAG,CAAA;IACrD,MAAAC,KAAA,GAAc,OAAOD,CAAA,KAAM,WAAWP,MAAA,CAAAS,SAAA,CAAiBF,CAAA,IAAKA,CAAA;IAAA;MAAAG,IAAA,EAEpDF,KAAA,CAAAE,IAAA;MAAAC,KAAA,EACCzB,cAAA,CAAesB,KAAA,CAAAV,MAAA,CAAAc,QAAA,EAAuBb,IAAA;IAAA;EAAA;EAIjD,IAAAY,KAAA,GAAY,KAAKzB,cAAA,CAAeY,MAAA,EAAAe,MAAA,EAAgBd,IAAA,GAAO;EAEvD,MAAAe,eAAA,GAAAC,QAAA,IACElB,QAAA,CAAAO,GAAA,CAAAY,GAAA;IAEI,MAAAC,QAAA,GAAiBX,qBAAA,CAAAY,MAAA,CAAAC,CAAA,IAAoCA,CAAA,CAAAT,IAAA,KAAWH,GAAA;IAAO,OAChEU,QAAA,EAAAN,KAAA;EAAA,CACT,EAAAS,IAAA,CACM;EAAA,IAINnB,cAAA,CAAAoB,MAAA,IAAwB;IAC1B,MAAAC,IAAA,GAAarB,cAAA,CAAAoB,MAAA,IAAwB;IACrCV,KAAA,CAAAA,CAAA,CAAQA,GAAGV,cAAA,CAAAoB,MAAA,IAAyBnC,cAAA,CAAeY,MAAA,EAAAe,MAAA,EAAgBd,IAAA,OAAWA,IAAA,CAAAwB,CAAA,CAC5E;MAAAC,KAAA,EACSF,IAAA;MAAAG,KAAA,EAAaX,eAAA,CAAgBb,cAAA,CAAAyB,KAAA,KAAwB;IAAA,CAAc,GAC3E;EAHH;IAAA,IAISzB,cAAA,CAAAoB,MAAA,IAAwB;MACjCV,KAAA,CAAAA,CAAA,CAAQA,GAAGV,cAAA,CAAAoB,MAAA,IAAyBnC,cAAA,CAClCe,cAAA,CAAAoB,MAAA,MAA0B,GAAIvB,MAAA,EAAAc,QAAA,GAAmBd,MAAA,EAAAe,MAAQ,EACzDd,IAAA,OACKe,eAAA,CAAgBb,cAAA,GAAiB;IAHxC;EAAA;EAAA,IAAA0B,EAAA;EAAA,IAAAnC,CAAA,QAAAmB,KAAA;IAMKgB,EAAA,GAAAC,IAAA,CAAC;MAAAC,QAAA,EAAMlB;IAAA,C;;;;;;SAAPgB,E;CACT;AA3CqD,SAAAtB,MAAAd,EAAA;EAOY;IAAAuC;EAAA,IAAAvC,EAAa;EAAA,OAAKuC,SAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useConfig","useTranslation","BlocksCell","t0","$","cellData","field","t1","blocks","labels","i18n","config","selectedBlocks","Array","isArray","map","_temp","translatedBlockLabels","b","block","blocksMap","slug","label","singular","plural","formatBlockList","blocks_0","b_0","filtered","filter","f","join","length","more","t","count","items","slice","t2","_jsx","children","blockType"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"sourcesContent":["'use client'\nimport type { BlocksFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface BlocksCellProps extends DefaultCellComponentProps<BlocksFieldClient> {}\n\nexport const BlocksCell: React.FC<BlocksCellProps> = ({ cellData, field: { blocks, labels } }) => {\n  const { i18n } = useTranslation()\n  const { config } = useConfig()\n\n  const selectedBlocks = Array.isArray(cellData) ? cellData.map(({ blockType }) => blockType) : []\n\n  const translatedBlockLabels = blocks.map((b) => {\n    const block = typeof b === 'string' ? config.blocksMap[b] : b\n    return {\n      slug: block.slug,\n      label: getTranslation(block.labels.singular, i18n),\n    }\n  })\n\n  let label = `0 ${getTranslation(labels?.plural, i18n)}`\n\n  const formatBlockList = (blocks) =>\n    blocks\n      .map((b) => {\n        const filtered = translatedBlockLabels.filter((f) => f.slug === b)?.[0]\n        return filtered?.label\n      })\n      .join(', ')\n\n  const itemsToShow = 5\n\n  if (selectedBlocks.length > itemsToShow) {\n    const more = selectedBlocks.length - itemsToShow\n    label = `${selectedBlocks.length} ${getTranslation(labels?.plural, i18n)} - ${i18n.t(\n      'fields:itemsAndMore',\n      { count: more, items: formatBlockList(selectedBlocks.slice(0, itemsToShow)) },\n    )}`\n  } else if (selectedBlocks.length > 0) {\n    label = `${selectedBlocks.length} ${getTranslation(\n      selectedBlocks.length === 1 ? labels?.singular : labels?.plural,\n      i18n,\n    )} - ${formatBlockList(selectedBlocks)}`\n  }\n\n  return <span>{label}</span>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAI/B,OAAO,MAAMC,UAAA,GAAwCC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,QAAA;IAAAC,KAAA,EAAAC;EAAA,IAAAJ,EAAuC;EAApB;IAAAK,MAAA;IAAAC;EAAA,IAAAF,EAAkB;EACzF;IAAAG;EAAA,IAAiBT,cAAA;EACjB;IAAAU;EAAA,IAAmBX,SAAA;EAEnB,MAAAY,cAAA,GAAuBC,KAAA,CAAAC,OAAA,CAAcT,QAAA,IAAYA,QAAA,CAAAU,GAAA,CAAAC,KAAgC,MAAe;EAEhG,MAAAC,qBAAA,GAA8BT,MAAA,CAAAO,GAAA,CAAAG,CAAA;IAC5B,MAAAC,KAAA,GAAc,OAAOD,CAAA,KAAM,WAAWP,MAAA,CAAAS,SAAA,CAAiBF,CAAA,IAAKA,CAAA;IAAA;MAAAG,IAAA,EAEpDF,KAAA,CAAAE,IAAA;MAAAC,KAAA,EACCxB,cAAA,CAAeqB,KAAA,CAAAV,MAAA,CAAAc,QAAA,EAAuBb,IAAA;IAAA;EAAA,CAEjD;EAEA,IAAAY,KAAA,GAAY,KAAKxB,cAAA,CAAeW,MAAA,EAAAe,MAAA,EAAgBd,IAAA,GAAO;EAEvD,MAAAe,eAAA,GAAAC,QAAA,IACElB,QAAA,CAAAO,GAAA,CAAAY,GAAA;IAEI,MAAAC,QAAA,GAAiBX,qBAAA,CAAAY,MAAA,CAAAC,CAAA,IAAoCA,CAAA,CAAAT,IAAA,KAAWH,GAAA;IAAO,OAChEU,QAAA,EAAAN,KAAA;EAAA,CACT,EAAAS,IAAA,CACM;EAAA,IAINnB,cAAA,CAAAoB,MAAA,IAAwB;IAC1B,MAAAC,IAAA,GAAarB,cAAA,CAAAoB,MAAA,IAAwB;IACrCV,KAAA,CAAAA,CAAA,CAAQA,GAAGV,cAAA,CAAAoB,MAAA,IAAyBlC,cAAA,CAAeW,MAAA,EAAAe,MAAA,EAAgBd,IAAA,OAAWA,IAAA,CAAAwB,CAAA,CAC5E;MAAAC,KAAA,EACSF,IAAA;MAAAG,KAAA,EAAaX,eAAA,CAAgBb,cAAA,CAAAyB,KAAA,KAAwB;IAAA,CAAc,GAC3E;EAHH;IAAA,IAISzB,cAAA,CAAAoB,MAAA,IAAwB;MACjCV,KAAA,CAAAA,CAAA,CAAQA,GAAGV,cAAA,CAAAoB,MAAA,IAAyBlC,cAAA,CAClCc,cAAA,CAAAoB,MAAA,MAA0B,GAAIvB,MAAA,EAAAc,QAAA,GAAmBd,MAAA,EAAAe,MAAQ,EACzDd,IAAA,OACKe,eAAA,CAAgBb,cAAA,GAAiB;IAHxC;EAAA;EAAA,IAAA0B,EAAA;EAAA,IAAAlC,CAAA,QAAAkB,KAAA;IAMKgB,EAAA,GAAAC,IAAA,CAAC;MAAAC,QAAA,EAAMlB;IAAA,C;;;;;;SAAPgB,E;CACT;AAxCqD,SAAAtB,MAAAb,EAAA;EAIY;IAAAsC;EAAA,IAAAtC,EAAa;EAAA,OAAKsC,SAAA;AAAA","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 import type { CheckboxFieldClient, DefaultCellComponentProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const CheckboxCell: React.FC<DefaultCellComponentProps<CheckboxFieldClient>>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAE7E,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,mBAAmB,CAAC,CAUjF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAE7E,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAAC,mBAAmB,CAAC,CAUjF,CAAA"}

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

@@ -4,7 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useTranslation } from '../../../../../providers/Translation/index.js';
-import './index.scss';
+import './index.css';
 export const CheckboxCell = t0 => {
   const $ = _c(3);
   const {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","CheckboxCell","t0","$","cellData","t","t1","t2","_jsx","className","children","toLowerCase"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"sourcesContent":["'use client'\nimport type { CheckboxFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport './index.scss'\n\nexport const CheckboxCell: React.FC<DefaultCellComponentProps<CheckboxFieldClient>> = ({\n  cellData,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <code className=\"bool-cell\">\n      <span>{t(`general:${cellData}`).toLowerCase()}</span>\n    </code>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,OAAO,MAAMC,YAAA,GAAyEC,EAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAAC;IAAAM;EAAA,IAAAF,EAEtF;EACC;IAAAG;EAAA,IAAcL,cAAA;EAID,MAAAM,EAAA,cAAWF,QAAA,EAAU;EAAA,IAAAG,EAAA;EAAA,IAAAJ,CAAA,QAAAE,CAAA,IAAAF,CAAA,QAAAG,EAAA;IADhCC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAe;MAAAC,QAAA,EACdF,IAAA,CAAC;QAAAE,QAAA,EAAML,CAAA,CAAEC,EAAqB,EAAAK,WAAA,CAAa;MAAA,C;;;;;;;;SAD7CJ,E;CAIJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","CheckboxCell","t0","$","cellData","t","t1","t2","_jsx","className","children","toLowerCase"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Checkbox/index.tsx"],"sourcesContent":["'use client'\nimport type { CheckboxFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\nimport './index.css'\n\nexport const CheckboxCell: React.FC<DefaultCellComponentProps<CheckboxFieldClient>> = ({\n  cellData,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <code className=\"bool-cell\">\n      <span>{t(`general:${cellData}`).toLowerCase()}</span>\n    </code>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,OAAO,MAAMC,YAAA,GAAyEC,EAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAAC;IAAAM;EAAA,IAAAF,EAEtF;EACC;IAAAG;EAAA,IAAcL,cAAA;EAID,MAAAM,EAAA,cAAWF,QAAA,EAAU;EAAA,IAAAG,EAAA;EAAA,IAAAJ,CAAA,QAAAE,CAAA,IAAAF,CAAA,QAAAG,EAAA;IADhCC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAe;MAAAC,QAAA,EACdF,IAAA,CAAC;QAAAE,QAAA,EAAML,CAAA,CAAEC,EAAqB,EAAAK,WAAA,CAAa;MAAA,C;;;;;;;;SAD7CJ,E;CAIJ","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import type { ClientCollectionConfig, CodeFieldClient, DefaultCellComponentProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export interface CodeCellProps extends DefaultCellComponentProps<CodeFieldClient> {
     readonly collectionConfig: ClientCollectionConfig;
     readonly nowrap?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Code/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEjG,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC/E,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAU5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Code/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEjG,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAEpB,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,eAAe,CAAC;IAC/E,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAU5C,CAAA"}

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

@@ -2,7 +2,7 @@
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 export const CodeCell = ({
   cellData,
   nowrap

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","CodeCell","cellData","nowrap","textToShow","length","substring","noWrapStyle","whiteSpace","_jsx","className","style"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Code/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, CodeFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport './index.scss'\n\nexport interface CodeCellProps extends DefaultCellComponentProps<CodeFieldClient> {\n  readonly collectionConfig: ClientCollectionConfig\n  readonly nowrap?: boolean\n}\n\nexport const CodeCell: React.FC<CodeCellProps> = ({ cellData, nowrap }) => {\n  const textToShow = cellData?.length > 100 ? `${cellData.substring(0, 100)}\\u2026` : cellData\n\n  const noWrapStyle: React.CSSProperties = nowrap ? { whiteSpace: 'nowrap' } : {}\n\n  return (\n    <code className=\"code-cell\" style={noWrapStyle}>\n      <span>{textToShow}</span>\n    </code>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAOP,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAAEC,QAAQ;EAAEC;AAAM,CAAE;EACpE,MAAMC,UAAA,GAAaF,QAAA,EAAUG,MAAA,GAAS,MAAM,GAAGH,QAAA,CAASI,SAAS,CAAC,GAAG,YAAY,GAAGJ,QAAA;EAEpF,MAAMK,WAAA,GAAmCJ,MAAA,GAAS;IAAEK,UAAA,EAAY;EAAS,IAAI,CAAC;EAE9E,oBACEC,IAAA,CAAC;IAAKC,SAAA,EAAU;IAAYC,KAAA,EAAOJ,WAAA;cACjC,aAAAE,IAAA,CAAC;gBAAML;;;AAGb","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","CodeCell","cellData","nowrap","textToShow","length","substring","noWrapStyle","whiteSpace","_jsx","className","style"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Code/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, CodeFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport React from 'react'\n\nimport './index.css'\n\nexport interface CodeCellProps extends DefaultCellComponentProps<CodeFieldClient> {\n  readonly collectionConfig: ClientCollectionConfig\n  readonly nowrap?: boolean\n}\n\nexport const CodeCell: React.FC<CodeCellProps> = ({ cellData, nowrap }) => {\n  const textToShow = cellData?.length > 100 ? `${cellData.substring(0, 100)}\\u2026` : cellData\n\n  const noWrapStyle: React.CSSProperties = nowrap ? { whiteSpace: 'nowrap' } : {}\n\n  return (\n    <code className=\"code-cell\" style={noWrapStyle}>\n      <span>{textToShow}</span>\n    </code>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAOP,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAAEC,QAAQ;EAAEC;AAAM,CAAE;EACpE,MAAMC,UAAA,GAAaF,QAAA,EAAUG,MAAA,GAAS,MAAM,GAAGH,QAAA,CAASI,SAAS,CAAC,GAAG,YAAY,GAAGJ,QAAA;EAEpF,MAAMK,WAAA,GAAmCJ,MAAA,GAAS;IAAEK,UAAA,EAAY;EAAS,IAAI,CAAC;EAE9E,oBACEC,IAAA,CAAC;IAAKC,SAAA,EAAU;IAAYC,KAAA,EAAOJ,WAAA;cACjC,aAAAE,IAAA,CAAC;gBAAML;;;AAGb","ignoreList":[]}

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

@@ -0,0 +1,25 @@
+@layer payload-default {
+  .file {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .file__thumbnail {
+    display: inline-block;
+    max-width: var(--spacer-6);
+    height: var(--spacer-6);
+    border-radius: var(--radius-small);
+  }
+
+  .file__filename {
+    align-self: center;
+
+    [dir='ltr'] & {
+      margin-left: calc(var(--spacer-4) - var(--spacer-1));
+    }
+
+    [dir='rtl'] & {
+      margin-right: calc(var(--spacer-4) - var(--spacer-1));
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { ClientCollectionConfig, DefaultCellComponentProps, TextFieldClient, UploadFieldClient } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export interface FileCellProps extends DefaultCellComponentProps<TextFieldClient | UploadFieldClient> {
     readonly collectionConfig: ClientCollectionConfig;
 }

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,EACV,sBAAsB,EACtB,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAKrB,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,eAAe,GAAG,iBAAiB,CAAC;IACtE,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,sBAAsB,EACtB,yBAAyB,EACzB,eAAe,EACf,iBAAiB,EAClB,MAAM,SAAS,CAAA;AAGhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAKpB,MAAM,WAAW,aACf,SAAQ,yBAAyB,CAAC,eAAe,GAAG,iBAAiB,CAAC;IACtE,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+C5C,CAAA"}

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

@@ -3,7 +3,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getBestFitFromSizes, isImage } from 'payload/shared';
 import React from 'react';
-import './index.scss';
+import './index.css';
 import { Thumbnail } from '../../../../Thumbnail/index.js';
 const baseClass = 'file';
 export const FileCell = ({

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getBestFitFromSizes","isImage","React","Thumbnail","baseClass","FileCell","cellData","filename","collectionConfig","field","rowData","fieldPreviewAllowed","displayPreview","undefined","previewAllowed","upload","isFileImage","mimeType","fileSrc","thumbnailURL","url","sizes","width","uploadConfig","imageCacheTag","cacheTags","updatedAt","_jsxs","className","_jsx","collectionSlug","slug","doc","size","String","_Fragment"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  DefaultCellComponentProps,\n  TextFieldClient,\n  UploadFieldClient,\n} from 'payload'\n\nimport { getBestFitFromSizes, isImage } from 'payload/shared'\nimport React from 'react'\n\nimport './index.scss'\nimport { Thumbnail } from '../../../../Thumbnail/index.js'\n\nconst baseClass = 'file'\n\nexport interface FileCellProps\n  extends DefaultCellComponentProps<TextFieldClient | UploadFieldClient> {\n  readonly collectionConfig: ClientCollectionConfig\n}\n\nexport const FileCell: React.FC<FileCellProps> = ({\n  cellData: filename,\n  collectionConfig,\n  field,\n  rowData,\n}) => {\n  const fieldPreviewAllowed = 'displayPreview' in field ? field.displayPreview : undefined\n  const previewAllowed = fieldPreviewAllowed ?? collectionConfig.upload?.displayPreview ?? true\n\n  if (previewAllowed) {\n    const isFileImage = isImage(rowData?.mimeType)\n    let fileSrc: string | undefined = isFileImage\n      ? rowData?.thumbnailURL || rowData?.url\n      : rowData?.thumbnailURL\n\n    if (isFileImage) {\n      fileSrc = getBestFitFromSizes({\n        sizes: rowData?.sizes,\n        thumbnailURL: rowData?.thumbnailURL,\n        url: rowData?.url,\n        width: rowData?.width,\n      })\n    }\n\n    const uploadConfig = collectionConfig?.upload\n    const imageCacheTag = uploadConfig?.cacheTags && rowData?.updatedAt\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={fileSrc}\n          imageCacheTag={imageCacheTag}\n          size=\"small\"\n          uploadConfig={uploadConfig}\n        />\n        <span className={`${baseClass}__filename`}>{String(filename)}</span>\n      </div>\n    )\n  } else {\n    return <>{String(filename)}</>\n  }\n}\n"],"mappings":"AAAA;;;AAQA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ;AAC7C,OAAOC,KAAA,MAAW;AAElB,OAAO;AACP,SAASC,SAAS,QAAQ;AAE1B,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAChDC,QAAA,EAAUC,QAAQ;EAClBC,gBAAgB;EAChBC,KAAK;EACLC;AAAO,CACR;EACC,MAAMC,mBAAA,GAAsB,oBAAoBF,KAAA,GAAQA,KAAA,CAAMG,cAAc,GAAGC,SAAA;EAC/E,MAAMC,cAAA,GAAiBH,mBAAA,IAAuBH,gBAAA,CAAiBO,MAAM,EAAEH,cAAA,IAAkB;EAEzF,IAAIE,cAAA,EAAgB;IAClB,MAAME,WAAA,GAAcf,OAAA,CAAQS,OAAA,EAASO,QAAA;IACrC,IAAIC,OAAA,GAA8BF,WAAA,GAC9BN,OAAA,EAASS,YAAA,IAAgBT,OAAA,EAASU,GAAA,GAClCV,OAAA,EAASS,YAAA;IAEb,IAAIH,WAAA,EAAa;MACfE,OAAA,GAAUlB,mBAAA,CAAoB;QAC5BqB,KAAA,EAAOX,OAAA,EAASW,KAAA;QAChBF,YAAA,EAAcT,OAAA,EAASS,YAAA;QACvBC,GAAA,EAAKV,OAAA,EAASU,GAAA;QACdE,KAAA,EAAOZ,OAAA,EAASY;MAClB;IACF;IAEA,MAAMC,YAAA,GAAef,gBAAA,EAAkBO,MAAA;IACvC,MAAMS,aAAA,GAAgBD,YAAA,EAAcE,SAAA,IAAaf,OAAA,EAASgB,SAAA;IAE1D,oBACEC,KAAA,CAAC;MAAIC,SAAA,EAAWxB,SAAA;8BACdyB,IAAA,CAAC1B,SAAA;QACCyB,SAAA,EAAW,GAAGxB,SAAA,aAAsB;QACpC0B,cAAA,EAAgBtB,gBAAA,EAAkBuB,IAAA;QAClCC,GAAA,EAAK;UACH,GAAGtB,OAAO;UACVH;QACF;QACAW,OAAA,EAASA,OAAA;QACTM,aAAA,EAAeA,aAAA;QACfS,IAAA,EAAK;QACLV,YAAA,EAAcA;uBAEhBM,IAAA,CAAC;QAAKD,SAAA,EAAW,GAAGxB,SAAA,YAAqB;kBAAG8B,MAAA,CAAO3B,QAAA;;;EAGzD,OAAO;IACL,oBAAOsB,IAAA,CAAAM,SAAA;gBAAGD,MAAA,CAAO3B,QAAA;;EACnB;AACF","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getBestFitFromSizes","isImage","React","Thumbnail","baseClass","FileCell","cellData","filename","collectionConfig","field","rowData","fieldPreviewAllowed","displayPreview","undefined","previewAllowed","upload","isFileImage","mimeType","fileSrc","thumbnailURL","url","sizes","width","uploadConfig","imageCacheTag","cacheTags","updatedAt","_jsxs","className","_jsx","collectionSlug","slug","doc","size","String","_Fragment"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/File/index.tsx"],"sourcesContent":["'use client'\nimport type {\n  ClientCollectionConfig,\n  DefaultCellComponentProps,\n  TextFieldClient,\n  UploadFieldClient,\n} from 'payload'\n\nimport { getBestFitFromSizes, isImage } from 'payload/shared'\nimport React from 'react'\n\nimport './index.css'\nimport { Thumbnail } from '../../../../Thumbnail/index.js'\n\nconst baseClass = 'file'\n\nexport interface FileCellProps\n  extends DefaultCellComponentProps<TextFieldClient | UploadFieldClient> {\n  readonly collectionConfig: ClientCollectionConfig\n}\n\nexport const FileCell: React.FC<FileCellProps> = ({\n  cellData: filename,\n  collectionConfig,\n  field,\n  rowData,\n}) => {\n  const fieldPreviewAllowed = 'displayPreview' in field ? field.displayPreview : undefined\n  const previewAllowed = fieldPreviewAllowed ?? collectionConfig.upload?.displayPreview ?? true\n\n  if (previewAllowed) {\n    const isFileImage = isImage(rowData?.mimeType)\n    let fileSrc: string | undefined = isFileImage\n      ? rowData?.thumbnailURL || rowData?.url\n      : rowData?.thumbnailURL\n\n    if (isFileImage) {\n      fileSrc = getBestFitFromSizes({\n        sizes: rowData?.sizes,\n        thumbnailURL: rowData?.thumbnailURL,\n        url: rowData?.url,\n        width: rowData?.width,\n      })\n    }\n\n    const uploadConfig = collectionConfig?.upload\n    const imageCacheTag = uploadConfig?.cacheTags && rowData?.updatedAt\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={fileSrc}\n          imageCacheTag={imageCacheTag}\n          size=\"small\"\n          uploadConfig={uploadConfig}\n        />\n        <span className={`${baseClass}__filename`}>{String(filename)}</span>\n      </div>\n    )\n  } else {\n    return <>{String(filename)}</>\n  }\n}\n"],"mappings":"AAAA;;;AAQA,SAASA,mBAAmB,EAAEC,OAAO,QAAQ;AAC7C,OAAOC,KAAA,MAAW;AAElB,OAAO;AACP,SAASC,SAAS,QAAQ;AAE1B,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,QAAA,GAAoCA,CAAC;EAChDC,QAAA,EAAUC,QAAQ;EAClBC,gBAAgB;EAChBC,KAAK;EACLC;AAAO,CACR;EACC,MAAMC,mBAAA,GAAsB,oBAAoBF,KAAA,GAAQA,KAAA,CAAMG,cAAc,GAAGC,SAAA;EAC/E,MAAMC,cAAA,GAAiBH,mBAAA,IAAuBH,gBAAA,CAAiBO,MAAM,EAAEH,cAAA,IAAkB;EAEzF,IAAIE,cAAA,EAAgB;IAClB,MAAME,WAAA,GAAcf,OAAA,CAAQS,OAAA,EAASO,QAAA;IACrC,IAAIC,OAAA,GAA8BF,WAAA,GAC9BN,OAAA,EAASS,YAAA,IAAgBT,OAAA,EAASU,GAAA,GAClCV,OAAA,EAASS,YAAA;IAEb,IAAIH,WAAA,EAAa;MACfE,OAAA,GAAUlB,mBAAA,CAAoB;QAC5BqB,KAAA,EAAOX,OAAA,EAASW,KAAA;QAChBF,YAAA,EAAcT,OAAA,EAASS,YAAA;QACvBC,GAAA,EAAKV,OAAA,EAASU,GAAA;QACdE,KAAA,EAAOZ,OAAA,EAASY;MAClB;IACF;IAEA,MAAMC,YAAA,GAAef,gBAAA,EAAkBO,MAAA;IACvC,MAAMS,aAAA,GAAgBD,YAAA,EAAcE,SAAA,IAAaf,OAAA,EAASgB,SAAA;IAE1D,oBACEC,KAAA,CAAC;MAAIC,SAAA,EAAWxB,SAAA;8BACdyB,IAAA,CAAC1B,SAAA;QACCyB,SAAA,EAAW,GAAGxB,SAAA,aAAsB;QACpC0B,cAAA,EAAgBtB,gBAAA,EAAkBuB,IAAA;QAClCC,GAAA,EAAK;UACH,GAAGtB,OAAO;UACVH;QACF;QACAW,OAAA,EAASA,OAAA;QACTM,aAAA,EAAeA,aAAA;QACfS,IAAA,EAAK;QACLV,YAAA,EAAcA;uBAEhBM,IAAA,CAAC;QAAKD,SAAA,EAAW,GAAGxB,SAAA,YAAqB;kBAAG8B,MAAA,CAAO3B,QAAA;;;EAGzD,OAAO;IACL,oBAAOsB,IAAA,CAAAM,SAAA;gBAAGD,MAAA,CAAO3B,QAAA;;EACnB;AACF","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/Hierarchy/index.css

@@ -0,0 +1,17 @@
+@layer payload-default {
+  .hierarchy-cell {
+    display: flex;
+    align-items: center;
+  }
+
+  .hierarchy-cell__pill {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacer-2);
+
+    &:hover {
+      background-color: var(--color-bg-hover);
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { DefaultCellComponentProps, RelationshipFieldClient } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type HierarchyCellProps = DefaultCellComponentProps<RelationshipFieldClient>;
 export declare const HierarchyCell: React.FC<HierarchyCellProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Hierarchy/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAEjF,OAAO,KAA4D,MAAM,OAAO,CAAA;AAchF,OAAO,cAAc,CAAA;AAKrB,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CAAC,uBAAuB,CAAC,CAAA;AAEnF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0MtD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Hierarchy/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAEjF,OAAO,KAA4D,MAAM,OAAO,CAAA;AAchF,OAAO,aAAa,CAAA;AAKpB,MAAM,MAAM,kBAAkB,GAAG,yBAAyB,CAAC,uBAAuB,CAAC,CAAA;AAEnF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0MtD,CAAA"}

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

@@ -12,7 +12,7 @@ import { formatDocTitle } from '../../../../../utilities/formatDocTitle/index.js
 import { Button } from '../../../../Button/index.js';
 import { useHierarchyDrawer } from '../../../../Hierarchy/Drawer/useHierarchyDrawer.js';
 import { useListRelationships } from '../../../RelationshipProvider/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'hierarchy-cell';
 export const HierarchyCell = ({
   cellData: cellDataFromProps,