@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.35482da

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

@@ -1,79 +1,92 @@
 'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useResize } from '../../../hooks/useResize.js';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
-export const DeviceContainer = (props)=>{
-    const { children } = props;
-    const deviceFrameRef = React.useRef(null);
-    const outerFrameRef = React.useRef(null);
-    const { breakpoint, setMeasuredDeviceSize, size: desiredSize, zoom } = useLivePreviewContext();
-    // Keep an accurate measurement of the actual device size as it is truly rendered
-    // This is helpful when `sizes` are non-number units like percentages, etc.
-    const { size: measuredDeviceSize } = useResize(deviceFrameRef.current);
-    const { size: outerFrameSize } = useResize(outerFrameRef.current);
-    let deviceIsLargerThanFrame = false;
-    // Sync the measured device size with the context so that other components can use it
-    // This happens from the bottom up so that as this component mounts and unmounts,
-    // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
-    useEffect(()=>{
-        if (measuredDeviceSize) {
-            setMeasuredDeviceSize(measuredDeviceSize);
+export const DeviceContainer = props => {
+  const {
+    children
+  } = props;
+  const deviceFrameRef = React.useRef(null);
+  const outerFrameRef = React.useRef(null);
+  const {
+    breakpoint,
+    setMeasuredDeviceSize,
+    size: desiredSize,
+    zoom
+  } = useLivePreviewContext();
+  // Keep an accurate measurement of the actual device size as it is truly rendered
+  // This is helpful when `sizes` are non-number units like percentages, etc.
+  const {
+    size: measuredDeviceSize
+  } = useResize(deviceFrameRef.current);
+  const {
+    size: outerFrameSize
+  } = useResize(outerFrameRef.current);
+  let deviceIsLargerThanFrame = false;
+  // Sync the measured device size with the context so that other components can use it
+  // This happens from the bottom up so that as this component mounts and unmounts,
+  // its size is freshly populated again upon re-mounting, i.e. going from iframe->popup->iframe
+  useEffect(() => {
+    if (measuredDeviceSize) {
+      setMeasuredDeviceSize(measuredDeviceSize);
+    }
+  }, [measuredDeviceSize, setMeasuredDeviceSize]);
+  let x = '0';
+  let margin = '0';
+  if (breakpoint && breakpoint !== 'responsive') {
+    x = '-50%';
+    if (desiredSize && measuredDeviceSize && typeof zoom === 'number' && typeof desiredSize.width === 'number' && typeof desiredSize.height === 'number' && typeof measuredDeviceSize.width === 'number' && typeof measuredDeviceSize.height === 'number') {
+      margin = '0 auto';
+      const scaledDesiredWidth = desiredSize.width / zoom;
+      const scaledDeviceWidth = measuredDeviceSize.width * zoom;
+      const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width;
+      deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width;
+      if (deviceIsLargerThanFrame) {
+        if (zoom > 1) {
+          const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width;
+          if (differenceFromDeviceToFrame < 0) {
+            x = `${differenceFromDeviceToFrame / 2}px`;
+          } else {
+            x = '0';
+          }
+        } else {
+          x = '0';
         }
-    }, [
-        measuredDeviceSize,
-        setMeasuredDeviceSize
-    ]);
-    let x = '0';
-    let margin = '0';
-    if (breakpoint && breakpoint !== 'responsive') {
-        x = '-50%';
-        if (desiredSize && measuredDeviceSize && typeof zoom === 'number' && typeof desiredSize.width === 'number' && typeof desiredSize.height === 'number' && typeof measuredDeviceSize.width === 'number' && typeof measuredDeviceSize.height === 'number') {
-            margin = '0 auto';
-            const scaledDesiredWidth = desiredSize.width / zoom;
-            const scaledDeviceWidth = measuredDeviceSize.width * zoom;
-            const scaledDeviceDifferencePixels = scaledDesiredWidth - desiredSize.width;
-            deviceIsLargerThanFrame = scaledDeviceWidth > outerFrameSize.width;
-            if (deviceIsLargerThanFrame) {
-                if (zoom > 1) {
-                    const differenceFromDeviceToFrame = measuredDeviceSize.width - outerFrameSize.width;
-                    if (differenceFromDeviceToFrame < 0) {
-                        x = `${differenceFromDeviceToFrame / 2}px`;
-                    } else {
-                        x = '0';
-                    }
-                } else {
-                    x = '0';
-                }
-            } else {
-                if (zoom >= 1) {
-                    x = `${scaledDeviceDifferencePixels / 2}px`;
-                } else {
-                    const differenceFromDeviceToFrame = outerFrameSize.width - scaledDeviceWidth;
-                    x = `${differenceFromDeviceToFrame / 2}px`;
-                    margin = '0';
-                }
-            }
+      } else {
+        if (zoom >= 1) {
+          x = `${scaledDeviceDifferencePixels / 2}px`;
+        } else {
+          const differenceFromDeviceToFrame_0 = outerFrameSize.width - scaledDeviceWidth;
+          x = `${differenceFromDeviceToFrame_0 / 2}px`;
+          margin = '0';
         }
+      }
     }
-    let width = zoom ? `${100 / zoom}%` : '100%';
-    let height = zoom ? `${100 / zoom}%` : '100%';
-    if (breakpoint !== 'responsive') {
-        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={{
+  }
+  let width = zoom ? `${100 / zoom}%` : '100%';
+  let height = zoom ? `${100 / zoom}%` : '100%';
+  if (breakpoint !== 'responsive') {
+    width = `${desiredSize?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
+    height = `${desiredSize?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ref: outerFrameRef,
+    style: {
+      height: '100%',
+      width: '100%'
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      ref: deviceFrameRef,
+      style: {
         height,
         margin,
         transform: `translate3d(${x}, 0, 0)`,
         width
-    }}>
-        {children}
-      </div>
-    </div>;
+      },
+      children: children
+    })
+  });
 };
-
 //# 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,"file":"index.js","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","_jsx","ref","style","transform"],"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"],"mappings":"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","ignoreList":[]}

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

@@ -1,28 +1,55 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { useLivePreviewContext } from '../../../providers/LivePreview/context.js';
-export const DeviceContainer = (props)=>{
-    const { children } = props;
-    const { breakpoint, breakpoints, size, zoom } = useLivePreviewContext();
-    const foundBreakpoint = breakpoint && breakpoints?.find((bp)=>bp.name === breakpoint);
-    let x = '0';
-    let margin = '0';
-    if (foundBreakpoint && breakpoint !== 'responsive') {
-        x = '-50%';
-        if (typeof zoom === 'number' && typeof size.width === 'number' && typeof size.height === 'number') {
-            const scaledWidth = size.width / zoom;
-            const difference = scaledWidth - size.width;
-            x = `${difference / 2}px`;
-            margin = '0 auto';
-        }
+export const DeviceContainer = props => {
+  const $ = _c(6);
+  const {
+    children
+  } = props;
+  const {
+    breakpoint,
+    breakpoints,
+    size,
+    zoom
+  } = useLivePreviewContext();
+  const foundBreakpoint = breakpoint && breakpoints?.find(bp => bp.name === breakpoint);
+  let x = "0";
+  let margin = "0";
+  if (foundBreakpoint && breakpoint !== "responsive") {
+    x = "-50%";
+    if (typeof zoom === "number" && typeof size.width === "number" && typeof size.height === "number") {
+      const scaledWidth = size.width / zoom;
+      const difference = scaledWidth - size.width;
+      x = `${difference / 2}px`;
+      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%',
+  }
+  const t0 = foundBreakpoint && foundBreakpoint?.name !== "responsive" ? `${size?.height / (typeof zoom === "number" ? zoom : 1)}px` : typeof zoom === "number" ? `${100 / zoom}%` : "100%";
+  const t1 = `translate3d(${x}, 0, 0)`;
+  const t2 = foundBreakpoint && foundBreakpoint?.name !== "responsive" ? `${size?.width / (typeof zoom === "number" ? zoom : 1)}px` : typeof zoom === "number" ? `${100 / zoom}%` : "100%";
+  let t3;
+  if ($[0] !== children || $[1] !== margin || $[2] !== t0 || $[3] !== t1 || $[4] !== t2) {
+    t3 = _jsx("div", {
+      style: {
+        height: t0,
         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>;
+        transform: t1,
+        width: t2
+      },
+      children
+    });
+    $[0] = children;
+    $[1] = margin;
+    $[2] = t0;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
 };
-
 //# 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,"file":"index.js","names":["c","_c","React","useLivePreviewContext","DeviceContainer","props","$","children","breakpoint","breakpoints","size","zoom","foundBreakpoint","find","bp","name","x","margin","width","height","scaledWidth","difference","t0","t1","t2","t3","_jsx","style","transform"],"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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AAEtC,OAAO,MAAMC,eAAA,GAERC,KAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACH;IAAAM;EAAA,IAAqBF,KAAA;EAErB;IAAAG,UAAA;IAAAC,WAAA;IAAAC,IAAA;IAAAC;EAAA,IAAgDR,qBAAA;EAEhD,MAAAS,eAAA,GAAwBJ,UAAA,IAAcC,WAAA,EAAAI,IAAA,CAAAC,EAAA,IAA0BA,EAAA,CAAAC,IAAA,KAAYP,UAAA;EAE5E,IAAAQ,CAAA,GAAQ;EACR,IAAAC,MAAA,GAAa;EAAA,IAETL,eAAA,IAAmBJ,UAAA,KAAe;IACpCQ,CAAA,CAAAA,CAAA,CAAIA,MAAA;IAAJ,IAGE,OAAOL,IAAA,KAAS,YAChB,OAAOD,IAAA,CAAAQ,KAAA,KAAe,YACtB,OAAOR,IAAA,CAAAS,MAAA,KAAgB;MAEvB,MAAAC,WAAA,GAAoBV,IAAA,CAAAQ,KAAA,GAAaP,IAAA;MACjC,MAAAU,UAAA,GAAmBD,WAAA,GAAcV,IAAA,CAAAQ,KAAU;MAC3CF,CAAA,CAAAA,CAAA,CAAIA,GAAGK,UAAA,IAAa,IAAK;MACzBJ,MAAA,CAAAA,CAAA,CAASA,QAAA;IAAT;EAAA;EAQI,MAAAK,EAAA,GAAAV,eAAA,IAAmBA,eAAA,EAAAG,IAAA,KAA0B,eACzC,GAAGL,IAAA,EAAAS,MAAA,IAAgB,OAAOR,IAAA,KAAS,WAAWA,IAAA,IAAO,KAAM,GAC3D,OAAOA,IAAA,KAAS,WACd,GAAG,MAAMA,IAAA,GAAO,GAChB;EAEG,MAAAY,EAAA,kBAAeP,CAAA,SAAU;EAElC,MAAAQ,EAAA,GAAAZ,eAAA,IAAmBA,eAAA,EAAAG,IAAA,KAA0B,eACzC,GAAGL,IAAA,EAAAQ,KAAA,IAAe,OAAOP,IAAA,KAAS,WAAWA,IAAA,IAAO,KAAM,GAC1D,OAAOA,IAAA,KAAS,WACd,GAAG,MAAMA,IAAA,GAAO,GAChB;EAAA,IAAAc,EAAA;EAAA,IAAAnB,CAAA,QAAAC,QAAA,IAAAD,CAAA,QAAAW,MAAA,IAAAX,CAAA,QAAAgB,EAAA,IAAAhB,CAAA,QAAAiB,EAAA,IAAAjB,CAAA,QAAAkB,EAAA;IAfZC,EAAA,GAAAC,IAAA,CAAC;MAAAC,KAAA;QAAAR,MAAA,EAGKG,EAIM;QAAAL,MAAA;QAAAW,SAAA,EAEGL,EAAyB;QAAAL,KAAA,EAElCM;MAIM;MAAAjB;IAAA,C;;;;;;;;;;SAfZkB,E;CAqBJ","ignoreList":[]}

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

@@ -1,14 +1,51 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-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}/>;
+export const IFrame = () => {
+  const $ = _c(8);
+  const {
+    iframeRef,
+    setLoadedURL,
+    url,
+    zoom
+  } = useLivePreviewContext();
+  let t0;
+  if ($[0] !== setLoadedURL || $[1] !== url) {
+    t0 = () => {
+      setLoadedURL(url);
+    };
+    $[0] = setLoadedURL;
+    $[1] = url;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const t1 = typeof zoom === "number" ? `scale(${zoom}) ` : undefined;
+  let t2;
+  if ($[3] !== iframeRef || $[4] !== t0 || $[5] !== t1 || $[6] !== url) {
+    t2 = _jsx("iframe", {
+      className: baseClass,
+      onLoad: t0,
+      ref: iframeRef,
+      src: url,
+      style: {
+        transform: t1
+      },
+      title: url
+    }, url);
+    $[3] = iframeRef;
+    $[4] = t0;
+    $[5] = t1;
+    $[6] = url;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
 };
-
 //# 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,"file":"index.js","names":["c","_c","React","useLivePreviewContext","baseClass","IFrame","$","iframeRef","setLoadedURL","url","zoom","t0","t1","undefined","t2","_jsx","className","onLoad","ref","src","style","transform","title"],"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"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,MAAA,GAAmBA,CAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EAC9B;IAAAM,SAAA;IAAAC,YAAA;IAAAC,GAAA;IAAAC;EAAA,IAA+CP,qBAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAL,CAAA,QAAAE,YAAA,IAAAF,CAAA,QAAAG,GAAA;IAMnCE,EAAA,GAAAA,CAAA;MACNH,YAAA,CAAaC,GAAA;IAAA;IACfH,CAAA,MAAAE,YAAA;IAAAF,CAAA,MAAAG,GAAA;IAAAH,CAAA,MAAAK,EAAA;EAAA;IAAAA,EAAA,GAAAL,CAAA;EAAA;EAIa,MAAAM,EAAA,UAAOF,IAAA,KAAS,WAAW,SAASA,IAAA,IAAQ,GAAAG,SAAG;EAAA,IAAAC,EAAA;EAAA,IAAAR,CAAA,QAAAC,SAAA,IAAAD,CAAA,QAAAK,EAAA,IAAAL,CAAA,QAAAM,EAAA,IAAAN,CAAA,QAAAG,GAAA;IAT9DK,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAZ,SAAA;MAAAa,MAAA,EAGSN,EAER;MAAAO,GAAA,EACKX,SAAA;MAAAY,GAAA,EACAV,GAAA;MAAAW,KAAA;QAAAC,SAAA,EAEQT;MAA+C;MAAAU,KAAA,EAErDb;IAAA,GATFA,GAAA;IAAAH,CAAA,MAAAC,SAAA;IAAAD,CAAA,MAAAK,EAAA;IAAAL,CAAA,MAAAM,EAAA;IAAAN,CAAA,MAAAG,GAAA;IAAAH,CAAA,MAAAQ,EAAA;EAAA;IAAAA,EAAA,GAAAR,CAAA;EAAA;EAAA,OAFPQ,EAEO;AAAA,CAYX","ignoreList":[]}

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

@@ -1,22 +1,34 @@
+import { jsx as _jsx } from "react/jsx-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';
 import './index.scss';
 const baseClass = 'live-preview-toggler';
-export const LivePreviewToggler = ()=>{
-    const { isLivePreviewing, setIsLivePreviewing, url: livePreviewURL } = useLivePreviewContext();
-    const { t } = useTranslation();
-    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>;
+export const LivePreviewToggler = () => {
+  const {
+    isLivePreviewing,
+    setIsLivePreviewing,
+    url: livePreviewURL
+  } = useLivePreviewContext();
+  const {
+    t
+  } = useTranslation();
+  if (!livePreviewURL) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("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__*/_jsx(EyeIcon, {
+      active: isLivePreviewing
+    })
+  });
 };
-
 //# 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,"file":"index.js","names":["React","EyeIcon","useLivePreviewContext","useTranslation","baseClass","LivePreviewToggler","isLivePreviewing","setIsLivePreviewing","url","livePreviewURL","t","_jsx","className","filter","Boolean","join","id","onClick","title","type","active"],"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"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,SAASC,OAAO,QAAQ;AACxB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kBAAA,GAA+BA,CAAA;EAC1C,MAAM;IAAEC,gBAAgB;IAAEC,mBAAmB;IAAEC,GAAA,EAAKC;EAAc,CAAE,GAAGP,qBAAA;EACvE,MAAM;IAAEQ;EAAC,CAAE,GAAGP,cAAA;EAEd,IAAI,CAACM,cAAA,EAAgB;IACnB,OAAO;EACT;EAEA,oBACEE,IAAA,CAAC;IACC,cAAYL,gBAAA,GAAmBI,CAAA,CAAE,6BAA6BA,CAAA,CAAE;IAChEE,SAAA,EAAW,CAACR,SAAA,EAAWE,gBAAA,IAAoB,GAAGF,SAAA,UAAmB,CAAC,CAACS,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;IACxFC,EAAA,EAAG;IACHC,OAAA,EAASA,CAAA;MACPV,mBAAA,CAAoB,CAACD,gBAAA;IACvB;IACAY,KAAA,EAAOZ,gBAAA,GAAmBI,CAAA,CAAE,6BAA6BA,CAAA,CAAE;IAC3DS,IAAA,EAAK;cAEL,aAAAR,IAAA,CAACV,OAAA;MAAQmB,MAAA,EAAQd;;;AAGvB","ignoreList":[]}