@payloadcms/next 3.0.0-canary.fb81f02 → 3.0.0

package/dist/views/LivePreview/Preview/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ShimmerEffect, useAllFormFields, useDocumentEvents } from '@payloadcms/ui';
 import { reduceFieldsToValues } from 'payload/shared';
@@ -8,103 +10,154 @@ import { DeviceContainer } from '../Device/index.js';
 import { IFrame } from '../IFrame/index.js';
 import { LivePreviewToolbar } from '../Toolbar/index.js';
 const baseClass = 'live-preview-window';
-export const LivePreview = (props)=>{
-    const { appIsReady, iframeHasLoaded, iframeRef, popupRef, previewWindowType, setIframeHasLoaded, url } = useLivePreviewContext();
-    const { mostRecentUpdate } = useDocumentEvents();
-    const { breakpoint, fieldSchemaJSON } = useLivePreviewContext();
-    const prevWindowType = React.useRef(undefined);
-    const [fields] = useAllFormFields();
-    // For client-side apps, send data through `window.postMessage`
-    // The preview could either be an iframe embedded on the page
-    // Or it could be a separate popup window
-    // We need to transmit data to both accordingly
-    useEffect(()=>{
-        // For performance, do no reduce fields to values until after the iframe or popup has loaded
-        if (fields && window && 'postMessage' in window && appIsReady) {
-            const values = reduceFieldsToValues(fields, true);
-            // To reduce on large `postMessage` payloads, only send `fieldSchemaToJSON` one time
-            // To do this, the underlying JS function maintains a cache of this value
-            // So we need to send it through each time the window type changes
-            // But only once per window type change, not on every render, because this is a potentially large obj
-            const shouldSendSchema = !prevWindowType.current || prevWindowType.current !== previewWindowType;
-            prevWindowType.current = previewWindowType;
-            const message = {
-                type: 'payload-live-preview',
-                data: values,
-                externallyUpdatedRelationship: mostRecentUpdate,
-                fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined
-            };
-            // Post message to external popup window
-            if (previewWindowType === 'popup' && popupRef.current) {
-                popupRef.current.postMessage(message, url);
-            }
-            // Post message to embedded iframe
-            if (previewWindowType === 'iframe' && iframeRef.current) {
-                iframeRef.current.contentWindow?.postMessage(message, url);
-            }
-        }
-    }, [
-        fields,
-        url,
-        iframeHasLoaded,
-        previewWindowType,
-        popupRef,
-        appIsReady,
-        iframeRef,
-        setIframeHasLoaded,
-        fieldSchemaJSON,
-        mostRecentUpdate
-    ]);
-    // To support SSR, we transmit a `window.postMessage` event without a payload
-    // This is because the event will ultimately trigger a server-side roundtrip
-    // i.e., save, save draft, autosave, etc. will fire `router.refresh()`
-    useEffect(()=>{
+export const LivePreview = props => {
+  const $ = _c(39);
+  const {
+    appIsReady,
+    iframeHasLoaded,
+    iframeRef,
+    popupRef,
+    previewWindowType,
+    setIframeHasLoaded,
+    url
+  } = useLivePreviewContext();
+  const {
+    mostRecentUpdate
+  } = useDocumentEvents();
+  const {
+    breakpoint,
+    fieldSchemaJSON
+  } = useLivePreviewContext();
+  const prevWindowType = React.useRef(undefined);
+  const [fields] = useAllFormFields();
+  let t0;
+  if ($[0] !== fields || $[1] !== appIsReady || $[2] !== previewWindowType || $[3] !== mostRecentUpdate || $[4] !== fieldSchemaJSON || $[5] !== popupRef.current || $[6] !== url || $[7] !== iframeRef.current) {
+    t0 = () => {
+      if (fields && window && "postMessage" in window && appIsReady) {
+        const values = reduceFieldsToValues(fields, true);
+        const shouldSendSchema = !prevWindowType.current || prevWindowType.current !== previewWindowType;
+        prevWindowType.current = previewWindowType;
         const message = {
-            type: 'payload-document-event'
+          type: "payload-live-preview",
+          data: values,
+          externallyUpdatedRelationship: mostRecentUpdate,
+          fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined
         };
-        // Post message to external popup window
-        if (previewWindowType === 'popup' && popupRef.current) {
-            popupRef.current.postMessage(message, url);
+        if (previewWindowType === "popup" && popupRef.current) {
+          popupRef.current.postMessage(message, url);
         }
-        // Post message to embedded iframe
-        if (previewWindowType === 'iframe' && iframeRef.current) {
-            iframeRef.current.contentWindow?.postMessage(message, url);
+        if (previewWindowType === "iframe" && iframeRef.current) {
+          iframeRef.current.contentWindow?.postMessage(message, url);
         }
-    }, [
-        mostRecentUpdate,
-        iframeRef,
-        popupRef,
-        previewWindowType,
-        url
-    ]);
-    if (previewWindowType === 'iframe') {
-        return /*#__PURE__*/ _jsx("div", {
-            className: [
-                baseClass,
-                breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
-            ].filter(Boolean).join(' '),
-            children: /*#__PURE__*/ _jsxs("div", {
-                className: `${baseClass}__wrapper`,
-                children: [
-                    /*#__PURE__*/ _jsx(LivePreviewToolbar, {
-                        ...props
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: `${baseClass}__main`,
-                        children: /*#__PURE__*/ _jsx(DeviceContainer, {
-                            children: url ? /*#__PURE__*/ _jsx(IFrame, {
-                                ref: iframeRef,
-                                setIframeHasLoaded: setIframeHasLoaded,
-                                url: url
-                            }) : /*#__PURE__*/ _jsx(ShimmerEffect, {
-                                height: "100%"
-                            })
-                        })
-                    })
-                ]
+      }
+    };
+    $[0] = fields;
+    $[1] = appIsReady;
+    $[2] = previewWindowType;
+    $[3] = mostRecentUpdate;
+    $[4] = fieldSchemaJSON;
+    $[5] = popupRef.current;
+    $[6] = url;
+    $[7] = iframeRef.current;
+    $[8] = t0;
+  } else {
+    t0 = $[8];
+  }
+  let t1;
+  if ($[9] !== fields || $[10] !== url || $[11] !== iframeHasLoaded || $[12] !== previewWindowType || $[13] !== popupRef || $[14] !== appIsReady || $[15] !== iframeRef || $[16] !== setIframeHasLoaded || $[17] !== fieldSchemaJSON || $[18] !== mostRecentUpdate) {
+    t1 = [fields, url, iframeHasLoaded, previewWindowType, popupRef, appIsReady, iframeRef, setIframeHasLoaded, fieldSchemaJSON, mostRecentUpdate];
+    $[9] = fields;
+    $[10] = url;
+    $[11] = iframeHasLoaded;
+    $[12] = previewWindowType;
+    $[13] = popupRef;
+    $[14] = appIsReady;
+    $[15] = iframeRef;
+    $[16] = setIframeHasLoaded;
+    $[17] = fieldSchemaJSON;
+    $[18] = mostRecentUpdate;
+    $[19] = t1;
+  } else {
+    t1 = $[19];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[20] !== previewWindowType || $[21] !== popupRef.current || $[22] !== url || $[23] !== iframeRef.current) {
+    t2 = () => {
+      const message_0 = {
+        type: "payload-document-event"
+      };
+      if (previewWindowType === "popup" && popupRef.current) {
+        popupRef.current.postMessage(message_0, url);
+      }
+      if (previewWindowType === "iframe" && iframeRef.current) {
+        iframeRef.current.contentWindow?.postMessage(message_0, url);
+      }
+    };
+    $[20] = previewWindowType;
+    $[21] = popupRef.current;
+    $[22] = url;
+    $[23] = iframeRef.current;
+    $[24] = t2;
+  } else {
+    t2 = $[24];
+  }
+  let t3;
+  if ($[25] !== mostRecentUpdate || $[26] !== iframeRef || $[27] !== popupRef || $[28] !== previewWindowType || $[29] !== url) {
+    t3 = [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url];
+    $[25] = mostRecentUpdate;
+    $[26] = iframeRef;
+    $[27] = popupRef;
+    $[28] = previewWindowType;
+    $[29] = url;
+    $[30] = t3;
+  } else {
+    t3 = $[30];
+  }
+  useEffect(t2, t3);
+  if (previewWindowType === "iframe") {
+    const t4 = breakpoint && breakpoint !== "responsive" && `${baseClass}--has-breakpoint`;
+    let t5;
+    if ($[31] !== t4) {
+      t5 = [baseClass, t4].filter(Boolean);
+      $[31] = t4;
+      $[32] = t5;
+    } else {
+      t5 = $[32];
+    }
+    const t6 = t5.join(" ");
+    let t7;
+    if ($[33] !== props || $[34] !== url || $[35] !== iframeRef || $[36] !== setIframeHasLoaded || $[37] !== t6) {
+      t7 = _jsx("div", {
+        className: t6,
+        children: _jsxs("div", {
+          className: `${baseClass}__wrapper`,
+          children: [_jsx(LivePreviewToolbar, {
+            ...props
+          }), _jsx("div", {
+            className: `${baseClass}__main`,
+            children: _jsx(DeviceContainer, {
+              children: url ? _jsx(IFrame, {
+                ref: iframeRef,
+                setIframeHasLoaded,
+                url
+              }) : _jsx(ShimmerEffect, {
+                height: "100%"
+              })
             })
-        });
+          })]
+        })
+      });
+      $[33] = props;
+      $[34] = url;
+      $[35] = iframeRef;
+      $[36] = setIframeHasLoaded;
+      $[37] = t6;
+      $[38] = t7;
+    } else {
+      t7 = $[38];
     }
+    return t7;
+  }
 };
-
 //# sourceMappingURL=index.js.map

package/dist/views/LivePreview/Preview/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/views/LivePreview/Preview/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { ShimmerEffect, useAllFormFields, useDocumentEvents } from '@payloadcms/ui'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { IFrame } from '../IFrame/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreview: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    iframeHasLoaded,\n    iframeRef,\n    popupRef,\n    previewWindowType,\n    setIframeHasLoaded,\n    url,\n  } = useLivePreviewContext()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const { breakpoint, fieldSchemaJSON } = useLivePreviewContext()\n\n  const prevWindowType =\n    React.useRef<ReturnType<typeof useLivePreviewContext>['previewWindowType']>(undefined)\n\n  const [fields] = useAllFormFields()\n\n  // For client-side apps, send data through `window.postMessage`\n  // The preview could either be an iframe embedded on the page\n  // Or it could be a separate popup window\n  // We need to transmit data to both accordingly\n  useEffect(() => {\n    // For performance, do no reduce fields to values until after the iframe or popup has loaded\n    if (fields && window && 'postMessage' in window && appIsReady) {\n      const values = reduceFieldsToValues(fields, true)\n\n      // To reduce on large `postMessage` payloads, only send `fieldSchemaToJSON` one time\n      // To do this, the underlying JS function maintains a cache of this value\n      // So we need to send it through each time the window type changes\n      // But only once per window type change, not on every render, because this is a potentially large obj\n      const shouldSendSchema =\n        !prevWindowType.current || prevWindowType.current !== previewWindowType\n\n      prevWindowType.current = previewWindowType\n\n      const message = {\n        type: 'payload-live-preview',\n        data: values,\n        externallyUpdatedRelationship: mostRecentUpdate,\n        fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined,\n      }\n\n      // Post message to external popup window\n      if (previewWindowType === 'popup' && popupRef.current) {\n        popupRef.current.postMessage(message, url)\n      }\n\n      // Post message to embedded iframe\n      if (previewWindowType === 'iframe' && iframeRef.current) {\n        iframeRef.current.contentWindow?.postMessage(message, url)\n      }\n    }\n  }, [\n    fields,\n    url,\n    iframeHasLoaded,\n    previewWindowType,\n    popupRef,\n    appIsReady,\n    iframeRef,\n    setIframeHasLoaded,\n    fieldSchemaJSON,\n    mostRecentUpdate,\n  ])\n\n  // To support SSR, we transmit a `window.postMessage` event without a payload\n  // This is because the event will ultimately trigger a server-side roundtrip\n  // i.e., save, save draft, autosave, etc. will fire `router.refresh()`\n  useEffect(() => {\n    const message = {\n      type: 'payload-document-event',\n    }\n\n    // Post message to external popup window\n    if (previewWindowType === 'popup' && popupRef.current) {\n      popupRef.current.postMessage(message, url)\n    }\n\n    // Post message to embedded iframe\n    if (previewWindowType === 'iframe' && iframeRef.current) {\n      iframeRef.current.contentWindow?.postMessage(message, url)\n    }\n  }, [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url])\n\n  if (previewWindowType === 'iframe') {\n    return (\n      <div\n        className={[\n          baseClass,\n          breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div className={`${baseClass}__wrapper`}>\n          <LivePreviewToolbar {...props} />\n          <div className={`${baseClass}__main`}>\n            <DeviceContainer>\n              {url ? (\n                <IFrame ref={iframeRef} setIframeHasLoaded={setIframeHasLoaded} url={url} />\n              ) : (\n                <ShimmerEffect height=\"100%\" />\n              )}\n            </DeviceContainer>\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":["ShimmerEffect","useAllFormFields","useDocumentEvents","reduceFieldsToValues","React","useEffect","useLivePreviewContext","DeviceContainer","IFrame","LivePreviewToolbar","baseClass","LivePreview","props","appIsReady","iframeHasLoaded","iframeRef","popupRef","previewWindowType","setIframeHasLoaded","url","mostRecentUpdate","breakpoint","fieldSchemaJSON","prevWindowType","useRef","undefined","fields","window","values","shouldSendSchema","current","message","type","data","externallyUpdatedRelationship","postMessage","contentWindow","div","className","filter","Boolean","join","ref","height"],"mappings":"AAAA;;AAIA,SAASA,aAAa,EAAEC,gBAAgB,EAAEC,iBAAiB,QAAQ,iBAAgB;AACnF,SAASC,oBAAoB,QAAQ,iBAAgB;AACrD,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,SAASC,eAAe,QAAQ,qBAAoB;AACpD,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,kBAAkB,QAAQ,sBAAqB;AAGxD,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAAuC,CAACC;IACnD,MAAM,EACJC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,kBAAkB,EAClBC,GAAG,EACJ,GAAGb;IAEJ,MAAM,EAAEc,gBAAgB,EAAE,GAAGlB;IAE7B,MAAM,EAAEmB,UAAU,EAAEC,eAAe,EAAE,GAAGhB;IAExC,MAAMiB,iBACJnB,MAAMoB,MAAM,CAAgEC;IAE9E,MAAM,CAACC,OAAO,GAAGzB;IAEjB,+DAA+D;IAC/D,6DAA6D;IAC7D,yCAAyC;IACzC,+CAA+C;IAC/CI,UAAU;QACR,4FAA4F;QAC5F,IAAIqB,UAAUC,UAAU,iBAAiBA,UAAUd,YAAY;YAC7D,MAAMe,SAASzB,qBAAqBuB,QAAQ;YAE5C,oFAAoF;YACpF,yEAAyE;YACzE,kEAAkE;YAClE,qGAAqG;YACrG,MAAMG,mBACJ,CAACN,eAAeO,OAAO,IAAIP,eAAeO,OAAO,KAAKb;YAExDM,eAAeO,OAAO,GAAGb;YAEzB,MAAMc,UAAU;gBACdC,MAAM;gBACNC,MAAML;gBACNM,+BAA+Bd;gBAC/BE,iBAAiBO,mBAAmBP,kBAAkBG;YACxD;YAEA,wCAAwC;YACxC,IAAIR,sBAAsB,WAAWD,SAASc,OAAO,EAAE;gBACrDd,SAASc,OAAO,CAACK,WAAW,CAACJ,SAASZ;YACxC;YAEA,kCAAkC;YAClC,IAAIF,sBAAsB,YAAYF,UAAUe,OAAO,EAAE;gBACvDf,UAAUe,OAAO,CAACM,aAAa,EAAED,YAAYJ,SAASZ;YACxD;QACF;IACF,GAAG;QACDO;QACAP;QACAL;QACAG;QACAD;QACAH;QACAE;QACAG;QACAI;QACAF;KACD;IAED,6EAA6E;IAC7E,4EAA4E;IAC5E,sEAAsE;IACtEf,UAAU;QACR,MAAM0B,UAAU;YACdC,MAAM;QACR;QAEA,wCAAwC;QACxC,IAAIf,sBAAsB,WAAWD,SAASc,OAAO,EAAE;YACrDd,SAASc,OAAO,CAACK,WAAW,CAACJ,SAASZ;QACxC;QAEA,kCAAkC;QAClC,IAAIF,sBAAsB,YAAYF,UAAUe,OAAO,EAAE;YACvDf,UAAUe,OAAO,CAACM,aAAa,EAAED,YAAYJ,SAASZ;QACxD;IACF,GAAG;QAACC;QAAkBL;QAAWC;QAAUC;QAAmBE;KAAI;IAElE,IAAIF,sBAAsB,UAAU;QAClC,qBACE,KAACoB;YACCC,WAAW;gBACT5B;gBACAW,cAAcA,eAAe,gBAAgB,CAAC,EAAEX,UAAU,gBAAgB,CAAC;aAC5E,CACE6B,MAAM,CAACC,SACPC,IAAI,CAAC;sBAER,cAAA,MAACJ;gBAAIC,WAAW,CAAC,EAAE5B,UAAU,SAAS,CAAC;;kCACrC,KAACD;wBAAoB,GAAGG,KAAK;;kCAC7B,KAACyB;wBAAIC,WAAW,CAAC,EAAE5B,UAAU,MAAM,CAAC;kCAClC,cAAA,KAACH;sCACEY,oBACC,KAACX;gCAAOkC,KAAK3B;gCAAWG,oBAAoBA;gCAAoBC,KAAKA;+CAErE,KAACnB;gCAAc2C,QAAO;;;;;;;IAOpC;AACF,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","ShimmerEffect","useAllFormFields","useDocumentEvents","reduceFieldsToValues","React","useEffect","useLivePreviewContext","DeviceContainer","IFrame","LivePreviewToolbar","baseClass","LivePreview","props","$","appIsReady","iframeHasLoaded","iframeRef","popupRef","previewWindowType","setIframeHasLoaded","url","mostRecentUpdate","breakpoint","fieldSchemaJSON","prevWindowType","useRef","undefined","fields","t0","current","window","values","shouldSendSchema","message","type","data","externallyUpdatedRelationship","postMessage","contentWindow","t1","t2","message_0","t3","t4","t5","filter","Boolean","t6","join","t7","_jsx","className","children","_jsxs","ref","height"],"sources":["../../../../src/views/LivePreview/Preview/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload'\n\nimport { ShimmerEffect, useAllFormFields, useDocumentEvents } from '@payloadcms/ui'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { IFrame } from '../IFrame/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreview: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    iframeHasLoaded,\n    iframeRef,\n    popupRef,\n    previewWindowType,\n    setIframeHasLoaded,\n    url,\n  } = useLivePreviewContext()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const { breakpoint, fieldSchemaJSON } = useLivePreviewContext()\n\n  const prevWindowType =\n    React.useRef<ReturnType<typeof useLivePreviewContext>['previewWindowType']>(undefined)\n\n  const [fields] = useAllFormFields()\n\n  // For client-side apps, send data through `window.postMessage`\n  // The preview could either be an iframe embedded on the page\n  // Or it could be a separate popup window\n  // We need to transmit data to both accordingly\n  useEffect(() => {\n    // For performance, do no reduce fields to values until after the iframe or popup has loaded\n    if (fields && window && 'postMessage' in window && appIsReady) {\n      const values = reduceFieldsToValues(fields, true)\n\n      // To reduce on large `postMessage` payloads, only send `fieldSchemaToJSON` one time\n      // To do this, the underlying JS function maintains a cache of this value\n      // So we need to send it through each time the window type changes\n      // But only once per window type change, not on every render, because this is a potentially large obj\n      const shouldSendSchema =\n        !prevWindowType.current || prevWindowType.current !== previewWindowType\n\n      prevWindowType.current = previewWindowType\n\n      const message = {\n        type: 'payload-live-preview',\n        data: values,\n        externallyUpdatedRelationship: mostRecentUpdate,\n        fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined,\n      }\n\n      // Post message to external popup window\n      if (previewWindowType === 'popup' && popupRef.current) {\n        popupRef.current.postMessage(message, url)\n      }\n\n      // Post message to embedded iframe\n      if (previewWindowType === 'iframe' && iframeRef.current) {\n        iframeRef.current.contentWindow?.postMessage(message, url)\n      }\n    }\n  }, [\n    fields,\n    url,\n    iframeHasLoaded,\n    previewWindowType,\n    popupRef,\n    appIsReady,\n    iframeRef,\n    setIframeHasLoaded,\n    fieldSchemaJSON,\n    mostRecentUpdate,\n  ])\n\n  // To support SSR, we transmit a `window.postMessage` event without a payload\n  // This is because the event will ultimately trigger a server-side roundtrip\n  // i.e., save, save draft, autosave, etc. will fire `router.refresh()`\n  useEffect(() => {\n    const message = {\n      type: 'payload-document-event',\n    }\n\n    // Post message to external popup window\n    if (previewWindowType === 'popup' && popupRef.current) {\n      popupRef.current.postMessage(message, url)\n    }\n\n    // Post message to embedded iframe\n    if (previewWindowType === 'iframe' && iframeRef.current) {\n      iframeRef.current.contentWindow?.postMessage(message, url)\n    }\n  }, [mostRecentUpdate, iframeRef, popupRef, previewWindowType, url])\n\n  if (previewWindowType === 'iframe') {\n    return (\n      <div\n        className={[\n          baseClass,\n          breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div className={`${baseClass}__wrapper`}>\n          <LivePreviewToolbar {...props} />\n          <div className={`${baseClass}__main`}>\n            <DeviceContainer>\n              {url ? (\n                <IFrame ref={iframeRef} setIframeHasLoaded={setIframeHasLoaded} url={url} />\n              ) : (\n                <ShimmerEffect height=\"100%\" />\n              )}\n            </DeviceContainer>\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/LivePreview/Preview/index.scss

@@ -1,41 +1,43 @@
 @import '../../../scss/styles.scss';
 
-.live-preview-window {
-  background-color: var(--theme-bg);
-  width: 60%;
-  flex-shrink: 0;
-  flex-grow: 0;
-  position: sticky;
-  top: var(--doc-controls-height);
-  height: calc(100vh - var(--doc-controls-height));
-  overflow: hidden;
+@layer payload-default {
+  .live-preview-window {
+    background-color: var(--theme-bg);
+    width: 60%;
+    flex-shrink: 0;
+    flex-grow: 0;
+    position: sticky;
+    top: var(--doc-controls-height);
+    height: calc(100vh - var(--doc-controls-height));
+    overflow: hidden;
 
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: flex-start;
-  }
-
-  &__main {
-    flex-grow: 1;
-    height: 100%;
-    width: 100%;
-  }
+    &__wrapper {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: flex-start;
+    }
 
-  &--has-breakpoint {
-    .live-preview-iframe {
-      border: 1px solid var(--theme-elevation-100);
+    &__main {
+      flex-grow: 1;
+      height: 100%;
+      width: 100%;
     }
 
-    .live-preview-window {
-      &__main {
-        padding: var(--base);
+    &--has-breakpoint {
+      .live-preview-iframe {
+        border: 1px solid var(--theme-elevation-100);
+      }
+
+      .live-preview-window {
+        &__main {
+          padding: var(--base);
+        }
       }
     }
-  }
 
-  @include mid-break {
-    width: 100%;
+    @include mid-break {
+      width: 100%;
+    }
   }
 }