@payloadcms/ui 4.0.0-internal.a0ef1b8 → 4.0.0-internal.bc5cf8c

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":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAIlB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,OAAO,QAAQ;AACxB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB,OAAO,MAAMC,cAAA,GAAgDA,CAAC;EAC5DC,iBAAiB;EACjBC,WAAW;EACXC,IAAA,GAAO;AAAI,CACZ;EACC,oBACEC,IAAA,CAAC;IACCC,SAAA,EAAW,CACTN,SAAA,EACAI,IAAA,GAAO,GAAGJ,SAAA,YAAqB,GAAG,GAAGA,SAAA,WAAoB,EACzDG,WAAA,GAAc,GAAGH,SAAA,KAAcG,WAAA,EAAa,GAAG,GAChD,CACEI,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRC,KAAA,EAAO;MACLR,iBAAA,EAAmBA,iBAAA,IAAqB;IAC1C;cAEA,aAAAG,IAAA,CAACR,OAAA;MAAQc,IAAA,EAAK;;;AAGpB;AAQA,OAAO,MAAMC,oBAAA,GAA+DC,EAAA;EAAA,MAAAC,CAAA,GAAArB,EAAA;EAAC;IAAAsB,IAAA,EAAAC,GAAA;IAAAC,IAAA,EAAAC,EAAA;IAAAC,WAAA;IAAAf;EAAA,IAAAS,EAK5E;EAHC,MAAAI,IAAA,GAAAC,EAAmB,KAAAE,SAAA,GAAZ,YAAY,GAAnBF,EAAmB;EAInB;IAAAG;EAAA,IAAiCzB,iBAAA;EAAA,IAAA0B,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAT,CAAA,QAAAE,GAAA,IAAAF,CAAA,QAAAK,WAAA,IAAAL,CAAA,QAAAV,IAAA,IAAAU,CAAA,QAAAO,oBAAA,IAAAP,CAAA,QAAAG,IAAA;IAEjBK,EAAA,GAAAA,CAAA;MACdD,oBAAA;QAAAJ,IAAA;QAAAO,SAAA,EAEapB,IAAA;QAAAY,GAAA;QAAAG,WAAA,EAEEA,WAAA,IAAAC;MAAe,CAC9B;MAAA;QAGEC,oBAAA;UAAAJ,IAAA;UAAAO,SAAA;UAAAR;QAAA,CAIA;MAAA;IAAA;IAEDO,EAAA,IAACnB,IAAA,EAAMiB,oBAAA,EAAsBL,GAAA,EAAKC,IAAA,EAAME,WAAA;IAAYL,CAAA,MAAAE,GAAA;IAAAF,CAAA,MAAAK,WAAA;IAAAL,CAAA,MAAAV,IAAA;IAAAU,CAAA,MAAAO,oBAAA;IAAAP,CAAA,MAAAG,IAAA;IAAAH,CAAA,MAAAQ,EAAA;IAAAR,CAAA,MAAAS,EAAA;EAAA;IAAAD,EAAA,GAAAR,CAAA;IAAAS,EAAA,GAAAT,CAAA;EAAA;EAfvDnB,KAAA,CAAA8B,SAAA,CAAgBH,EAehB,EAAGC,EAAoD;EAAA;AAAA,CAGzD;AAUA,OAAO,MAAMG,wBAAA,GAAoEb,EAAA;EAAA,MAAAC,CAAA,GAAArB,EAAA;EAAC;IAAAsB,IAAA;IAAAE,IAAA,EAAAC,EAAA;IAAAS,MAAA;IAAAC,aAAA,EAAAN,EAAA;IAAAO;EAAA,IAAAhB,EAMjF;EAJC,MAAAI,IAAA,GAAAC,EAAmB,KAAAE,SAAA,GAAZ,YAAY,GAAnBF,EAAmB;EAEnB,MAAAU,aAAA,GAAAN,EAAqB,KAAAF,SAAA,WAArBE,EAAqB;EAGrB,MAAAQ,YAAA,GAAqBhC,iBAAA;EACrB;IAAAiC,IAAA;IAAAC;EAAA,IAAoBjC,cAAA;EAEpB,MAAAkC,MAAA;IAAAC,MAAA,EACUF,CAAA,CAAE;IAAAG,OAAA,EACDH,CAAA,CAAE;IAAAI,MAAA,EACHJ,CAAA,CAAE;EAAA;EAKK,MAAAT,EAAA,MAAGU,MAAM,CAACN,MAAA,KACrBE,aAAA,GAAgBnC,cAAA,CAAemC,aAAA,EAAeE,IAAA,IAAQ,IACtD;EAAA,IAAAM,EAAA;EAAA,IAAAvB,CAAA,QAAAc,aAAA,IAAAd,CAAA,QAAAgB,YAAA,IAAAhB,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAS,EAAA,IAAAT,CAAA,QAAAG,IAAA;IAHJoB,EAAA,GAAAhC,IAAA,CAAAO,oBAAA;MAAAO,WAAA,EACeI,EAEX,CAAAe,IAAA,CAAK;MAAAvB,IAAA;MAAAX,IAAA,EAEDwB,aAAA,IAAiBE,YAAA;MAAAb;IAAA,C;;;;;;;;;;SALzBoB,E;CASJ","ignoreList":[]}

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":[]}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import '../Popup/PopupDivider/index.css';
+export declare const MenuSeparator: React.FC;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/MenuSeparator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,iCAAiC,CAAA;AAIxC,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAEjC,CAAA"}

package/dist/elements/MenuSeparator/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import '../Popup/PopupDivider/index.css';
+const baseClass = 'popup-divider';
+export const MenuSeparator = () => {
+  return /*#__PURE__*/_jsx("hr", {
+    className: baseClass
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","MenuSeparator","_jsx","className"],"sources":["../../../src/elements/MenuSeparator/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport '../Popup/PopupDivider/index.css'\n\nconst baseClass = 'popup-divider'\n\nexport const MenuSeparator: React.FC = () => {\n  return <hr className={baseClass} />\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,aAAA,GAA0BA,CAAA;EACrC,oBAAOC,IAAA,CAAC;IAAGC,SAAA,EAAWH;;AACxB","ignoreList":[]}

package/dist/elements/MiniCarousel/index.css

@@ -0,0 +1,94 @@
+@layer payload-default {
+  .mini-carousel {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacer-3);
+    padding: var(--spacer-2-5);
+    height: 100%;
+    flex-shrink: 0;
+    overflow-y: auto;
+    background: var(--color-bg-secondary);
+    border-right: var(--stroke-width-small) solid var(--color-border);
+    /* Honor the scroll-driven height below instead of stretching to the flex line. */
+    align-self: flex-start;
+    /* Scroll-driven: grow to fill the gap as the header scrolls away. Falls back to static height. */
+    animation: mini-carousel-fill-scrolled-chrome linear both;
+    animation-timeline: scroll(root block);
+    animation-range: 0 calc(var(--app-header-height) + var(--doc-header-height));
+  }
+
+  @keyframes mini-carousel-fill-scrolled-chrome {
+    to {
+      height: calc(100% + var(--app-header-height) + var(--doc-header-height));
+    }
+  }
+
+  .mini-carousel__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1/1;
+    flex-shrink: 0;
+    padding: var(--spacer-1);
+    border-radius: var(--radius-medium);
+    border: var(--stroke-width-small) solid var(--color-border);
+    background: var(--color-bg-secondary);
+    cursor: pointer;
+    overflow: hidden;
+    width: 48px;
+    height: 48px;
+  }
+
+  .mini-carousel__item img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  .mini-carousel__item--active {
+    border-color: var(--color-border-selected);
+  }
+
+  .mini-carousel__item:hover:not(.mini-carousel__item--active) {
+    border-color: var(--color-border-hover);
+  }
+
+  .mini-carousel__divider {
+    width: 100%;
+    height: var(--stroke-width-small);
+    background: var(--color-border);
+    flex-shrink: 0;
+  }
+
+  /* Stacked layout: disable scroll-driven growth and fill via stretch. */
+  @container edit-main (max-width: 1024px) {
+    .mini-carousel {
+      align-self: stretch;
+      height: auto;
+      animation: none;
+    }
+  }
+
+  @container edit-main (max-width: 768px) {
+    .mini-carousel {
+      flex-direction: row;
+      align-items: center;
+      width: 100%;
+      overflow-x: auto;
+      overflow-y: hidden;
+      border-right: 0;
+      border-top: var(--stroke-width-small) solid var(--color-border);
+    }
+
+    .mini-carousel__item {
+      width: 48px;
+    }
+
+    .mini-carousel__divider {
+      width: var(--stroke-width-small);
+      height: 48px;
+      margin: 0 var(--spacer-2);
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import type { Data, FileSizes, SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+import './index.css';
+export type MiniCarouselProps = {
+    doc: {
+        sizes?: FileSizes;
+        url?: string;
+    } & Data;
+    imageCacheTag?: false | string;
+    onSelect: (sizeKey: null | string) => void;
+    selectedSize: null | string;
+    uploadConfig: SanitizedCollectionConfig['upload'];
+};
+export declare const MiniCarousel: React.FC<MiniCarouselProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/MiniCarousel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAEzE,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAoCpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,GAAG,EAAE;QACH,KAAK,CAAC,EAAE,SAAS,CAAA;QACjB,GAAG,CAAC,EAAE,MAAM,CAAA;KACb,GAAG,IAAI,CAAA;IACR,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC9B,QAAQ,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;IAC1C,YAAY,EAAE,IAAI,GAAG,MAAM,CAAA;IAC3B,YAAY,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuDpD,CAAA"}

package/dist/elements/MiniCarousel/index.js

@@ -0,0 +1,84 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { appendCacheTag } from '../../utilities/appendCacheTag.js';
+import './index.css';
+const baseClass = 'mini-carousel';
+const MiniCarouselItem = ({
+  active,
+  imageCacheTag,
+  label,
+  onClick,
+  url
+}) => {
+  const src = appendCacheTag(url, imageCacheTag);
+  return /*#__PURE__*/_jsx("button", {
+    "aria-label": label,
+    "aria-pressed": active ? 'true' : 'false',
+    className: [`${baseClass}__item`, active && `${baseClass}__item--active`].filter(Boolean).join(' '),
+    onClick: onClick,
+    type: "button",
+    children: /*#__PURE__*/_jsx("img", {
+      alt: label,
+      src: src
+    })
+  });
+};
+export const MiniCarousel = ({
+  doc,
+  imageCacheTag,
+  onSelect,
+  selectedSize,
+  uploadConfig
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    imageSizes
+  } = uploadConfig;
+  const {
+    sizes,
+    url: originalUrl
+  } = doc;
+  const orderedSizeKeys = React.useMemo(() => {
+    if (!imageSizes || imageSizes.length === 0) {
+      return Object.keys(sizes || {});
+    }
+    return imageSizes.map(({
+      name
+    }) => name).filter(name_0 => sizes?.[name_0]?.url);
+  }, [imageSizes, sizes]);
+  if (!originalUrl) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: [baseClass, 'scrollbar-thin'].join(' '),
+    children: [/*#__PURE__*/_jsx(MiniCarouselItem, {
+      active: selectedSize === null,
+      imageCacheTag: imageCacheTag,
+      label: t('general:original'),
+      onClick: () => onSelect(null),
+      url: originalUrl
+    }), orderedSizeKeys.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__divider`
+      }), orderedSizeKeys.map(key => {
+        const sizeData = sizes?.[key];
+        if (!sizeData?.url) {
+          return null;
+        }
+        return /*#__PURE__*/_jsx(MiniCarouselItem, {
+          active: selectedSize === key,
+          imageCacheTag: imageCacheTag,
+          label: key,
+          onClick: () => onSelect(key),
+          url: sizeData.url
+        }, key);
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useTranslation","appendCacheTag","baseClass","MiniCarouselItem","active","imageCacheTag","label","onClick","url","src","_jsx","className","filter","Boolean","join","type","alt","MiniCarousel","doc","onSelect","selectedSize","uploadConfig","t","imageSizes","sizes","originalUrl","orderedSizeKeys","useMemo","length","Object","keys","map","name","_jsxs","_Fragment","key","sizeData"],"sources":["../../../src/elements/MiniCarousel/index.tsx"],"sourcesContent":["'use client'\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { appendCacheTag } from '../../utilities/appendCacheTag.js'\nimport './index.css'\n\nconst baseClass = 'mini-carousel'\n\ntype MiniCarouselItemProps = {\n  active: boolean\n  imageCacheTag?: false | string\n  label: string\n  onClick: () => void\n  url: string\n}\n\nconst MiniCarouselItem: React.FC<MiniCarouselItemProps> = ({\n  active,\n  imageCacheTag,\n  label,\n  onClick,\n  url,\n}) => {\n  const src = appendCacheTag(url, imageCacheTag)\n\n  return (\n    <button\n      aria-label={label}\n      aria-pressed={active ? 'true' : 'false'}\n      className={[`${baseClass}__item`, active && `${baseClass}__item--active`]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <img alt={label} src={src} />\n    </button>\n  )\n}\n\nexport type MiniCarouselProps = {\n  doc: {\n    sizes?: FileSizes\n    url?: string\n  } & Data\n  imageCacheTag?: false | string\n  onSelect: (sizeKey: null | string) => void\n  selectedSize: null | string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const MiniCarousel: React.FC<MiniCarouselProps> = ({\n  doc,\n  imageCacheTag,\n  onSelect,\n  selectedSize,\n  uploadConfig,\n}) => {\n  const { t } = useTranslation()\n  const { imageSizes } = uploadConfig\n  const { sizes, url: originalUrl } = doc\n\n  const orderedSizeKeys = React.useMemo(() => {\n    if (!imageSizes || imageSizes.length === 0) {\n      return Object.keys(sizes || {})\n    }\n    return imageSizes.map(({ name }) => name).filter((name) => sizes?.[name]?.url)\n  }, [imageSizes, sizes])\n\n  if (!originalUrl) {\n    return null\n  }\n\n  return (\n    <div className={[baseClass, 'scrollbar-thin'].join(' ')}>\n      <MiniCarouselItem\n        active={selectedSize === null}\n        imageCacheTag={imageCacheTag}\n        label={t('general:original')}\n        onClick={() => onSelect(null)}\n        url={originalUrl}\n      />\n\n      {orderedSizeKeys.length > 0 && (\n        <>\n          <div className={`${baseClass}__divider`} />\n          {orderedSizeKeys.map((key) => {\n            const sizeData = sizes?.[key]\n            if (!sizeData?.url) {\n              return null\n            }\n            return (\n              <MiniCarouselItem\n                active={selectedSize === key}\n                imageCacheTag={imageCacheTag}\n                key={key}\n                label={key}\n                onClick={() => onSelect(key)}\n                url={sizeData.url}\n              />\n            )\n          })}\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAUlB,MAAMC,gBAAA,GAAoDA,CAAC;EACzDC,MAAM;EACNC,aAAa;EACbC,KAAK;EACLC,OAAO;EACPC;AAAG,CACJ;EACC,MAAMC,GAAA,GAAMR,cAAA,CAAeO,GAAA,EAAKH,aAAA;EAEhC,oBACEK,IAAA,CAAC;IACC,cAAYJ,KAAA;IACZ,gBAAcF,MAAA,GAAS,SAAS;IAChCO,SAAA,EAAW,CAAC,GAAGT,SAAA,QAAiB,EAAEE,MAAA,IAAU,GAAGF,SAAA,gBAAyB,CAAC,CACtEU,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;IACRP,OAAA,EAASA,OAAA;IACTQ,IAAA,EAAK;cAEL,aAAAL,IAAA,CAAC;MAAIM,GAAA,EAAKV,KAAA;MAAOG,GAAA,EAAKA;;;AAG5B;AAaA,OAAO,MAAMQ,YAAA,GAA4CA,CAAC;EACxDC,GAAG;EACHb,aAAa;EACbc,QAAQ;EACRC,YAAY;EACZC;AAAY,CACb;EACC,MAAM;IAAEC;EAAC,CAAE,GAAGtB,cAAA;EACd,MAAM;IAAEuB;EAAU,CAAE,GAAGF,YAAA;EACvB,MAAM;IAAEG,KAAK;IAAEhB,GAAA,EAAKiB;EAAW,CAAE,GAAGP,GAAA;EAEpC,MAAMQ,eAAA,GAAkB3B,KAAA,CAAM4B,OAAO,CAAC;IACpC,IAAI,CAACJ,UAAA,IAAcA,UAAA,CAAWK,MAAM,KAAK,GAAG;MAC1C,OAAOC,MAAA,CAAOC,IAAI,CAACN,KAAA,IAAS,CAAC;IAC/B;IACA,OAAOD,UAAA,CAAWQ,GAAG,CAAC,CAAC;MAAEC;IAAI,CAAE,KAAKA,IAAA,EAAMpB,MAAM,CAAEoB,MAAA,IAASR,KAAA,GAAQQ,MAAA,CAAK,EAAExB,GAAA;EAC5E,GAAG,CAACe,UAAA,EAAYC,KAAA,CAAM;EAEtB,IAAI,CAACC,WAAA,EAAa;IAChB,OAAO;EACT;EAEA,oBACEQ,KAAA,CAAC;IAAItB,SAAA,EAAW,CAACT,SAAA,EAAW,iBAAiB,CAACY,IAAI,CAAC;4BACjDJ,IAAA,CAACP,gBAAA;MACCC,MAAA,EAAQgB,YAAA,KAAiB;MACzBf,aAAA,EAAeA,aAAA;MACfC,KAAA,EAAOgB,CAAA,CAAE;MACTf,OAAA,EAASA,CAAA,KAAMY,QAAA,CAAS;MACxBX,GAAA,EAAKiB;QAGNC,eAAA,CAAgBE,MAAM,GAAG,kBACxBK,KAAA,CAAAC,SAAA;8BACExB,IAAA,CAAC;QAAIC,SAAA,EAAW,GAAGT,SAAA;UAClBwB,eAAA,CAAgBK,GAAG,CAAEI,GAAA;QACpB,MAAMC,QAAA,GAAWZ,KAAA,GAAQW,GAAA,CAAI;QAC7B,IAAI,CAACC,QAAA,EAAU5B,GAAA,EAAK;UAClB,OAAO;QACT;QACA,oBACEE,IAAA,CAACP,gBAAA;UACCC,MAAA,EAAQgB,YAAA,KAAiBe,GAAA;UACzB9B,aAAA,EAAeA,aAAA;UAEfC,KAAA,EAAO6B,GAAA;UACP5B,OAAA,EAASA,CAAA,KAAMY,QAAA,CAASgB,GAAA;UACxB3B,GAAA,EAAK4B,QAAA,CAAS5B;WAHT2B,GAAA;MAMX;;;AAKV","ignoreList":[]}