@payloadcms/ui 3.68.0-internal-debug.591ab42 → 3.68.0-internal-debug.e9b66ee

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

@@ -1,5 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { ChevronIcon } from '../../../../icons/Chevron/index.js';
 import { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js';
@@ -25,202 +24,56 @@ export const ToolbarControls = ()=>{
         label: t('general:custom'),
         value: 'custom'
     };
-    return /*#__PURE__*/ _jsxDEV("div", {
-        className: baseClass,
-        children: [
-            breakpoints?.length > 0 && /*#__PURE__*/ _jsxDEV(Popup, {
-                button: /*#__PURE__*/ _jsxDEV(React.Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsxDEV("span", {
-                            children: breakpoints.find((bp)=>bp.name == breakpoint)?.label ?? customOption.label
-                        }, void 0, false, {
-                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                            lineNumber: 36,
-                            columnNumber: 15
-                        }, void 0),
-                        /*#__PURE__*/ _jsxDEV(ChevronIcon, {
-                            className: `${baseClass}__chevron`
-                        }, void 0, false, {
-                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                            lineNumber: 39,
-                            columnNumber: 15
-                        }, void 0)
-                    ]
-                }, void 0, true, {
-                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                    lineNumber: 35,
-                    columnNumber: 13
-                }, void 0),
-                className: `${baseClass}__breakpoint`,
-                horizontalAlign: "right",
-                render: ({ close })=>/*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
-                        children: /*#__PURE__*/ _jsxDEV(React.Fragment, {
-                            children: [
-                                breakpoints.map((bp)=>/*#__PURE__*/ _jsxDEV(PopupList.Button, {
-                                        active: bp.name == breakpoint,
-                                        onClick: ()=>{
-                                            setBreakpoint(bp.name);
-                                            close();
-                                        },
-                                        children: bp.label
-                                    }, bp.name, false, {
-                                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                                        lineNumber: 48,
-                                        columnNumber: 19
-                                    }, void 0)),
-                                /* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */ breakpoint === 'custom' && /*#__PURE__*/ _jsxDEV(PopupList.Button, {
-                                    active: breakpoint == customOption.value,
-                                    onClick: ()=>{
-                                        setBreakpoint(customOption.value);
-                                        close();
-                                    },
-                                    children: customOption.label
-                                }, void 0, false, {
-                                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                                    lineNumber: 61,
-                                    columnNumber: 19
-                                }, void 0)
-                            ]
-                        }, void 0, true, {
-                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                            lineNumber: 46,
-                            columnNumber: 15
-                        }, void 0)
-                    }, void 0, false, {
-                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                        lineNumber: 45,
-                        columnNumber: 13
-                    }, void 0),
-                showScrollbar: true,
-                verticalAlign: "bottom"
-            }, void 0, false, {
-                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                lineNumber: 33,
-                columnNumber: 9
-            }, this),
-            /*#__PURE__*/ _jsxDEV("div", {
-                className: `${baseClass}__device-size`,
-                children: [
-                    /*#__PURE__*/ _jsxDEV(PreviewFrameSizeInput, {
-                        axis: "x"
-                    }, void 0, false, {
-                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                        lineNumber: 79,
-                        columnNumber: 9
-                    }, this),
-                    /*#__PURE__*/ _jsxDEV("span", {
-                        className: `${baseClass}__size-divider`,
-                        children: /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
-                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                            lineNumber: 81,
-                            columnNumber: 11
-                        }, this)
-                    }, void 0, false, {
-                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                        lineNumber: 80,
-                        columnNumber: 9
-                    }, this),
-                    /*#__PURE__*/ _jsxDEV(PreviewFrameSizeInput, {
-                        axis: "y"
-                    }, void 0, false, {
-                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                        lineNumber: 83,
-                        columnNumber: 9
-                    }, this)
-                ]
-            }, void 0, true, {
-                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                lineNumber: 78,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV(Popup, {
-                button: /*#__PURE__*/ _jsxDEV(React.Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsxDEV("span", {
-                            children: [
-                                zoom * 100,
-                                "%"
-                            ]
-                        }, void 0, true, {
-                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                            lineNumber: 88,
-                            columnNumber: 13
-                        }, void 0),
-                        /*#__PURE__*/ _jsxDEV(ChevronIcon, {
-                            className: `${baseClass}__chevron`
-                        }, void 0, false, {
-                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                            lineNumber: 89,
-                            columnNumber: 13
-                        }, void 0)
-                    ]
-                }, void 0, true, {
-                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                    lineNumber: 87,
-                    columnNumber: 11
-                }, void 0),
-                className: `${baseClass}__zoom`,
-                horizontalAlign: "right",
-                render: ({ close })=>/*#__PURE__*/ _jsxDEV(PopupList.ButtonGroup, {
-                        children: /*#__PURE__*/ _jsxDEV(React.Fragment, {
-                            children: zoomOptions.map((zoomValue)=>/*#__PURE__*/ _jsxDEV(PopupList.Button, {
-                                    active: zoom * 100 == zoomValue,
-                                    onClick: ()=>{
-                                        setZoom(zoomValue / 100);
-                                        close();
-                                    },
-                                    children: [
-                                        zoomValue,
-                                        "%"
-                                    ]
-                                }, zoomValue, true, {
-                                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                                    lineNumber: 98,
-                                    columnNumber: 17
-                                }, void 0))
-                        }, void 0, false, {
-                            fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                            lineNumber: 96,
-                            columnNumber: 13
-                        }, void 0)
-                    }, void 0, false, {
-                        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                        lineNumber: 95,
-                        columnNumber: 11
-                    }, void 0),
-                showScrollbar: true,
-                verticalAlign: "bottom"
-            }, void 0, false, {
-                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                lineNumber: 85,
-                columnNumber: 7
-            }, this),
-            /*#__PURE__*/ _jsxDEV("a", {
-                className: `${baseClass}__external`,
-                href: url,
-                onClick: (e)=>{
-                    e.preventDefault();
-                    setPreviewWindowType('popup');
-                },
-                target: "_blank",
-                title: "Open in new window",
-                type: "button",
-                children: /*#__PURE__*/ _jsxDEV(ExternalLinkIcon, {}, void 0, false, {
-                    fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                    lineNumber: 126,
-                    columnNumber: 9
-                }, this)
-            }, void 0, false, {
-                fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-                lineNumber: 115,
-                columnNumber: 7
-            }, this)
-        ]
-    }, void 0, true, {
-        fileName: "src/elements/LivePreview/Toolbar/Controls/index.tsx",
-        lineNumber: 31,
-        columnNumber: 5
-    }, this);
+    return <div className={baseClass}>
+      {breakpoints?.length > 0 && <Popup button={<React.Fragment>
+              <span>
+                {breakpoints.find((bp)=>bp.name == breakpoint)?.label ?? customOption.label}
+              </span>
+              <ChevronIcon className={`${baseClass}__chevron`}/>
+            </React.Fragment>} className={`${baseClass}__breakpoint`} horizontalAlign="right" render={({ close })=><PopupList.ButtonGroup>
+              <React.Fragment>
+                {breakpoints.map((bp)=><PopupList.Button active={bp.name == breakpoint} key={bp.name} onClick={()=>{
+                setBreakpoint(bp.name);
+                close();
+            }}>
+                    {bp.label}
+                  </PopupList.Button>)}
+                {}
+                {breakpoint === 'custom' && <PopupList.Button active={breakpoint == customOption.value} onClick={()=>{
+            setBreakpoint(customOption.value);
+            close();
+        }}>
+                    {customOption.label}
+                  </PopupList.Button>}
+              </React.Fragment>
+            </PopupList.ButtonGroup>} showScrollbar verticalAlign="bottom"/>}
+      <div className={`${baseClass}__device-size`}>
+        <PreviewFrameSizeInput axis="x"/>
+        <span className={`${baseClass}__size-divider`}>
+          <XIcon/>
+        </span>
+        <PreviewFrameSizeInput axis="y"/>
+      </div>
+      <Popup button={<React.Fragment>
+            <span>{zoom * 100}%</span>
+            <ChevronIcon className={`${baseClass}__chevron`}/>
+          </React.Fragment>} className={`${baseClass}__zoom`} horizontalAlign="right" render={({ close })=><PopupList.ButtonGroup>
+            <React.Fragment>
+              {zoomOptions.map((zoomValue)=><PopupList.Button active={zoom * 100 == zoomValue} key={zoomValue} onClick={()=>{
+                setZoom(zoomValue / 100);
+                close();
+            }}>
+                  {zoomValue}%
+                </PopupList.Button>)}
+            </React.Fragment>
+          </PopupList.ButtonGroup>} showScrollbar verticalAlign="bottom"/>
+      <a className={`${baseClass}__external`} href={url} onClick={(e)=>{
+        e.preventDefault();
+        setPreviewWindowType('popup');
+    }} target="_blank" title="Open in new window" type="button">
+        <ExternalLinkIcon/>
+      </a>
+    </div>;
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js'\nimport { XIcon } from '../../../../icons/X/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../../../Popup/index.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          button={\n            <React.Fragment>\n              <span>\n                {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n              </span>\n              <ChevronIcon className={`${baseClass}__chevron`} />\n            </React.Fragment>\n          }\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => (\n                  <PopupList.Button\n                    active={bp.name == breakpoint}\n                    key={bp.name}\n                    onClick={() => {\n                      setBreakpoint(bp.name)\n                      close()\n                    }}\n                  >\n                    {bp.label}\n                  </PopupList.Button>\n                ))}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.Button\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.Button>\n                )}\n              </React.Fragment>\n            </PopupList.ButtonGroup>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__device-size`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <span className={`${baseClass}__size-divider`}>\n          <XIcon />\n        </span>\n        <PreviewFrameSizeInput axis=\"y\" />\n      </div>\n      <Popup\n        button={\n          <React.Fragment>\n            <span>{zoom * 100}%</span>\n            <ChevronIcon className={`${baseClass}__chevron`} />\n          </React.Fragment>\n        }\n        className={`${baseClass}__zoom`}\n        horizontalAlign=\"right\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            <React.Fragment>\n              {zoomOptions.map((zoomValue) => (\n                <PopupList.Button\n                  active={zoom * 100 == zoomValue}\n                  key={zoomValue}\n                  onClick={() => {\n                    setZoom(zoomValue / 100)\n                    close()\n                  }}\n                >\n                  {zoomValue}%\n                </PopupList.Button>\n              ))}\n            </React.Fragment>\n          </PopupList.ButtonGroup>\n        )}\n        showScrollbar\n        verticalAlign=\"bottom\"\n      />\n      <a\n        className={`${baseClass}__external`}\n        href={url}\n        onClick={(e) => {\n          e.preventDefault()\n          setPreviewWindowType('popup')\n        }}\n        target=\"_blank\"\n        title=\"Open in new window\"\n        type=\"button\"\n      >\n        <ExternalLinkIcon />\n      </a>\n    </div>\n  )\n}\n"],"names":["React","ChevronIcon","ExternalLinkIcon","XIcon","useLivePreviewContext","useTranslation","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","customOption","label","value","div","className","length","button","Fragment","span","find","bp","name","horizontalAlign","render","close","ButtonGroup","map","Button","active","onClick","showScrollbar","verticalAlign","axis","zoomValue","a","href","e","preventDefault","target","title","type"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/elements/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport React from 'react'\n\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js'\nimport { XIcon } from '../../../../icons/X/index.js'\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Popup, PopupList } from '../../../Popup/index.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n    useLivePreviewContext()\n\n  const { t } = useTranslation()\n\n  const customOption = {\n    label: t('general:custom'),\n    value: 'custom',\n  }\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          button={\n            <React.Fragment>\n              <span>\n                {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n              </span>\n              <ChevronIcon className={`${baseClass}__chevron`} />\n            </React.Fragment>\n          }\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => (\n                  <PopupList.Button\n                    active={bp.name == breakpoint}\n                    key={bp.name}\n                    onClick={() => {\n                      setBreakpoint(bp.name)\n                      close()\n                    }}\n                  >\n                    {bp.label}\n                  </PopupList.Button>\n                ))}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.Button\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.Button>\n                )}\n              </React.Fragment>\n            </PopupList.ButtonGroup>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__device-size`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <span className={`${baseClass}__size-divider`}>\n          <XIcon />\n        </span>\n        <PreviewFrameSizeInput axis=\"y\" />\n      </div>\n      <Popup\n        button={\n          <React.Fragment>\n            <span>{zoom * 100}%</span>\n            <ChevronIcon className={`${baseClass}__chevron`} />\n          </React.Fragment>\n        }\n        className={`${baseClass}__zoom`}\n        horizontalAlign=\"right\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            <React.Fragment>\n              {zoomOptions.map((zoomValue) => (\n                <PopupList.Button\n                  active={zoom * 100 == zoomValue}\n                  key={zoomValue}\n                  onClick={() => {\n                    setZoom(zoomValue / 100)\n                    close()\n                  }}\n                >\n                  {zoomValue}%\n                </PopupList.Button>\n              ))}\n            </React.Fragment>\n          </PopupList.ButtonGroup>\n        )}\n        showScrollbar\n        verticalAlign=\"bottom\"\n      />\n      <a\n        className={`${baseClass}__external`}\n        href={url}\n        onClick={(e) => {\n          e.preventDefault()\n          setPreviewWindowType('popup')\n        }}\n        target=\"_blank\"\n        title=\"Open in new window\"\n        type=\"button\"\n      >\n        <ExternalLinkIcon />\n      </a>\n    </div>\n  )\n}\n"],"names":["React","ChevronIcon","ExternalLinkIcon","XIcon","useLivePreviewContext","useTranslation","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","customOption","label","value","div","className","length","button","Fragment","span","find","bp","name","horizontalAlign","render","close","ButtonGroup","map","Button","active","key","onClick","showScrollbar","verticalAlign","axis","zoomValue","a","href","e","preventDefault","target","title","type"],"mappings":"AAAA;AAIA,OAAOA,WAAW,QAAO;AAEzB,SAASC,WAAW,QAAQ,qCAAoC;AAChE,SAASC,gBAAgB,QAAQ,0CAAyC;AAC1E,SAASC,KAAK,QAAQ,+BAA8B;AACpD,SAASC,qBAAqB,QAAQ,+CAA8C;AACpF,SAASC,cAAc,QAAQ,6CAA4C;AAC3E,SAASC,KAAK,EAAEC,SAAS,QAAQ,0BAAyB;AAC1D,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAClB,MAAMC,cAAc;IAAC;IAAI;IAAI;IAAK;IAAK;IAAK;CAAI;AAEhD,OAAO,MAAMC,kBAA2C;IACtD,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,aAAa,EAAEC,oBAAoB,EAAEC,OAAO,EAAEC,GAAG,EAAEC,IAAI,EAAE,GACxFd;IAEF,MAAM,EAAEe,CAAC,EAAE,GAAGd;IAEd,MAAMe,eAAe;QACnBC,OAAOF,EAAE;QACTG,OAAO;IACT;IAEA,QACGC,IAAIC,WAAWf,WAAW;MACzB,CAACI,aAAaY,SAAS,MACpBnB,MACCoB,SACG1B,MAAM2B,SAAS;cACd,CAACC,KAAK;gBACJ,CAACf,YAAYgB,IAAI,CAAC,CAACC,KAAOA,GAAGC,IAAI,IAAInB,aAAaS,SAASD,aAAaC,KAAK,CAAC;cAChF,EAAEO,KAAK;cACP,CAAC3B,YAAYuB,WAAW,GAAGf,UAAU,SAAS,CAAC,GAAI;YACrD,EAAET,MAAM2B,WAEVH,WAAW,GAAGf,UAAU,YAAY,CAAC,EACrCuB,gBAAgB,QAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,IACf3B,UAAU4B,YAAY;cACrB,CAACnC,MAAM2B,SAAS;gBACd,CAACd,YAAYuB,GAAG,CAAC,CAACN,MACfvB,UAAU8B,OACTC,QAAQR,GAAGC,IAAI,IAAInB,YACnB2B,KAAKT,GAAGC,IAAI,EACZS,SAAS;gBACP1B,cAAcgB,GAAGC,IAAI;gBACrBG;YACF,GACD;oBACC,CAACJ,GAAGT,KAAK,CAAC;kBACZ,EAAEd,UAAU8B,SACX;gBACH,EAAmH;gBACnH,CAACzB,eAAe,aACbL,UAAU8B,OACTC,QAAQ1B,cAAcQ,aAAaE,KAAK,EACxCkB,SAAS;YACP1B,cAAcM,aAAaE,KAAK;YAChCY;QACF,GACD;oBACC,CAACd,aAAaC,KAAK,CAAC;kBACtB,EAAEd,UAAU8B,QACZ;cACJ,EAAErC,MAAM2B,SAAS;YACnB,EAAEpB,UAAU4B,cAEdM,cACAC,cAAc,WAEhB;MACF,CAACnB,IAAIC,WAAW,GAAGf,UAAU,aAAa,CAAC,EAAE;QAC3C,CAACD,sBAAsBmC,KAAK,KAAM;QAClC,CAACf,KAAKJ,WAAW,GAAGf,UAAU,cAAc,CAAC,EAAE;UAC7C,CAACN,OAAQ;QACX,EAAEyB,KAAK;QACP,CAACpB,sBAAsBmC,KAAK,KAAM;MACpC,EAAEpB,IAAI;MACN,CAACjB,MACCoB,SACG1B,MAAM2B,SAAS;YACd,CAACC,MAAMV,OAAO,IAAI,CAAC,EAAEU,KAAK;YAC1B,CAAC3B,YAAYuB,WAAW,GAAGf,UAAU,SAAS,CAAC,GAAI;UACrD,EAAET,MAAM2B,WAEVH,WAAW,GAAGf,UAAU,MAAM,CAAC,EAC/BuB,gBAAgB,QAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,IACf3B,UAAU4B,YAAY;YACrB,CAACnC,MAAM2B,SAAS;cACd,CAACjB,YAAY0B,GAAG,CAAC,CAACQ,aACfrC,UAAU8B,OACTC,QAAQpB,OAAO,OAAO0B,WACtBL,KAAKK,WACLJ,SAAS;gBACPxB,QAAQ4B,YAAY;gBACpBV;YACF,GACD;kBACC,CAACU,UAAU;gBACb,EAAErC,UAAU8B,SACX;YACL,EAAErC,MAAM2B,SAAS;UACnB,EAAEpB,UAAU4B,cAEdM,cACAC,cAAc,UACd;MACF,CAACG,EACCrB,WAAW,GAAGf,UAAU,UAAU,CAAC,EACnCqC,MAAM7B,KACNuB,SAAS,CAACO;QACRA,EAAEC,cAAc;QAChBjC,qBAAqB;IACvB,GACAkC,OAAO,SACPC,MAAM,qBACNC,KAAK,SACN;QACC,CAACjD,kBAAmB;MACtB,EAAE2C,EAAE;IACN,EAAEtB;AAEN,EAAC"}

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

@@ -1,5 +1,4 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useCallback, useEffect } from 'react';
 import { useLivePreviewContext } from '../../../../providers/LivePreview/context.js';
 import './index.scss';
@@ -53,19 +52,7 @@ export const PreviewFrameSizeInput = (props)=>{
         size,
         zoom
     ]);
-    return /*#__PURE__*/ _jsxDEV("input", {
-        className: baseClass,
-        min: 0,
-        name: axis === 'x' ? 'live-preview-width' : 'live-preview-height',
-        onChange: handleChange,
-        step: 1,
-        type: "number",
-        value: internalState || 0
-    }, void 0, false, {
-        fileName: "src/elements/LivePreview/Toolbar/SizeInput/index.tsx",
-        lineNumber: 64,
-        columnNumber: 5
-    }, this);
+    return <input className={baseClass} min={0} name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'} onChange={handleChange} step={1} type="number" value={internalState || 0}/>;
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <input\n      className={baseClass}\n      min={0}\n      name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      onChange={handleChange}\n      step={1}\n      type=\"number\"\n      value={internalState || 0}\n    />\n  )\n}\n"],"names":["React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","handleChange","e","newValue","Number","target","value","type","toFixed","input","className","min","name","onChange","step"],"mappings":"AAAA;;AACA,OAAOA,SAASC,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAErD,SAASC,qBAAqB,QAAQ,+CAA8C;AACpF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAER,CAACC;IACJ,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAM,EAAEE,UAAU,EAAEC,kBAAkB,EAAEC,aAAa,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAC1EV;IAEF,MAAM,CAACW,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CACtD,AAACT,CAAAA,SAAS,MAAME,oBAAoBQ,QAAQR,oBAAoBS,MAAK,KAAM;IAG7E,gFAAgF;IAChF,8DAA8D;IAC9D,MAAMC,eAAelB,YACnB,CAACmB;QACC,IAAIC,WAAWC,OAAOF,EAAEG,MAAM,CAACC,KAAK;QAEpC,IAAIH,WAAW,GAAG;YAChBA,WAAW;QACb;QAEAN,iBAAiBM;QACjBX,cAAc;QAEd,sGAAsG;QACtG,mFAAmF;QACnFC,QAAQ;YACNc,MAAM;YACND,OAAO;gBACLN,QAAQX,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBS,OAAOQ,QAAQ,MAAMb;gBAClFI,OAAOV,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBQ,MAAMS,QAAQ,MAAMb;YAClF;QACF;IACF,GACA;QAACN;QAAMG;QAAeD;QAAoBE;QAASE;KAAK;IAG1D,4FAA4F;IAC5F,6FAA6F;IAC7FX,UAAU;QACR,IAAIM,eAAe,gBAAgBC,oBAAoB;YACrD,IAAIF,SAAS,KAAK;gBAChBQ,iBAAiBO,OAAOb,mBAAmBQ,KAAK,CAACS,OAAO,CAAC,MAAMb;YACjE,OAAO;gBACLE,iBAAiBO,OAAOb,mBAAmBS,MAAM,CAACQ,OAAO,CAAC,MAAMb;YAClE;QACF;QAEA,IAAIL,eAAe,gBAAgBI,MAAM;YACvCG,iBAAiBR,SAAS,MAAMK,KAAKK,KAAK,GAAGL,KAAKM,MAAM;QAC1D;IACF,GAAG;QAACV;QAAYD;QAAME;QAAoBG;QAAMC;KAAK;IAErD,qBACE,QAACc;QACCC,WAAWxB;QACXyB,KAAK;QACLC,MAAMvB,SAAS,MAAM,uBAAuB;QAC5CwB,UAAUZ;QACVa,MAAM;QACNP,MAAK;QACLD,OAAOV,iBAAiB;;;;;;AAG9B,EAAC"}
+{"version":3,"sources":["../../../../../src/elements/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) {\n        newValue = 0\n      }\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') {\n        setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      } else {\n        setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n      }\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <input\n      className={baseClass}\n      min={0}\n      name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      onChange={handleChange}\n      step={1}\n      type=\"number\"\n      value={internalState || 0}\n    />\n  )\n}\n"],"names":["React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","handleChange","e","newValue","Number","target","value","type","toFixed","input","className","min","name","onChange","step"],"mappings":"AAAA;AACA,OAAOA,SAASC,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAErD,SAASC,qBAAqB,QAAQ,+CAA8C;AACpF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAER,CAACC;IACJ,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAM,EAAEE,UAAU,EAAEC,kBAAkB,EAAEC,aAAa,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAC1EV;IAEF,MAAM,CAACW,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CACtD,AAACT,CAAAA,SAAS,MAAME,oBAAoBQ,QAAQR,oBAAoBS,MAAK,KAAM;IAG7E,gFAAgF;IAChF,8DAA8D;IAC9D,MAAMC,eAAelB,YACnB,CAACmB;QACC,IAAIC,WAAWC,OAAOF,EAAEG,MAAM,CAACC,KAAK;QAEpC,IAAIH,WAAW,GAAG;YAChBA,WAAW;QACb;QAEAN,iBAAiBM;QACjBX,cAAc;QAEd,sGAAsG;QACtG,mFAAmF;QACnFC,QAAQ;YACNc,MAAM;YACND,OAAO;gBACLN,QAAQX,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBS,OAAOQ,QAAQ,MAAMb;gBAClFI,OAAOV,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBQ,MAAMS,QAAQ,MAAMb;YAClF;QACF;IACF,GACA;QAACN;QAAMG;QAAeD;QAAoBE;QAASE;KAAK;IAG1D,4FAA4F;IAC5F,6FAA6F;IAC7FX,UAAU;QACR,IAAIM,eAAe,gBAAgBC,oBAAoB;YACrD,IAAIF,SAAS,KAAK;gBAChBQ,iBAAiBO,OAAOb,mBAAmBQ,KAAK,CAACS,OAAO,CAAC,MAAMb;YACjE,OAAO;gBACLE,iBAAiBO,OAAOb,mBAAmBS,MAAM,CAACQ,OAAO,CAAC,MAAMb;YAClE;QACF;QAEA,IAAIL,eAAe,gBAAgBI,MAAM;YACvCG,iBAAiBR,SAAS,MAAMK,KAAKK,KAAK,GAAGL,KAAKM,MAAM;QAC1D;IACF,GAAG;QAACV;QAAYD;QAAME;QAAoBG;QAAMC;KAAK;IAErD,QACGc,MACCC,WAAWxB,WACXyB,KAAK,GACLC,MAAMvB,SAAS,MAAM,uBAAuB,uBAC5CwB,UAAUZ,cACVa,MAAM,GACNP,KAAK,SACLD,OAAOV,iBAAiB;AAG9B,EAAC"}

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

@@ -1,7 +1,5 @@
 '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';
@@ -12,86 +10,36 @@ const DraggableToolbar = (props)=>{
     const { attributes, listeners, setNodeRef, transform } = useDraggable({
         id: 'live-preview-toolbar'
     });
-    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);
+    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>;
 };
 const StaticToolbar = (props)=>{
-    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);
+    return <div className={[
+        baseClass,
+        `${baseClass}--static`
+    ].join(' ')}>
+      <ToolbarControls {...props}/>
+    </div>;
 };
 export const LivePreviewToolbar = (props)=>{
     const { draggable } = props;
     if (draggable) {
-        return /*#__PURE__*/ _jsxDEV(DraggableToolbar, {
-            ...props
-        }, void 0, false, {
-            fileName: "src/elements/LivePreview/Toolbar/index.tsx",
-            lineNumber: 66,
-            columnNumber: 12
-        }, this);
+        return <DraggableToolbar {...props}/>;
     }
-    return /*#__PURE__*/ _jsxDEV(StaticToolbar, {
-        ...props
-    }, void 0, false, {
-        fileName: "src/elements/LivePreview/Toolbar/index.tsx",
-        lineNumber: 69,
-        columnNumber: 10
-    }, this);
+    return <StaticToolbar {...props}/>;
 };
 
 //# 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","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"}
+{"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"}

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

@@ -1,7 +1,5 @@
 '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)=>{
@@ -9,15 +7,9 @@ export const ToolbarArea = (props)=>{
     const { setNodeRef } = useDroppable({
         id: 'live-preview-area'
     });
-    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);
+    return <div className={baseClass} ref={setNodeRef}>
+      {children}
+    </div>;
 };
 
 //# 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","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"}
+{"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"}

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

@@ -1,7 +1,6 @@
 'use client';
-import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { reduceFieldsToValues } from 'payload/shared';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useAllFormFields } from '../../../forms/Form/context.js';
 import { useDocumentEvents } from '../../../providers/DocumentEvents/index.js';
 import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
@@ -97,57 +96,18 @@ export const LivePreviewWindow = (props)=>{
     if (previewWindowType !== 'iframe') {
         return null;
     }
-    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);
+    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>;
 };
 
 //# sourceMappingURL=index.js.map