@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.10bf491

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

@@ -1,4 +1,7 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { ChevronIcon } from '../../../../icons/Chevron/index.js';
 import { ExternalLinkIcon } from '../../../../icons/ExternalLink/index.js';
@@ -9,71 +12,146 @@ import { Popup, PopupList } from '../../../Popup/index.js';
 import { PreviewFrameSizeInput } from '../SizeInput/index.js';
 import './index.scss';
 const baseClass = 'live-preview-toolbar-controls';
-const zoomOptions = [
-    50,
-    75,
-    100,
-    125,
-    150,
-    200
-];
-export const ToolbarControls = ()=>{
-    const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } = useLivePreviewContext();
-    const { t } = useTranslation();
+const zoomOptions = [50, 75, 100, 125, 150, 200];
+export const ToolbarControls = () => {
+  const $ = _c(14);
+  const {
+    breakpoint,
+    breakpoints,
+    setBreakpoint,
+    setPreviewWindowType,
+    setZoom,
+    url,
+    zoom
+  } = useLivePreviewContext();
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== breakpoint || $[1] !== breakpoints || $[2] !== setBreakpoint || $[3] !== setPreviewWindowType || $[4] !== setZoom || $[5] !== t || $[6] !== url || $[7] !== zoom) {
     const customOption = {
-        label: t('general:custom'),
-        value: 'custom'
+      label: t("general:custom"),
+      value: "custom"
     };
-    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={()=>{
+    let t2;
+    if ($[9] !== setZoom || $[10] !== zoom) {
+      t2 = t3 => {
+        const {
+          close: close_0
+        } = t3;
+        return _jsx(PopupList.ButtonGroup, {
+          children: _jsx(React.Fragment, {
+            children: zoomOptions.map(zoomValue => _jsxs(PopupList.Button, {
+              active: zoom * 100 == zoomValue,
+              onClick: () => {
                 setZoom(zoomValue / 100);
-                close();
-            }}>
-                  {zoomValue}%
-                </PopupList.Button>)}
-            </React.Fragment>
-          </PopupList.ButtonGroup>} showScrollbar verticalAlign="bottom"/>
-      <a className={`${baseClass}__external`} href={url} onClick={(e)=>{
+                close_0();
+              },
+              children: [zoomValue, "%"]
+            }, zoomValue))
+          })
+        });
+      };
+      $[9] = setZoom;
+      $[10] = zoom;
+      $[11] = t2;
+    } else {
+      t2 = $[11];
+    }
+    let t3;
+    if ($[12] !== setPreviewWindowType) {
+      t3 = e => {
         e.preventDefault();
-        setPreviewWindowType('popup');
-    }} target="_blank" title="Open in new window" type="button">
-        <ExternalLinkIcon/>
-      </a>
-    </div>;
+        setPreviewWindowType("popup");
+      };
+      $[12] = setPreviewWindowType;
+      $[13] = t3;
+    } else {
+      t3 = $[13];
+    }
+    t0 = _jsxs("div", {
+      className: baseClass,
+      children: [breakpoints?.length > 0 && _jsx(Popup, {
+        button: _jsxs(React.Fragment, {
+          children: [_jsx("span", {
+            children: breakpoints.find(bp => bp.name == breakpoint)?.label ?? customOption.label
+          }), _jsx(ChevronIcon, {
+            className: `${baseClass}__chevron`
+          })]
+        }),
+        className: `${baseClass}__breakpoint`,
+        horizontalAlign: "right",
+        render: t1 => {
+          const {
+            close
+          } = t1;
+          return _jsx(PopupList.ButtonGroup, {
+            children: _jsxs(React.Fragment, {
+              children: [breakpoints.map(bp_0 => _jsx(PopupList.Button, {
+                active: bp_0.name == breakpoint,
+                onClick: () => {
+                  setBreakpoint(bp_0.name);
+                  close();
+                },
+                children: bp_0.label
+              }, bp_0.name)), breakpoint === "custom" && _jsx(PopupList.Button, {
+                active: breakpoint == customOption.value,
+                onClick: () => {
+                  setBreakpoint(customOption.value);
+                  close();
+                },
+                children: customOption.label
+              })]
+            })
+          });
+        },
+        showScrollbar: true,
+        verticalAlign: "bottom"
+      }), _jsxs("div", {
+        className: `${baseClass}__device-size`,
+        children: [_jsx(PreviewFrameSizeInput, {
+          axis: "x"
+        }), _jsx("span", {
+          className: `${baseClass}__size-divider`,
+          children: _jsx(XIcon, {})
+        }), _jsx(PreviewFrameSizeInput, {
+          axis: "y"
+        })]
+      }), _jsx(Popup, {
+        button: _jsxs(React.Fragment, {
+          children: [_jsxs("span", {
+            children: [zoom * 100, "%"]
+          }), _jsx(ChevronIcon, {
+            className: `${baseClass}__chevron`
+          })]
+        }),
+        className: `${baseClass}__zoom`,
+        horizontalAlign: "right",
+        render: t2,
+        showScrollbar: true,
+        verticalAlign: "bottom"
+      }), _jsx("a", {
+        className: `${baseClass}__external`,
+        href: url,
+        onClick: t3,
+        target: "_blank",
+        title: "Open in new window",
+        type: "button",
+        children: _jsx(ExternalLinkIcon, {})
+      })]
+    });
+    $[0] = breakpoint;
+    $[1] = breakpoints;
+    $[2] = setBreakpoint;
+    $[3] = setPreviewWindowType;
+    $[4] = setZoom;
+    $[5] = t;
+    $[6] = url;
+    $[7] = zoom;
+    $[8] = t0;
+  } else {
+    t0 = $[8];
+  }
+  return t0;
 };
-
 //# 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","key","onClick","showScrollbar","verticalAlign","axis","zoomValue","a","href","e","preventDefault","target","title","type"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","React","ChevronIcon","ExternalLinkIcon","XIcon","useLivePreviewContext","useTranslation","Popup","PopupList","PreviewFrameSizeInput","baseClass","zoomOptions","ToolbarControls","$","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","t","t0","customOption","label","value","t2","t3","close","close_0","_jsx","ButtonGroup","children","Fragment","map","zoomValue","_jsxs","Button","active","onClick","e","preventDefault","className","length","button","find","bp","name","horizontalAlign","render","t1","bp_0","axis","href","target","title","type"],"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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,WAAW,QAAQ;AAC5B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,KAAK,QAAQ;AACtB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,cAAc,QAAQ;AAC/B,SAASC,KAAK,EAAEC,SAAS,QAAQ;AACjC,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAClB,MAAMC,WAAA,GAAc,CAAC,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI;AAEhD,OAAO,MAAMC,eAAA,GAA2CA,CAAA;EAAA,MAAAC,CAAA,GAAAb,EAAA;EACtD;IAAAc,UAAA;IAAAC,WAAA;IAAAC,aAAA;IAAAC,oBAAA;IAAAC,OAAA;IAAAC,GAAA;IAAAC;EAAA,IACEf,qBAAA;EAEF;IAAAgB;EAAA,IAAcf,cAAA;EAAA,IAAAgB,EAAA;EAAA,IAAAT,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAE,WAAA,IAAAF,CAAA,QAAAG,aAAA,IAAAH,CAAA,QAAAI,oBAAA,IAAAJ,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAQ,CAAA,IAAAR,CAAA,QAAAM,GAAA,IAAAN,CAAA,QAAAO,IAAA;IAEd,MAAAG,YAAA;MAAAC,KAAA,EACSH,CAAA,CAAE;MAAAI,KAAA,EACF;IAAA;IACT,IAAAC,EAAA;IAAA,IAAAb,CAAA,QAAAK,OAAA,IAAAL,CAAA,SAAAO,IAAA;MAkEcM,EAAA,GAAAC,EAAA;QAAC;UAAAC,KAAA,EAAAC;QAAA,IAAAF,EAAS;QAAA,OAChBG,IAAA,CAAAtB,SAAA,CAAAuB,WAAA;UAAAC,QAAA,EACEF,IAAA,CAAA7B,KAAA,CAAAgC,QAAA;YAAAD,QAAA,EACGrB,WAAA,CAAAuB,GAAA,CAAAC,SAAA,IACCC,KAAA,CAAA5B,SAAA,CAAA6B,MAAA;cAAAC,MAAA,EACUlB,IAAA,MAAO,IAAOe,SAAA;cAAAI,OAAA,EAAAA,CAAA;gBAGpBrB,OAAA,CAAQiB,SAAA,MAAY;gBACpBP,OAAA;cAAA;cAAAI,QAAA,GAGDG,SAAA,EAAU;YAAA,GANNA,SAAA;UAAA,C;;;;;;;;;;;MAkBNR,EAAA,GAAAa,CAAA;QACPA,CAAA,CAAAC,cAAA,CAAgB;QAChBxB,oBAAA,CAAqB;MAAA;MACvBJ,CAAA,OAAAI,oBAAA;MAAAJ,CAAA,OAAAc,EAAA;IAAA;MAAAA,EAAA,GAAAd,CAAA;IAAA;IA1FJS,EAAA,GAAAc,KAAA,CAAC;MAAAM,SAAA,EAAAhC,SAAA;MAAAsB,QAAA,GACEjB,WAAA,EAAA4B,MAAA,IAAsB,IACrBb,IAAA,CAAAvB,KAAA;QAAAqC,MAAA,EAEIR,KAAA,CAAAnC,KAAA,CAAAgC,QAAA;UAAAD,QAAA,GACEF,IAAA,CAAC;YAAAE,QAAA,EACEjB,WAAA,CAAA8B,IAAA,CAAAC,EAAA,IAAyBA,EAAA,CAAAC,IAAA,IAAWjC,UAAA,GAAAU,KAAA,IAAsBD,YAAA,CAAAC;UAAkB,C,GAE/EM,IAAA,CAAA5B,WAAA;YAAAwC,SAAA,EAAwB,GAAAhC,SAAA;UAAuB,C;;mBAGxC,GAAAA,SAAA,cAA0B;QAAAsC,eAAA,EACrB;QAAAC,MAAA,EAAAC,EAAA;UACP;YAAAtB;UAAA,IAAAsB,EAAS;UAAA,OAChBpB,IAAA,CAAAtB,SAAA,CAAAuB,WAAA;YAAAC,QAAA,EACEI,KAAA,CAAAnC,KAAA,CAAAgC,QAAA;cAAAD,QAAA,GACGjB,WAAA,CAAAmB,GAAA,CAAAiB,IAAA,IACCrB,IAAA,CAAAtB,SAAA,CAAA6B,MAAA;gBAAAC,MAAA,EACUQ,IAAA,CAAAC,IAAA,IAAWjC,UAAA;gBAAAyB,OAAA,EAAAA,CAAA;kBAGjBvB,aAAA,CAAc8B,IAAA,CAAAC,IAAO;kBACrBnB,KAAA;gBAAA;gBAAAI,QAAA,EAGDc,IAAA,CAAAtB;cAAA,GANIsB,IAAA,CAAAC,IAAO,IAUfjC,UAAA,KAAe,YACdgB,IAAA,CAAAtB,SAAA,CAAA6B,MAAA;gBAAAC,MAAA,EACUxB,UAAA,IAAcS,YAAA,CAAAE,KAAkB;gBAAAc,OAAA,EAAAA,CAAA;kBAEtCvB,aAAA,CAAcO,YAAA,CAAAE,KAAkB;kBAChCG,KAAA;gBAAA;gBAAAI,QAAA,EAGDT,YAAA,CAAAC;cAAA,C;;;;;uBAOG;MAAA,C,GAGlBY,KAAA,CAAC;QAAAM,SAAA,EAAe,GAAAhC,SAAA,eAA2B;QAAAsB,QAAA,GACzCF,IAAA,CAAArB,qBAAA;UAAA2C,IAAA,EAA4B;QAAA,C,GAC5BtB,IAAA,CAAC;UAAAY,SAAA,EAAgB,GAAAhC,SAAA,gBAA4B;UAAAsB,QAAA,EAC3CF,IAAA,CAAA1B,KAAA,IAAC;QAAA,C,GAEH0B,IAAA,CAAArB,qBAAA;UAAA2C,IAAA,EAA4B;QAAA,C;UAE9BtB,IAAA,CAAAvB,KAAA;QAAAqC,MAAA,EAEIR,KAAA,CAAAnC,KAAA,CAAAgC,QAAA;UAAAD,QAAA,GACEI,KAAA,CAAC;YAAAJ,QAAA,GAAMZ,IAAA,MAAO,EAAI;UAAA,C,GAClBU,IAAA,CAAA5B,WAAA;YAAAwC,SAAA,EAAwB,GAAAhC,SAAA;UAAuB,C;;mBAGxC,GAAAA,SAAA,QAAoB;QAAAsC,eAAA,EACf;QAAAC,MAAA,EACRvB,E;;uBAmBM;MAAA,C,GAEhBI,IAAA,CAAC;QAAAY,SAAA,EACY,GAAAhC,SAAA,YAAwB;QAAA2C,IAAA,EAC7BlC,GAAA;QAAAoB,OAAA,EACGZ,EAGT;QAAA2B,MAAA,EACO;QAAAC,KAAA,EACD;QAAAC,IAAA,EACD;QAAAxB,QAAA,EAELF,IAAA,CAAA3B,gBAAA,IAAC;MAAA,C;;;;;;;;;;;;;;SA/FLmB,E;CAmGJ","ignoreList":[]}

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

@@ -1,58 +1,101 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useCallback, useEffect } from 'react';
 import { useLivePreviewContext } from '../../../../providers/LivePreview/context.js';
 import './index.scss';
 const baseClass = 'toolbar-input';
-export const PreviewFrameSizeInput = (props)=>{
-    const { axis } = props;
-    const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } = useLivePreviewContext();
-    const [internalState, setInternalState] = React.useState((axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
-    // when the input is changed manually, we need to set the breakpoint as `custom`
-    // this will then allow us to set an explicit width and height
-    const handleChange = useCallback((e)=>{
-        let newValue = Number(e.target.value);
-        if (newValue < 0) {
-            newValue = 0;
-        }
-        setInternalState(newValue);
-        setBreakpoint('custom');
-        // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change
-        // this is because the `responsive` size is '100%' in CSS, and `0` in initial state
-        setSize({
-            type: 'reset',
-            value: {
-                height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,
-                width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom
-            }
-        });
-    }, [
-        axis,
-        setBreakpoint,
-        measuredDeviceSize,
-        setSize,
-        zoom
-    ]);
-    // if the breakpoint is `responsive` then the device's div will have `100%` width and height
-    // so we need to take the measurements provided by `actualDeviceSize` and sync internal state
-    useEffect(()=>{
-        if (breakpoint === 'responsive' && measuredDeviceSize) {
-            if (axis === 'x') {
-                setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom);
-            } else {
-                setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom);
-            }
+export const PreviewFrameSizeInput = props => {
+  const $ = _c(18);
+  const {
+    axis
+  } = props;
+  const {
+    breakpoint,
+    measuredDeviceSize,
+    setBreakpoint,
+    setSize,
+    size,
+    zoom
+  } = useLivePreviewContext();
+  const [internalState, setInternalState] = React.useState((axis === "x" ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
+  let t0;
+  if ($[0] !== axis || $[1] !== measuredDeviceSize?.height || $[2] !== measuredDeviceSize?.width || $[3] !== setBreakpoint || $[4] !== setSize || $[5] !== zoom) {
+    t0 = e => {
+      let newValue = Number(e.target.value);
+      if (newValue < 0) {
+        newValue = 0;
+      }
+      setInternalState(newValue);
+      setBreakpoint("custom");
+      setSize({
+        type: "reset",
+        value: {
+          height: axis === "y" ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,
+          width: axis === "x" ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom
         }
-        if (breakpoint !== 'responsive' && size) {
-            setInternalState(axis === 'x' ? size.width : size.height);
+      });
+    };
+    $[0] = axis;
+    $[1] = measuredDeviceSize?.height;
+    $[2] = measuredDeviceSize?.width;
+    $[3] = setBreakpoint;
+    $[4] = setSize;
+    $[5] = zoom;
+    $[6] = t0;
+  } else {
+    t0 = $[6];
+  }
+  const handleChange = t0;
+  let t1;
+  let t2;
+  if ($[7] !== axis || $[8] !== breakpoint || $[9] !== measuredDeviceSize || $[10] !== size || $[11] !== zoom) {
+    t1 = () => {
+      if (breakpoint === "responsive" && measuredDeviceSize) {
+        if (axis === "x") {
+          setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom);
+        } else {
+          setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom);
         }
-    }, [
-        breakpoint,
-        axis,
-        measuredDeviceSize,
-        size,
-        zoom
-    ]);
-    return <input className={baseClass} min={0} name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'} onChange={handleChange} step={1} type="number" value={internalState || 0}/>;
+      }
+      if (breakpoint !== "responsive" && size) {
+        setInternalState(axis === "x" ? size.width : size.height);
+      }
+    };
+    t2 = [breakpoint, axis, measuredDeviceSize, size, zoom];
+    $[7] = axis;
+    $[8] = breakpoint;
+    $[9] = measuredDeviceSize;
+    $[10] = size;
+    $[11] = zoom;
+    $[12] = t1;
+    $[13] = t2;
+  } else {
+    t1 = $[12];
+    t2 = $[13];
+  }
+  useEffect(t1, t2);
+  const t3 = axis === "x" ? "live-preview-width" : "live-preview-height";
+  const t4 = internalState || 0;
+  let t5;
+  if ($[14] !== handleChange || $[15] !== t3 || $[16] !== t4) {
+    t5 = _jsx("input", {
+      className: baseClass,
+      min: 0,
+      name: t3,
+      onChange: handleChange,
+      step: 1,
+      type: "number",
+      value: t4
+    });
+    $[14] = handleChange;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  return t5;
 };
-
 //# 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,QACGc,MACCC,WAAWxB,WACXyB,KAAK,GACLC,MAAMvB,SAAS,MAAM,uBAAuB,uBAC5CwB,UAAUZ,cACVa,MAAM,GACNP,KAAK,SACLD,OAAOV,iBAAiB;AAG9B,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","$","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","t0","e","newValue","Number","target","value","type","toFixed","handleChange","t1","t2","t3","t4","t5","_jsx","className","min","name","onChange","step"],"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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,QAAQ;AAE9C,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,qBAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACH;IAAAS;EAAA,IAAiBF,KAAA;EAEjB;IAAAG,UAAA;IAAAC,kBAAA;IAAAC,aAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC;EAAA,IACEX,qBAAA;EAEF,OAAAY,aAAA,EAAAC,gBAAA,IAA0ChB,KAAA,CAAAiB,QAAA,CACxC,CAACT,IAAA,KAAS,MAAME,kBAAA,EAAAQ,KAAA,GAA4BR,kBAAA,EAAAS,MAAyB,MAAM;EAAA,IAAAC,EAAA;EAAA,IAAAb,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAG,kBAAA,EAAAS,MAAA,IAAAZ,CAAA,QAAAG,kBAAA,EAAAQ,KAAA,IAAAX,CAAA,QAAAI,aAAA,IAAAJ,CAAA,QAAAK,OAAA,IAAAL,CAAA,QAAAO,IAAA;IAM3EM,EAAA,GAAAC,CAAA;MACE,IAAAC,QAAA,GAAeC,MAAA,CAAOF,CAAA,CAAAG,MAAA,CAAAC,KAAc;MAAA,IAEhCH,QAAA,IAAW;QACbA,QAAA,CAAAA,CAAA,CAAAA,CAAA;MAAA;MAGFN,gBAAA,CAAiBM,QAAA;MACjBX,aAAA,CAAc;MAIdC,OAAA;QAAAc,IAAA,EACQ;QAAAD,KAAA;UAAAN,MAAA,EAEIX,IAAA,KAAS,MAAMc,QAAA,GAAWC,MAAA,CAAOb,kBAAA,EAAAS,MAAA,CAAAQ,OAAA,GAAmC,IAAMb,IAAA;UAAAI,KAAA,EAC3EV,IAAA,KAAS,MAAMc,QAAA,GAAWC,MAAA,CAAOb,kBAAA,EAAAQ,KAAA,CAAAS,OAAA,GAAkC,IAAMb;QAAA;MAAA,CAEpF;IAAA;IACFP,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAG,kBAAA,EAAAS,MAAA;IAAAZ,CAAA,MAAAG,kBAAA,EAAAQ,KAAA;IAAAX,CAAA,MAAAI,aAAA;IAAAJ,CAAA,MAAAK,OAAA;IAAAL,CAAA,MAAAO,IAAA;IAAAP,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EApBF,MAAAqB,YAAA,GAAqBR,EAqBqC;EAAA,IAAAS,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAvB,CAAA,QAAAC,IAAA,IAAAD,CAAA,QAAAE,UAAA,IAAAF,CAAA,QAAAG,kBAAA,IAAAH,CAAA,SAAAM,IAAA,IAAAN,CAAA,SAAAO,IAAA;IAKhDe,EAAA,GAAAA,CAAA;MAAA,IACJpB,UAAA,KAAe,gBAAgBC,kBAAA;QAAA,IAC7BF,IAAA,KAAS;UACXQ,gBAAA,CAAiBO,MAAA,CAAOb,kBAAA,CAAAQ,KAAA,CAAAS,OAAA,EAAiC,KAAMb,IAAA;QAAA;UAE/DE,gBAAA,CAAiBO,MAAA,CAAOb,kBAAA,CAAAS,MAAA,CAAAQ,OAAA,EAAkC,KAAMb,IAAA;QAAA;MAAA;MAAA,IAIhEL,UAAA,KAAe,gBAAgBI,IAAA;QACjCG,gBAAA,CAAiBR,IAAA,KAAS,MAAMK,IAAA,CAAAK,KAAA,GAAaL,IAAA,CAAAM,MAAW;MAAA;IAAA;IAEzDW,EAAA,IAACrB,UAAA,EAAYD,IAAA,EAAME,kBAAA,EAAoBG,IAAA,EAAMC,IAAA;IAAKP,CAAA,MAAAC,IAAA;IAAAD,CAAA,MAAAE,UAAA;IAAAF,CAAA,MAAAG,kBAAA;IAAAH,CAAA,OAAAM,IAAA;IAAAN,CAAA,OAAAO,IAAA;IAAAP,CAAA,OAAAsB,EAAA;IAAAtB,CAAA,OAAAuB,EAAA;EAAA;IAAAD,EAAA,GAAAtB,CAAA;IAAAuB,EAAA,GAAAvB,CAAA;EAAA;EAZrDL,SAAA,CAAU2B,EAYV,EAAGC,EAAkD;EAM3C,MAAAC,EAAA,GAAAvB,IAAA,KAAS,MAAM,uBAAuB;EAIrC,MAAAwB,EAAA,GAAAjB,aAAA,KAAiB;EAAA,IAAAkB,EAAA;EAAA,IAAA1B,CAAA,SAAAqB,YAAA,IAAArB,CAAA,SAAAwB,EAAA,IAAAxB,CAAA,SAAAyB,EAAA;IAP1BC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAA/B,SAAA;MAAAgC,GAAA;MAAAC,IAAA,EAGON,EAAsC;MAAAO,QAAA,EAClCV,YAAA;MAAAW,IAAA;MAAAb,IAAA,EAEL;MAAAD,KAAA,EACEO;IAAiB,C;;;;;;;;SAP1BC,E;CAUJ","ignoreList":[]}

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

@@ -1,45 +1,97 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-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';
 import './index.scss';
 const baseClass = 'live-preview-toolbar';
-const DraggableToolbar = (props)=>{
-    const { toolbarPosition } = useLivePreviewContext();
-    const { attributes, listeners, setNodeRef, transform } = useDraggable({
-        id: 'live-preview-toolbar'
+const DraggableToolbar = props => {
+  const $ = _c(10);
+  const {
+    toolbarPosition
+  } = useLivePreviewContext();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      id: "live-preview-toolbar"
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform
+  } = useDraggable(t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = [baseClass, `${baseClass}--draggable`];
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const t2 = `${toolbarPosition.x}px`;
+  const t3 = `${toolbarPosition.y}px`;
+  let t4;
+  if ($[2] !== attributes || $[3] !== listeners || $[4] !== props || $[5] !== setNodeRef || $[6] !== t2 || $[7] !== t3 || $[8] !== transform) {
+    t4 = _jsxs("div", {
+      className: t1.join(" "),
+      style: {
+        left: t2,
+        top: t3,
+        ...(transform ? {
+          transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
+        } : {})
+      },
+      children: [_jsx("button", {
+        ...listeners,
+        ...attributes,
+        className: `${baseClass}__drag-handle`,
+        ref: setNodeRef,
+        type: "button",
+        children: _jsx(DragHandleIcon, {})
+      }), _jsx(ToolbarControls, {
+        ...props
+      })]
     });
-    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>;
+    $[2] = attributes;
+    $[3] = listeners;
+    $[4] = props;
+    $[5] = setNodeRef;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = transform;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  return t4;
 };
-const StaticToolbar = (props)=>{
-    return <div className={[
-        baseClass,
-        `${baseClass}--static`
-    ].join(' ')}>
-      <ToolbarControls {...props}/>
-    </div>;
+const StaticToolbar = props => {
+  return /*#__PURE__*/_jsx("div", {
+    className: [baseClass, `${baseClass}--static`].join(' '),
+    children: /*#__PURE__*/_jsx(ToolbarControls, {
+      ...props
+    })
+  });
 };
-export const LivePreviewToolbar = (props)=>{
-    const { draggable } = props;
-    if (draggable) {
-        return <DraggableToolbar {...props}/>;
-    }
-    return <StaticToolbar {...props}/>;
+export const LivePreviewToolbar = props => {
+  const {
+    draggable
+  } = props;
+  if (draggable) {
+    return /*#__PURE__*/_jsx(DraggableToolbar, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(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","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,"file":"index.js","names":["c","_c","useDraggable","React","DragHandleIcon","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","$","toolbarPosition","t0","Symbol","for","id","attributes","listeners","setNodeRef","transform","t1","t2","x","t3","y","t4","_jsxs","className","join","style","left","top","undefined","children","_jsx","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,YAAY,QAAQ;AAC7B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,gBAAA,GAA4CC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAChD;IAAAU;EAAA,IAA4BN,qBAAA;EAAA,IAAAO,EAAA;EAAA,IAAAF,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAE0CF,EAAA;MAAAG,EAAA,EAChE;IAAA;IACNL,CAAA,MAAAE,EAAA;EAAA;IAAAA,EAAA,GAAAF,CAAA;EAAA;EAFA;IAAAM,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC;EAAA,IAAyDjB,YAAA,CAAaU,EAEtE;EAAA,IAAAQ,EAAA;EAAA,IAAAV,CAAA,QAAAG,MAAA,CAAAC,GAAA;IAIeM,EAAA,IAAAb,SAAA,EAAY,GAAAA,SAAA,aAAyB;IAACG,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAEzC,MAAAW,EAAA,MAAGV,eAAA,CAAAW,CAAA,IAAqB;EACzB,MAAAC,EAAA,MAAGZ,eAAA,CAAAa,CAAA,IAAqB;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAM,UAAA,IAAAN,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAD,KAAA,IAAAC,CAAA,QAAAQ,UAAA,IAAAR,CAAA,QAAAW,EAAA,IAAAX,CAAA,QAAAa,EAAA,IAAAb,CAAA,QAAAS,SAAA;IAJjCM,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EACYP,EAAsC,CAAAQ,IAAA,CAAM;MAAAC,KAAA;QAAAC,IAAA,EAE/CT,EAAwB;QAAAU,GAAA,EACzBR,EAAwB;QAAA,IACzBJ,SAAA;UAAAA,SAAA,EAEaA,SAAA,GACP,eAAeA,SAAA,EAAAG,CAAA,KAAgB,OAAQH,SAAA,EAAAK,CAAA,KAAgB,QAAS,GAAAQ;QAChE,MAEJ;MAAA;MAAAC,QAAA,GAGRC,IAAA,CAAC;QAAA,GACKjB,SAAS;QAAA,GACTD,UAAU;QAAAW,SAAA,EACH,GAAApB,SAAA,eAA2B;QAAA4B,GAAA,EACjCjB,UAAA;QAAAkB,IAAA,EACA;QAAAH,QAAA,EAELC,IAAA,CAAA9B,cAAA,IAAC;MAAA,C,GAEH8B,IAAA,CAAA5B,eAAA;QAAA,GAAqBG;MAAK,C;;;;;;;;;;;;;SAvB5BgB,E;CA0BJ;AAEA,MAAMY,aAAA,GAA0C5B,KAAA;EAC9C,oBACEyB,IAAA,CAAC;IAAIP,SAAA,EAAW,CAACpB,SAAA,EAAW,GAAGA,SAAA,UAAmB,CAAC,CAACqB,IAAI,CAAC;cACvD,aAAAM,IAAA,CAAC5B,eAAA;MAAiB,GAAGG;;;AAG3B;AAEA,OAAO,MAAM6B,kBAAA,GAIR7B,KAAA;EACH,MAAM;IAAE8B;EAAS,CAAE,GAAG9B,KAAA;EAEtB,IAAI8B,SAAA,EAAW;IACb,oBAAOL,IAAA,CAAC1B,gBAAA;MAAkB,GAAGC;;EAC/B;EAEA,oBAAOyB,IAAA,CAACG,aAAA;IAAe,GAAG5B;;AAC5B","ignoreList":[]}