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

package/dist/elements/LivePreview/Toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useDraggable","React","DragHandleIcon","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","$","toolbarPosition","t0","Symbol","for","id","attributes","listeners","setNodeRef","transform","t1","t2","x","t3","y","t4","_jsxs","className","join","style","left","top","undefined","children","_jsx","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"sources":["../../../../src/elements/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <DragHandleIcon />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  {\n    draggable?: boolean\n  } & EditViewProps\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,gBAAA,GAA4CC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAChD;IAAAU;EAAA,IAA4BN,qBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAE0CF,EAAA;MAAAG,EAAA,EAChE;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC;EAAA,IAAyDjB,YAAA,CAAaU,EAEtE;EAAA,IAAAQ,EAAA;EAAA,IAAAV,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAIeM,EAAA,IAAAb,SAAA,EAAY,GAAAA,SAAA,aAAyB;IAACG,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAEzC,MAAAW,EAAA,MAAGV,eAAA,CAAAW,CAAA,IAAqB;EACzB,MAAAC,EAAA,MAAGZ,eAAA,CAAAa,CAAA,IAAqB;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAD,KAAA,IAAAC,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAS,SAAA;IAJjCM,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYP,EAAsC,CAAAQ,IAAA,CAAM;MAAAC,KAAA;QAAAC,IAAA,EAE/CT,EAAwB;QAAAU,GAAA,EACzBR,EAAwB;QAAA,IACzBJ,SAAA;UAAAA,SAAA,EAEaA,SAAA,GACP,eAAeA,SAAA,EAAAG,CAAA,KAAgB,OAAQH,SAAA,EAAAK,CAAA,KAAgB,QAAS,GAAAQ;QAChE,MAEJ;MAAA;MAAAC,QAAA,GAGRC,IAAA,CAAC;QAAA,GACKjB,SAAS;QAAA,GACTD,UAAU;QAAAW,SAAA,EACH,GAAApB,SAAA,eAA2B;QAAA4B,GAAA,EACjCjB,UAAA;QAAAkB,IAAA,EACA;QAAAH,QAAA,EAELC,IAAA,CAAA9B,cAAA,IAAC;MAAA,C,GAEH8B,IAAA,CAAA5B,eAAA;QAAA,GAAqBG;MAAK,C;;;;;;;;;;;;;SAvB5BgB,E;CA0BJ;AAEA,MAAMY,aAAA,GAA0C5B,KAAA;EAC9C,oBACEyB,IAAA,CAAC;IAAIP,SAAA,EAAW,CAACpB,SAAA,EAAW,GAAGA,SAAA,UAAmB,CAAC,CAACqB,IAAI,CAAC;cACvD,aAAAM,IAAA,CAAC5B,eAAA;MAAiB,GAAGG;;;AAG3B;AAEA,OAAO,MAAM6B,kBAAA,GAIR7B,KAAA;EACH,MAAM;IAAE8B;EAAS,CAAE,GAAG9B,KAAA;EAEtB,IAAI8B,SAAA,EAAW;IACb,oBAAOL,IAAA,CAAC1B,gBAAA;MAAkB,GAAGC;;EAC/B;EAEA,oBAAOyB,IAAA,CAACG,aAAA;IAAe,GAAG5B;;AAC5B","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useDraggable","React","AlignJustifiedIcon","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","$","toolbarPosition","t0","Symbol","for","id","attributes","listeners","setNodeRef","transform","t1","t2","x","t3","y","t4","_jsxs","className","join","style","left","top","undefined","children","_jsx","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"sources":["../../../../src/elements/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <AlignJustifiedIcon />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  {\n    draggable?: boolean\n  } & EditViewProps\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,gBAAA,GAA4CC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAChD;IAAAU;EAAA,IAA4BN,qBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAE0CF,EAAA;MAAAG,EAAA,EAChE;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC;EAAA,IAAyDjB,YAAA,CAAaU,EAEtE;EAAA,IAAAQ,EAAA;EAAA,IAAAV,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAIeM,EAAA,IAAAb,SAAA,EAAY,GAAAA,SAAA,aAAyB;IAACG,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAEzC,MAAAW,EAAA,MAAGV,eAAA,CAAAW,CAAA,IAAqB;EACzB,MAAAC,EAAA,MAAGZ,eAAA,CAAAa,CAAA,IAAqB;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAD,KAAA,IAAAC,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAS,SAAA;IAJjCM,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYP,EAAsC,CAAAQ,IAAA,CAAM;MAAAC,KAAA;QAAAC,IAAA,EAE/CT,EAAwB;QAAAU,GAAA,EACzBR,EAAwB;QAAA,IACzBJ,SAAA;UAAAA,SAAA,EAEaA,SAAA,GACP,eAAeA,SAAA,EAAAG,CAAA,KAAgB,OAAQH,SAAA,EAAAK,CAAA,KAAgB,QAAS,GAAAQ;QAChE,MAEJ;MAAA;MAAAC,QAAA,GAGRC,IAAA,CAAC;QAAA,GACKjB,SAAS;QAAA,GACTD,UAAU;QAAAW,SAAA,EACH,GAAApB,SAAA,eAA2B;QAAA4B,GAAA,EACjCjB,UAAA;QAAAkB,IAAA,EACA;QAAAH,QAAA,EAELC,IAAA,CAAA9B,kBAAA,IAAC;MAAA,C,GAEH8B,IAAA,CAAA5B,eAAA;QAAA,GAAqBG;MAAK,C;;;;;;;;;;;;;SAvB5BgB,E;CA0BJ;AAEA,MAAMY,aAAA,GAA0C5B,KAAA;EAC9C,oBACEyB,IAAA,CAAC;IAAIP,SAAA,EAAW,CAACpB,SAAA,EAAW,GAAGA,SAAA,UAAmB,CAAC,CAACqB,IAAI,CAAC;cACvD,aAAAM,IAAA,CAAC5B,eAAA;MAAiB,GAAGG;;;AAG3B;AAEA,OAAO,MAAM6B,kBAAA,GAIR7B,KAAA;EACH,MAAM;IAAE8B;EAAS,CAAE,GAAG9B,KAAA;EAEtB,IAAI8B,SAAA,EAAW;IACb,oBAAOL,IAAA,CAAC1B,gBAAA;MAAkB,GAAGC;;EAC/B;EAEA,oBAAOyB,IAAA,CAACG,aAAA;IAAe,GAAG5B;;AAC5B","ignoreList":[]}

package/dist/elements/LivePreview/ToolbarArea/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const ToolbarArea: React.FC<{
     children: React.ReactNode;
 }>;

package/dist/elements/LivePreview/ToolbarArea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAYA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAYA,CAAA"}

package/dist/elements/LivePreview/ToolbarArea/index.js

@@ -4,7 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDroppable } from '@dnd-kit/core';
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'toolbar-area';
 export const ToolbarArea = props => {
   const $ = _c(4);

package/dist/elements/LivePreview/ToolbarArea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","baseClass","ToolbarArea","props","$","children","t0","Symbol","for","id","setNodeRef","t1","_jsx","className","ref"],"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO;EAAA,IAAqBF,KAAA;EAAA,IAAAG,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAEeF,EAAA;MAAAG,EAAA,EAC9B;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM;EAAA,IAAuBX,YAAA,CAAaO,EAEpC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAM,UAAA;IAGEC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,GAAA,EAA+BJ,UAAA;MAAAL;IAAA,C;;;;;;;SAAhCM,E;CAIJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","useDroppable","React","baseClass","ToolbarArea","props","$","children","t0","Symbol","for","id","setNodeRef","t1","_jsx","className","ref"],"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACH;IAAAO;EAAA,IAAqBF,KAAA;EAAA,IAAAG,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAEeF,EAAA;MAAAG,EAAA,EAC9B;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM;EAAA,IAAuBX,YAAA,CAAaO,EAEpC;EAAA,IAAAK,EAAA;EAAA,IAAAP,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAM,UAAA;IAGEC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,GAAA,EAA+BJ,UAAA;MAAAL;IAAA,C;;;;;;;SAAhCM,E;CAIJ","ignoreList":[]}

package/dist/elements/LivePreview/Window/index.css

@@ -0,0 +1,57 @@
+@layer payload-default {
+  .collection-edit:has(.live-preview-window--is-expanded) {
+    .document-fields {
+      width: 0;
+    }
+  }
+
+  .live-preview-window {
+    background-color: var(--color-bg);
+    display: none;
+    width: 60%;
+    flex-shrink: 0;
+    flex-grow: 0;
+    position: sticky;
+    top: var(--doc-controls-height);
+    height: calc(100vh - var(--doc-controls-height));
+    overflow: hidden;
+  }
+
+  .live-preview-window--is-live-previewing {
+    display: block;
+    border-left: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .live-preview-window--is-expanded {
+    width: 100%;
+    border-left: none;
+  }
+
+  .live-preview-window__wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: flex-start;
+  }
+
+  .live-preview-window__main {
+    flex-grow: 1;
+    height: 100%;
+    width: 100%;
+  }
+
+  .live-preview-window--has-breakpoint .live-preview-iframe {
+    border: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .live-preview-window--has-breakpoint .live-preview-window__main {
+    padding: var(--spacer-3);
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 1024px) {
+    .live-preview-window {
+      width: 100%;
+    }
+  }
+}

package/dist/elements/LivePreview/Window/index.d.ts

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

package/dist/elements/LivePreview/Window/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAoB,MAAM,OAAO,CAAA;AAUxC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0IrD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAAiC,MAAM,OAAO,CAAA;AAUrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+HrD,CAAA"}

package/dist/elements/LivePreview/Window/index.js

@@ -2,7 +2,7 @@
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { reduceFieldsToValues } from 'payload/shared';
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useAllFormFields } from '../../../forms/Form/context.js';
 import { useDocumentEvents } from '../../../providers/DocumentEvents/index.js';
 import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
@@ -11,17 +11,18 @@ import { useLocale } from '../../../providers/Locale/index.js';
 import { IframeLoader } from '../../IframeLoader/index.js';
 import { DeviceContainer } from '../Device/index.js';
 import { LivePreviewToolbar } from '../Toolbar/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'live-preview-window';
 export const LivePreviewWindow = props => {
   const {
     appIsReady,
     breakpoint,
     iframeRef,
+    isExpanded,
     isLivePreviewing,
+    lastReadyAt,
     loadedURL,
     popupRef,
-    previewWindowType,
     setLoadedURL,
     shouldRenderIframe,
     url,
@@ -37,66 +38,53 @@ export const LivePreviewWindow = props => {
     collectionSlug,
     globalSlug
   } = useDocumentInfo();
+  const postMessageToTargets = useCallback(message => {
+    if (popupRef.current && !popupRef.current.closed) {
+      popupRef.current.postMessage(message, url);
+    }
+    if (iframeRef.current) {
+      iframeRef.current.contentWindow?.postMessage(message, url);
+    }
+  }, [iframeRef, popupRef, url]);
+  const hasActiveTarget = isLivePreviewing || popupRef.current && !popupRef.current.closed;
   /**
   * For client-side apps, send data through `window.postMessage`
   * The preview could either be an iframe embedded on the page
   * Or it could be a separate popup window
-  * We need to transmit data to both accordingly
+  * Also fires when a preview signals ready (lastReadyAt) to sync initial state
   */
   useEffect(() => {
-    if (!isLivePreviewing || !appIsReady) {
+    if (!hasActiveTarget || !appIsReady || !formState) {
       return;
     }
-    // For performance, do not reduce fields to values until after the iframe or popup has loaded
-    if (formState) {
-      const values = reduceFieldsToValues(formState, true);
-      if (!values.id) {
-        values.id = id;
-      }
-      const message = {
-        type: 'payload-live-preview',
-        collectionSlug,
-        data: values,
-        externallyUpdatedRelationship: mostRecentUpdate,
-        globalSlug,
-        locale: locale.code
-      };
-      // Post message to external popup window
-      if (previewWindowType === 'popup' && popupRef.current) {
-        popupRef.current.postMessage(message, url);
-      }
-      // Post message to embedded iframe
-      if (previewWindowType === 'iframe' && iframeRef.current) {
-        iframeRef.current.contentWindow?.postMessage(message, url);
-      }
+    const values = reduceFieldsToValues(formState, true);
+    if (!values.id) {
+      values.id = id;
     }
-  }, [formState, url, collectionSlug, globalSlug, id, previewWindowType, popupRef, appIsReady, iframeRef, mostRecentUpdate, locale, isLivePreviewing, loadedURL]);
+    postMessageToTargets({
+      type: 'payload-live-preview',
+      collectionSlug,
+      data: values,
+      externallyUpdatedRelationship: mostRecentUpdate,
+      globalSlug,
+      locale: locale?.code
+    });
+  }, [formState, collectionSlug, globalSlug, id, appIsReady, mostRecentUpdate, locale, hasActiveTarget, loadedURL, lastReadyAt, postMessageToTargets]);
   /**
   * To support SSR, we transmit a `window.postMessage` event without a payload
   * This is because the event will ultimately trigger a server-side roundtrip
   * i.e., save, save draft, autosave, etc. will fire `router.refresh()`
   */
   useEffect(() => {
-    if (!isLivePreviewing || !appIsReady) {
+    if (!hasActiveTarget || !appIsReady) {
       return;
     }
-    const message_0 = {
+    postMessageToTargets({
       type: 'payload-document-event'
-    };
-    // Post message to external popup window
-    if (previewWindowType === 'popup' && popupRef.current) {
-      popupRef.current.postMessage(message_0, url);
-    }
-    // Post message to embedded iframe
-    if (previewWindowType === 'iframe' && iframeRef.current) {
-      iframeRef.current.contentWindow?.postMessage(message_0, url);
-    }
-  }, [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url, isLivePreviewing, appIsReady]);
-  if (previewWindowType !== 'iframe') {
-    return null;
-  }
+    });
+  }, [mostRecentUpdate, hasActiveTarget, appIsReady, postMessageToTargets]);
   return /*#__PURE__*/_jsx("div", {
-    className: [baseClass, isLivePreviewing && `${baseClass}--is-live-previewing`, breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`].filter(Boolean).join(' '),
+    className: [baseClass, isLivePreviewing && `${baseClass}--is-live-previewing`, isExpanded && `${baseClass}--is-expanded`, breakpoint && breakpoint !== 'responsive' && breakpoint !== 'custom' && `${baseClass}--has-breakpoint`].filter(Boolean).join(' '),
     children: /*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__wrapper`,
       children: [/*#__PURE__*/_jsx(LivePreviewToolbar, {

package/dist/elements/LivePreview/Window/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["reduceFieldsToValues","React","useEffect","useAllFormFields","useDocumentEvents","useDocumentInfo","useLivePreviewContext","useLocale","IframeLoader","DeviceContainer","LivePreviewToolbar","baseClass","LivePreviewWindow","props","appIsReady","breakpoint","iframeRef","isLivePreviewing","loadedURL","popupRef","previewWindowType","setLoadedURL","shouldRenderIframe","url","zoom","locale","mostRecentUpdate","formState","id","collectionSlug","globalSlug","values","message","type","data","externallyUpdatedRelationship","code","current","postMessage","contentWindow","_jsx","className","filter","Boolean","join","_jsxs","onLoad","ref","src","style","transform","undefined"],"sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useEffect } from 'react'\n\nimport { useAllFormFields } from '../../../forms/Form/context.js'\nimport { useDocumentEvents } from '../../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { IframeLoader } from '../../IframeLoader/index.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreviewWindow: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    breakpoint,\n    iframeRef,\n    isLivePreviewing,\n    loadedURL,\n    popupRef,\n    previewWindowType,\n    setLoadedURL,\n    shouldRenderIframe,\n    url,\n    zoom,\n  } = useLivePreviewContext()\n\n  const locale = useLocale()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const [formState] = useAllFormFields()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  /**\n   * For client-side apps, send data through `window.postMessage`\n   * The preview could either be an iframe embedded on the page\n   * Or it could be a separate popup window\n   * We need to transmit data to both accordingly\n   */\n  useEffect(() => {\n    if (!isLivePreviewing || !appIsReady) {\n      return\n    }\n\n    // For performance, do not reduce fields to values until after the iframe or popup has loaded\n    if (formState) {\n      const values = reduceFieldsToValues(formState, true)\n\n      if (!values.id) {\n        values.id = id\n      }\n\n      const message = {\n        type: 'payload-live-preview',\n        collectionSlug,\n        data: values,\n        externallyUpdatedRelationship: mostRecentUpdate,\n        globalSlug,\n        locale: locale.code,\n      }\n\n      // Post message to external popup window\n      if (previewWindowType === 'popup' && popupRef.current) {\n        popupRef.current.postMessage(message, url)\n      }\n\n      // Post message to embedded iframe\n      if (previewWindowType === 'iframe' && iframeRef.current) {\n        iframeRef.current.contentWindow?.postMessage(message, url)\n      }\n    }\n  }, [\n    formState,\n    url,\n    collectionSlug,\n    globalSlug,\n    id,\n    previewWindowType,\n    popupRef,\n    appIsReady,\n    iframeRef,\n    mostRecentUpdate,\n    locale,\n    isLivePreviewing,\n    loadedURL,\n  ])\n\n  /**\n   * To support SSR, we transmit a `window.postMessage` event without a payload\n   * This is because the event will ultimately trigger a server-side roundtrip\n   * i.e., save, save draft, autosave, etc. will fire `router.refresh()`\n   */\n  useEffect(() => {\n    if (!isLivePreviewing || !appIsReady) {\n      return\n    }\n\n    const message = {\n      type: 'payload-document-event',\n    }\n\n    // Post message to external popup window\n    if (previewWindowType === 'popup' && popupRef.current) {\n      popupRef.current.postMessage(message, url)\n    }\n\n    // Post message to embedded iframe\n    if (previewWindowType === 'iframe' && iframeRef.current) {\n      iframeRef.current.contentWindow?.postMessage(message, url)\n    }\n  }, [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url, isLivePreviewing, appIsReady])\n\n  if (previewWindowType !== 'iframe') {\n    return null\n  }\n\n  return (\n    <div\n      className={[\n        baseClass,\n        isLivePreviewing && `${baseClass}--is-live-previewing`,\n        breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__wrapper`}>\n        <LivePreviewToolbar {...props} />\n        <div className={`${baseClass}__main`}>\n          <DeviceContainer>\n            {shouldRenderIframe && (\n              <IframeLoader\n                className=\"live-preview-iframe\"\n                id=\"live-preview-iframe\"\n                onLoad={() => {\n                  setLoadedURL(url)\n                }}\n                ref={iframeRef}\n                src={url}\n                style={{\n                  transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n                }}\n              />\n            )}\n          </DeviceContainer>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["reduceFieldsToValues","React","useCallback","useEffect","useAllFormFields","useDocumentEvents","useDocumentInfo","useLivePreviewContext","useLocale","IframeLoader","DeviceContainer","LivePreviewToolbar","baseClass","LivePreviewWindow","props","appIsReady","breakpoint","iframeRef","isExpanded","isLivePreviewing","lastReadyAt","loadedURL","popupRef","setLoadedURL","shouldRenderIframe","url","zoom","locale","mostRecentUpdate","formState","id","collectionSlug","globalSlug","postMessageToTargets","message","current","closed","postMessage","contentWindow","hasActiveTarget","values","type","data","externallyUpdatedRelationship","code","_jsx","className","filter","Boolean","join","_jsxs","onLoad","ref","src","style","transform","undefined"],"sources":["../../../../src/elements/LivePreview/Window/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useAllFormFields } from '../../../forms/Form/context.js'\nimport { useDocumentEvents } from '../../../providers/DocumentEvents/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { IframeLoader } from '../../IframeLoader/index.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.css'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreviewWindow: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    breakpoint,\n    iframeRef,\n    isExpanded,\n    isLivePreviewing,\n    lastReadyAt,\n    loadedURL,\n    popupRef,\n    setLoadedURL,\n    shouldRenderIframe,\n    url,\n    zoom,\n  } = useLivePreviewContext()\n\n  const locale = useLocale()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const [formState] = useAllFormFields()\n  const { id, collectionSlug, globalSlug } = useDocumentInfo()\n\n  const postMessageToTargets = useCallback(\n    (message: object) => {\n      if (popupRef.current && !popupRef.current.closed) {\n        popupRef.current.postMessage(message, url)\n      }\n\n      if (iframeRef.current) {\n        iframeRef.current.contentWindow?.postMessage(message, url)\n      }\n    },\n    [iframeRef, popupRef, url],\n  )\n\n  const hasActiveTarget = isLivePreviewing || (popupRef.current && !popupRef.current.closed)\n\n  /**\n   * For client-side apps, send data through `window.postMessage`\n   * The preview could either be an iframe embedded on the page\n   * Or it could be a separate popup window\n   * Also fires when a preview signals ready (lastReadyAt) to sync initial state\n   */\n  useEffect(() => {\n    if (!hasActiveTarget || !appIsReady || !formState) {\n      return\n    }\n\n    const values = reduceFieldsToValues(formState, true)\n\n    if (!values.id) {\n      values.id = id\n    }\n\n    postMessageToTargets({\n      type: 'payload-live-preview',\n      collectionSlug,\n      data: values,\n      externallyUpdatedRelationship: mostRecentUpdate,\n      globalSlug,\n      locale: locale?.code,\n    })\n  }, [\n    formState,\n    collectionSlug,\n    globalSlug,\n    id,\n    appIsReady,\n    mostRecentUpdate,\n    locale,\n    hasActiveTarget,\n    loadedURL,\n    lastReadyAt,\n    postMessageToTargets,\n  ])\n\n  /**\n   * To support SSR, we transmit a `window.postMessage` event without a payload\n   * This is because the event will ultimately trigger a server-side roundtrip\n   * i.e., save, save draft, autosave, etc. will fire `router.refresh()`\n   */\n  useEffect(() => {\n    if (!hasActiveTarget || !appIsReady) {\n      return\n    }\n\n    postMessageToTargets({ type: 'payload-document-event' })\n  }, [mostRecentUpdate, hasActiveTarget, appIsReady, postMessageToTargets])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        isLivePreviewing && `${baseClass}--is-live-previewing`,\n        isExpanded && `${baseClass}--is-expanded`,\n        breakpoint &&\n          breakpoint !== 'responsive' &&\n          breakpoint !== 'custom' &&\n          `${baseClass}--has-breakpoint`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={`${baseClass}__wrapper`}>\n        <LivePreviewToolbar {...props} />\n        <div className={`${baseClass}__main`}>\n          <DeviceContainer>\n            {shouldRenderIframe && (\n              <IframeLoader\n                className=\"live-preview-iframe\"\n                id=\"live-preview-iframe\"\n                onLoad={() => {\n                  setLoadedURL(url)\n                }}\n                ref={iframeRef}\n                src={url}\n                style={{\n                  transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n                }}\n              />\n            )}\n          </DeviceContainer>\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LoadMoreRow/index.css

@@ -0,0 +1,34 @@
+@layer payload-default {
+  .load-more-row {
+    display: flex;
+    align-items: center;
+    gap: var(--stroke-width-medium);
+  }
+
+  .load-more-row__text {
+    margin: 0;
+    color: var(--color-text-secondary);
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .load-more-row__button.btn {
+    background-color: transparent;
+    padding: 0;
+    color: var(--color-text);
+    font-size: inherit;
+    text-decoration: underline;
+  }
+
+  .load-more-row__button.btn:hover:not(.btn--disabled) {
+    color: var(--color-text-secondary);
+    background-color: transparent;
+  }
+
+  .load-more-row__button.btn:active:not(.btn--disabled) {
+    color: var(--color-text);
+    background-color: transparent;
+  }
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import './index.css';
+export type LoadMoreRowProps = {
+    className?: string;
+    currentCount: number;
+    hasMore: boolean;
+    isLoading?: boolean;
+    /** Custom button element - if provided, onLoadMore and isLoading are ignored */
+    loadMoreButton?: React.ReactNode;
+    onLoadMore?: () => void;
+    style?: React.CSSProperties;
+    totalDocs: number;
+};
+export declare const LoadMoreRow: React.FC<LoadMoreRowProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LoadMoreRow/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,gFAAgF;IAChF,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsClD,CAAA"}

package/dist/elements/LoadMoreRow/index.js

@@ -0,0 +1,71 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+import './index.css';
+const baseClass = 'load-more-row';
+export const LoadMoreRow = t0 => {
+  const $ = _c(12);
+  const {
+    className,
+    currentCount,
+    hasMore,
+    isLoading: t1,
+    loadMoreButton,
+    onLoadMore,
+    style,
+    totalDocs
+  } = t0;
+  const isLoading = t1 === undefined ? false : t1;
+  const {
+    t
+  } = useTranslation();
+  let t2;
+  if ($[0] !== className || $[1] !== currentCount || $[2] !== hasMore || $[3] !== isLoading || $[4] !== loadMoreButton || $[5] !== onLoadMore || $[6] !== style || $[7] !== t || $[8] !== totalDocs) {
+    const defaultButton = onLoadMore && _jsx(Button, {
+      buttonStyle: "ghost",
+      className: `${baseClass}__button`,
+      disabled: isLoading,
+      margin: false,
+      onClick: onLoadMore,
+      children: isLoading ? t("general:loading") : t("general:loadMore")
+    });
+    let t3;
+    if ($[10] !== className) {
+      t3 = [baseClass, className].filter(Boolean);
+      $[10] = className;
+      $[11] = t3;
+    } else {
+      t3 = $[11];
+    }
+    t2 = _jsx("div", {
+      className: t3.join(" "),
+      style,
+      children: _jsx("p", {
+        className: `${baseClass}__text`,
+        children: hasMore ? _jsxs(_Fragment, {
+          children: ["Showing ", currentCount, " of ", totalDocs, " \u2014 ", loadMoreButton || defaultButton]
+        }) : _jsxs(_Fragment, {
+          children: ["Showing ", totalDocs, " of ", totalDocs]
+        })
+      })
+    });
+    $[0] = className;
+    $[1] = currentCount;
+    $[2] = hasMore;
+    $[3] = isLoading;
+    $[4] = loadMoreButton;
+    $[5] = onLoadMore;
+    $[6] = style;
+    $[7] = t;
+    $[8] = totalDocs;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  return t2;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","Button","baseClass","LoadMoreRow","t0","$","className","currentCount","hasMore","isLoading","t1","loadMoreButton","onLoadMore","style","totalDocs","undefined","t","t2","defaultButton","_jsx","buttonStyle","disabled","margin","onClick","children","t3","filter","Boolean","join","_jsxs","_Fragment"],"sources":["../../../src/elements/LoadMoreRow/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport './index.css'\n\nconst baseClass = 'load-more-row'\n\nexport type LoadMoreRowProps = {\n  className?: string\n  currentCount: number\n  hasMore: boolean\n  isLoading?: boolean\n  /** Custom button element - if provided, onLoadMore and isLoading are ignored */\n  loadMoreButton?: React.ReactNode\n  onLoadMore?: () => void\n  style?: React.CSSProperties\n  totalDocs: number\n}\n\nexport const LoadMoreRow: React.FC<LoadMoreRowProps> = ({\n  className,\n  currentCount,\n  hasMore,\n  isLoading = false,\n  loadMoreButton,\n  onLoadMore,\n  style,\n  totalDocs,\n}) => {\n  const { t } = useTranslation()\n  const defaultButton = onLoadMore && (\n    <Button\n      buttonStyle=\"ghost\"\n      className={`${baseClass}__button`}\n      disabled={isLoading}\n      margin={false}\n      onClick={onLoadMore}\n    >\n      {isLoading ? t('general:loading') : t('general:loadMore')}\n    </Button>\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} style={style}>\n      <p className={`${baseClass}__text`}>\n        {hasMore ? (\n          <>\n            Showing {currentCount} of {totalDocs} — {loadMoreButton || defaultButton}\n          </>\n        ) : (\n          <>\n            Showing {totalDocs} of {totalDocs}\n          </>\n        )}\n      </p>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAEA,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAclB,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,SAAA;IAAAC,YAAA;IAAAC,OAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC,cAAA;IAAAC,UAAA;IAAAC,KAAA;IAAAC;EAAA,IAAAV,EASvD;EALC,MAAAK,SAAA,GAAAC,EAAiB,KAAAK,SAAA,WAAjBL,EAAiB;EAMjB;IAAAM;EAAA,IAAchB,cAAA;EAAA,IAAAiB,EAAA;EAAA,IAAAZ,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAE,YAAA,IAAAF,CAAA,QAAAG,OAAA,IAAAH,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAAM,cAAA,IAAAN,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAQ,KAAA,IAAAR,CAAA,QAAAW,CAAA,IAAAX,CAAA,QAAAS,SAAA;IACd,MAAAI,aAAA,GAAsBN,UAAA,IACpBO,IAAA,CAAAlB,MAAA;MAAAmB,WAAA,EACc;MAAAd,SAAA,EACD,GAAAJ,SAAA,UAAsB;MAAAmB,QAAA,EACvBZ,SAAA;MAAAa,MAAA;MAAAC,OAAA,EAEDX,UAAA;MAAAY,QAAA,EAERf,SAAA,GAAYO,CAAA,CAAE,qBAAqBA,CAAA,CAAE;IAAA,C;;;MAKxBS,EAAA,IAAAvB,SAAA,EAAYI,SAAA,EAAAoB,MAAA,CAAAC,OAAkB;MAAAtB,CAAA,OAAAC,SAAA;MAAAD,CAAA,OAAAoB,EAAA;IAAA;MAAAA,EAAA,GAAApB,CAAA;IAAA;IAA9CY,EAAA,GAAAE,IAAA,CAAC;MAAAb,SAAA,EAAemB,EAA8B,CAAAG,IAAA,CAAc;MAAAf,KAAA;MAAAW,QAAA,EAC1DL,IAAA,CAAC;QAAAb,SAAA,EAAa,GAAAJ,SAAA,QAAoB;QAAAsB,QAAA,EAC/BhB,OAAA,GACCqB,KAAA,CAAAC,SAAA;UAAAN,QAAA,GAAE,YACSjB,YAAA,EAAa,QAAKO,SAAA,EAAU,YAAIH,cAAA,IAAkBO,aAAA;QAAA,C,IAG7DW,KAAA,CAAAC,SAAA;UAAAN,QAAA,GAAE,YACSV,SAAA,EAAU,QAAKA,SAAA;QAAA,C;;;;;;;;;;;;;;;;SARhCG,E;CAcJ","ignoreList":[]}

package/dist/elements/Loading/index.css

@@ -0,0 +1,90 @@
+@layer payload-default {
+  .loading-overlay {
+    isolation: isolate;
+    height: 100%;
+    width: 100%;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    pointer-events: none;
+    z-index: calc(var(--z-status) + 1);
+    transition-property: left, width;
+    transition: 250ms ease;
+  }
+
+  .loading-overlay--entering {
+    opacity: 1;
+    animation: fade-in ease;
+    pointer-events: all;
+  }
+
+  .loading-overlay--exiting {
+    opacity: 0;
+    animation: fade-out ease;
+  }
+
+  /*
+   * Drawer variant: the overlay is just a calm, opaque backdrop shown while the
+   * drawer loads. It appears instantly (no fade-in ramp); the graceful reveal is
+   * handled by the content fading in once it's ready (.drawer__fade-in). The
+   * spinner is held back so quick (nested) drawer loads never flash it.
+   */
+  .loading-overlay--drawer::after {
+    opacity: 1;
+    background-color: var(--color-bg);
+  }
+
+  .loading-overlay--drawer.loading-overlay--entering {
+    animation: none;
+    opacity: 1;
+  }
+
+  .loading-overlay--drawer .spinner {
+    opacity: 0;
+    animation: fade-in 200ms ease 450ms forwards;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .loading-overlay--drawer .spinner {
+      animation: none;
+      opacity: 1;
+    }
+  }
+
+  .loading-overlay::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-bg);
+    opacity: 0.85;
+    z-index: -1;
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js';
-import './index.scss';
+import './index.css';
 type LoadingOverlayProps = {
     animationDuration?: string;
     loadingText?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Loading/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAKjF,OAAO,cAAc,CAAA;AAIrB,KAAK,mBAAmB,GAAG;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgCxD,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA0BvE,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IACvC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA0B5E,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Loading/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAMjF,OAAO,aAAa,CAAA;AAIpB,KAAK,mBAAmB,GAAG;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsBxD,CAAA;AAED,MAAM,MAAM,4BAA4B,GAAG;IACzC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AACD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA0BvE,CAAA;AAED,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IACvC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,mBAAmB,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA0B5E,CAAA"}

package/dist/elements/Loading/index.js

@@ -1,73 +1,30 @@
 'use client';
 
 import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js';
+import { Spinner } from '../../elements/Spinner/index.js';
 import { useFormProcessing } from '../../forms/Form/context.js';
 import { useTranslation } from '../../providers/Translation/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'loading-overlay';
-export const LoadingOverlay = t0 => {
-  const $ = _c(8);
-  const {
-    animationDuration,
-    loadingText,
-    overlayType,
-    show: t1
-  } = t0;
-  const show = t1 === undefined ? true : t1;
-  const {
-    t
-  } = useTranslation();
-  const t2 = show ? `${baseClass}--entering` : `${baseClass}--exiting`;
-  const t3 = overlayType ? `${baseClass}--${overlayType}` : "";
-  let t4;
-  if ($[0] !== t2 || $[1] !== t3) {
-    t4 = [baseClass, t2, t3].filter(Boolean);
-    $[0] = t2;
-    $[1] = t3;
-    $[2] = t4;
-  } else {
-    t4 = $[2];
-  }
-  const t5 = t4.join(" ");
-  const t6 = animationDuration || "500ms";
-  let t7;
-  if ($[3] !== loadingText || $[4] !== t || $[5] !== t5 || $[6] !== t6) {
-    t7 = _jsxs("div", {
-      className: t5,
-      style: {
-        animationDuration: t6
-      },
-      children: [_jsxs("div", {
-        className: `${baseClass}__bars`,
-        children: [_jsx("div", {
-          className: `${baseClass}__bar`
-        }), _jsx("div", {
-          className: `${baseClass}__bar`
-        }), _jsx("div", {
-          className: `${baseClass}__bar`
-        }), _jsx("div", {
-          className: `${baseClass}__bar`
-        }), _jsx("div", {
-          className: `${baseClass}__bar`
-        })]
-      }), _jsx("span", {
-        className: `${baseClass}__text`,
-        children: loadingText || t("general:loading")
-      })]
-    });
-    $[3] = loadingText;
-    $[4] = t;
-    $[5] = t5;
-    $[6] = t6;
-    $[7] = t7;
-  } else {
-    t7 = $[7];
-  }
-  return t7;
+export const LoadingOverlay = ({
+  animationDuration,
+  overlayType,
+  show = true
+}) => {
+  return /*#__PURE__*/_jsx("div", {
+    "aria-hidden": !show,
+    className: [baseClass, show ? `${baseClass}--entering` : `${baseClass}--exiting`, overlayType ? `${baseClass}--${overlayType}` : ''].filter(Boolean).join(' '),
+    style: {
+      animationDuration: animationDuration || '500ms'
+    },
+    children: /*#__PURE__*/_jsx(Spinner, {
+      size: "lg"
+    })
+  });
 };
 export const LoadingOverlayToggle = t0 => {
   const $ = _c(7);