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

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

@@ -1,4 +1,5 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React, { useEffect } from 'react';
 import { useResize } from '../../../hooks/useResize.js';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
@@ -61,19 +62,31 @@ export const DeviceContainer = (props)=>{
         width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
         height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
     }
-    return <div ref={outerFrameRef} style={{
-        height: '100%',
-        width: '100%'
-    }}>
-      <div ref={deviceFrameRef} style={{
-        height,
-        margin,
-        transform: `translate3d(${x}, 0, 0)`,
-        width
-    }}>
-        {children}
-      </div>
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        ref: outerFrameRef,
+        style: {
+            height: '100%',
+            width: '100%'
+        },
+        children: /*#__PURE__*/ _jsxDEV("div", {
+            ref: deviceFrameRef,
+            style: {
+                height,
+                margin,
+                transform: `translate3d(${x}, 0, 0)`,
+                width
+            },
+            children: children
+        }, void 0, false, {
+            fileName: "src/elements/LivePreview/Device/index.tsx",
+            lineNumber: 95,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/Device/index.tsx",
+        lineNumber: 88,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useResize } from '../../../hooks/useResize.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const deviceFrameRef = React.useRef<HTMLDivElement>(null)\n  const outerFrameRef = React.useRef<HTMLDivElement>(null)\n\n  const { breakpoint, setMeasuredDeviceSize, size: desiredSize, zoom } = useLivePreviewContext()\n\n  // Keep an accurate measurement of the actual device size as it is truly rendered\n  // This is helpful when `sizes` are non-number units like percentages, etc.\n\n  const { size: measuredDeviceSize } = useResize(deviceFrameRef.current)\n\n  const { size: outerFrameSize } = useResize(outerFrameRef.current)\n\n  let deviceIsLargerThanFrame: boolean = false\n\n  // Sync the measured device size with the context so that other components can use it\n  // This happens from the bottom up so that as this component mounts and unmounts,\n  // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe\n  useEffect(() => {\n    if (measuredDeviceSize) {\n      setMeasuredDeviceSize(measuredDeviceSize)\n    }\n  }, [measuredDeviceSize, setMeasuredDeviceSize])\n\n  let x = '0'\n  let margin = '0'\n\n  if (breakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      desiredSize &&\n      measuredDeviceSize &&\n      typeof zoom === 'number' &&\n      typeof desiredSize.width === 'number' &&\n      typeof desiredSize.height === 'number' &&\n      typeof measuredDeviceSize.width === 'number' &&\n      typeof measuredDeviceSize.height === 'number'\n    ) {\n      margin = '0 auto'\n      const scaledDesiredWidth = desiredSize.width / zoom\n      const scaledDeviceWidth = measuredDeviceSize.width * zoom\n      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width\n      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width\n\n      if (deviceIsLargerThanFrame) {\n        if (zoom > 1) {\n          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width\n          if (differenceFromDeviceToFrame < 0) {\n            x = `${differenceFromDeviceToFrame / 2}px`\n          } else {\n            x = '0'\n          }\n        } else {\n          x = '0'\n        }\n      } else {\n        if (zoom >= 1) {\n          x = `${scaledDeviceDifferencePixels / 2}px`\n        } else {\n          const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth\n          x = `${differenceFromDeviceToFrame / 2}px`\n          margin = '0'\n        }\n      }\n    }\n  }\n\n  let width = zoom ? `${100 / zoom}%` : '100%'\n  let height = zoom ? `${100 / zoom}%` : '100%'\n\n  if (breakpoint !== 'responsive') {\n    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n  }\n\n  return (\n    <div\n      ref={outerFrameRef}\n      style={{\n        height: '100%',\n        width: '100%',\n      }}\n    >\n      <div\n        ref={deviceFrameRef}\n        style={{\n          height,\n          margin,\n          transform: `translate3d(${x}, 0, 0)`,\n          width,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useResize","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","div","ref","style","transform"],"mappings":"AAAA;AACA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,SAAS,QAAQ,8BAA6B;AACvD,SAASC,qBAAqB,QAAQ,4CAA2C;AAEjF,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAME,iBAAiBP,MAAMQ,MAAM,CAAiB;IACpD,MAAMC,gBAAgBT,MAAMQ,MAAM,CAAiB;IAEnD,MAAM,EAAEE,UAAU,EAAEC,qBAAqB,EAAEC,MAAMC,WAAW,EAAEC,IAAI,EAAE,GAAGX;IAEvE,iFAAiF;IACjF,2EAA2E;IAE3E,MAAM,EAAES,MAAMG,kBAAkB,EAAE,GAAGb,UAAUK,eAAeS,OAAO;IAErE,MAAM,EAAEJ,MAAMK,cAAc,EAAE,GAAGf,UAAUO,cAAcO,OAAO;IAEhE,IAAIE,0BAAmC;IAEvC,qFAAqF;IACrF,iFAAiF;IACjF,8FAA8F;IAC9FjB,UAAU;QACR,IAAIc,oBAAoB;YACtBJ,sBAAsBI;QACxB;IACF,GAAG;QAACA;QAAoBJ;KAAsB;IAE9C,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIV,cAAcA,eAAe,cAAc;QAC7CS,IAAI;QAEJ,IACEN,eACAE,sBACA,OAAOD,SAAS,YAChB,OAAOD,YAAYQ,KAAK,KAAK,YAC7B,OAAOR,YAAYS,MAAM,KAAK,YAC9B,OAAOP,mBAAmBM,KAAK,KAAK,YACpC,OAAON,mBAAmBO,MAAM,KAAK,UACrC;YACAF,SAAS;YACT,MAAMG,qBAAqBV,YAAYQ,KAAK,GAAGP;YAC/C,MAAMU,oBAAoBT,mBAAmBM,KAAK,GAAGP;YACrD,MAAMW,+BAA+BF,qBAAqBV,YAAYQ,KAAK;YAC3EH,0BAA0BM,oBAAoBP,eAAeI,KAAK;YAElE,IAAIH,yBAAyB;gBAC3B,IAAIJ,OAAO,GAAG;oBACZ,MAAMY,8BAA8BX,mBAAmBM,KAAK,GAAGJ,eAAeI,KAAK;oBACnF,IAAIK,8BAA8B,GAAG;wBACnCP,IAAI,GAAGO,8BAA8B,EAAE,EAAE,CAAC;oBAC5C,OAAO;wBACLP,IAAI;oBACN;gBACF,OAAO;oBACLA,IAAI;gBACN;YACF,OAAO;gBACL,IAAIL,QAAQ,GAAG;oBACbK,IAAI,GAAGM,+BAA+B,EAAE,EAAE,CAAC;gBAC7C,OAAO;oBACL,MAAMC,8BAA8BT,eAAeI,KAAK,GAAGG;oBAC3DL,IAAI,GAAGO,8BAA8B,EAAE,EAAE,CAAC;oBAC1CN,SAAS;gBACX;YACF;QACF;IACF;IAEA,IAAIC,QAAQP,OAAO,GAAG,MAAMA,KAAK,CAAC,CAAC,GAAG;IACtC,IAAIQ,SAASR,OAAO,GAAG,MAAMA,KAAK,CAAC,CAAC,GAAG;IAEvC,IAAIJ,eAAe,cAAc;QAC/BW,QAAQ,GAAGR,aAAaQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;QACzEQ,SAAS,GAAGT,aAAaS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;IAC7E;IAEA,QACGa,IACCC,KAAKnB,eACLoB,OAAO;QACLP,QAAQ;QACRD,OAAO;IACT,GACD;MACC,CAACM,IACCC,KAAKrB,gBACLsB,OAAO;QACLP;QACAF;QACAU,WAAW,CAAC,YAAY,EAAEX,EAAE,OAAO,CAAC;QACpCE;IACF,GACD;QACC,CAACf,SAAS;MACZ,EAAEqB,IAAI;IACR,EAAEA;AAEN,EAAC"}
+{"version":3,"sources":["../../../../src/elements/LivePreview/Device/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect } from 'react'\n\nimport { useResize } from '../../../hooks/useResize.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const deviceFrameRef = React.useRef<HTMLDivElement>(null)\n  const outerFrameRef = React.useRef<HTMLDivElement>(null)\n\n  const { breakpoint, setMeasuredDeviceSize, size: desiredSize, zoom } = useLivePreviewContext()\n\n  // Keep an accurate measurement of the actual device size as it is truly rendered\n  // This is helpful when `sizes` are non-number units like percentages, etc.\n\n  const { size: measuredDeviceSize } = useResize(deviceFrameRef.current)\n\n  const { size: outerFrameSize } = useResize(outerFrameRef.current)\n\n  let deviceIsLargerThanFrame: boolean = false\n\n  // Sync the measured device size with the context so that other components can use it\n  // This happens from the bottom up so that as this component mounts and unmounts,\n  // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe\n  useEffect(() => {\n    if (measuredDeviceSize) {\n      setMeasuredDeviceSize(measuredDeviceSize)\n    }\n  }, [measuredDeviceSize, setMeasuredDeviceSize])\n\n  let x = '0'\n  let margin = '0'\n\n  if (breakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      desiredSize &&\n      measuredDeviceSize &&\n      typeof zoom === 'number' &&\n      typeof desiredSize.width === 'number' &&\n      typeof desiredSize.height === 'number' &&\n      typeof measuredDeviceSize.width === 'number' &&\n      typeof measuredDeviceSize.height === 'number'\n    ) {\n      margin = '0 auto'\n      const scaledDesiredWidth = desiredSize.width / zoom\n      const scaledDeviceWidth = measuredDeviceSize.width * zoom\n      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width\n      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width\n\n      if (deviceIsLargerThanFrame) {\n        if (zoom > 1) {\n          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width\n          if (differenceFromDeviceToFrame < 0) {\n            x = `${differenceFromDeviceToFrame / 2}px`\n          } else {\n            x = '0'\n          }\n        } else {\n          x = '0'\n        }\n      } else {\n        if (zoom >= 1) {\n          x = `${scaledDeviceDifferencePixels / 2}px`\n        } else {\n          const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth\n          x = `${differenceFromDeviceToFrame / 2}px`\n          margin = '0'\n        }\n      }\n    }\n  }\n\n  let width = zoom ? `${100 / zoom}%` : '100%'\n  let height = zoom ? `${100 / zoom}%` : '100%'\n\n  if (breakpoint !== 'responsive') {\n    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n  }\n\n  return (\n    <div\n      ref={outerFrameRef}\n      style={{\n        height: '100%',\n        width: '100%',\n      }}\n    >\n      <div\n        ref={deviceFrameRef}\n        style={{\n          height,\n          margin,\n          transform: `translate3d(${x}, 0, 0)`,\n          width,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["React","useEffect","useResize","useLivePreviewContext","DeviceContainer","props","children","deviceFrameRef","useRef","outerFrameRef","breakpoint","setMeasuredDeviceSize","size","desiredSize","zoom","measuredDeviceSize","current","outerFrameSize","deviceIsLargerThanFrame","x","margin","width","height","scaledDesiredWidth","scaledDeviceWidth","scaledDeviceDifferencePixels","differenceFromDeviceToFrame","div","ref","style","transform"],"mappings":"AAAA;;AACA,OAAOA,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,SAAS,QAAQ,8BAA6B;AACvD,SAASC,qBAAqB,QAAQ,4CAA2C;AAEjF,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAME,iBAAiBP,MAAMQ,MAAM,CAAiB;IACpD,MAAMC,gBAAgBT,MAAMQ,MAAM,CAAiB;IAEnD,MAAM,EAAEE,UAAU,EAAEC,qBAAqB,EAAEC,MAAMC,WAAW,EAAEC,IAAI,EAAE,GAAGX;IAEvE,iFAAiF;IACjF,2EAA2E;IAE3E,MAAM,EAAES,MAAMG,kBAAkB,EAAE,GAAGb,UAAUK,eAAeS,OAAO;IAErE,MAAM,EAAEJ,MAAMK,cAAc,EAAE,GAAGf,UAAUO,cAAcO,OAAO;IAEhE,IAAIE,0BAAmC;IAEvC,qFAAqF;IACrF,iFAAiF;IACjF,8FAA8F;IAC9FjB,UAAU;QACR,IAAIc,oBAAoB;YACtBJ,sBAAsBI;QACxB;IACF,GAAG;QAACA;QAAoBJ;KAAsB;IAE9C,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIV,cAAcA,eAAe,cAAc;QAC7CS,IAAI;QAEJ,IACEN,eACAE,sBACA,OAAOD,SAAS,YAChB,OAAOD,YAAYQ,KAAK,KAAK,YAC7B,OAAOR,YAAYS,MAAM,KAAK,YAC9B,OAAOP,mBAAmBM,KAAK,KAAK,YACpC,OAAON,mBAAmBO,MAAM,KAAK,UACrC;YACAF,SAAS;YACT,MAAMG,qBAAqBV,YAAYQ,KAAK,GAAGP;YAC/C,MAAMU,oBAAoBT,mBAAmBM,KAAK,GAAGP;YACrD,MAAMW,+BAA+BF,qBAAqBV,YAAYQ,KAAK;YAC3EH,0BAA0BM,oBAAoBP,eAAeI,KAAK;YAElE,IAAIH,yBAAyB;gBAC3B,IAAIJ,OAAO,GAAG;oBACZ,MAAMY,8BAA8BX,mBAAmBM,KAAK,GAAGJ,eAAeI,KAAK;oBACnF,IAAIK,8BAA8B,GAAG;wBACnCP,IAAI,GAAGO,8BAA8B,EAAE,EAAE,CAAC;oBAC5C,OAAO;wBACLP,IAAI;oBACN;gBACF,OAAO;oBACLA,IAAI;gBACN;YACF,OAAO;gBACL,IAAIL,QAAQ,GAAG;oBACbK,IAAI,GAAGM,+BAA+B,EAAE,EAAE,CAAC;gBAC7C,OAAO;oBACL,MAAMC,8BAA8BT,eAAeI,KAAK,GAAGG;oBAC3DL,IAAI,GAAGO,8BAA8B,EAAE,EAAE,CAAC;oBAC1CN,SAAS;gBACX;YACF;QACF;IACF;IAEA,IAAIC,QAAQP,OAAO,GAAG,MAAMA,KAAK,CAAC,CAAC,GAAG;IACtC,IAAIQ,SAASR,OAAO,GAAG,MAAMA,KAAK,CAAC,CAAC,GAAG;IAEvC,IAAIJ,eAAe,cAAc;QAC/BW,QAAQ,GAAGR,aAAaQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;QACzEQ,SAAS,GAAGT,aAAaS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC;IAC7E;IAEA,qBACE,QAACa;QACCC,KAAKnB;QACLoB,OAAO;YACLP,QAAQ;YACRD,OAAO;QACT;kBAEA,cAAA,QAACM;YACCC,KAAKrB;YACLsB,OAAO;gBACLP;gBACAF;gBACAU,WAAW,CAAC,YAAY,EAAEX,EAAE,OAAO,CAAC;gBACpCE;YACF;sBAECf;;;;;;;;;;;AAIT,EAAC"}

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

@@ -1,4 +1,6 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
 export const DeviceContainer = (props)=>{
     const { children } = props;
@@ -15,14 +17,19 @@ export const DeviceContainer = (props)=>{
             margin = '0 auto';
         }
     }
-    return <div style={{
-        height: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%',
-        margin,
-        transform: `translate3d(${x}, 0, 0)`,
-        width: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%'
-    }}>
-      {children}
-    </div>;
+    return /*#__PURE__*/ _jsxDEV("div", {
+        style: {
+            height: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%',
+            margin,
+            transform: `translate3d(${x}, 0, 0)`,
+            width: foundBreakpoint && foundBreakpoint?.name !== 'responsive' ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px` : typeof zoom === 'number' ? `${100 / zoom}%` : '100%'
+        },
+        children: children
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/DeviceContainer/index.tsx",
+        lineNumber: 34,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["useLivePreviewContext","DeviceContainer","props","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","div","style","transform"],"mappings":"AAAA;AAGA,SAASA,qBAAqB,QAAQ,4CAA2C;AAEjF,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGP;IAEhD,MAAMQ,kBAAkBJ,cAAcC,aAAaI,KAAK,CAACC,KAAOA,GAAGC,IAAI,KAAKP;IAE5E,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIL,mBAAmBJ,eAAe,cAAc;QAClDQ,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,KAAKQ,KAAK,KAAK,YACtB,OAAOR,KAAKS,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcV,KAAKQ,KAAK,GAAGP;YACjC,MAAMU,aAAaD,cAAcV,KAAKQ,KAAK;YAC3CF,IAAI,GAAGK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,QACGK,IACCC,OAAO;QACLJ,QACEP,mBAAmBA,iBAAiBG,SAAS,eACzC,GAAGL,MAAMS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC3D,OAAOA,SAAS,WACd,GAAG,MAAMA,KAAK,CAAC,CAAC,GAChB;QACRM;QACAO,WAAW,CAAC,YAAY,EAAER,EAAE,OAAO,CAAC;QACpCE,OACEN,mBAAmBA,iBAAiBG,SAAS,eACzC,GAAGL,MAAMQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC1D,OAAOA,SAAS,WACd,GAAG,MAAMA,KAAK,CAAC,CAAC,GAChB;IACV,GACD;MACC,CAACJ,SAAS;IACZ,EAAEe;AAEN,EAAC"}
+{"version":3,"sources":["../../../../src/elements/LivePreview/DeviceContainer/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\n\nexport const DeviceContainer: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext()\n\n  const foundBreakpoint = breakpoint && breakpoints?.find((bp) => bp.name === breakpoint)\n\n  let x = '0'\n  let margin = '0'\n\n  if (foundBreakpoint && breakpoint !== 'responsive') {\n    x = '-50%'\n\n    if (\n      typeof zoom === 'number' &&\n      typeof size.width === 'number' &&\n      typeof size.height === 'number'\n    ) {\n      const scaledWidth = size.width / zoom\n      const difference = scaledWidth - size.width\n      x = `${difference / 2}px`\n      margin = '0 auto'\n    }\n  }\n\n  return (\n    <div\n      style={{\n        height:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n        margin,\n        transform: `translate3d(${x}, 0, 0)`,\n        width:\n          foundBreakpoint && foundBreakpoint?.name !== 'responsive'\n            ? `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`\n            : typeof zoom === 'number'\n              ? `${100 / zoom}%`\n              : '100%',\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["React","useLivePreviewContext","DeviceContainer","props","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","div","style","transform"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,4CAA2C;AAEjF,OAAO,MAAMC,kBAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAEC,WAAW,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGP;IAEhD,MAAMQ,kBAAkBJ,cAAcC,aAAaI,KAAK,CAACC,KAAOA,GAAGC,IAAI,KAAKP;IAE5E,IAAIQ,IAAI;IACR,IAAIC,SAAS;IAEb,IAAIL,mBAAmBJ,eAAe,cAAc;QAClDQ,IAAI;QAEJ,IACE,OAAOL,SAAS,YAChB,OAAOD,KAAKQ,KAAK,KAAK,YACtB,OAAOR,KAAKS,MAAM,KAAK,UACvB;YACA,MAAMC,cAAcV,KAAKQ,KAAK,GAAGP;YACjC,MAAMU,aAAaD,cAAcV,KAAKQ,KAAK;YAC3CF,IAAI,GAAGK,aAAa,EAAE,EAAE,CAAC;YACzBJ,SAAS;QACX;IACF;IAEA,qBACE,QAACK;QACCC,OAAO;YACLJ,QACEP,mBAAmBA,iBAAiBG,SAAS,eACzC,GAAGL,MAAMS,SAAU,CAAA,OAAOR,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC3D,OAAOA,SAAS,WACd,GAAG,MAAMA,KAAK,CAAC,CAAC,GAChB;YACRM;YACAO,WAAW,CAAC,YAAY,EAAER,EAAE,OAAO,CAAC;YACpCE,OACEN,mBAAmBA,iBAAiBG,SAAS,eACzC,GAAGL,MAAMQ,QAAS,CAAA,OAAOP,SAAS,WAAWA,OAAO,CAAA,EAAG,EAAE,CAAC,GAC1D,OAAOA,SAAS,WACd,GAAG,MAAMA,KAAK,CAAC,CAAC,GAChB;QACV;kBAECJ;;;;;;AAGP,EAAC"}

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

@@ -1,14 +1,27 @@
 'use client';
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
 import './index.scss';
 const baseClass = 'live-preview-iframe';
 export const IFrame = ()=>{
     const { iframeRef, setLoadedURL, url, zoom } = useLivePreviewContext();
-    return <iframe className={baseClass} key={url} onLoad={()=>{
-        setLoadedURL(url);
-    }} ref={iframeRef} src={url} style={{
-        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
-    }} title={url}/>;
+    return /*#__PURE__*/ _jsxDEV("iframe", {
+        className: baseClass,
+        onLoad: ()=>{
+            setLoadedURL(url);
+        },
+        ref: iframeRef,
+        src: url,
+        style: {
+            transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
+        },
+        title: url
+    }, url, false, {
+        fileName: "src/elements/LivePreview/IFrame/index.tsx",
+        lineNumber: 13,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\nexport const IFrame: React.FC = () => {\n  const { iframeRef, setLoadedURL, url, zoom } = useLivePreviewContext()\n\n  return (\n    <iframe\n      className={baseClass}\n      key={url}\n      onLoad={() => {\n        setLoadedURL(url)\n      }}\n      ref={iframeRef}\n      src={url}\n      style={{\n        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n      }}\n      title={url}\n    />\n  )\n}\n"],"names":["useLivePreviewContext","baseClass","IFrame","iframeRef","setLoadedURL","url","zoom","iframe","className","key","onLoad","ref","src","style","transform","undefined","title"],"mappings":"AAAA;AAGA,SAASA,qBAAqB,QAAQ,4CAA2C;AACjF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,SAAmB;IAC9B,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGN;IAE/C,QACGO,OACCC,WAAWP,WACXQ,KAAKJ,KACLK,QAAQ;QACNN,aAAaC;IACf,GACAM,KAAKR,WACLS,KAAKP,KACLQ,OAAO;QACLC,WAAW,OAAOR,SAAS,WAAW,CAAC,MAAM,EAAEA,KAAK,EAAE,CAAC,GAAGS;IAC5D,GACAC,OAAOX;AAGb,EAAC"}
+{"version":3,"sources":["../../../../src/elements/LivePreview/IFrame/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-iframe'\n\nexport const IFrame: React.FC = () => {\n  const { iframeRef, setLoadedURL, url, zoom } = useLivePreviewContext()\n\n  return (\n    <iframe\n      className={baseClass}\n      key={url}\n      onLoad={() => {\n        setLoadedURL(url)\n      }}\n      ref={iframeRef}\n      src={url}\n      style={{\n        transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined,\n      }}\n      title={url}\n    />\n  )\n}\n"],"names":["React","useLivePreviewContext","baseClass","IFrame","iframeRef","setLoadedURL","url","zoom","iframe","className","onLoad","ref","src","style","transform","undefined","title"],"mappings":"AAAA;;AACA,OAAOA,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,SAAmB;IAC9B,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGN;IAE/C,qBACE,QAACO;QACCC,WAAWP;QAEXQ,QAAQ;YACNL,aAAaC;QACf;QACAK,KAAKP;QACLQ,KAAKN;QACLO,OAAO;YACLC,WAAW,OAAOP,SAAS,WAAW,CAAC,MAAM,EAAEA,KAAK,EAAE,CAAC,GAAGQ;QAC5D;QACAC,OAAOV;OATFA;;;;;AAYX,EAAC"}

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

@@ -1,3 +1,5 @@
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React from 'react';
 import { EyeIcon } from '../../../icons/Eye/index.js';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
@@ -9,14 +11,30 @@ export const LivePreviewToggler = ()=>{
     if (!livePreviewURL) {
         return null;
     }
-    return <button aria-label={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')} className={[
-        baseClass,
-        isLivePreviewing && `${baseClass}--active`
-    ].filter(Boolean).join(' ')} id="live-preview-toggler" onClick={()=>{
-        setIsLivePreviewing(!isLivePreviewing);
-    }} title={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')} type="button">
-      <EyeIcon active={isLivePreviewing}/>
-    </button>;
+    return /*#__PURE__*/ _jsxDEV("button", {
+        "aria-label": isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview'),
+        className: [
+            baseClass,
+            isLivePreviewing && `${baseClass}--active`
+        ].filter(Boolean).join(' '),
+        id: "live-preview-toggler",
+        onClick: ()=>{
+            setIsLivePreviewing(!isLivePreviewing);
+        },
+        title: isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview'),
+        type: "button",
+        children: /*#__PURE__*/ _jsxDEV(EyeIcon, {
+            active: isLivePreviewing
+        }, void 0, false, {
+            fileName: "src/elements/LivePreview/Toggler/index.tsx",
+            lineNumber: 29,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/elements/LivePreview/Toggler/index.tsx",
+        lineNumber: 19,
+        columnNumber: 5
+    }, this);
 };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/LivePreview/Toggler/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { EyeIcon } from '../../../icons/Eye/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toggler'\n\nexport const LivePreviewToggler: React.FC = () => {\n  const { isLivePreviewing, setIsLivePreviewing, url: livePreviewURL } = useLivePreviewContext()\n  const { t } = useTranslation()\n\n  if (!livePreviewURL) {\n    return null\n  }\n\n  return (\n    <button\n      aria-label={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      className={[baseClass, isLivePreviewing && `${baseClass}--active`].filter(Boolean).join(' ')}\n      id=\"live-preview-toggler\"\n      onClick={() => {\n        setIsLivePreviewing(!isLivePreviewing)\n      }}\n      title={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      type=\"button\"\n    >\n      <EyeIcon active={isLivePreviewing} />\n    </button>\n  )\n}\n"],"names":["EyeIcon","useLivePreviewContext","useTranslation","baseClass","LivePreviewToggler","isLivePreviewing","setIsLivePreviewing","url","livePreviewURL","t","button","aria-label","className","filter","Boolean","join","id","onClick","title","type","active"],"mappings":"AAEA,SAASA,OAAO,QAAQ,8BAA6B;AACrD,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,qBAA+B;IAC1C,MAAM,EAAEC,gBAAgB,EAAEC,mBAAmB,EAAEC,KAAKC,cAAc,EAAE,GAAGP;IACvE,MAAM,EAAEQ,CAAC,EAAE,GAAGP;IAEd,IAAI,CAACM,gBAAgB;QACnB,OAAO;IACT;IAEA,QACGE,OACCC,YAAYN,mBAAmBI,EAAE,6BAA6BA,EAAE,wBAChEG,WAAW;QAACT;QAAWE,oBAAoB,GAAGF,UAAU,QAAQ,CAAC;KAAC,CAACU,MAAM,CAACC,SAASC,IAAI,CAAC,MACxFC,GAAG,uBACHC,SAAS;QACPX,oBAAoB,CAACD;IACvB,GACAa,OAAOb,mBAAmBI,EAAE,6BAA6BA,EAAE,wBAC3DU,KAAK,SACN;MACC,CAACnB,QAAQoB,QAAQf,mBAAoB;IACvC,EAAEK;AAEN,EAAC"}
+{"version":3,"sources":["../../../../src/elements/LivePreview/Toggler/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport { EyeIcon } from '../../../icons/Eye/index.js'\nimport { useLivePreviewContext } from '../../../providers/LivePreview/context.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toggler'\n\nexport const LivePreviewToggler: React.FC = () => {\n  const { isLivePreviewing, setIsLivePreviewing, url: livePreviewURL } = useLivePreviewContext()\n  const { t } = useTranslation()\n\n  if (!livePreviewURL) {\n    return null\n  }\n\n  return (\n    <button\n      aria-label={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      className={[baseClass, isLivePreviewing && `${baseClass}--active`].filter(Boolean).join(' ')}\n      id=\"live-preview-toggler\"\n      onClick={() => {\n        setIsLivePreviewing(!isLivePreviewing)\n      }}\n      title={isLivePreviewing ? t('general:exitLivePreview') : t('general:livePreview')}\n      type=\"button\"\n    >\n      <EyeIcon active={isLivePreviewing} />\n    </button>\n  )\n}\n"],"names":["React","EyeIcon","useLivePreviewContext","useTranslation","baseClass","LivePreviewToggler","isLivePreviewing","setIsLivePreviewing","url","livePreviewURL","t","button","aria-label","className","filter","Boolean","join","id","onClick","title","type","active"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAEzB,SAASC,OAAO,QAAQ,8BAA6B;AACrD,SAASC,qBAAqB,QAAQ,4CAA2C;AACjF,SAASC,cAAc,QAAQ,0CAAyC;AACxE,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,qBAA+B;IAC1C,MAAM,EAAEC,gBAAgB,EAAEC,mBAAmB,EAAEC,KAAKC,cAAc,EAAE,GAAGP;IACvE,MAAM,EAAEQ,CAAC,EAAE,GAAGP;IAEd,IAAI,CAACM,gBAAgB;QACnB,OAAO;IACT;IAEA,qBACE,QAACE;QACCC,cAAYN,mBAAmBI,EAAE,6BAA6BA,EAAE;QAChEG,WAAW;YAACT;YAAWE,oBAAoB,GAAGF,UAAU,QAAQ,CAAC;SAAC,CAACU,MAAM,CAACC,SAASC,IAAI,CAAC;QACxFC,IAAG;QACHC,SAAS;YACPX,oBAAoB,CAACD;QACvB;QACAa,OAAOb,mBAAmBI,EAAE,6BAA6BA,EAAE;QAC3DU,MAAK;kBAEL,cAAA,QAACnB;YAAQoB,QAAQf;;;;;;;;;;;AAGvB,EAAC"}

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

@@ -1,4 +1,5 @@
 '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';
@@ -24,56 +25,202 @@ export const ToolbarControls = ()=>{
         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={()=>{
-                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>;
+    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);
 };
 
 //# 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,"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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"}

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

@@ -1,4 +1,5 @@
 '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';
@@ -52,7 +53,19 @@ export const PreviewFrameSizeInput = (props)=>{
         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}/>;
+    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);
 };
 
 //# 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,"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"}