@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal-debug.654e4ad

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

@@ -1,5 +1,7 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useDraggable } from '@dnd-kit/core';
+import React from 'react';
 import { DragHandleIcon } from '../../../icons/DragHandle/index.js';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
 import { ToolbarControls } from './Controls/index.js';
@@ -10,36 +12,86 @@ const DraggableToolbar = (props)=>{
     const { attributes, listeners, setNodeRef, transform } = useDraggable({
         id: 'live-preview-toolbar'
     });
-    return <div className={[
-        baseClass,
-        `${baseClass}--draggable`
-    ].join(' ')} style={{
-        left: `${toolbarPosition.x}px`,
-        top: `${toolbarPosition.y}px`,
-        ...transform ? {
-            transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
-        } : {}
-    }}>
-      <button {...listeners} {...attributes} className={`${baseClass}__drag-handle`} ref={setNodeRef} type="button">
-        <DragHandleIcon/>
-      </button>
-      <ToolbarControls {...props}/>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            baseClass,
+            `${baseClass}--draggable`
+        ].join(' '),
+        style: {
+            left: `${toolbarPosition.x}px`,
+            top: `${toolbarPosition.y}px`,
+            ...transform ? {
+                transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
+            } : {}
+        },
+        children: [
+            /*#__PURE__*/ _jsxDEV("button", {
+                ...listeners,
+                ...attributes,
+                className: `${baseClass}__drag-handle`,
+                ref: setNodeRef,
+                type: "button",
+                children: /*#__PURE__*/ _jsxDEV(DragHandleIcon, {}, void 0, false, {
+                    fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+                    lineNumber: 43,
+                    columnNumber: 9
+                }, this)
+            }, void 0, false, {
+                fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+                lineNumber: 36,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV(ToolbarControls, {
+                ...props
+            }, void 0, false, {
+                fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+                lineNumber: 45,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+        lineNumber: 22,
+        columnNumber: 5
+    }, this);
 };
 const StaticToolbar = (props)=>{
-    return <div className={[
-        baseClass,
-        `${baseClass}--static`
-    ].join(' ')}>
-      <ToolbarControls {...props}/>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            baseClass,
+            `${baseClass}--static`
+        ].join(' '),
+        children: /*#__PURE__*/ _jsxDEV(ToolbarControls, {
+            ...props
+        }, void 0, false, {
+            fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+            lineNumber: 53,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+        lineNumber: 52,
+        columnNumber: 5
+    }, this);
 };
 export const LivePreviewToolbar = (props)=>{
     const { draggable } = props;
     if (draggable) {
-        return <DraggableToolbar {...props}/>;
+        return /*#__PURE__*/ _jsxDEV(DraggableToolbar, {
+            ...props
+        }, void 0, false, {
+            fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+            lineNumber: 66,
+            columnNumber: 12
+        }, this);
     }
-    return <StaticToolbar {...props}/>;
+    return /*#__PURE__*/ _jsxDEV(StaticToolbar, {
+        ...props
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
+        lineNumber: 69,
+        columnNumber: 10
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <DragHandleIcon />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  {\n    draggable?: boolean\n  } & EditViewProps\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"names":["useDraggable","DragHandleIcon","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","toolbarPosition","attributes","listeners","setNodeRef","transform","id","div","className","join","style","left","x","top","y","undefined","button","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"mappings":"AAAA;AAGA,SAASA,YAAY,QAAQ,gBAAe;AAG5C,SAASC,cAAc,QAAQ,qCAAoC;AACnE,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,SAASC,eAAe,QAAQ,sBAAqB;AACrD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,mBAA4C,CAACC;IACjD,MAAM,EAAEC,eAAe,EAAE,GAAGL;IAE5B,MAAM,EAAEM,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGX,aAAa;QACpEY,IAAI;IACN;IAEA,QACGC,IACCC,WAAW;QAACV;QAAW,GAAGA,UAAU,WAAW,CAAC;KAAC,CAACW,IAAI,CAAC,MACvDC,OAAO;QACLC,MAAM,GAAGV,gBAAgBW,CAAC,CAAC,EAAE,CAAC;QAC9BC,KAAK,GAAGZ,gBAAgBa,CAAC,CAAC,EAAE,CAAC;QAC7B,GAAIT,YACA;YACEA,WAAWA,YACP,CAAC,YAAY,EAAEA,WAAWO,KAAK,EAAE,IAAI,EAAEP,WAAWS,KAAK,EAAE,MAAM,CAAC,GAChEC;QACN,IACA,CAAC,CAAC;IACR,GACD;MACC,CAACC,QACE,GAAGb,SAAS,GACZ,GAAGD,UAAU,EACdM,WAAW,GAAGV,UAAU,aAAa,CAAC,EACtCmB,KAAKb,YACLc,KAAK,SACN;QACC,CAACvB,gBAAiB;MACpB,EAAEqB,OAAO;MACT,CAACnB,iBAAiB,GAAGG,KAAK,GAAI;IAChC,EAAEO;AAEN;AAEA,MAAMY,gBAAyC,CAACnB;IAC9C,QACGO,IAAIC,WAAW;QAACV;QAAW,GAAGA,UAAU,QAAQ,CAAC;KAAC,CAACW,IAAI,CAAC,MAAM;MAC7D,CAACZ,iBAAiB,GAAGG,KAAK,GAAI;IAChC,EAAEO;AAEN;AAEA,OAAO,MAAMa,qBAIT,CAACpB;IACH,MAAM,EAAEqB,SAAS,EAAE,GAAGrB;IAEtB,IAAIqB,WAAW;QACb,QAAQtB,kBAAkB,GAAGC,KAAK;IACpC;IAEA,QAAQmB,eAAe,GAAGnB,KAAK;AACjC,EAAC"}
+{"version":3,"sources":["../../../../src/elements/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport { DragHandleIcon } from '../../../icons/DragHandle/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <DragHandleIcon />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  {\n    draggable?: boolean\n  } & EditViewProps\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"names":["useDraggable","React","DragHandleIcon","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","toolbarPosition","attributes","listeners","setNodeRef","transform","id","div","className","join","style","left","x","top","y","undefined","button","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"mappings":"AAAA;;AAGA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,OAAOC,WAAW,QAAO;AAEzB,SAASC,cAAc,QAAQ,qCAAoC;AACnE,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,SAASC,eAAe,QAAQ,sBAAqB;AACrD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,mBAA4C,CAACC;IACjD,MAAM,EAAEC,eAAe,EAAE,GAAGL;IAE5B,MAAM,EAAEM,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGZ,aAAa;QACpEa,IAAI;IACN;IAEA,qBACE,QAACC;QACCC,WAAW;YAACV;YAAW,GAAGA,UAAU,WAAW,CAAC;SAAC,CAACW,IAAI,CAAC;QACvDC,OAAO;YACLC,MAAM,GAAGV,gBAAgBW,CAAC,CAAC,EAAE,CAAC;YAC9BC,KAAK,GAAGZ,gBAAgBa,CAAC,CAAC,EAAE,CAAC;YAC7B,GAAIT,YACA;gBACEA,WAAWA,YACP,CAAC,YAAY,EAAEA,WAAWO,KAAK,EAAE,IAAI,EAAEP,WAAWS,KAAK,EAAE,MAAM,CAAC,GAChEC;YACN,IACA,CAAC,CAAC;QACR;;0BAEA,QAACC;gBACE,GAAGb,SAAS;gBACZ,GAAGD,UAAU;gBACdM,WAAW,GAAGV,UAAU,aAAa,CAAC;gBACtCmB,KAAKb;gBACLc,MAAK;0BAEL,cAAA,QAACvB;;;;;;;;;;0BAEH,QAACE;gBAAiB,GAAGG,KAAK;;;;;;;;;;;;AAGhC;AAEA,MAAMmB,gBAAyC,CAACnB;IAC9C,qBACE,QAACO;QAAIC,WAAW;YAACV;YAAW,GAAGA,UAAU,QAAQ,CAAC;SAAC,CAACW,IAAI,CAAC;kBACvD,cAAA,QAACZ;YAAiB,GAAGG,KAAK;;;;;;;;;;;AAGhC;AAEA,OAAO,MAAMoB,qBAIT,CAACpB;IACH,MAAM,EAAEqB,SAAS,EAAE,GAAGrB;IAEtB,IAAIqB,WAAW;QACb,qBAAO,QAACtB;YAAkB,GAAGC,KAAK;;;;;;IACpC;IAEA,qBAAO,QAACmB;QAAe,GAAGnB,KAAK;;;;;;AACjC,EAAC"}

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

@@ -1,5 +1,7 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { useDroppable } from '@dnd-kit/core';
+import React from 'react';
 import './index.scss';
 const baseClass = 'toolbar-area';
 export const ToolbarArea = (props)=>{
@@ -7,9 +9,15 @@ export const ToolbarArea = (props)=>{
     const { setNodeRef } = useDroppable({
         id: 'live-preview-area'
     });
-    return <div className={baseClass} ref={setNodeRef}>
-      {children}
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        ref: setNodeRef,
+        children: children
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/ToolbarArea/index.tsx",
+        lineNumber: 19,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"names":["useDroppable","baseClass","ToolbarArea","props","children","setNodeRef","id","div","className","ref"],"mappings":"AAAA;AACA,SAASA,YAAY,QAAQ,gBAAe;AAG5C,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAE,GAAGL,aAAa;QAClCM,IAAI;IACN;IAEA,QACGC,IAAIC,WAAWP,WAAWQ,KAAKJ,YAAY;MAC1C,CAACD,SAAS;IACZ,EAAEG;AAEN,EAAC"}
+{"version":3,"sources":["../../../../src/elements/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"names":["useDroppable","React","baseClass","ToolbarArea","props","children","setNodeRef","id","div","className","ref"],"mappings":"AAAA;;AACA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,OAAOC,WAAW,QAAO;AAEzB,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAE,GAAGN,aAAa;QAClCO,IAAI;IACN;IAEA,qBACE,QAACC;QAAIC,WAAWP;QAAWQ,KAAKJ;kBAC7BD;;;;;;AAGP,EAAC"}

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

@@ -1,6 +1,7 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { reduceFieldsToValues } from 'payload/shared';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useAllFormFields } from '../../../forms/Form/context.js';
 import { useDocumentEvents } from '../../../providers/DocumentEvents/index.js';
 import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
@@ -96,18 +97,57 @@ export const LivePreviewWindow = (props)=>{
     if (previewWindowType !== 'iframe') {
         return null;
     }
-    return <div className={[
-        baseClass,
-        isLivePreviewing && `${baseClass}--is-live-previewing`,
-        breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
-    ].filter(Boolean).join(' ')}>
-      <div className={`${baseClass}__wrapper`}>
-        <LivePreviewToolbar {...props}/>
-        <div className={`${baseClass}__main`}>
-          <DeviceContainer>{url ? <IFrame/> : <ShimmerEffect height="100%"/>}</DeviceContainer>
-        </div>
-      </div>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            baseClass,
+            isLivePreviewing && `${baseClass}--is-live-previewing`,
+            breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
+        ].filter(Boolean).join(' '),
+        children: /*#__PURE__*/ _jsxDEV("div", {
+            className: `${baseClass}__wrapper`,
+            children: [
+                /*#__PURE__*/ _jsxDEV(LivePreviewToolbar, {
+                    ...props
+                }, void 0, false, {
+                    fileName: "src/elements/LivePreview/Window/index.tsx",
+                    lineNumber: 134,
+                    columnNumber: 9
+                }, this),
+                /*#__PURE__*/ _jsxDEV("div", {
+                    className: `${baseClass}__main`,
+                    children: /*#__PURE__*/ _jsxDEV(DeviceContainer, {
+                        children: url ? /*#__PURE__*/ _jsxDEV(IFrame, {}, void 0, false, {
+                            fileName: "src/elements/LivePreview/Window/index.tsx",
+                            lineNumber: 136,
+                            columnNumber: 35
+                        }, this) : /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
+                            height: "100%"
+                        }, void 0, false, {
+                            fileName: "src/elements/LivePreview/Window/index.tsx",
+                            lineNumber: 136,
+                            columnNumber: 48
+                        }, this)
+                    }, void 0, false, {
+                        fileName: "src/elements/LivePreview/Window/index.tsx",
+                        lineNumber: 136,
+                        columnNumber: 11
+                    }, this)
+                }, void 0, false, {
+                    fileName: "src/elements/LivePreview/Window/index.tsx",
+                    lineNumber: 135,
+                    columnNumber: 9
+                }, this)
+            ]
+        }, void 0, true, {
+            fileName: "src/elements/LivePreview/Window/index.tsx",
+            lineNumber: 133,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/Window/index.tsx",
+        lineNumber: 124,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

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

package/dist/elements/Loading/index.js

@@ -1,4 +1,5 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useLoadingOverlay } from '../../elements/LoadingOverlay/index.js';
@@ -8,23 +9,74 @@ import './index.scss';
 const baseClass = 'loading-overlay';
 export const LoadingOverlay = ({ animationDuration, loadingText, overlayType, show = true })=>{
     const { t } = useTranslation();
-    return <div className={[
-        baseClass,
-        show ? `${baseClass}--entering` : `${baseClass}--exiting`,
-        overlayType ? `${baseClass}--${overlayType}` : ''
-    ].filter(Boolean).join(' ')} style={{
-        animationDuration: animationDuration || '500ms'
-    }}>
-      <div className={`${baseClass}__bars`}>
-        <div className={`${baseClass}__bar`}/>
-        <div className={`${baseClass}__bar`}/>
-        <div className={`${baseClass}__bar`}/>
-        <div className={`${baseClass}__bar`}/>
-        <div className={`${baseClass}__bar`}/>
-      </div>
-
-      <span className={`${baseClass}__text`}>{loadingText || t('general:loading')}</span>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: [
+            baseClass,
+            show ? `${baseClass}--entering` : `${baseClass}--exiting`,
+            overlayType ? `${baseClass}--${overlayType}` : ''
+        ].filter(Boolean).join(' '),
+        style: {
+            animationDuration: animationDuration || '500ms'
+        },
+        children: [
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__bars`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__bar`
+                    }, void 0, false, {
+                        fileName: "src/elements/Loading/index.tsx",
+                        lineNumber: 43,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__bar`
+                    }, void 0, false, {
+                        fileName: "src/elements/Loading/index.tsx",
+                        lineNumber: 44,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__bar`
+                    }, void 0, false, {
+                        fileName: "src/elements/Loading/index.tsx",
+                        lineNumber: 45,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__bar`
+                    }, void 0, false, {
+                        fileName: "src/elements/Loading/index.tsx",
+                        lineNumber: 46,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV("div", {
+                        className: `${baseClass}__bar`
+                    }, void 0, false, {
+                        fileName: "src/elements/Loading/index.tsx",
+                        lineNumber: 47,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/Loading/index.tsx",
+                lineNumber: 42,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("span", {
+                className: `${baseClass}__text`,
+                children: loadingText || t('general:loading')
+            }, void 0, false, {
+                fileName: "src/elements/Loading/index.tsx",
+                lineNumber: 50,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/Loading/index.tsx",
+        lineNumber: 30,
+        columnNumber: 5
+    }, this);
 };
 export const LoadingOverlayToggle = ({ name: key, type = 'fullscreen', loadingText, show })=>{
     const { toggleLoadingOverlay } = useLoadingOverlay();
@@ -59,7 +111,16 @@ export const FormLoadingOverlayToggle = ({ name, type = 'fullscreen', action, fo
         loading: t('general:loading'),
         update: t('general:updating')
     };
-    return <LoadingOverlayToggle loadingText={`${labels[action]} ${loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''}`.trim()} name={name} show={formIsLoading || isProcessing} type={type}/>;
+    return /*#__PURE__*/ _jsxDEV(LoadingOverlayToggle, {
+        loadingText: `${labels[action]} ${loadingSuffix ? getTranslation(loadingSuffix, i18n) : ''}`.trim(),
+        name: name,
+        show: formIsLoading || isProcessing,
+        type: type
+    }, void 0, false, {
+        fileName: "src/elements/Loading/index.tsx",
+        lineNumber: 114,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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.scss'\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"],"names":["getTranslation","React","useLoadingOverlay","useFormProcessing","useTranslation","baseClass","LoadingOverlay","animationDuration","loadingText","overlayType","show","t","div","className","filter","Boolean","join","style","span","LoadingOverlayToggle","name","key","type","toggleLoadingOverlay","useEffect","isLoading","undefined","FormLoadingOverlayToggle","action","formIsLoading","loadingSuffix","isProcessing","i18n","labels","create","loading","update","trim"],"mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,SAASC,iBAAiB,QAAQ,yCAAwC;AAC1E,SAASC,iBAAiB,QAAQ,8BAA6B;AAC/D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAErB,MAAMC,YAAY;AASlB,OAAO,MAAMC,iBAAgD,CAAC,EAC5DC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,OAAO,IAAI,EACZ;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGP;IAEd,QACGQ,IACCC,WAAW;QACTR;QACAK,OAAO,GAAGL,UAAU,UAAU,CAAC,GAAG,GAAGA,UAAU,SAAS,CAAC;QACzDI,cAAc,GAAGJ,UAAU,EAAE,EAAEI,aAAa,GAAG;KAChD,CACEK,MAAM,CAACC,SACPC,IAAI,CAAC,MACRC,OAAO;QACLV,mBAAmBA,qBAAqB;IAC1C,GACD;MACC,CAACK,IAAIC,WAAW,GAAGR,UAAU,MAAM,CAAC,EAAE;QACpC,CAACO,IAAIC,WAAW,GAAGR,UAAU,KAAK,CAAC,GAAI;QACvC,CAACO,IAAIC,WAAW,GAAGR,UAAU,KAAK,CAAC,GAAI;QACvC,CAACO,IAAIC,WAAW,GAAGR,UAAU,KAAK,CAAC,GAAI;QACvC,CAACO,IAAIC,WAAW,GAAGR,UAAU,KAAK,CAAC,GAAI;QACvC,CAACO,IAAIC,WAAW,GAAGR,UAAU,KAAK,CAAC,GAAI;MACzC,EAAEO,IAAI;;MAEN,CAACM,KAAKL,WAAW,GAAGR,UAAU,MAAM,CAAC,GAAGG,eAAeG,EAAE,qBAAqBO,KAAK;IACrF,EAAEN;AAEN,EAAC;AAQD,OAAO,MAAMO,uBAA+D,CAAC,EAC3EC,MAAMC,GAAG,EACTC,OAAO,YAAY,EACnBd,WAAW,EACXE,IAAI,EACL;IACC,MAAM,EAAEa,oBAAoB,EAAE,GAAGrB;IAEjCD,MAAMuB,SAAS,CAAC;QACdD,qBAAqB;YACnBD;YACAG,WAAWf;YACXW;YACAb,aAAaA,eAAekB;QAC9B;QAEA,OAAO;YACLH,qBAAqB;gBACnBD;gBACAG,WAAW;gBACXJ;YACF;QACF;IACF,GAAG;QAACX;QAAMa;QAAsBF;QAAKC;QAAMd;KAAY;IAEvD,OAAO;AACT,EAAC;AAUD,OAAO,MAAMmB,2BAAoE,CAAC,EAChFP,IAAI,EACJE,OAAO,YAAY,EACnBM,MAAM,EACNC,gBAAgB,KAAK,EACrBC,aAAa,EACd;IACC,MAAMC,eAAe5B;IACrB,MAAM,EAAE6B,IAAI,EAAErB,CAAC,EAAE,GAAGP;IAEpB,MAAM6B,SAAS;QACbC,QAAQvB,EAAE;QACVwB,SAASxB,EAAE;QACXyB,QAAQzB,EAAE;IACZ;IAEA,QACGQ,qBACCX,aAAa,GAAGyB,MAAM,CAACL,OAAO,CAAC,CAAC,EAC9BE,gBAAgB9B,eAAe8B,eAAeE,QAAQ,IACtD,CAACK,IAAI,IACPjB,MAAMA,MACNV,MAAMmB,iBAAiBE,cACvBT,MAAMA;AAGZ,EAAC"}
+{"version":3,"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.scss'\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"],"names":["getTranslation","React","useLoadingOverlay","useFormProcessing","useTranslation","baseClass","LoadingOverlay","animationDuration","loadingText","overlayType","show","t","div","className","filter","Boolean","join","style","span","LoadingOverlayToggle","name","key","type","toggleLoadingOverlay","useEffect","isLoading","undefined","FormLoadingOverlayToggle","action","formIsLoading","loadingSuffix","isProcessing","i18n","labels","create","loading","update","trim"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAIzB,SAASC,iBAAiB,QAAQ,yCAAwC;AAC1E,SAASC,iBAAiB,QAAQ,8BAA6B;AAC/D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,OAAO,eAAc;AAErB,MAAMC,YAAY;AASlB,OAAO,MAAMC,iBAAgD,CAAC,EAC5DC,iBAAiB,EACjBC,WAAW,EACXC,WAAW,EACXC,OAAO,IAAI,EACZ;IACC,MAAM,EAAEC,CAAC,EAAE,GAAGP;IAEd,qBACE,QAACQ;QACCC,WAAW;YACTR;YACAK,OAAO,GAAGL,UAAU,UAAU,CAAC,GAAG,GAAGA,UAAU,SAAS,CAAC;YACzDI,cAAc,GAAGJ,UAAU,EAAE,EAAEI,aAAa,GAAG;SAChD,CACEK,MAAM,CAACC,SACPC,IAAI,CAAC;QACRC,OAAO;YACLV,mBAAmBA,qBAAqB;QAC1C;;0BAEA,QAACK;gBAAIC,WAAW,GAAGR,UAAU,MAAM,CAAC;;kCAClC,QAACO;wBAAIC,WAAW,GAAGR,UAAU,KAAK,CAAC;;;;;;kCACnC,QAACO;wBAAIC,WAAW,GAAGR,UAAU,KAAK,CAAC;;;;;;kCACnC,QAACO;wBAAIC,WAAW,GAAGR,UAAU,KAAK,CAAC;;;;;;kCACnC,QAACO;wBAAIC,WAAW,GAAGR,UAAU,KAAK,CAAC;;;;;;kCACnC,QAACO;wBAAIC,WAAW,GAAGR,UAAU,KAAK,CAAC;;;;;;;;;;;;0BAGrC,QAACa;gBAAKL,WAAW,GAAGR,UAAU,MAAM,CAAC;0BAAGG,eAAeG,EAAE;;;;;;;;;;;;AAG/D,EAAC;AAQD,OAAO,MAAMQ,uBAA+D,CAAC,EAC3EC,MAAMC,GAAG,EACTC,OAAO,YAAY,EACnBd,WAAW,EACXE,IAAI,EACL;IACC,MAAM,EAAEa,oBAAoB,EAAE,GAAGrB;IAEjCD,MAAMuB,SAAS,CAAC;QACdD,qBAAqB;YACnBD;YACAG,WAAWf;YACXW;YACAb,aAAaA,eAAekB;QAC9B;QAEA,OAAO;YACLH,qBAAqB;gBACnBD;gBACAG,WAAW;gBACXJ;YACF;QACF;IACF,GAAG;QAACX;QAAMa;QAAsBF;QAAKC;QAAMd;KAAY;IAEvD,OAAO;AACT,EAAC;AAUD,OAAO,MAAMmB,2BAAoE,CAAC,EAChFP,IAAI,EACJE,OAAO,YAAY,EACnBM,MAAM,EACNC,gBAAgB,KAAK,EACrBC,aAAa,EACd;IACC,MAAMC,eAAe5B;IACrB,MAAM,EAAE6B,IAAI,EAAErB,CAAC,EAAE,GAAGP;IAEpB,MAAM6B,SAAS;QACbC,QAAQvB,EAAE;QACVwB,SAASxB,EAAE;QACXyB,QAAQzB,EAAE;IACZ;IAEA,qBACE,QAACQ;QACCX,aAAa,GAAGyB,MAAM,CAACL,OAAO,CAAC,CAAC,EAC9BE,gBAAgB9B,eAAe8B,eAAeE,QAAQ,IACtD,CAACK,IAAI;QACPjB,MAAMA;QACNV,MAAMmB,iBAAiBE;QACvBT,MAAMA;;;;;;AAGZ,EAAC"}

package/dist/elements/LoadingOverlay/index.js

@@ -1,11 +1,12 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { createContext } from 'react';
 import { LoadingOverlay } from '../../elements/Loading/index.js';
 import { useDelayedRender } from '../../hooks/useDelayedRender.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { defaultLoadingOverlayState, reducer } from './reducer.js';
 const animatedDuration = 250;
-const Context = createContext({
+const Context = /*#__PURE__*/ createContext({
     isOnScreen: false,
     toggleLoadingOverlay: undefined
 });
@@ -44,13 +45,29 @@ export const LoadingOverlayProvider = ({ children })=>{
         triggerDelayedRender,
         fallbackText
     ]);
-    return <Context value={{
-        isOnScreen: isMounted,
-        toggleLoadingOverlay
-    }}>
-      {isMounted && <LoadingOverlay animationDuration={`${animatedDuration}ms`} loadingText={overlays.loadingText || fallbackText} overlayType={overlays.overlayType} show={!isUnmounting}/>}
-      {children}
-    </Context>;
+    return /*#__PURE__*/ _jsxDEV(Context, {
+        value: {
+            isOnScreen: isMounted,
+            toggleLoadingOverlay
+        },
+        children: [
+            isMounted && /*#__PURE__*/ _jsxDEV(LoadingOverlay, {
+                animationDuration: `${animatedDuration}ms`,
+                loadingText: overlays.loadingText || fallbackText,
+                overlayType: overlays.overlayType,
+                show: !isUnmounting
+            }, void 0, false, {
+                fileName: "src/elements/LoadingOverlay/index.tsx",
+                lineNumber: 64,
+                columnNumber: 9
+            }, this),
+            children
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/LoadingOverlay/index.tsx",
+        lineNumber: 57,
+        columnNumber: 5
+    }, this);
 };
 export const useLoadingOverlay = ()=>{
     const contextHook = React.use(Context);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/LoadingOverlay/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext } from 'react'\n\nimport type { LoadingOverlayContext, ToggleLoadingOverlay } from './types.js'\n\nimport { LoadingOverlay } from '../../elements/Loading/index.js'\nimport { useDelayedRender } from '../../hooks/useDelayedRender.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { defaultLoadingOverlayState, reducer } from './reducer.js'\n\nconst animatedDuration = 250\n\nconst Context = createContext({\n  isOnScreen: false,\n  toggleLoadingOverlay: undefined,\n})\n\nexport const LoadingOverlayProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  const { t } = useTranslation()\n  const fallbackText = t('general:loading')\n  const [overlays, dispatchOverlay] = React.useReducer(reducer, defaultLoadingOverlayState)\n\n  const { isMounted, isUnmounting, triggerDelayedRender } = useDelayedRender({\n    delayBeforeShow: 1000,\n    inTimeout: animatedDuration,\n    minShowTime: 500,\n    outTimeout: animatedDuration,\n    show: overlays.isLoading,\n  })\n\n  const toggleLoadingOverlay = React.useCallback<ToggleLoadingOverlay>(\n    ({ type, isLoading, key, loadingText = fallbackText }) => {\n      if (isLoading) {\n        triggerDelayedRender()\n        dispatchOverlay({\n          type: 'add',\n          payload: {\n            type,\n            key,\n            loadingText,\n          },\n        })\n      } else {\n        dispatchOverlay({\n          type: 'remove',\n          payload: {\n            type,\n            key,\n          },\n        })\n      }\n    },\n    [triggerDelayedRender, fallbackText],\n  )\n\n  return (\n    <Context\n      value={{\n        isOnScreen: isMounted,\n        toggleLoadingOverlay,\n      }}\n    >\n      {isMounted && (\n        <LoadingOverlay\n          animationDuration={`${animatedDuration}ms`}\n          loadingText={overlays.loadingText || fallbackText}\n          overlayType={overlays.overlayType}\n          show={!isUnmounting}\n        />\n      )}\n      {children}\n    </Context>\n  )\n}\n\nexport const useLoadingOverlay = (): LoadingOverlayContext => {\n  const contextHook = React.use(Context)\n  if (contextHook === undefined) {\n    throw new Error('useLoadingOverlay must be used within a LoadingOverlayProvider')\n  }\n\n  return contextHook\n}\n"],"names":["React","createContext","LoadingOverlay","useDelayedRender","useTranslation","defaultLoadingOverlayState","reducer","animatedDuration","Context","isOnScreen","toggleLoadingOverlay","undefined","LoadingOverlayProvider","children","t","fallbackText","overlays","dispatchOverlay","useReducer","isMounted","isUnmounting","triggerDelayedRender","delayBeforeShow","inTimeout","minShowTime","outTimeout","show","isLoading","useCallback","type","key","loadingText","payload","value","animationDuration","overlayType","useLoadingOverlay","contextHook","use","Error"],"mappings":"AAAA;AACA,OAAOA,SAASC,aAAa,QAAQ,QAAO;AAI5C,SAASC,cAAc,QAAQ,kCAAiC;AAChE,SAASC,gBAAgB,QAAQ,kCAAiC;AAClE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,0BAA0B,EAAEC,OAAO,QAAQ,eAAc;AAElE,MAAMC,mBAAmB;AAEzB,MAAMC,UAAUP,cAAc;IAC5BQ,YAAY;IACZC,sBAAsBC;AACxB;AAEA,OAAO,MAAMC,yBAAmE,CAAC,EAAEC,QAAQ,EAAE;IAC3F,MAAM,EAAEC,CAAC,EAAE,GAAGV;IACd,MAAMW,eAAeD,EAAE;IACvB,MAAM,CAACE,UAAUC,gBAAgB,GAAGjB,MAAMkB,UAAU,CAACZ,SAASD;IAE9D,MAAM,EAAEc,SAAS,EAAEC,YAAY,EAAEC,oBAAoB,EAAE,GAAGlB,iBAAiB;QACzEmB,iBAAiB;QACjBC,WAAWhB;QACXiB,aAAa;QACbC,YAAYlB;QACZmB,MAAMV,SAASW,SAAS;IAC1B;IAEA,MAAMjB,uBAAuBV,MAAM4B,WAAW,CAC5C,CAAC,EAAEC,IAAI,EAAEF,SAAS,EAAEG,GAAG,EAAEC,cAAchB,YAAY,EAAE;QACnD,IAAIY,WAAW;YACbN;YACAJ,gBAAgB;gBACdY,MAAM;gBACNG,SAAS;oBACPH;oBACAC;oBACAC;gBACF;YACF;QACF,OAAO;YACLd,gBAAgB;gBACdY,MAAM;gBACNG,SAAS;oBACPH;oBACAC;gBACF;YACF;QACF;IACF,GACA;QAACT;QAAsBN;KAAa;IAGtC,QACGP,QACCyB,OAAO;QACLxB,YAAYU;QACZT;IACF,GACD;MACC,CAACS,cACEjB,eACCgC,mBAAmB,GAAG3B,iBAAiB,EAAE,CAAC,EAC1CwB,aAAaf,SAASe,WAAW,IAAIhB,cACrCoB,aAAanB,SAASmB,WAAW,EACjCT,MAAM,CAACN,gBAET;MACF,CAACP,SAAS;IACZ,EAAEL;AAEN,EAAC;AAED,OAAO,MAAM4B,oBAAoB;IAC/B,MAAMC,cAAcrC,MAAMsC,GAAG,CAAC9B;IAC9B,IAAI6B,gBAAgB1B,WAAW;QAC7B,MAAM,IAAI4B,MAAM;IAClB;IAEA,OAAOF;AACT,EAAC"}
+{"version":3,"sources":["../../../src/elements/LoadingOverlay/index.tsx"],"sourcesContent":["'use client'\nimport React, { createContext } from 'react'\n\nimport type { LoadingOverlayContext, ToggleLoadingOverlay } from './types.js'\n\nimport { LoadingOverlay } from '../../elements/Loading/index.js'\nimport { useDelayedRender } from '../../hooks/useDelayedRender.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { defaultLoadingOverlayState, reducer } from './reducer.js'\n\nconst animatedDuration = 250\n\nconst Context = createContext({\n  isOnScreen: false,\n  toggleLoadingOverlay: undefined,\n})\n\nexport const LoadingOverlayProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  const { t } = useTranslation()\n  const fallbackText = t('general:loading')\n  const [overlays, dispatchOverlay] = React.useReducer(reducer, defaultLoadingOverlayState)\n\n  const { isMounted, isUnmounting, triggerDelayedRender } = useDelayedRender({\n    delayBeforeShow: 1000,\n    inTimeout: animatedDuration,\n    minShowTime: 500,\n    outTimeout: animatedDuration,\n    show: overlays.isLoading,\n  })\n\n  const toggleLoadingOverlay = React.useCallback<ToggleLoadingOverlay>(\n    ({ type, isLoading, key, loadingText = fallbackText }) => {\n      if (isLoading) {\n        triggerDelayedRender()\n        dispatchOverlay({\n          type: 'add',\n          payload: {\n            type,\n            key,\n            loadingText,\n          },\n        })\n      } else {\n        dispatchOverlay({\n          type: 'remove',\n          payload: {\n            type,\n            key,\n          },\n        })\n      }\n    },\n    [triggerDelayedRender, fallbackText],\n  )\n\n  return (\n    <Context\n      value={{\n        isOnScreen: isMounted,\n        toggleLoadingOverlay,\n      }}\n    >\n      {isMounted && (\n        <LoadingOverlay\n          animationDuration={`${animatedDuration}ms`}\n          loadingText={overlays.loadingText || fallbackText}\n          overlayType={overlays.overlayType}\n          show={!isUnmounting}\n        />\n      )}\n      {children}\n    </Context>\n  )\n}\n\nexport const useLoadingOverlay = (): LoadingOverlayContext => {\n  const contextHook = React.use(Context)\n  if (contextHook === undefined) {\n    throw new Error('useLoadingOverlay must be used within a LoadingOverlayProvider')\n  }\n\n  return contextHook\n}\n"],"names":["React","createContext","LoadingOverlay","useDelayedRender","useTranslation","defaultLoadingOverlayState","reducer","animatedDuration","Context","isOnScreen","toggleLoadingOverlay","undefined","LoadingOverlayProvider","children","t","fallbackText","overlays","dispatchOverlay","useReducer","isMounted","isUnmounting","triggerDelayedRender","delayBeforeShow","inTimeout","minShowTime","outTimeout","show","isLoading","useCallback","type","key","loadingText","payload","value","animationDuration","overlayType","useLoadingOverlay","contextHook","use","Error"],"mappings":"AAAA;;AACA,OAAOA,SAASC,aAAa,QAAQ,QAAO;AAI5C,SAASC,cAAc,QAAQ,kCAAiC;AAChE,SAASC,gBAAgB,QAAQ,kCAAiC;AAClE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,0BAA0B,EAAEC,OAAO,QAAQ,eAAc;AAElE,MAAMC,mBAAmB;AAEzB,MAAMC,wBAAUP,cAAc;IAC5BQ,YAAY;IACZC,sBAAsBC;AACxB;AAEA,OAAO,MAAMC,yBAAmE,CAAC,EAAEC,QAAQ,EAAE;IAC3F,MAAM,EAAEC,CAAC,EAAE,GAAGV;IACd,MAAMW,eAAeD,EAAE;IACvB,MAAM,CAACE,UAAUC,gBAAgB,GAAGjB,MAAMkB,UAAU,CAACZ,SAASD;IAE9D,MAAM,EAAEc,SAAS,EAAEC,YAAY,EAAEC,oBAAoB,EAAE,GAAGlB,iBAAiB;QACzEmB,iBAAiB;QACjBC,WAAWhB;QACXiB,aAAa;QACbC,YAAYlB;QACZmB,MAAMV,SAASW,SAAS;IAC1B;IAEA,MAAMjB,uBAAuBV,MAAM4B,WAAW,CAC5C,CAAC,EAAEC,IAAI,EAAEF,SAAS,EAAEG,GAAG,EAAEC,cAAchB,YAAY,EAAE;QACnD,IAAIY,WAAW;YACbN;YACAJ,gBAAgB;gBACdY,MAAM;gBACNG,SAAS;oBACPH;oBACAC;oBACAC;gBACF;YACF;QACF,OAAO;YACLd,gBAAgB;gBACdY,MAAM;gBACNG,SAAS;oBACPH;oBACAC;gBACF;YACF;QACF;IACF,GACA;QAACT;QAAsBN;KAAa;IAGtC,qBACE,QAACP;QACCyB,OAAO;YACLxB,YAAYU;YACZT;QACF;;YAECS,2BACC,QAACjB;gBACCgC,mBAAmB,GAAG3B,iBAAiB,EAAE,CAAC;gBAC1CwB,aAAaf,SAASe,WAAW,IAAIhB;gBACrCoB,aAAanB,SAASmB,WAAW;gBACjCT,MAAM,CAACN;;;;;;YAGVP;;;;;;;AAGP,EAAC;AAED,OAAO,MAAMuB,oBAAoB;IAC/B,MAAMC,cAAcrC,MAAMsC,GAAG,CAAC9B;IAC9B,IAAI6B,gBAAgB1B,WAAW;QAC7B,MAAM,IAAI4B,MAAM;IAClB;IAEA,OAAOF;AACT,EAAC"}

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

@@ -1,5 +1,7 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { getTranslation } from '@payloadcms/translations';
+import React from 'react';
 import { ChevronIcon } from '../../../icons/Chevron/index.js';
 import { useLocale } from '../../../providers/Locale/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
@@ -9,18 +11,55 @@ export const LocalizerLabel = (props)=>{
     const { ariaLabel, className } = props;
     const locale = useLocale();
     const { i18n, t } = useTranslation();
-    return <div aria-label={ariaLabel || t('general:locale')} className={[
-        baseClass,
-        className
-    ].filter(Boolean).join(' ')} data-locale={locale ? locale.code : undefined}>
-      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}&nbsp;</div>
-      <div className={`${baseClass}__current`}>
-        <span className={`${baseClass}__current-label`}>
-          {`${getTranslation(locale.label, i18n)}`}
-        </span>
-        <ChevronIcon className={`${baseClass}__chevron`}/>
-      </div>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        "aria-label": ariaLabel || t('general:locale'),
+        className: [
+            baseClass,
+            className
+        ].filter(Boolean).join(' '),
+        "data-locale": locale ? locale.code : undefined,
+        children: [
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__label`,
+                children: [
+                    `${t('general:locale')}:`,
+                    " "
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/Localizer/LocalizerLabel/index.tsx",
+                lineNumber: 26,
+                columnNumber: 7
+            }, this),
+            /*#__PURE__*/ _jsxDEV("div", {
+                className: `${baseClass}__current`,
+                children: [
+                    /*#__PURE__*/ _jsxDEV("span", {
+                        className: `${baseClass}__current-label`,
+                        children: `${getTranslation(locale.label, i18n)}`
+                    }, void 0, false, {
+                        fileName: "src/elements/Localizer/LocalizerLabel/index.tsx",
+                        lineNumber: 28,
+                        columnNumber: 9
+                    }, this),
+                    /*#__PURE__*/ _jsxDEV(ChevronIcon, {
+                        className: `${baseClass}__chevron`
+                    }, void 0, false, {
+                        fileName: "src/elements/Localizer/LocalizerLabel/index.tsx",
+                        lineNumber: 31,
+                        columnNumber: 9
+                    }, this)
+                ]
+            }, void 0, true, {
+                fileName: "src/elements/Localizer/LocalizerLabel/index.tsx",
+                lineNumber: 27,
+                columnNumber: 7
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/Localizer/LocalizerLabel/index.tsx",
+        lineNumber: 21,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'localizer-button'\n\nexport const LocalizerLabel: React.FC<{\n  ariaLabel?: string\n  className?: string\n}> = (props) => {\n  const { ariaLabel, className } = props\n  const locale = useLocale()\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      aria-label={ariaLabel || t('general:locale')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      data-locale={locale ? locale.code : undefined}\n    >\n      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}&nbsp;</div>\n      <div className={`${baseClass}__current`}>\n        <span className={`${baseClass}__current-label`}>\n          {`${getTranslation(locale.label, i18n)}`}\n        </span>\n        <ChevronIcon className={`${baseClass}__chevron`} />\n      </div>\n    </div>\n  )\n}\n"],"names":["getTranslation","ChevronIcon","useLocale","useTranslation","baseClass","LocalizerLabel","props","ariaLabel","className","locale","i18n","t","div","aria-label","filter","Boolean","join","data-locale","code","undefined","span","label"],"mappings":"AAAA;AACA,SAASA,cAAc,QAAQ,2BAA0B;AAGzD,SAASC,WAAW,QAAQ,kCAAiC;AAC7D,SAASC,SAAS,QAAQ,qCAAoC;AAC9D,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,iBAGR,CAACC;IACJ,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IACjC,MAAMG,SAASP;IACf,MAAM,EAAEQ,IAAI,EAAEC,CAAC,EAAE,GAAGR;IAEpB,QACGS,IACCC,YAAYN,aAAaI,EAAE,mBAC3BH,WAAW;QAACJ;QAAWI;KAAU,CAACM,MAAM,CAACC,SAASC,IAAI,CAAC,MACvDC,aAAaR,SAASA,OAAOS,IAAI,GAAGC,WACrC;MACC,CAACP,IAAIJ,WAAW,GAAGJ,UAAU,OAAO,CAAC,GAAG,GAAGO,EAAE,kBAAkB,CAAC,CAAC,CAAC,MAAM,EAAEC,IAAI;MAC9E,CAACA,IAAIJ,WAAW,GAAGJ,UAAU,SAAS,CAAC,EAAE;QACvC,CAACgB,KAAKZ,WAAW,GAAGJ,UAAU,eAAe,CAAC,EAAE;UAC9C,CAAC,GAAGJ,eAAeS,OAAOY,KAAK,EAAEX,OAAO,CAAC;QAC3C,EAAEU,KAAK;QACP,CAACnB,YAAYO,WAAW,GAAGJ,UAAU,SAAS,CAAC,GAAI;MACrD,EAAEQ,IAAI;IACR,EAAEA;AAEN,EAAC"}
+{"version":3,"sources":["../../../../src/elements/Localizer/LocalizerLabel/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useLocale } from '../../../providers/Locale/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'localizer-button'\n\nexport const LocalizerLabel: React.FC<{\n  ariaLabel?: string\n  className?: string\n}> = (props) => {\n  const { ariaLabel, className } = props\n  const locale = useLocale()\n  const { i18n, t } = useTranslation()\n\n  return (\n    <div\n      aria-label={ariaLabel || t('general:locale')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      data-locale={locale ? locale.code : undefined}\n    >\n      <div className={`${baseClass}__label`}>{`${t('general:locale')}:`}&nbsp;</div>\n      <div className={`${baseClass}__current`}>\n        <span className={`${baseClass}__current-label`}>\n          {`${getTranslation(locale.label, i18n)}`}\n        </span>\n        <ChevronIcon className={`${baseClass}__chevron`} />\n      </div>\n    </div>\n  )\n}\n"],"names":["getTranslation","React","ChevronIcon","useLocale","useTranslation","baseClass","LocalizerLabel","props","ariaLabel","className","locale","i18n","t","div","aria-label","filter","Boolean","join","data-locale","code","undefined","span","label"],"mappings":"AAAA;;AACA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,kCAAiC;AAC7D,SAASC,SAAS,QAAQ,qCAAoC;AAC9D,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,iBAGR,CAACC;IACJ,MAAM,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGF;IACjC,MAAMG,SAASP;IACf,MAAM,EAAEQ,IAAI,EAAEC,CAAC,EAAE,GAAGR;IAEpB,qBACE,QAACS;QACCC,cAAYN,aAAaI,EAAE;QAC3BH,WAAW;YAACJ;YAAWI;SAAU,CAACM,MAAM,CAACC,SAASC,IAAI,CAAC;QACvDC,eAAaR,SAASA,OAAOS,IAAI,GAAGC;;0BAEpC,QAACP;gBAAIJ,WAAW,GAAGJ,UAAU,OAAO,CAAC;;oBAAG,GAAGO,EAAE,kBAAkB,CAAC,CAAC;oBAAC;;;;;;;0BAClE,QAACC;gBAAIJ,WAAW,GAAGJ,UAAU,SAAS,CAAC;;kCACrC,QAACgB;wBAAKZ,WAAW,GAAGJ,UAAU,eAAe,CAAC;kCAC3C,GAAGL,eAAeU,OAAOY,KAAK,EAAEX,OAAO;;;;;;kCAE1C,QAACT;wBAAYO,WAAW,GAAGJ,UAAU,SAAS,CAAC;;;;;;;;;;;;;;;;;;AAIvD,EAAC"}