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

package/dist/elements/LivePreview/Toolbar/SizeInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CAiGA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAKrD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CA2FA,CAAA"}

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;

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,CAqBxD,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,29 @@
 '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", {
+    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      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.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;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,CAqGA,CAAA"}

package/dist/elements/Localizer/index.js

@@ -59,10 +59,10 @@ export const Localizer = props => {
         const {
           close
         } = t4;
-        return _jsx(PopupList.ButtonGroup, {
+        return _jsx(PopupList.RadioGroup, {
           children: locales.map(localeOption => {
             const localeOptionLabel = getTranslation(localeOption.label, i18n);
-            return _jsx(PopupList.Button, {
+            return _jsx(PopupList.RadioGroupItem, {
               active: locale.code === localeOption.code,
               disabled: locale.code === localeOption.code,
               onClick: () => {
@@ -151,8 +151,7 @@ export const Localizer = props => {
           horizontalAlign: "right",
           render: t3,
           renderButton: t4,
-          showScrollbar: true,
-          size: "large"
+          showScrollbar: true
         })
       });
       $[13] = t2;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","qs","React","Fragment","ChevronIcon","LanguageIcon","useConfig","useLocale","useLocaleLoading","useRouter","useRouteTransition","useTranslation","Button","Popup","PopupList","baseClass","Localizer","props","$","className","renderButton","config","t0","localization","router","startRouteTransition","setLocaleIsLoading","i18n","t","locale","locales","t1","filter","Boolean","t2","join","t3","t4","close","_jsx","ButtonGroup","children","map","localeOption","localeOptionLabel","label","active","code","disabled","onClick","searchParams","URLSearchParams","window","location","search","url","stringify","parse","toString","depth","ignoreQueryPrefix","addQueryPrefix","push","_jsxs","t5","_active","onKeyDown","ariaProps","buttonStyle","extraButtonProps","icon","size","horizontalAlign","render","showScrollbar"],"sources":["../../../src/elements/Localizer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport * as qs from 'qs-esm'\nimport React, { Fragment } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale, useLocaleLoading } from '../../providers/Locale/index.js'\nimport { useRouter } from '../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'localizer'\n\nexport const Localizer: React.FC<{\n  className?: string\n  renderButton?: (props: {\n    active: boolean\n    'aria-expanded': boolean\n    'aria-haspopup': true\n    onClick: React.MouseEventHandler\n    onKeyDown: React.KeyboardEventHandler\n  }) => React.ReactNode\n}> = (props) => {\n  const { className, renderButton } = props\n  const {\n    config: { localization },\n  } = useConfig()\n\n  const router = useRouter()\n  const { startRouteTransition } = useRouteTransition()\n\n  const { setLocaleIsLoading } = useLocaleLoading()\n\n  const { i18n, t } = useTranslation()\n  const locale = useLocale()\n\n  if (localization) {\n    const { locales } = localization\n\n    return (\n      <div className={[baseClass, className].filter(Boolean).join(' ')}>\n        <Popup\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              {locales.map((localeOption) => {\n                const localeOptionLabel = getTranslation(localeOption.label, i18n)\n\n                return (\n                  <PopupList.Button\n                    active={locale.code === localeOption.code}\n                    disabled={locale.code === localeOption.code}\n                    key={localeOption.code}\n                    onClick={() => {\n                      setLocaleIsLoading(true)\n                      close()\n\n                      // can't use `useSearchParams` here because it is stale due to `window.history.pushState` in `ListQueryProvider`\n                      const searchParams = new URLSearchParams(window.location.search)\n\n                      const url = qs.stringify(\n                        {\n                          ...qs.parse(searchParams.toString(), {\n                            depth: 10,\n                            ignoreQueryPrefix: true,\n                          }),\n                          locale: localeOption.code,\n                        },\n                        { addQueryPrefix: true },\n                      )\n\n                      startRouteTransition(() => {\n                        router.push(url)\n                      })\n                    }}\n                  >\n                    {localeOptionLabel !== localeOption.code ? (\n                      <Fragment>\n                        {localeOptionLabel}\n                        &nbsp;\n                        <span\n                          className={`${baseClass}__locale-code`}\n                          data-locale={localeOption.code}\n                        >\n                          {`(${localeOption.code})`}\n                        </span>\n                      </Fragment>\n                    ) : (\n                      <span className={`${baseClass}__locale-code`} data-locale={localeOption.code}>\n                        {localeOptionLabel}\n                      </span>\n                    )}\n                  </PopupList.Button>\n                )\n              })}\n            </PopupList.ButtonGroup>\n          )}\n          renderButton={\n            renderButton ??\n            (({ active: _active, onClick, onKeyDown, ...ariaProps }) => (\n              <Button\n                aria-label={t('general:locale')}\n                buttonStyle=\"secondary\"\n                extraButtonProps={{ onKeyDown }}\n                icon={<LanguageIcon size={24} />}\n                iconPosition=\"left\"\n                onClick={onClick}\n                {...ariaProps}\n              >\n                <div className={`${baseClass}__button-content`}>\n                  {locale.code}\n                  <ChevronIcon size={16} />\n                </div>\n              </Button>\n            ))\n          }\n          showScrollbar\n          size=\"large\"\n        />\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","qs","React","Fragment","ChevronIcon","LanguageIcon","useConfig","useLocale","useLocaleLoading","useRouter","useRouteTransition","useTranslation","Button","Popup","PopupList","baseClass","Localizer","props","$","className","renderButton","config","t0","localization","router","startRouteTransition","setLocaleIsLoading","i18n","t","locale","locales","t1","filter","Boolean","t2","join","t3","t4","close","_jsx","RadioGroup","children","map","localeOption","localeOptionLabel","label","RadioGroupItem","active","code","disabled","onClick","searchParams","URLSearchParams","window","location","search","url","stringify","parse","toString","depth","ignoreQueryPrefix","addQueryPrefix","push","_jsxs","t5","_active","onKeyDown","ariaProps","buttonStyle","extraButtonProps","icon","size","horizontalAlign","render","showScrollbar"],"sources":["../../../src/elements/Localizer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport * as qs from 'qs-esm'\nimport React, { Fragment } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { LanguageIcon } from '../../icons/Language/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useLocale, useLocaleLoading } from '../../providers/Locale/index.js'\nimport { useRouter } from '../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nconst baseClass = 'localizer'\n\nexport const Localizer: React.FC<{\n  className?: string\n  renderButton?: (props: {\n    active: boolean\n    'aria-expanded': boolean\n    'aria-haspopup': true\n    onClick: React.MouseEventHandler\n    onKeyDown: React.KeyboardEventHandler\n  }) => React.ReactNode\n}> = (props) => {\n  const { className, renderButton } = props\n  const {\n    config: { localization },\n  } = useConfig()\n\n  const router = useRouter()\n  const { startRouteTransition } = useRouteTransition()\n\n  const { setLocaleIsLoading } = useLocaleLoading()\n\n  const { i18n, t } = useTranslation()\n  const locale = useLocale()\n\n  if (localization) {\n    const { locales } = localization\n\n    return (\n      <div className={[baseClass, className].filter(Boolean).join(' ')}>\n        <Popup\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.RadioGroup>\n              {locales.map((localeOption) => {\n                const localeOptionLabel = getTranslation(localeOption.label, i18n)\n\n                return (\n                  <PopupList.RadioGroupItem\n                    active={locale.code === localeOption.code}\n                    disabled={locale.code === localeOption.code}\n                    key={localeOption.code}\n                    onClick={() => {\n                      setLocaleIsLoading(true)\n                      close()\n\n                      // can't use `useSearchParams` here because it is stale due to `window.history.pushState` in `ListQueryProvider`\n                      const searchParams = new URLSearchParams(window.location.search)\n\n                      const url = qs.stringify(\n                        {\n                          ...qs.parse(searchParams.toString(), {\n                            depth: 10,\n                            ignoreQueryPrefix: true,\n                          }),\n                          locale: localeOption.code,\n                        },\n                        { addQueryPrefix: true },\n                      )\n\n                      startRouteTransition(() => {\n                        router.push(url)\n                      })\n                    }}\n                  >\n                    {localeOptionLabel !== localeOption.code ? (\n                      <Fragment>\n                        {localeOptionLabel}\n                        &nbsp;\n                        <span\n                          className={`${baseClass}__locale-code`}\n                          data-locale={localeOption.code}\n                        >\n                          {`(${localeOption.code})`}\n                        </span>\n                      </Fragment>\n                    ) : (\n                      <span className={`${baseClass}__locale-code`} data-locale={localeOption.code}>\n                        {localeOptionLabel}\n                      </span>\n                    )}\n                  </PopupList.RadioGroupItem>\n                )\n              })}\n            </PopupList.RadioGroup>\n          )}\n          renderButton={\n            renderButton ??\n            (({ active: _active, onClick, onKeyDown, ...ariaProps }) => (\n              <Button\n                aria-label={t('general:locale')}\n                buttonStyle=\"secondary\"\n                extraButtonProps={{ onKeyDown }}\n                icon={<LanguageIcon size={24} />}\n                iconPosition=\"left\"\n                onClick={onClick}\n                {...ariaProps}\n              >\n                <div className={`${baseClass}__button-content`}>\n                  {locale.code}\n                  <ChevronIcon size={16} />\n                </div>\n              </Button>\n            ))\n          }\n          showScrollbar\n        />\n      </div>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}