@payloadcms/ui 4.0.0-internal.293e026 → 4.0.0-internal.2a3c3bc

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

@@ -1,15 +1,15 @@
 '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 React, { useCallback, useEffect } from 'react';
-import { InputStepper } from '../../../../elements/InputStepper/index.js';
+import { NumberInput } from '../../../../fields/Number/index.js';
 import { useLivePreviewContext } from '../../../../providers/LivePreview/context.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import './index.css';
 const baseClass = 'toolbar-input';
 export const PreviewFrameSizeInput = props => {
-  const $ = _c(32);
+  const $ = _c(30);
   const {
     axis
   } = props;
@@ -27,8 +27,8 @@ export const PreviewFrameSizeInput = props => {
   const [internalState, setInternalState] = React.useState((axis === "x" ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
   let t0;
   if ($[0] !== axis || $[1] !== measuredDeviceSize?.height || $[2] !== measuredDeviceSize?.width || $[3] !== setBreakpoint || $[4] !== setSize || $[5] !== zoom) {
-    t0 = e => {
-      let newValue = Number(e.target.value);
+    t0 = value => {
+      let newValue = Number(value);
       if (newValue < 0) {
         newValue = 0;
       }
@@ -111,40 +111,27 @@ export const PreviewFrameSizeInput = props => {
     t3 = $[21];
   }
   useEffect(t2, t3);
-  const t4 = axis === "x" ? "W" : "H";
-  let t5;
-  if ($[22] !== axis || $[23] !== handleChange || $[24] !== handleStep || $[25] !== internalState || $[26] !== t || $[27] !== t4) {
-    let t6;
-    let t7;
-    if ($[29] !== handleStep) {
-      t6 = () => handleStep("down");
-      t7 = () => handleStep("up");
-      $[29] = handleStep;
-      $[30] = t6;
-      $[31] = t7;
+  let t4;
+  if ($[22] !== axis || $[23] !== handleChange || $[24] !== handleStep || $[25] !== internalState || $[26] !== t) {
+    let t5;
+    if ($[28] !== handleChange) {
+      t5 = e => handleChange(e.target.value);
+      $[28] = handleChange;
+      $[29] = t5;
     } else {
-      t6 = $[30];
-      t7 = $[31];
+      t5 = $[29];
     }
-    t5 = _jsxs("div", {
-      className: `${baseClass}__group`,
-      children: [_jsx("span", {
-        className: `${baseClass}__prefix`,
-        children: t4
-      }), _jsx("input", {
-        "aria-label": axis === "x" ? t("upload:width") : t("upload:height"),
-        className: baseClass,
-        min: 0,
-        name: axis === "x" ? "live-preview-width" : "live-preview-height",
-        onChange: handleChange,
-        onWheel: _temp,
-        step: 1,
-        type: "number",
-        value: internalState || 0
-      }), _jsx(InputStepper, {
-        onDecrement: t6,
-        onIncrement: t7
-      })]
+    t4 = _jsx(NumberInput, {
+      ariaLabel: axis === "x" ? t("upload:width") : t("upload:height"),
+      className: baseClass,
+      min: 0,
+      onChange: t5,
+      onStep: handleStep,
+      path: axis === "x" ? "live-preview-width" : "live-preview-height",
+      prefix: axis === "x" ? "W" : "H",
+      size: "medium",
+      step: 1,
+      value: internalState || 0
     });
     $[22] = axis;
     $[23] = handleChange;
@@ -152,13 +139,9 @@ export const PreviewFrameSizeInput = props => {
     $[25] = internalState;
     $[26] = t;
     $[27] = t4;
-    $[28] = t5;
   } else {
-    t5 = $[28];
+    t4 = $[27];
   }
-  return t5;
+  return t4;
 };
-function _temp(e_0) {
-  e_0.target.blur();
-}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","InputStepper","useLivePreviewContext","useTranslation","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","t","internalState","setInternalState","useState","width","height","t0","e","newValue","Number","target","value","type","toFixed","handleChange","t1","direction","currentValue","newValue_0","handleStep","t2","t3","t4","t5","t6","t7","_jsxs","className","children","_jsx","min","name","onChange","onWheel","_temp","step","onDecrement","onIncrement","e_0","blur"],"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { InputStepper } from '../../../../elements/InputStepper/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  const handleStep = useCallback(\n    (direction: 'down' | 'up') => {\n      const currentValue = internalState || 0\n      let newValue = direction === 'up' ? currentValue + 1 : currentValue - 1\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, internalState, measuredDeviceSize, setBreakpoint, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <div className={`${baseClass}__group`}>\n      <span className={`${baseClass}__prefix`}>{axis === 'x' ? 'W' : 'H'}</span>\n      <input\n        aria-label={axis === 'x' ? t('upload:width') : t('upload:height')}\n        className={baseClass}\n        min={0}\n        name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n        onChange={handleChange}\n        onWheel={(e) => {\n          // @ts-expect-error - blur() exists on input elements but not typed on EventTarget\n          e.target.blur()\n        }}\n        step={1}\n        type=\"number\"\n        value={internalState || 0}\n      />\n      <InputStepper onDecrement={() => handleStep('down')} onIncrement={() => handleStep('up')} />\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","NumberInput","useLivePreviewContext","useTranslation","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","t","internalState","setInternalState","useState","width","height","t0","value","newValue","Number","type","toFixed","handleChange","t1","direction","currentValue","newValue_0","handleStep","t2","t3","t4","t5","e","target","_jsx","ariaLabel","className","min","onChange","onStep","path","prefix","step"],"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { NumberInput } from '../../../../fields/Number/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (value: string) => {\n      let newValue = Number(value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  const handleStep = useCallback(\n    (direction: 'down' | 'up') => {\n      const currentValue = internalState || 0\n      let newValue = direction === 'up' ? currentValue + 1 : currentValue - 1\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, internalState, measuredDeviceSize, setBreakpoint, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <NumberInput\n      ariaLabel={axis === 'x' ? t('upload:width') : t('upload:height')}\n      className={baseClass}\n      min={0}\n      onChange={(e) => handleChange(e.target.value)}\n      onStep={handleStep}\n      path={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      prefix={axis === 'x' ? 'W' : 'H'}\n      size=\"medium\"\n      step={1}\n      value={internalState || 0}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,10 @@
 @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;
@@ -42,6 +48,7 @@
     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.js

@@ -67,7 +67,7 @@ export const LivePreviewWindow = props => {
       data: values,
       externallyUpdatedRelationship: mostRecentUpdate,
       globalSlug,
-      locale: locale.code
+      locale: locale?.code
     });
   }, [formState, collectionSlug, globalSlug, id, appIsReady, mostRecentUpdate, locale, hasActiveTarget, loadedURL, lastReadyAt, postMessageToTargets]);
   /**

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

@@ -1 +1 @@
-{"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":[]}
+{"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":"AAAA;;;AAIA,SAASA,oBAAoB,QAAQ;AACrC,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,QAAQ;AAE9C,SAASC,gBAAgB,QAAQ;AACjC,SAASC,iBAAiB,QAAQ;AAClC,SAASC,eAAe,QAAQ;AAChC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,SAAS,QAAQ;AAC1B,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,iBAAA,GAA8CC,KAAA;EACzD,MAAM;IACJC,UAAU;IACVC,UAAU;IACVC,SAAS;IACTC,UAAU;IACVC,gBAAgB;IAChBC,WAAW;IACXC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,GAAG;IACHC;EAAI,CACL,GAAGnB,qBAAA;EAEJ,MAAMoB,MAAA,GAASnB,SAAA;EAEf,MAAM;IAAEoB;EAAgB,CAAE,GAAGvB,iBAAA;EAE7B,MAAM,CAACwB,SAAA,CAAU,GAAGzB,gBAAA;EACpB,MAAM;IAAE0B,EAAE;IAAEC,cAAc;IAAEC;EAAU,CAAE,GAAG1B,eAAA;EAE3C,MAAM2B,oBAAA,GAAuB/B,WAAA,CAC1BgC,OAAA;IACC,IAAIZ,QAAA,CAASa,OAAO,IAAI,CAACb,QAAA,CAASa,OAAO,CAACC,MAAM,EAAE;MAChDd,QAAA,CAASa,OAAO,CAACE,WAAW,CAACH,OAAA,EAAST,GAAA;IACxC;IAEA,IAAIR,SAAA,CAAUkB,OAAO,EAAE;MACrBlB,SAAA,CAAUkB,OAAO,CAACG,aAAa,EAAED,WAAA,CAAYH,OAAA,EAAST,GAAA;IACxD;EACF,GACA,CAACR,SAAA,EAAWK,QAAA,EAAUG,GAAA,CAAI;EAG5B,MAAMc,eAAA,GAAkBpB,gBAAA,IAAqBG,QAAA,CAASa,OAAO,IAAI,CAACb,QAAA,CAASa,OAAO,CAACC,MAAM;EAEzF;;;;;;EAMAjC,SAAA,CAAU;IACR,IAAI,CAACoC,eAAA,IAAmB,CAACxB,UAAA,IAAc,CAACc,SAAA,EAAW;MACjD;IACF;IAEA,MAAMW,MAAA,GAASxC,oBAAA,CAAqB6B,SAAA,EAAW;IAE/C,IAAI,CAACW,MAAA,CAAOV,EAAE,EAAE;MACdU,MAAA,CAAOV,EAAE,GAAGA,EAAA;IACd;IAEAG,oBAAA,CAAqB;MACnBQ,IAAA,EAAM;MACNV,cAAA;MACAW,IAAA,EAAMF,MAAA;MACNG,6BAAA,EAA+Bf,gBAAA;MAC/BI,UAAA;MACAL,MAAA,EAAQA,MAAA,EAAQiB;IAClB;EACF,GAAG,CACDf,SAAA,EACAE,cAAA,EACAC,UAAA,EACAF,EAAA,EACAf,UAAA,EACAa,gBAAA,EACAD,MAAA,EACAY,eAAA,EACAlB,SAAA,EACAD,WAAA,EACAa,oBAAA,CACD;EAED;;;;;EAKA9B,SAAA,CAAU;IACR,IAAI,CAACoC,eAAA,IAAmB,CAACxB,UAAA,EAAY;MACnC;IACF;IAEAkB,oBAAA,CAAqB;MAAEQ,IAAA,EAAM;IAAyB;EACxD,GAAG,CAACb,gBAAA,EAAkBW,eAAA,EAAiBxB,UAAA,EAAYkB,oBAAA,CAAqB;EAExE,oBACEY,IAAA,CAAC;IACCC,SAAA,EAAW,CACTlC,SAAA,EACAO,gBAAA,IAAoB,GAAGP,SAAA,sBAA+B,EACtDM,UAAA,IAAc,GAAGN,SAAA,eAAwB,EACzCI,UAAA,IACEA,UAAA,KAAe,gBACfA,UAAA,KAAe,YACf,GAAGJ,SAAA,kBAA2B,CACjC,CACEmC,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;cAER,aAAAC,KAAA,CAAC;MAAIJ,SAAA,EAAW,GAAGlC,SAAA,WAAoB;8BACrCiC,IAAA,CAAClC,kBAAA;QAAoB,GAAGG;uBACxB+B,IAAA,CAAC;QAAIC,SAAA,EAAW,GAAGlC,SAAA,QAAiB;kBAClC,aAAAiC,IAAA,CAACnC,eAAA;oBACEc,kBAAA,iBACCqB,IAAA,CAACpC,YAAA;YACCqC,SAAA,EAAU;YACVhB,EAAA,EAAG;YACHqB,MAAA,EAAQA,CAAA;cACN5B,YAAA,CAAaE,GAAA;YACf;YACA2B,GAAA,EAAKnC,SAAA;YACLoC,GAAA,EAAK5B,GAAA;YACL6B,KAAA,EAAO;cACLC,SAAA,EAAW,OAAO7B,IAAA,KAAS,WAAW,SAASA,IAAA,IAAQ,GAAG8B;YAC5D;;;;;;AAQhB","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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type LoadMoreRowProps = {
     className?: string;
     currentCount: number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LoadMoreRow/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAIrB,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,CAyClD,CAAA"}
+{"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

@@ -5,8 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Button } from '../Button/index.js';
-import { TreeConnector } from '../Hierarchy/Tree/TreeConnector.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'load-more-row';
 export const LoadMoreRow = t0 => {
   const $ = _c(12);
@@ -42,20 +41,17 @@ export const LoadMoreRow = t0 => {
     } else {
       t3 = $[11];
     }
-    t2 = _jsxs("div", {
+    t2 = _jsx("div", {
       className: t3.join(" "),
       style,
-      children: [_jsx("div", {
-        className: `${baseClass}__connector`,
-        children: _jsx(TreeConnector, {})
-      }), _jsx("p", {
+      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;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","Button","TreeConnector","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","_jsxs","join","_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 { TreeConnector } from '../Hierarchy/Tree/TreeConnector.js'\nimport './index.scss'\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      <div className={`${baseClass}__connector`}>\n        <TreeConnector />\n      </div>\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,SAASC,aAAa,QAAQ;AAC9B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAclB,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAAC;IAAAS,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,IAAcjB,cAAA;EAAA,IAAAkB,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,CAAAnB,MAAA;MAAAoB,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,GAAAW,KAAA,CAAC;MAAAtB,SAAA,EAAemB,EAA8B,CAAAI,IAAA,CAAc;MAAAhB,KAAA;MAAAW,QAAA,GAC1DL,IAAA,CAAC;QAAAb,SAAA,EAAe,GAAAJ,SAAA,aAAyB;QAAAsB,QAAA,EACvCL,IAAA,CAAAlB,aAAA,IAAC;MAAA,C,GAEHkB,IAAA,CAAC;QAAAb,SAAA,EAAa,GAAAJ,SAAA,QAAoB;QAAAsB,QAAA,EAC/BhB,OAAA,GACCoB,KAAA,CAAAE,SAAA;UAAAN,QAAA,GAAE,YACSjB,YAAA,EAAa,QAAKO,SAAA,EAAU,YAAIH,cAAA,IAAkBO,aAAA;QAAA,C,IAG7DU,KAAA,CAAAE,SAAA;UAAAN,QAAA,GAAE,YACSV,SAAA,EAAU,QAAKA,SAAA;QAAA,C;;;;;;;;;;;;;;;;SAXhCG,E;CAiBJ","ignoreList":[]}
+{"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

@@ -28,90 +28,44 @@
     animation: fade-out ease;
   }
 
-  .loading-overlay::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+  /*
+   * 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);
-    opacity: 0.85;
-    z-index: -1;
-  }
-
-  .loading-overlay__bars {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    gap: 7px;
-    align-items: center;
   }
 
-  .loading-overlay__bar {
-    width: 2px;
-    background-color: currentColor;
-    height: 15px;
-
-    &:nth-child(1) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
-    }
-
-    &:nth-child(2) {
-      transform: translateY(-2px);
-      animation: animate-bar--even 1.25s infinite;
-    }
-
-    &:nth-child(3) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
-    }
-
-    &:nth-child(4) {
-      transform: translateY(-2px);
-      animation: animate-bar--even 1.25s infinite;
-    }
-
-    &:nth-child(5) {
-      transform: translateY(0);
-      animation: animate-bar--odd 1.25s infinite;
-    }
+  .loading-overlay--drawer.loading-overlay--entering {
+    animation: none;
+    opacity: 1;
   }
 
-  .loading-overlay__text {
-    margin-top: var(--spacer-3);
-    text-transform: uppercase;
-    font-family: var(--text-body-medium-font-family);
-    font-size: var(--text-body-medium-font-size);
-    letter-spacing: 3px;
+  .loading-overlay--drawer .spinner {
+    opacity: 0;
+    animation: fade-in 200ms ease 450ms forwards;
   }
 
-  @keyframes animate-bar--even {
-    0% {
-      transform: translateY(2px);
-    }
-
-    50% {
-      transform: translateY(-2px);
-    }
-
-    100% {
-      transform: translateY(2px);
+  @media (prefers-reduced-motion: reduce) {
+    .loading-overlay--drawer .spinner {
+      animation: none;
+      opacity: 1;
     }
   }
 
-  @keyframes animate-bar--odd {
-    0% {
-      transform: translateY(-2px);
-    }
-
-    50% {
-      transform: translateY(2px);
-    }
-
-    100% {
-      transform: translateY(-2px);
-    }
+  .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 {

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,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,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.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);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useLoadingOverlay","useFormProcessing","useTranslation","baseClass","LoadingOverlay","t0","$","animationDuration","loadingText","overlayType","show","t1","undefined","t","t2","t3","t4","filter","Boolean","t5","join","t6","t7","_jsxs","className","style","children","_jsx","LoadingOverlayToggle","name","key","type","toggleLoadingOverlay","isLoading","useEffect","FormLoadingOverlayToggle","action","formIsLoading","loadingSuffix","isProcessing","i18n","labels","create","loading","update","trim"],"sources":["../../../src/elements/Loading/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js'\n\nimport { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js'\nimport { useFormProcessing } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'loading-overlay'\n\ntype LoadingOverlayProps = {\n  animationDuration?: string\n  loadingText?: string\n  overlayType?: string\n  show?: boolean\n}\n\nexport const LoadingOverlay: React.FC<LoadingOverlayProps> = ({\n  animationDuration,\n  loadingText,\n  overlayType,\n  show = true,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <div\n      className={[\n        baseClass,\n        show ? `${baseClass}--entering` : `${baseClass}--exiting`,\n        overlayType ? `${baseClass}--${overlayType}` : '',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        animationDuration: animationDuration || '500ms',\n      }}\n    >\n      <div className={`${baseClass}__bars`}>\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n        <div className={`${baseClass}__bar`} />\n      </div>\n\n      <span className={`${baseClass}__text`}>{loadingText || t('general:loading')}</span>\n    </div>\n  )\n}\n\nexport type UseLoadingOverlayToggleProps = {\n  loadingText?: string\n  name: string\n  show: boolean\n  type?: LoadingOverlayTypes\n}\nexport const LoadingOverlayToggle: React.FC<UseLoadingOverlayToggleProps> = ({\n  name: key,\n  type = 'fullscreen',\n  loadingText,\n  show,\n}) => {\n  const { toggleLoadingOverlay } = useLoadingOverlay()\n\n  React.useEffect(() => {\n    toggleLoadingOverlay({\n      type,\n      isLoading: show,\n      key,\n      loadingText: loadingText || undefined,\n    })\n\n    return () => {\n      toggleLoadingOverlay({\n        type,\n        isLoading: false,\n        key,\n      })\n    }\n  }, [show, toggleLoadingOverlay, key, type, loadingText])\n\n  return null\n}\n\nexport type FormLoadingOverlayToggleProps = {\n  action: 'create' | 'loading' | 'update'\n  formIsLoading?: boolean\n  loadingSuffix?: string\n  name: string\n  type?: LoadingOverlayTypes\n}\n\nexport const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleProps> = ({\n  name,\n  type = 'fullscreen',\n  action,\n  formIsLoading = false,\n  loadingSuffix,\n}) => {\n  const isProcessing = useFormProcessing()\n  const { i18n, t } = useTranslation()\n\n  const labels = {\n    create: t('general:creating'),\n    loading: t('general:loading'),\n    update: t('general:updating'),\n  }\n\n  return (\n    <LoadingOverlayToggle\n      loadingText={`${labels[action]} ${\n        loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''\n      }`.trim()}\n      name={name}\n      show={formIsLoading || isProcessing}\n      type={type}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useLoadingOverlay","Spinner","useFormProcessing","useTranslation","baseClass","LoadingOverlay","animationDuration","overlayType","show","_jsx","className","filter","Boolean","join","style","size","LoadingOverlayToggle","t0","$","name","key","type","t1","loadingText","undefined","toggleLoadingOverlay","t2","t3","isLoading","useEffect","FormLoadingOverlayToggle","action","formIsLoading","loadingSuffix","isProcessing","i18n","t","labels","create","loading","update","t4","trim"],"sources":["../../../src/elements/Loading/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport type { LoadingOverlayTypes } from '../../elements/LoadingOverlay/types.js'\n\nimport { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js'\nimport { Spinner } from '../../elements/Spinner/index.js'\nimport { useFormProcessing } from '../../forms/Form/context.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'loading-overlay'\n\ntype LoadingOverlayProps = {\n  animationDuration?: string\n  loadingText?: string\n  overlayType?: string\n  show?: boolean\n}\n\nexport const LoadingOverlay: React.FC<LoadingOverlayProps> = ({\n  animationDuration,\n  overlayType,\n  show = true,\n}) => {\n  return (\n    <div\n      aria-hidden={!show}\n      className={[\n        baseClass,\n        show ? `${baseClass}--entering` : `${baseClass}--exiting`,\n        overlayType ? `${baseClass}--${overlayType}` : '',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        animationDuration: animationDuration || '500ms',\n      }}\n    >\n      <Spinner size=\"lg\" />\n    </div>\n  )\n}\n\nexport type UseLoadingOverlayToggleProps = {\n  loadingText?: string\n  name: string\n  show: boolean\n  type?: LoadingOverlayTypes\n}\nexport const LoadingOverlayToggle: React.FC<UseLoadingOverlayToggleProps> = ({\n  name: key,\n  type = 'fullscreen',\n  loadingText,\n  show,\n}) => {\n  const { toggleLoadingOverlay } = useLoadingOverlay()\n\n  React.useEffect(() => {\n    toggleLoadingOverlay({\n      type,\n      isLoading: show,\n      key,\n      loadingText: loadingText || undefined,\n    })\n\n    return () => {\n      toggleLoadingOverlay({\n        type,\n        isLoading: false,\n        key,\n      })\n    }\n  }, [show, toggleLoadingOverlay, key, type, loadingText])\n\n  return null\n}\n\nexport type FormLoadingOverlayToggleProps = {\n  action: 'create' | 'loading' | 'update'\n  formIsLoading?: boolean\n  loadingSuffix?: string\n  name: string\n  type?: LoadingOverlayTypes\n}\n\nexport const FormLoadingOverlayToggle: React.FC<FormLoadingOverlayToggleProps> = ({\n  name,\n  type = 'fullscreen',\n  action,\n  formIsLoading = false,\n  loadingSuffix,\n}) => {\n  const isProcessing = useFormProcessing()\n  const { i18n, t } = useTranslation()\n\n  const labels = {\n    create: t('general:creating'),\n    loading: t('general:loading'),\n    update: t('general:updating'),\n  }\n\n  return (\n    <LoadingOverlayToggle\n      loadingText={`${labels[action]} ${\n        loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''\n      }`.trim()}\n      name={name}\n      show={formIsLoading || isProcessing}\n      type={type}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/LoadingOverlay/reducer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../../src/elements/LoadingOverlay/reducer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,0BAA0B;;;;;CAKtC,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,EAAE,QAAQ,MAAM,KAAG,KAmBtD,CAAA"}
+{"version":3,"file":"reducer.d.ts","sourceRoot":"","sources":["../../../src/elements/LoadingOverlay/reducer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAE/C,eAAO,MAAM,0BAA0B;;;;;CAKtC,CAAA;AAED,eAAO,MAAM,OAAO,UAAW,KAAK,UAAU,MAAM,KAAG,KAmBtD,CAAA"}

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

@@ -1,13 +1,10 @@
 import React from 'react';
+import type { PopupButtonRenderProps } from '../Popup/PopupTrigger/index.js';
 import './index.css';
 export declare const Localizer: React.FC<{
     className?: string;
     renderButton?: (props: {
-        active: boolean;
-        'aria-expanded': boolean;
-        'aria-haspopup': true;
-        onClick: React.MouseEventHandler;
-        onKeyDown: React.KeyboardEventHandler;
-    }) => React.ReactNode;
+        'aria-label': string;
+    } & PopupButtonRenderProps) => React.ReactNode;
 }>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Localizer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAWvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;CACtB,CAsGA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Localizer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAW5E,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,GAAG,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;CAC7F,CAmHA,CAAA"}