payload 2.0.0-beta.5 → 2.0.0-beta.7

package/dist/admin/components/views/LivePreview/Context/sizeReducer.js

@@ -0,0 +1,41 @@
+// export const sizeReducer: (state, action) => {
+//   switch (action.type) {
+//     case 'width':
+//       return { ...state, width: action.value }
+//     case 'height':
+//       return { ...state, height: action.value }
+//     default:
+//       return { ...state, ...(action?.value || {}) }
+//   }
+// },
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "sizeReducer", {
+    enumerable: true,
+    get: function() {
+        return sizeReducer;
+    }
+});
+const sizeReducer = (state, action)=>{
+    switch(action.type){
+        case 'width':
+            return {
+                ...state,
+                width: action.value
+            };
+        case 'height':
+            return {
+                ...state,
+                height: action.value
+            };
+        default:
+            return {
+                ...state,
+                ...action?.value || {}
+            };
+    }
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L0NvbnRleHQvc2l6ZVJlZHVjZXIudHMiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gZXhwb3J0IGNvbnN0IHNpemVSZWR1Y2VyOiAoc3RhdGUsIGFjdGlvbikgPT4ge1xuLy8gICBzd2l0Y2ggKGFjdGlvbi50eXBlKSB7XG4vLyAgICAgY2FzZSAnd2lkdGgnOlxuLy8gICAgICAgcmV0dXJuIHsgLi4uc3RhdGUsIHdpZHRoOiBhY3Rpb24udmFsdWUgfVxuLy8gICAgIGNhc2UgJ2hlaWdodCc6XG4vLyAgICAgICByZXR1cm4geyAuLi5zdGF0ZSwgaGVpZ2h0OiBhY3Rpb24udmFsdWUgfVxuLy8gICAgIGRlZmF1bHQ6XG4vLyAgICAgICByZXR1cm4geyAuLi5zdGF0ZSwgLi4uKGFjdGlvbj8udmFsdWUgfHwge30pIH1cbi8vICAgfVxuLy8gfSxcblxudHlwZSBTaXplUmVkdWNlclN0YXRlID0ge1xuICBoZWlnaHQ6IG51bWJlclxuICB3aWR0aDogbnVtYmVyXG59XG5cbmV4cG9ydCB0eXBlIFNpemVSZWR1Y2VyQWN0aW9uID1cbiAgfCB7XG4gICAgICB0eXBlOiAnaGVpZ2h0JyB8ICd3aWR0aCdcbiAgICAgIHZhbHVlOiBudW1iZXJcbiAgICB9XG4gIHwge1xuICAgICAgdHlwZTogJ3Jlc2V0J1xuICAgICAgdmFsdWU6IHtcbiAgICAgICAgaGVpZ2h0OiBudW1iZXJcbiAgICAgICAgd2lkdGg6IG51bWJlclxuICAgICAgfVxuICAgIH1cblxuZXhwb3J0IGNvbnN0IHNpemVSZWR1Y2VyID0gKHN0YXRlOiBTaXplUmVkdWNlclN0YXRlLCBhY3Rpb246IFNpemVSZWR1Y2VyQWN0aW9uKSA9PiB7XG4gIHN3aXRjaCAoYWN0aW9uLnR5cGUpIHtcbiAgICBjYXNlICd3aWR0aCc6XG4gICAgICByZXR1cm4geyAuLi5zdGF0ZSwgd2lkdGg6IGFjdGlvbi52YWx1ZSB9XG4gICAgY2FzZSAnaGVpZ2h0JzpcbiAgICAgIHJldHVybiB7IC4uLnN0YXRlLCBoZWlnaHQ6IGFjdGlvbi52YWx1ZSB9XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiB7IC4uLnN0YXRlLCAuLi4oYWN0aW9uPy52YWx1ZSB8fCB7fSkgfVxuICB9XG59XG4iXSwibmFtZXMiOlsic2l6ZVJlZHVjZXIiLCJzdGF0ZSIsImFjdGlvbiIsInR5cGUiLCJ3aWR0aCIsInZhbHVlIiwiaGVpZ2h0Il0sIm1hcHBpbmdzIjoiQUFBQSxpREFBaUQ7QUFDakQsMkJBQTJCO0FBQzNCLG9CQUFvQjtBQUNwQixpREFBaUQ7QUFDakQscUJBQXFCO0FBQ3JCLGtEQUFrRDtBQUNsRCxlQUFlO0FBQ2Ysc0RBQXNEO0FBQ3RELE1BQU07QUFDTixLQUFLOzs7OzsrQkFvQlFBOzs7ZUFBQUE7OztBQUFOLE1BQU1BLGNBQWMsQ0FBQ0MsT0FBeUJDO0lBQ25ELE9BQVFBLE9BQU9DLElBQUk7UUFDakIsS0FBSztZQUNILE9BQU87Z0JBQUUsR0FBR0YsS0FBSztnQkFBRUcsT0FBT0YsT0FBT0csS0FBSztZQUFDO1FBQ3pDLEtBQUs7WUFDSCxPQUFPO2dCQUFFLEdBQUdKLEtBQUs7Z0JBQUVLLFFBQVFKLE9BQU9HLEtBQUs7WUFBQztRQUMxQztZQUNFLE9BQU87Z0JBQUUsR0FBR0osS0FBSztnQkFBRSxHQUFJQyxRQUFRRyxTQUFTLENBQUMsQ0FBQztZQUFFO0lBQ2hEO0FBQ0YifQ==

package/dist/admin/components/views/LivePreview/Device/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const DeviceContainer: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/admin/components/views/LivePreview/Device/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/admin/components/views/LivePreview/Device/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CA4CA,CAAA"}

package/dist/admin/components/views/LivePreview/Device/index.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DeviceContainer", {
+    enumerable: true,
+    get: function() {
+        return DeviceContainer;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _context = require("../Context/context");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DeviceContainer = (props)=>{
+    const { children } = props;
+    const { breakpoint, deviceFrameRef, size, zoom } = (0, _context.useLivePreviewContext)();
+    let x = '0';
+    let margin = '0';
+    if (breakpoint && 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 = 'auto';
+        }
+    }
+    let width = zoom ? `${100 / zoom}%` : '100%';
+    let height = zoom ? `${100 / zoom}%` : '100%';
+    if (breakpoint !== 'responsive') {
+        width = `${size?.width / (typeof zoom === 'number' ? zoom : 1)}px`;
+        height = `${size?.height / (typeof zoom === 'number' ? zoom : 1)}px`;
+    }
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        ref: deviceFrameRef,
+        style: {
+            height,
+            margin,
+            transform: `translate3d(${x}, 0, 0)`,
+            width
+        }
+    }, children);
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L0RldmljZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi9Db250ZXh0L2NvbnRleHQnXG5cbmV4cG9ydCBjb25zdCBEZXZpY2VDb250YWluZXI6IFJlYWN0LkZDPHtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZVxufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBjaGlsZHJlbiB9ID0gcHJvcHNcblxuICBjb25zdCB7IGJyZWFrcG9pbnQsIGRldmljZUZyYW1lUmVmLCBzaXplLCB6b29tIH0gPSB1c2VMaXZlUHJldmlld0NvbnRleHQoKVxuXG4gIGxldCB4ID0gJzAnXG4gIGxldCBtYXJnaW4gPSAnMCdcblxuICBpZiAoYnJlYWtwb2ludCAmJiBicmVha3BvaW50ICE9PSAncmVzcG9uc2l2ZScpIHtcbiAgICB4ID0gJy01MCUnXG5cbiAgICBpZiAoXG4gICAgICB0eXBlb2Ygem9vbSA9PT0gJ251bWJlcicgJiZcbiAgICAgIHR5cGVvZiBzaXplLndpZHRoID09PSAnbnVtYmVyJyAmJlxuICAgICAgdHlwZW9mIHNpemUuaGVpZ2h0ID09PSAnbnVtYmVyJ1xuICAgICkge1xuICAgICAgY29uc3Qgc2NhbGVkV2lkdGggPSBzaXplLndpZHRoIC8gem9vbVxuICAgICAgY29uc3QgZGlmZmVyZW5jZSA9IHNjYWxlZFdpZHRoIC0gc2l6ZS53aWR0aFxuICAgICAgeCA9IGAke2RpZmZlcmVuY2UgLyAyfXB4YFxuICAgICAgbWFyZ2luID0gJ2F1dG8nXG4gICAgfVxuICB9XG5cbiAgbGV0IHdpZHRoID0gem9vbSA/IGAkezEwMCAvIHpvb219JWAgOiAnMTAwJSdcbiAgbGV0IGhlaWdodCA9IHpvb20gPyBgJHsxMDAgLyB6b29tfSVgIDogJzEwMCUnXG5cbiAgaWYgKGJyZWFrcG9pbnQgIT09ICdyZXNwb25zaXZlJykge1xuICAgIHdpZHRoID0gYCR7c2l6ZT8ud2lkdGggLyAodHlwZW9mIHpvb20gPT09ICdudW1iZXInID8gem9vbSA6IDEpfXB4YFxuICAgIGhlaWdodCA9IGAke3NpemU/LmhlaWdodCAvICh0eXBlb2Ygem9vbSA9PT0gJ251bWJlcicgPyB6b29tIDogMSl9cHhgXG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIHJlZj17ZGV2aWNlRnJhbWVSZWZ9XG4gICAgICBzdHlsZT17e1xuICAgICAgICBoZWlnaHQsXG4gICAgICAgIG1hcmdpbixcbiAgICAgICAgdHJhbnNmb3JtOiBgdHJhbnNsYXRlM2QoJHt4fSwgMCwgMClgLFxuICAgICAgICB3aWR0aCxcbiAgICAgIH19XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZGl2PlxuICApXG59XG4iXSwibmFtZXMiOlsiRGV2aWNlQ29udGFpbmVyIiwicHJvcHMiLCJjaGlsZHJlbiIsImJyZWFrcG9pbnQiLCJkZXZpY2VGcmFtZVJlZiIsInNpemUiLCJ6b29tIiwidXNlTGl2ZVByZXZpZXdDb250ZXh0IiwieCIsIm1hcmdpbiIsIndpZHRoIiwiaGVpZ2h0Iiwic2NhbGVkV2lkdGgiLCJkaWZmZXJlbmNlIiwiZGl2IiwicmVmIiwic3R5bGUiLCJ0cmFuc2Zvcm0iXSwibWFwcGluZ3MiOiI7Ozs7K0JBSWFBOzs7ZUFBQUE7Ozs4REFKSzt5QkFFb0I7Ozs7OztBQUUvQixNQUFNQSxrQkFFUixDQUFDQztJQUNKLE1BQU0sRUFBRUMsUUFBUSxFQUFFLEdBQUdEO0lBRXJCLE1BQU0sRUFBRUUsVUFBVSxFQUFFQyxjQUFjLEVBQUVDLElBQUksRUFBRUMsSUFBSSxFQUFFLEdBQUdDLElBQUFBLDhCQUFxQjtJQUV4RSxJQUFJQyxJQUFJO0lBQ1IsSUFBSUMsU0FBUztJQUViLElBQUlOLGNBQWNBLGVBQWUsY0FBYztRQUM3Q0ssSUFBSTtRQUVKLElBQ0UsT0FBT0YsU0FBUyxZQUNoQixPQUFPRCxLQUFLSyxLQUFLLEtBQUssWUFDdEIsT0FBT0wsS0FBS00sTUFBTSxLQUFLLFVBQ3ZCO1lBQ0EsTUFBTUMsY0FBY1AsS0FBS0ssS0FBSyxHQUFHSjtZQUNqQyxNQUFNTyxhQUFhRCxjQUFjUCxLQUFLSyxLQUFLO1lBQzNDRixJQUFJLENBQUMsRUFBRUssYUFBYSxFQUFFLEVBQUUsQ0FBQztZQUN6QkosU0FBUztRQUNYO0lBQ0Y7SUFFQSxJQUFJQyxRQUFRSixPQUFPLENBQUMsRUFBRSxNQUFNQSxLQUFLLENBQUMsQ0FBQyxHQUFHO0lBQ3RDLElBQUlLLFNBQVNMLE9BQU8sQ0FBQyxFQUFFLE1BQU1BLEtBQUssQ0FBQyxDQUFDLEdBQUc7SUFFdkMsSUFBSUgsZUFBZSxjQUFjO1FBQy9CTyxRQUFRLENBQUMsRUFBRUwsTUFBTUssUUFBUyxDQUFBLE9BQU9KLFNBQVMsV0FBV0EsT0FBTyxDQUFBLEVBQUcsRUFBRSxDQUFDO1FBQ2xFSyxTQUFTLENBQUMsRUFBRU4sTUFBTU0sU0FBVSxDQUFBLE9BQU9MLFNBQVMsV0FBV0EsT0FBTyxDQUFBLEVBQUcsRUFBRSxDQUFDO0lBQ3RFO0lBRUEscUJBQ0UsNkJBQUNRO1FBQ0NDLEtBQUtYO1FBQ0xZLE9BQU87WUFDTEw7WUFDQUY7WUFDQVEsV0FBVyxDQUFDLFlBQVksRUFBRVQsRUFBRSxPQUFPLENBQUM7WUFDcENFO1FBQ0Y7T0FFQ1I7QUFHUCJ9

package/dist/admin/components/views/LivePreview/DeviceContainer/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const DeviceContainer: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/admin/components/views/LivePreview/DeviceContainer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/admin/components/views/LivePreview/DeviceContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAgDA,CAAA"}

package/dist/admin/components/views/LivePreview/DeviceContainer/index.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DeviceContainer", {
+    enumerable: true,
+    get: function() {
+        return DeviceContainer;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _context = require("../Context/context");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DeviceContainer = (props)=>{
+    const { children } = props;
+    const { breakpoint, breakpoints, deviceFrameRef, size, zoom } = (0, _context.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 = 'auto';
+        }
+    }
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        ref: deviceFrameRef,
+        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);
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L0RldmljZUNvbnRhaW5lci9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi9Db250ZXh0L2NvbnRleHQnXG5cbmV4cG9ydCBjb25zdCBEZXZpY2VDb250YWluZXI6IFJlYWN0LkZDPHtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZVxufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBjaGlsZHJlbiB9ID0gcHJvcHNcblxuICBjb25zdCB7IGJyZWFrcG9pbnQsIGJyZWFrcG9pbnRzLCBkZXZpY2VGcmFtZVJlZiwgc2l6ZSwgem9vbSB9ID0gdXNlTGl2ZVByZXZpZXdDb250ZXh0KClcblxuICBjb25zdCBmb3VuZEJyZWFrcG9pbnQgPSBicmVha3BvaW50ICYmIGJyZWFrcG9pbnRzLmZpbmQoKGJwKSA9PiBicC5uYW1lID09PSBicmVha3BvaW50KVxuXG4gIGxldCB4ID0gJzAnXG4gIGxldCBtYXJnaW4gPSAnMCdcblxuICBpZiAoZm91bmRCcmVha3BvaW50ICYmIGJyZWFrcG9pbnQgIT09ICdyZXNwb25zaXZlJykge1xuICAgIHggPSAnLTUwJSdcblxuICAgIGlmIChcbiAgICAgIHR5cGVvZiB6b29tID09PSAnbnVtYmVyJyAmJlxuICAgICAgdHlwZW9mIHNpemUud2lkdGggPT09ICdudW1iZXInICYmXG4gICAgICB0eXBlb2Ygc2l6ZS5oZWlnaHQgPT09ICdudW1iZXInXG4gICAgKSB7XG4gICAgICBjb25zdCBzY2FsZWRXaWR0aCA9IHNpemUud2lkdGggLyB6b29tXG4gICAgICBjb25zdCBkaWZmZXJlbmNlID0gc2NhbGVkV2lkdGggLSBzaXplLndpZHRoXG4gICAgICB4ID0gYCR7ZGlmZmVyZW5jZSAvIDJ9cHhgXG4gICAgICBtYXJnaW4gPSAnYXV0bydcbiAgICB9XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIHJlZj17ZGV2aWNlRnJhbWVSZWZ9XG4gICAgICBzdHlsZT17e1xuICAgICAgICBoZWlnaHQ6XG4gICAgICAgICAgZm91bmRCcmVha3BvaW50ICYmIGZvdW5kQnJlYWtwb2ludD8ubmFtZSAhPT0gJ3Jlc3BvbnNpdmUnXG4gICAgICAgICAgICA/IGAke3NpemU/LmhlaWdodCAvICh0eXBlb2Ygem9vbSA9PT0gJ251bWJlcicgPyB6b29tIDogMSl9cHhgXG4gICAgICAgICAgICA6IHR5cGVvZiB6b29tID09PSAnbnVtYmVyJ1xuICAgICAgICAgICAgPyBgJHsxMDAgLyB6b29tfSVgXG4gICAgICAgICAgICA6ICcxMDAlJyxcbiAgICAgICAgbWFyZ2luLFxuICAgICAgICB0cmFuc2Zvcm06IGB0cmFuc2xhdGUzZCgke3h9LCAwLCAwKWAsXG4gICAgICAgIHdpZHRoOlxuICAgICAgICAgIGZvdW5kQnJlYWtwb2ludCAmJiBmb3VuZEJyZWFrcG9pbnQ/Lm5hbWUgIT09ICdyZXNwb25zaXZlJ1xuICAgICAgICAgICAgPyBgJHtzaXplPy53aWR0aCAvICh0eXBlb2Ygem9vbSA9PT0gJ251bWJlcicgPyB6b29tIDogMSl9cHhgXG4gICAgICAgICAgICA6IHR5cGVvZiB6b29tID09PSAnbnVtYmVyJ1xuICAgICAgICAgICAgPyBgJHsxMDAgLyB6b29tfSVgXG4gICAgICAgICAgICA6ICcxMDAlJyxcbiAgICAgIH19XG4gICAgPlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvZGl2PlxuICApXG59XG4iXSwibmFtZXMiOlsiRGV2aWNlQ29udGFpbmVyIiwicHJvcHMiLCJjaGlsZHJlbiIsImJyZWFrcG9pbnQiLCJicmVha3BvaW50cyIsImRldmljZUZyYW1lUmVmIiwic2l6ZSIsInpvb20iLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJmb3VuZEJyZWFrcG9pbnQiLCJmaW5kIiwiYnAiLCJuYW1lIiwieCIsIm1hcmdpbiIsIndpZHRoIiwiaGVpZ2h0Iiwic2NhbGVkV2lkdGgiLCJkaWZmZXJlbmNlIiwiZGl2IiwicmVmIiwic3R5bGUiLCJ0cmFuc2Zvcm0iXSwibWFwcGluZ3MiOiI7Ozs7K0JBSWFBOzs7ZUFBQUE7Ozs4REFKSzt5QkFFb0I7Ozs7OztBQUUvQixNQUFNQSxrQkFFUixDQUFDQztJQUNKLE1BQU0sRUFBRUMsUUFBUSxFQUFFLEdBQUdEO0lBRXJCLE1BQU0sRUFBRUUsVUFBVSxFQUFFQyxXQUFXLEVBQUVDLGNBQWMsRUFBRUMsSUFBSSxFQUFFQyxJQUFJLEVBQUUsR0FBR0MsSUFBQUEsOEJBQXFCO0lBRXJGLE1BQU1DLGtCQUFrQk4sY0FBY0MsWUFBWU0sSUFBSSxDQUFDLENBQUNDLEtBQU9BLEdBQUdDLElBQUksS0FBS1Q7SUFFM0UsSUFBSVUsSUFBSTtJQUNSLElBQUlDLFNBQVM7SUFFYixJQUFJTCxtQkFBbUJOLGVBQWUsY0FBYztRQUNsRFUsSUFBSTtRQUVKLElBQ0UsT0FBT04sU0FBUyxZQUNoQixPQUFPRCxLQUFLUyxLQUFLLEtBQUssWUFDdEIsT0FBT1QsS0FBS1UsTUFBTSxLQUFLLFVBQ3ZCO1lBQ0EsTUFBTUMsY0FBY1gsS0FBS1MsS0FBSyxHQUFHUjtZQUNqQyxNQUFNVyxhQUFhRCxjQUFjWCxLQUFLUyxLQUFLO1lBQzNDRixJQUFJLENBQUMsRUFBRUssYUFBYSxFQUFFLEVBQUUsQ0FBQztZQUN6QkosU0FBUztRQUNYO0lBQ0Y7SUFFQSxxQkFDRSw2QkFBQ0s7UUFDQ0MsS0FBS2Y7UUFDTGdCLE9BQU87WUFDTEwsUUFDRVAsbUJBQW1CQSxpQkFBaUJHLFNBQVMsZUFDekMsQ0FBQyxFQUFFTixNQUFNVSxTQUFVLENBQUEsT0FBT1QsU0FBUyxXQUFXQSxPQUFPLENBQUEsRUFBRyxFQUFFLENBQUMsR0FDM0QsT0FBT0EsU0FBUyxXQUNoQixDQUFDLEVBQUUsTUFBTUEsS0FBSyxDQUFDLENBQUMsR0FDaEI7WUFDTk87WUFDQVEsV0FBVyxDQUFDLFlBQVksRUFBRVQsRUFBRSxPQUFPLENBQUM7WUFDcENFLE9BQ0VOLG1CQUFtQkEsaUJBQWlCRyxTQUFTLGVBQ3pDLENBQUMsRUFBRU4sTUFBTVMsUUFBUyxDQUFBLE9BQU9SLFNBQVMsV0FBV0EsT0FBTyxDQUFBLEVBQUcsRUFBRSxDQUFDLEdBQzFELE9BQU9BLFNBQVMsV0FDaEIsQ0FBQyxFQUFFLE1BQU1BLEtBQUssQ0FBQyxDQUFDLEdBQ2hCO1FBQ1I7T0FFQ0w7QUFHUCJ9

package/dist/admin/components/views/LivePreview/IFrame/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/admin/components/views/LivePreview/IFrame/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAGzC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;IACjC,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,GAAG,EAAE,MAAM,CAAA;CACZ,CAmBC,CAAA"}

package/dist/admin/components/views/LivePreview/{PreviewIFrame → IFrame}/index.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "IFrame", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _context = require("../PreviewContext/context");
+const _context = require("../Context/context");
 require("./index.scss");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -68,4 +68,4 @@ const IFrame = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
     });
 });
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1ByZXZpZXdJRnJhbWUvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnXG5cbmltcG9ydCB7IHVzZUxpdmVQcmV2aWV3Q29udGV4dCB9IGZyb20gJy4uL1ByZXZpZXdDb250ZXh0L2NvbnRleHQnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ2xpdmUtcHJldmlldy1pZnJhbWUnXG5cbmV4cG9ydCBjb25zdCBJRnJhbWU6IFJlYWN0LkZDPHtcbiAgcmVmOiBSZWFjdC5SZWY8SFRNTElGcmFtZUVsZW1lbnQ+XG4gIHNldElmcmFtZUhhc0xvYWRlZDogKHZhbHVlOiBib29sZWFuKSA9PiB2b2lkXG4gIHVybDogc3RyaW5nXG59PiA9IGZvcndhcmRSZWYoKHByb3BzLCByZWYpID0+IHtcbiAgY29uc3QgeyBzZXRJZnJhbWVIYXNMb2FkZWQsIHVybCB9ID0gcHJvcHNcblxuICBjb25zdCB7IHpvb20gfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgcmV0dXJuIChcbiAgICA8aWZyYW1lXG4gICAgICBjbGFzc05hbWU9e2Jhc2VDbGFzc31cbiAgICAgIG9uTG9hZD17KCkgPT4ge1xuICAgICAgICBzZXRJZnJhbWVIYXNMb2FkZWQodHJ1ZSlcbiAgICAgIH19XG4gICAgICByZWY9e3JlZn1cbiAgICAgIHNyYz17dXJsfVxuICAgICAgc3R5bGU9e3tcbiAgICAgICAgdHJhbnNmb3JtOiB0eXBlb2Ygem9vbSA9PT0gJ251bWJlcicgPyBgc2NhbGUoJHt6b29tfSkgYCA6IHVuZGVmaW5lZCxcbiAgICAgIH19XG4gICAgICB0aXRsZT17dXJsfVxuICAgIC8+XG4gIClcbn0pXG4iXSwibmFtZXMiOlsiSUZyYW1lIiwiYmFzZUNsYXNzIiwiZm9yd2FyZFJlZiIsInByb3BzIiwicmVmIiwic2V0SWZyYW1lSGFzTG9hZGVkIiwidXJsIiwiem9vbSIsInVzZUxpdmVQcmV2aWV3Q29udGV4dCIsImlmcmFtZSIsImNsYXNzTmFtZSIsIm9uTG9hZCIsInNyYyIsInN0eWxlIiwidHJhbnNmb3JtIiwidW5kZWZpbmVkIiwidGl0bGUiXSwibWFwcGluZ3MiOiI7Ozs7K0JBT2FBOzs7ZUFBQUE7OzsrREFQcUI7eUJBRUk7UUFDL0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFUCxNQUFNQyxZQUFZO0FBRVgsTUFBTUQsdUJBSVJFLElBQUFBLGlCQUFVLEVBQUMsQ0FBQ0MsT0FBT0M7SUFDdEIsTUFBTSxFQUFFQyxrQkFBa0IsRUFBRUMsR0FBRyxFQUFFLEdBQUdIO0lBRXBDLE1BQU0sRUFBRUksSUFBSSxFQUFFLEdBQUdDLElBQUFBLDhCQUFxQjtJQUV0QyxxQkFDRSw2QkFBQ0M7UUFDQ0MsV0FBV1Q7UUFDWFUsUUFBUTtZQUNOTixtQkFBbUI7UUFDckI7UUFDQUQsS0FBS0E7UUFDTFEsS0FBS047UUFDTE8sT0FBTztZQUNMQyxXQUFXLE9BQU9QLFNBQVMsV0FBVyxDQUFDLE1BQU0sRUFBRUEsS0FBSyxFQUFFLENBQUMsR0FBR1E7UUFDNUQ7UUFDQUMsT0FBT1Y7O0FBR2IifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L0lGcmFtZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHsgdXNlTGl2ZVByZXZpZXdDb250ZXh0IH0gZnJvbSAnLi4vQ29udGV4dC9jb250ZXh0J1xuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGJhc2VDbGFzcyA9ICdsaXZlLXByZXZpZXctaWZyYW1lJ1xuXG5leHBvcnQgY29uc3QgSUZyYW1lOiBSZWFjdC5GQzx7XG4gIHJlZjogUmVhY3QuUmVmPEhUTUxJRnJhbWVFbGVtZW50PlxuICBzZXRJZnJhbWVIYXNMb2FkZWQ6ICh2YWx1ZTogYm9vbGVhbikgPT4gdm9pZFxuICB1cmw6IHN0cmluZ1xufT4gPSBmb3J3YXJkUmVmKChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHsgc2V0SWZyYW1lSGFzTG9hZGVkLCB1cmwgfSA9IHByb3BzXG5cbiAgY29uc3QgeyB6b29tIH0gPSB1c2VMaXZlUHJldmlld0NvbnRleHQoKVxuXG4gIHJldHVybiAoXG4gICAgPGlmcmFtZVxuICAgICAgY2xhc3NOYW1lPXtiYXNlQ2xhc3N9XG4gICAgICBvbkxvYWQ9eygpID0+IHtcbiAgICAgICAgc2V0SWZyYW1lSGFzTG9hZGVkKHRydWUpXG4gICAgICB9fVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBzcmM9e3VybH1cbiAgICAgIHN0eWxlPXt7XG4gICAgICAgIHRyYW5zZm9ybTogdHlwZW9mIHpvb20gPT09ICdudW1iZXInID8gYHNjYWxlKCR7em9vbX0pIGAgOiB1bmRlZmluZWQsXG4gICAgICB9fVxuICAgICAgdGl0bGU9e3VybH1cbiAgICAvPlxuICApXG59KVxuIl0sIm5hbWVzIjpbIklGcmFtZSIsImJhc2VDbGFzcyIsImZvcndhcmRSZWYiLCJwcm9wcyIsInJlZiIsInNldElmcmFtZUhhc0xvYWRlZCIsInVybCIsInpvb20iLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJpZnJhbWUiLCJjbGFzc05hbWUiLCJvbkxvYWQiLCJzcmMiLCJzdHlsZSIsInRyYW5zZm9ybSIsInVuZGVmaW5lZCIsInRpdGxlIl0sIm1hcHBpbmdzIjoiOzs7OytCQU9hQTs7O2VBQUFBOzs7K0RBUHFCO3lCQUVJO1FBQy9COzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRVAsTUFBTUMsWUFBWTtBQUVYLE1BQU1ELHVCQUlSRSxJQUFBQSxpQkFBVSxFQUFDLENBQUNDLE9BQU9DO0lBQ3RCLE1BQU0sRUFBRUMsa0JBQWtCLEVBQUVDLEdBQUcsRUFBRSxHQUFHSDtJQUVwQyxNQUFNLEVBQUVJLElBQUksRUFBRSxHQUFHQyxJQUFBQSw4QkFBcUI7SUFFdEMscUJBQ0UsNkJBQUNDO1FBQ0NDLFdBQVdUO1FBQ1hVLFFBQVE7WUFDTk4sbUJBQW1CO1FBQ3JCO1FBQ0FELEtBQUtBO1FBQ0xRLEtBQUtOO1FBQ0xPLE9BQU87WUFDTEMsV0FBVyxPQUFPUCxTQUFTLFdBQVcsQ0FBQyxNQUFNLEVBQUVBLEtBQUssRUFBRSxDQUFDLEdBQUdRO1FBQzVEO1FBQ0FDLE9BQU9WOztBQUdiIn0=

package/dist/admin/components/views/LivePreview/{PreviewWindow → Preview}/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { EditViewProps } from '../../types';
 import type { usePopupWindow } from '../usePopupWindow';
 import './index.scss';
-export declare const PreviewWindow: React.FC<EditViewProps & {
+export declare const LivePreview: React.FC<EditViewProps & {
     popupState: ReturnType<typeof usePopupWindow>;
     url?: string;
 }>;

package/dist/admin/components/views/LivePreview/Preview/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/admin/components/views/LivePreview/Preview/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAUvD,OAAO,cAAc,CAAA;AAgFrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAChC,aAAa,GAAG;IACd,UAAU,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CA4BF,CAAA"}

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

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LivePreview", {
+    enumerable: true,
+    get: function() {
+        return LivePreview;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _context = require("../../../forms/Form/context");
+const _reduceFieldsToValues = /*#__PURE__*/ _interop_require_default(require("../../../forms/Form/reduceFieldsToValues"));
+const _Context = require("../Context");
+const _context1 = require("../Context/context");
+const _Device = require("../Device");
+const _IFrame = require("../IFrame");
+const _Toolbar = require("../Toolbar");
+const _ToolbarArea = require("../ToolbarArea");
+require("./index.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const baseClass = 'live-preview-window';
+const Preview = (props)=>{
+    const { popupState: { isPopupOpen, popupHasLoaded, popupRef }, url } = props;
+    const { iframeHasLoaded, iframeRef, setIframeHasLoaded } = (0, _context1.useLivePreviewContext)();
+    const { breakpoint } = (0, _context1.useLivePreviewContext)();
+    const [fields] = (0, _context.useAllFormFields)();
+    // 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
+    (0, _react.useEffect)(()=>{
+        if (fields && window && 'postMessage' in window) {
+            const values = (0, _reduceFieldsToValues.default)(fields);
+            const message = JSON.stringify({
+                data: values,
+                type: 'livePreview'
+            });
+            // external window
+            if (isPopupOpen) {
+                setIframeHasLoaded(false);
+                if (popupHasLoaded && popupRef.current) {
+                    popupRef.current.postMessage(message, url);
+                }
+            }
+            // embedded iframe
+            if (!isPopupOpen) {
+                if (iframeHasLoaded && iframeRef.current) {
+                    iframeRef.current.contentWindow?.postMessage(message, url);
+                }
+            }
+        }
+    }, [
+        fields,
+        url,
+        iframeHasLoaded,
+        isPopupOpen,
+        popupRef,
+        popupHasLoaded,
+        iframeRef,
+        setIframeHasLoaded
+    ]);
+    if (!isPopupOpen) {
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            className: [
+                baseClass,
+                isPopupOpen && `${baseClass}--popup-open`,
+                breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
+            ].filter(Boolean).join(' ')
+        }, /*#__PURE__*/ _react.default.createElement(_ToolbarArea.ToolbarArea, null, /*#__PURE__*/ _react.default.createElement("div", {
+            className: `${baseClass}__wrapper`
+        }, /*#__PURE__*/ _react.default.createElement(_Device.DeviceContainer, null, /*#__PURE__*/ _react.default.createElement(_IFrame.IFrame, {
+            ref: iframeRef,
+            setIframeHasLoaded: setIframeHasLoaded,
+            url: url
+        }))), /*#__PURE__*/ _react.default.createElement(_Toolbar.LivePreviewToolbar, {
+            ...props,
+            iframeRef: iframeRef,
+            url: url
+        })));
+    }
+};
+const LivePreview = (props)=>{
+    let url;
+    let breakpoints = [
+        {
+            name: 'responsive',
+            height: '100%',
+            label: 'Responsive',
+            width: '100%'
+        }
+    ];
+    if ('collection' in props) {
+        url = props?.collection.admin.livePreview.url;
+        breakpoints = breakpoints.concat(props?.collection.admin.livePreview.breakpoints);
+    }
+    if ('global' in props) {
+        url = props?.global.admin.livePreview.url;
+        breakpoints = breakpoints.concat(props?.global.admin.livePreview.breakpoints);
+    }
+    return /*#__PURE__*/ _react.default.createElement(_Context.LivePreviewProvider, {
+        ...props,
+        breakpoints: breakpoints,
+        url: url
+    }, /*#__PURE__*/ _react.default.createElement(Preview, props));
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1ByZXZpZXcvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHR5cGUgeyBMaXZlUHJldmlldyBhcyBMaXZlUHJldmlld1R5cGUgfSBmcm9tICcuLi8uLi8uLi8uLi8uLi9leHBvcnRzL2NvbmZpZydcbmltcG9ydCB0eXBlIHsgRWRpdFZpZXdQcm9wcyB9IGZyb20gJy4uLy4uL3R5cGVzJ1xuaW1wb3J0IHR5cGUgeyB1c2VQb3B1cFdpbmRvdyB9IGZyb20gJy4uL3VzZVBvcHVwV2luZG93J1xuXG5pbXBvcnQgeyB1c2VBbGxGb3JtRmllbGRzIH0gZnJvbSAnLi4vLi4vLi4vZm9ybXMvRm9ybS9jb250ZXh0J1xuaW1wb3J0IHJlZHVjZUZpZWxkc1RvVmFsdWVzIGZyb20gJy4uLy4uLy4uL2Zvcm1zL0Zvcm0vcmVkdWNlRmllbGRzVG9WYWx1ZXMnXG5pbXBvcnQgeyBMaXZlUHJldmlld1Byb3ZpZGVyIH0gZnJvbSAnLi4vQ29udGV4dCdcbmltcG9ydCB7IHVzZUxpdmVQcmV2aWV3Q29udGV4dCB9IGZyb20gJy4uL0NvbnRleHQvY29udGV4dCdcbmltcG9ydCB7IERldmljZUNvbnRhaW5lciB9IGZyb20gJy4uL0RldmljZSdcbmltcG9ydCB7IElGcmFtZSB9IGZyb20gJy4uL0lGcmFtZSdcbmltcG9ydCB7IExpdmVQcmV2aWV3VG9vbGJhciB9IGZyb20gJy4uL1Rvb2xiYXInXG5pbXBvcnQgeyBUb29sYmFyQXJlYSB9IGZyb20gJy4uL1Rvb2xiYXJBcmVhJ1xuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGJhc2VDbGFzcyA9ICdsaXZlLXByZXZpZXctd2luZG93J1xuXG5jb25zdCBQcmV2aWV3OiBSZWFjdC5GQzxcbiAgRWRpdFZpZXdQcm9wcyAmIHtcbiAgICBwb3B1cFN0YXRlOiBSZXR1cm5UeXBlPHR5cGVvZiB1c2VQb3B1cFdpbmRvdz5cbiAgICB1cmw/OiBzdHJpbmdcbiAgfVxuPiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB7XG4gICAgcG9wdXBTdGF0ZTogeyBpc1BvcHVwT3BlbiwgcG9wdXBIYXNMb2FkZWQsIHBvcHVwUmVmIH0sXG4gICAgdXJsLFxuICB9ID0gcHJvcHNcblxuICBjb25zdCB7IGlmcmFtZUhhc0xvYWRlZCwgaWZyYW1lUmVmLCBzZXRJZnJhbWVIYXNMb2FkZWQgfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgeyBicmVha3BvaW50IH0gPSB1c2VMaXZlUHJldmlld0NvbnRleHQoKVxuXG4gIGNvbnN0IFtmaWVsZHNdID0gdXNlQWxsRm9ybUZpZWxkcygpXG5cbiAgLy8gVGhlIHByZXZpZXcgY291bGQgZWl0aGVyIGJlIGFuIGlmcmFtZSBlbWJlZGRlZCBvbiB0aGUgcGFnZVxuICAvLyBPciBpdCBjb3VsZCBiZSBhIHNlcGFyYXRlIHBvcHVwIHdpbmRvd1xuICAvLyBXZSBuZWVkIHRvIHRyYW5zbWl0IGRhdGEgdG8gYm90aCBhY2NvcmRpbmdseVxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChmaWVsZHMgJiYgd2luZG93ICYmICdwb3N0TWVzc2FnZScgaW4gd2luZG93KSB7XG4gICAgICBjb25zdCB2YWx1ZXMgPSByZWR1Y2VGaWVsZHNUb1ZhbHVlcyhmaWVsZHMpXG4gICAgICBjb25zdCBtZXNzYWdlID0gSlNPTi5zdHJpbmdpZnkoeyBkYXRhOiB2YWx1ZXMsIHR5cGU6ICdsaXZlUHJldmlldycgfSlcblxuICAgICAgLy8gZXh0ZXJuYWwgd2luZG93XG4gICAgICBpZiAoaXNQb3B1cE9wZW4pIHtcbiAgICAgICAgc2V0SWZyYW1lSGFzTG9hZGVkKGZhbHNlKVxuXG4gICAgICAgIGlmIChwb3B1cEhhc0xvYWRlZCAmJiBwb3B1cFJlZi5jdXJyZW50KSB7XG4gICAgICAgICAgcG9wdXBSZWYuY3VycmVudC5wb3N0TWVzc2FnZShtZXNzYWdlLCB1cmwpXG4gICAgICAgIH1cbiAgICAgIH1cblxuICAgICAgLy8gZW1iZWRkZWQgaWZyYW1lXG4gICAgICBpZiAoIWlzUG9wdXBPcGVuKSB7XG4gICAgICAgIGlmIChpZnJhbWVIYXNMb2FkZWQgJiYgaWZyYW1lUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgICBpZnJhbWVSZWYuY3VycmVudC5jb250ZW50V2luZG93Py5wb3N0TWVzc2FnZShtZXNzYWdlLCB1cmwpXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH0sIFtcbiAgICBmaWVsZHMsXG4gICAgdXJsLFxuICAgIGlmcmFtZUhhc0xvYWRlZCxcbiAgICBpc1BvcHVwT3BlbixcbiAgICBwb3B1cFJlZixcbiAgICBwb3B1cEhhc0xvYWRlZCxcbiAgICBpZnJhbWVSZWYsXG4gICAgc2V0SWZyYW1lSGFzTG9hZGVkLFxuICBdKVxuXG4gIGlmICghaXNQb3B1cE9wZW4pIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjbGFzc05hbWU9e1tcbiAgICAgICAgICBiYXNlQ2xhc3MsXG4gICAgICAgICAgaXNQb3B1cE9wZW4gJiYgYCR7YmFzZUNsYXNzfS0tcG9wdXAtb3BlbmAsXG4gICAgICAgICAgYnJlYWtwb2ludCAmJiBicmVha3BvaW50ICE9PSAncmVzcG9uc2l2ZScgJiYgYCR7YmFzZUNsYXNzfS0taGFzLWJyZWFrcG9pbnRgLFxuICAgICAgICBdXG4gICAgICAgICAgLmZpbHRlcihCb29sZWFuKVxuICAgICAgICAgIC5qb2luKCcgJyl9XG4gICAgICA+XG4gICAgICAgIDxUb29sYmFyQXJlYT5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fd3JhcHBlcmB9PlxuICAgICAgICAgICAgPERldmljZUNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgPElGcmFtZSByZWY9e2lmcmFtZVJlZn0gc2V0SWZyYW1lSGFzTG9hZGVkPXtzZXRJZnJhbWVIYXNMb2FkZWR9IHVybD17dXJsfSAvPlxuICAgICAgICAgICAgPC9EZXZpY2VDb250YWluZXI+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPExpdmVQcmV2aWV3VG9vbGJhciB7Li4ucHJvcHN9IGlmcmFtZVJlZj17aWZyYW1lUmVmfSB1cmw9e3VybH0gLz5cbiAgICAgICAgPC9Ub29sYmFyQXJlYT5cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxufVxuXG5leHBvcnQgY29uc3QgTGl2ZVByZXZpZXc6IFJlYWN0LkZDPFxuICBFZGl0Vmlld1Byb3BzICYge1xuICAgIHBvcHVwU3RhdGU6IFJldHVyblR5cGU8dHlwZW9mIHVzZVBvcHVwV2luZG93PlxuICAgIHVybD86IHN0cmluZ1xuICB9XG4+ID0gKHByb3BzKSA9PiB7XG4gIGxldCB1cmxcblxuICBsZXQgYnJlYWtwb2ludHM6IExpdmVQcmV2aWV3VHlwZVsnYnJlYWtwb2ludHMnXSA9IFtcbiAgICB7XG4gICAgICBuYW1lOiAncmVzcG9uc2l2ZScsXG4gICAgICBoZWlnaHQ6ICcxMDAlJyxcbiAgICAgIGxhYmVsOiAnUmVzcG9uc2l2ZScsXG4gICAgICB3aWR0aDogJzEwMCUnLFxuICAgIH0sXG4gIF1cblxuICBpZiAoJ2NvbGxlY3Rpb24nIGluIHByb3BzKSB7XG4gICAgdXJsID0gcHJvcHM/LmNvbGxlY3Rpb24uYWRtaW4ubGl2ZVByZXZpZXcudXJsXG4gICAgYnJlYWtwb2ludHMgPSBicmVha3BvaW50cy5jb25jYXQocHJvcHM/LmNvbGxlY3Rpb24uYWRtaW4ubGl2ZVByZXZpZXcuYnJlYWtwb2ludHMpXG4gIH1cblxuICBpZiAoJ2dsb2JhbCcgaW4gcHJvcHMpIHtcbiAgICB1cmwgPSBwcm9wcz8uZ2xvYmFsLmFkbWluLmxpdmVQcmV2aWV3LnVybFxuICAgIGJyZWFrcG9pbnRzID0gYnJlYWtwb2ludHMuY29uY2F0KHByb3BzPy5nbG9iYWwuYWRtaW4ubGl2ZVByZXZpZXcuYnJlYWtwb2ludHMpXG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxMaXZlUHJldmlld1Byb3ZpZGVyIHsuLi5wcm9wc30gYnJlYWtwb2ludHM9e2JyZWFrcG9pbnRzfSB1cmw9e3VybH0+XG4gICAgICA8UHJldmlldyB7Li4ucHJvcHN9IC8+XG4gICAgPC9MaXZlUHJldmlld1Byb3ZpZGVyPlxuICApXG59XG4iXSwibmFtZXMiOlsiTGl2ZVByZXZpZXciLCJiYXNlQ2xhc3MiLCJQcmV2aWV3IiwicHJvcHMiLCJwb3B1cFN0YXRlIiwiaXNQb3B1cE9wZW4iLCJwb3B1cEhhc0xvYWRlZCIsInBvcHVwUmVmIiwidXJsIiwiaWZyYW1lSGFzTG9hZGVkIiwiaWZyYW1lUmVmIiwic2V0SWZyYW1lSGFzTG9hZGVkIiwidXNlTGl2ZVByZXZpZXdDb250ZXh0IiwiYnJlYWtwb2ludCIsImZpZWxkcyIsInVzZUFsbEZvcm1GaWVsZHMiLCJ1c2VFZmZlY3QiLCJ3aW5kb3ciLCJ2YWx1ZXMiLCJyZWR1Y2VGaWVsZHNUb1ZhbHVlcyIsIm1lc3NhZ2UiLCJKU09OIiwic3RyaW5naWZ5IiwiZGF0YSIsInR5cGUiLCJjdXJyZW50IiwicG9zdE1lc3NhZ2UiLCJjb250ZW50V2luZG93IiwiZGl2IiwiY2xhc3NOYW1lIiwiZmlsdGVyIiwiQm9vbGVhbiIsImpvaW4iLCJUb29sYmFyQXJlYSIsIkRldmljZUNvbnRhaW5lciIsIklGcmFtZSIsInJlZiIsIkxpdmVQcmV2aWV3VG9vbGJhciIsImJyZWFrcG9pbnRzIiwibmFtZSIsImhlaWdodCIsImxhYmVsIiwid2lkdGgiLCJjb2xsZWN0aW9uIiwiYWRtaW4iLCJsaXZlUHJldmlldyIsImNvbmNhdCIsImdsb2JhbCIsIkxpdmVQcmV2aWV3UHJvdmlkZXIiXSwibWFwcGluZ3MiOiI7Ozs7K0JBOEZhQTs7O2VBQUFBOzs7K0RBOUZvQjt5QkFNQTs2RUFDQTt5QkFDRzswQkFDRTt3QkFDTjt3QkFDVDt5QkFDWTs2QkFDUDtRQUNyQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRVAsTUFBTUMsWUFBWTtBQUVsQixN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

package/dist/admin/components/views/LivePreview/{PreviewWindow → Preview}/index.scss

@@ -8,7 +8,7 @@
   overflow: hidden;
 
   &--has-breakpoint {
-    padding-top: var(--base);
+    padding: var(--base);
 
     .live-preview-iframe {
       border: 1px solid var(--theme-elevation-100);

package/dist/admin/components/views/LivePreview/Toolbar/SizeInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/admin/components/views/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CA2CA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/admin/components/views/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAGrD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAA;CACjB,CAyDA,CAAA"}

package/dist/admin/components/views/LivePreview/Toolbar/SizeInput/index.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "PreviewFrameSizeInput", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _context = require("../../PreviewContext/context");
+const _context = require("../../Context/context");
 require("./index.scss");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -50,43 +50,59 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const baseClass = 'live-preview-toolbar';
+const baseClass = 'toolbar-input';
 const PreviewFrameSizeInput = (props)=>{
     const { axis } = props;
-    const { setHeight, setWidth, size } = (0, _context.useLivePreviewContext)();
-    // const [size, setSize] = React.useState<string>(() => {
-    //   if (sizeToUse === 'width') {
-    //     return deviceSize?.width.toFixed(0)
-    //   }
-    //   return deviceSize?.height.toFixed(0)
-    // })
-    // useEffect(() => {
-    //   if (sizeToUse === 'width') {
-    //     setSize(deviceSize?.width.toFixed(0))
-    //   } else {
-    //     setSize(deviceSize?.height.toFixed(0))
-    //   }
-    // }, [deviceSize])
+    const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } = (0, _context.useLivePreviewContext)();
+    const [internalState, setInternalState] = _react.default.useState((axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0);
+    // when the input is changed manually, we need to set the breakpoint as `custom`
+    // this will then allow us to set an explicit width and height
     const handleChange = (0, _react.useCallback)((e)=>{
-        if (axis === 'x') {
-            setWidth(Number(e.target.value));
-        } else {
-            setHeight(Number(e.target.value));
+        let newValue = Number(e.target.value);
+        if (newValue < 0) newValue = 0;
+        setInternalState(newValue);
+        setBreakpoint('custom');
+        // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change
+        // this is because the `responsive` size is '100%' in CSS, and `0` in initial state
+        setSize({
+            type: 'reset',
+            value: {
+                height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,
+                width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom
+            }
+        });
+    }, [
+        axis,
+        setBreakpoint,
+        measuredDeviceSize,
+        setSize,
+        zoom
+    ]);
+    // if the breakpoint is `responsive` then the device's div will have `100%` width and height
+    // so we need to take the measurements provided by `actualDeviceSize` and sync internal state
+    (0, _react.useEffect)(()=>{
+        if (breakpoint === 'responsive' && measuredDeviceSize) {
+            if (axis === 'x') setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom);
+            else setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom);
+        }
+        if (breakpoint !== 'responsive' && size) {
+            setInternalState(axis === 'x' ? size.width : size.height);
         }
     }, [
+        breakpoint,
         axis,
-        setWidth,
-        setHeight
+        measuredDeviceSize,
+        size,
+        zoom
     ]);
-    const sizeValue = axis === 'x' ? size?.width : size?.height;
     return /*#__PURE__*/ _react.default.createElement("input", {
-        className: `${baseClass}__size`,
-        disabled: true // enable this once its wired up properly
-        ,
+        className: baseClass,
+        min: 0,
         onChange: handleChange,
+        step: 1,
         type: "number",
-        value: sizeValue
+        value: internalState || 0
     });
 };
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1Rvb2xiYXIvU2l6ZUlucHV0L2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2sgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHsgdXNlTGl2ZVByZXZpZXdDb250ZXh0IH0gZnJvbSAnLi4vLi4vUHJldmlld0NvbnRleHQvY29udGV4dCdcbmltcG9ydCAnLi9pbmRleC5zY3NzJ1xuXG5jb25zdCBiYXNlQ2xhc3MgPSAnbGl2ZS1wcmV2aWV3LXRvb2xiYXInXG5cbmV4cG9ydCBjb25zdCBQcmV2aWV3RnJhbWVTaXplSW5wdXQ6IFJlYWN0LkZDPHtcbiAgYXhpcz86ICd4JyB8ICd5J1xufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBheGlzIH0gPSBwcm9wc1xuXG4gIGNvbnN0IHsgc2V0SGVpZ2h0LCBzZXRXaWR0aCwgc2l6ZSB9ID0gdXNlTGl2ZVByZXZpZXdDb250ZXh0KClcblxuICAvLyBjb25zdCBbc2l6ZSwgc2V0U2l6ZV0gPSBSZWFjdC51c2VTdGF0ZTxzdHJpbmc+KCgpID0+IHtcbiAgLy8gICBpZiAoc2l6ZVRvVXNlID09PSAnd2lkdGgnKSB7XG4gIC8vICAgICByZXR1cm4gZGV2aWNlU2l6ZT8ud2lkdGgudG9GaXhlZCgwKVxuICAvLyAgIH1cblxuICAvLyAgIHJldHVybiBkZXZpY2VTaXplPy5oZWlnaHQudG9GaXhlZCgwKVxuICAvLyB9KVxuXG4gIC8vIHVzZUVmZmVjdCgoKSA9PiB7XG4gIC8vICAgaWYgKHNpemVUb1VzZSA9PT0gJ3dpZHRoJykge1xuICAvLyAgICAgc2V0U2l6ZShkZXZpY2VTaXplPy53aWR0aC50b0ZpeGVkKDApKVxuICAvLyAgIH0gZWxzZSB7XG4gIC8vICAgICBzZXRTaXplKGRldmljZVNpemU/LmhlaWdodC50b0ZpeGVkKDApKVxuICAvLyAgIH1cbiAgLy8gfSwgW2RldmljZVNpemVdKVxuXG4gIGNvbnN0IGhhbmRsZUNoYW5nZSA9IHVzZUNhbGxiYWNrKFxuICAgIChlOiBSZWFjdC5DaGFuZ2VFdmVudDxIVE1MSW5wdXRFbGVtZW50PikgPT4ge1xuICAgICAgaWYgKGF4aXMgPT09ICd4Jykge1xuICAgICAgICBzZXRXaWR0aChOdW1iZXIoZS50YXJnZXQudmFsdWUpKVxuICAgICAgfSBlbHNlIHtcbiAgICAgICAgc2V0SGVpZ2h0KE51bWJlcihlLnRhcmdldC52YWx1ZSkpXG4gICAgICB9XG4gICAgfSxcbiAgICBbYXhpcywgc2V0V2lkdGgsIHNldEhlaWdodF0sXG4gIClcblxuICBjb25zdCBzaXplVmFsdWUgPSBheGlzID09PSAneCcgPyBzaXplPy53aWR0aCA6IHNpemU/LmhlaWdodFxuXG4gIHJldHVybiAoXG4gICAgPGlucHV0XG4gICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3NpemVgfVxuICAgICAgZGlzYWJsZWQgLy8gZW5hYmxlIHRoaXMgb25jZSBpdHMgd2lyZWQgdXAgcHJvcGVybHlcbiAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICB0eXBlPVwibnVtYmVyXCJcbiAgICAgIHZhbHVlPXtzaXplVmFsdWV9XG4gICAgLz5cbiAgKVxufVxuIl0sIm5hbWVzIjpbIlByZXZpZXdGcmFtZVNpemVJbnB1dCIsImJhc2VDbGFzcyIsInByb3BzIiwiYXhpcyIsInNldEhlaWdodCIsInNldFdpZHRoIiwic2l6ZSIsInVzZUxpdmVQcmV2aWV3Q29udGV4dCIsImhhbmRsZUNoYW5nZSIsInVzZUNhbGxiYWNrIiwiZSIsIk51bWJlciIsInRhcmdldCIsInZhbHVlIiwic2l6ZVZhbHVlIiwid2lkdGgiLCJoZWlnaHQiLCJpbnB1dCIsImNsYXNzTmFtZSIsImRpc2FibGVkIiwib25DaGFuZ2UiLCJ0eXBlIl0sIm1hcHBpbmdzIjoiOzs7OytCQU9hQTs7O2VBQUFBOzs7K0RBUHNCO3lCQUVHO1FBQy9COzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRVAsTUFBTUMsWUFBWTtBQUVYLE1BQU1ELHdCQUVSLENBQUNFO0lBQ0osTUFBTSxFQUFFQyxJQUFJLEVBQUUsR0FBR0Q7SUFFakIsTUFBTSxFQUFFRSxTQUFTLEVBQUVDLFFBQVEsRUFBRUMsSUFBSSxFQUFFLEdBQUdDLElBQUFBLDhCQUFxQjtJQUUzRCx5REFBeUQ7SUFDekQsaUNBQWlDO0lBQ2pDLDBDQUEwQztJQUMxQyxNQUFNO0lBRU4seUNBQXlDO0lBQ3pDLEtBQUs7SUFFTCxvQkFBb0I7SUFDcEIsaUNBQWlDO0lBQ2pDLDRDQUE0QztJQUM1QyxhQUFhO0lBQ2IsNkNBQTZDO0lBQzdDLE1BQU07SUFDTixtQkFBbUI7SUFFbkIsTUFBTUMsZUFBZUMsSUFBQUEsa0JBQVcsRUFDOUIsQ0FBQ0M7UUFDQyxJQUFJUCxTQUFTLEtBQUs7WUFDaEJFLFNBQVNNLE9BQU9ELEVBQUVFLE1BQU0sQ0FBQ0MsS0FBSztRQUNoQyxPQUFPO1lBQ0xULFVBQVVPLE9BQU9ELEVBQUVFLE1BQU0sQ0FBQ0MsS0FBSztRQUNqQztJQUNGLEdBQ0E7UUFBQ1Y7UUFBTUU7UUFBVUQ7S0FBVTtJQUc3QixNQUFNVSxZQUFZWCxTQUFTLE1BQU1HLE1BQU1TLFFBQVFULE1BQU1VO0lBRXJELHFCQUNFLDZCQUFDQztRQUNDQyxXQUFXLENBQUMsRUFBRWpCLFVBQVUsTUFBTSxDQUFDO1FBQy9Ca0IsVUFBQUEsS0FBUyx5Q0FBeUM7O1FBQ2xEQyxVQUFVWjtRQUNWYSxNQUFLO1FBQ0xSLE9BQU9DOztBQUdiIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1Rvb2xiYXIvU2l6ZUlucHV0L2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi8uLi9Db250ZXh0L2NvbnRleHQnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ3Rvb2xiYXItaW5wdXQnXG5cbmV4cG9ydCBjb25zdCBQcmV2aWV3RnJhbWVTaXplSW5wdXQ6IFJlYWN0LkZDPHtcbiAgYXhpcz86ICd4JyB8ICd5J1xufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBheGlzIH0gPSBwcm9wc1xuXG4gIGNvbnN0IHsgYnJlYWtwb2ludCwgbWVhc3VyZWREZXZpY2VTaXplLCBzZXRCcmVha3BvaW50LCBzZXRTaXplLCBzaXplLCB6b29tIH0gPVxuICAgIHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgW2ludGVybmFsU3RhdGUsIHNldEludGVybmFsU3RhdGVdID0gUmVhY3QudXNlU3RhdGU8bnVtYmVyPihcbiAgICAoYXhpcyA9PT0gJ3gnID8gbWVhc3VyZWREZXZpY2VTaXplPy53aWR0aCA6IG1lYXN1cmVkRGV2aWNlU2l6ZT8uaGVpZ2h0KSB8fCAwLFxuICApXG5cbiAgLy8gd2hlbiB0aGUgaW5wdXQgaXMgY2hhbmdlZCBtYW51YWxseSwgd2UgbmVlZCB0byBzZXQgdGhlIGJyZWFrcG9pbnQgYXMgYGN1c3RvbWBcbiAgLy8gdGhpcyB3aWxsIHRoZW4gYWxsb3cgdXMgdG8gc2V0IGFuIGV4cGxpY2l0IHdpZHRoIGFuZCBoZWlnaHRcbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgKGU6IFJlYWN0LkNoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgICBsZXQgbmV3VmFsdWUgPSBOdW1iZXIoZS50YXJnZXQudmFsdWUpXG5cbiAgICAgIGlmIChuZXdWYWx1ZSA8IDApIG5ld1ZhbHVlID0gMFxuXG4gICAgICBzZXRJbnRlcm5hbFN0YXRlKG5ld1ZhbHVlKVxuICAgICAgc2V0QnJlYWtwb2ludCgnY3VzdG9tJylcblxuICAgICAgLy8gYmUgc3VyZSB0byBzZXQgX2JvdGhfIGF4aXMgdmFsdWVzIHRvIHNvIHRoYXQgdGhlIG90aGVyIGF4aXMgZG9lc24ndCBmYWxsYmFjayB0byAwIG9uIGluaXRpYWwgY2hhbmdlXG4gICAgICAvLyB0aGlzIGlzIGJlY2F1c2UgdGhlIGByZXNwb25zaXZlYCBzaXplIGlzICcxMDAlJyBpbiBDU1MsIGFuZCBgMGAgaW4gaW5pdGlhbCBzdGF0ZVxuICAgICAgc2V0U2l6ZSh7XG4gICAgICAgIHR5cGU6ICdyZXNldCcsXG4gICAgICAgIHZhbHVlOiB7XG4gICAgICAgICAgaGVpZ2h0OiBheGlzID09PSAneScgPyBuZXdWYWx1ZSA6IE51bWJlcihtZWFzdXJlZERldmljZVNpemU/LmhlaWdodC50b0ZpeGVkKDApKSAqIHpvb20sXG4gICAgICAgICAgd2lkdGg6IGF4aXMgPT09ICd4JyA/IG5ld1ZhbHVlIDogTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZT8ud2lkdGgudG9GaXhlZCgwKSkgKiB6b29tLFxuICAgICAgICB9LFxuICAgICAgfSlcbiAgICB9LFxuICAgIFtheGlzLCBzZXRCcmVha3BvaW50LCBtZWFzdXJlZERldmljZVNpemUsIHNldFNpemUsIHpvb21dLFxuICApXG5cbiAgLy8gaWYgdGhlIGJyZWFrcG9pbnQgaXMgYHJlc3BvbnNpdmVgIHRoZW4gdGhlIGRldmljZSdzIGRpdiB3aWxsIGhhdmUgYDEwMCVgIHdpZHRoIGFuZCBoZWlnaHRcbiAgLy8gc28gd2UgbmVlZCB0byB0YWtlIHRoZSBtZWFzdXJlbWVudHMgcHJvdmlkZWQgYnkgYGFjdHVhbERldmljZVNpemVgIGFuZCBzeW5jIGludGVybmFsIHN0YXRlXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGJyZWFrcG9pbnQgPT09ICdyZXNwb25zaXZlJyAmJiBtZWFzdXJlZERldmljZVNpemUpIHtcbiAgICAgIGlmIChheGlzID09PSAneCcpIHNldEludGVybmFsU3RhdGUoTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZS53aWR0aC50b0ZpeGVkKDApKSAqIHpvb20pXG4gICAgICBlbHNlIHNldEludGVybmFsU3RhdGUoTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZS5oZWlnaHQudG9GaXhlZCgwKSkgKiB6b29tKVxuICAgIH1cblxuICAgIGlmIChicmVha3BvaW50ICE9PSAncmVzcG9uc2l2ZScgJiYgc2l6ZSkge1xuICAgICAgc2V0SW50ZXJuYWxTdGF0ZShheGlzID09PSAneCcgPyBzaXplLndpZHRoIDogc2l6ZS5oZWlnaHQpXG4gICAgfVxuICB9LCBbYnJlYWtwb2ludCwgYXhpcywgbWVhc3VyZWREZXZpY2VTaXplLCBzaXplLCB6b29tXSlcblxuICByZXR1cm4gKFxuICAgIDxpbnB1dFxuICAgICAgY2xhc3NOYW1lPXtiYXNlQ2xhc3N9XG4gICAgICBtaW49ezB9XG4gICAgICBvbkNoYW5nZT17aGFuZGxlQ2hhbmdlfVxuICAgICAgc3RlcD17MX1cbiAgICAgIHR5cGU9XCJudW1iZXJcIlxuICAgICAgdmFsdWU9e2ludGVybmFsU3RhdGUgfHwgMH1cbiAgICAvPlxuICApXG59XG4iXSwibmFtZXMiOlsiUHJldmlld0ZyYW1lU2l6ZUlucHV0IiwiYmFzZUNsYXNzIiwicHJvcHMiLCJheGlzIiwiYnJlYWtwb2ludCIsIm1lYXN1cmVkRGV2aWNlU2l6ZSIsInNldEJyZWFrcG9pbnQiLCJzZXRTaXplIiwic2l6ZSIsInpvb20iLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJpbnRlcm5hbFN0YXRlIiwic2V0SW50ZXJuYWxTdGF0ZSIsIlJlYWN0IiwidXNlU3RhdGUiLCJ3aWR0aCIsImhlaWdodCIsImhhbmRsZUNoYW5nZSIsInVzZUNhbGxiYWNrIiwiZSIsIm5ld1ZhbHVlIiwiTnVtYmVyIiwidGFyZ2V0IiwidmFsdWUiLCJ0eXBlIiwidG9GaXhlZCIsInVzZUVmZmVjdCIsImlucHV0IiwiY2xhc3NOYW1lIiwibWluIiwib25DaGFuZ2UiLCJzdGVwIl0sIm1hcHBpbmdzIjoiOzs7OytCQU9hQTs7O2VBQUFBOzs7K0RBUGlDO3lCQUVSO1FBQy9COzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRVAsTUFBTUMsWUFBWTtBQUVYLE1BQU1ELHdCQUVSLENBQUNFO0lBQ0osTUFBTSxFQUFFQyxJQUFJLEVBQUUsR0FBR0Q7SUFFakIsTUFBTSxFQUFFRSxVQUFVLEVBQUVDLGtCQUFrQixFQUFFQyxhQUFhLEVBQUVDLE9BQU8sRUFBRUMsSUFBSSxFQUFFQyxJQUFJLEVBQUUsR0FDMUVDLElBQUFBLDhCQUFxQjtJQUV2QixNQUFNLENBQUNDLGVBQWVDLGlCQUFpQixHQUFHQyxjQUFLLENBQUNDLFFBQVEsQ0FDdEQsQUFBQ1gsQ0FBQUEsU0FBUyxNQUFNRSxvQkFBb0JVLFFBQVFWLG9CQUFvQlcsTUFBSyxLQUFNO0lBRzdFLGdGQUFnRjtJQUNoRiw4REFBOEQ7SUFDOUQsTUFBTUMsZUFBZUMsSUFBQUEsa0JBQVcsRUFDOUIsQ0FBQ0M7UUFDQyxJQUFJQyxXQUFXQyxPQUFPRixFQUFFRyxNQUFNLENBQUNDLEtBQUs7UUFFcEMsSUFBSUgsV0FBVyxHQUFHQSxXQUFXO1FBRTdCUixpQkFBaUJRO1FBQ2pCZCxjQUFjO1FBRWQsc0dBQXNHO1FBQ3RHLG1GQUFtRjtRQUNuRkMsUUFBUTtZQUNOaUIsTUFBTTtZQUNORCxPQUFPO2dCQUNMUCxRQUFRYixTQUFTLE1BQU1pQixXQUFXQyxPQUFPaEIsb0JBQW9CVyxPQUFPUyxRQUFRLE1BQU1oQjtnQkFDbEZNLE9BQU9aLFNBQVMsTUFBTWlCLFdBQVdDLE9BQU9oQixvQkFBb0JVLE1BQU1VLFFBQVEsTUFBTWhCO1lBQ2xGO1FBQ0Y7SUFDRixHQUNBO1FBQUNOO1FBQU1HO1FBQWVEO1FBQW9CRTtRQUFTRTtLQUFLO0lBRzFELDRGQUE0RjtJQUM1Riw2RkFBNkY7SUFDN0ZpQixJQUFBQSxnQkFBUyxFQUFDO1FBQ1IsSUFBSXRCLGVBQWUsZ0JBQWdCQyxvQkFBb0I7WUFDckQsSUFBSUYsU0FBUyxLQUFLUyxpQkFBaUJTLE9BQU9oQixtQkFBbUJVLEtBQUssQ0FBQ1UsT0FBTyxDQUFDLE1BQU1oQjtpQkFDNUVHLGlCQUFpQlMsT0FBT2hCLG1CQUFtQlcsTUFBTSxDQUFDUyxPQUFPLENBQUMsTUFBTWhCO1FBQ3ZFO1FBRUEsSUFBSUwsZUFBZSxnQkFBZ0JJLE1BQU07WUFDdkNJLGlCQUFpQlQsU0FBUyxNQUFNSyxLQUFLTyxLQUFLLEdBQUdQLEtBQUtRLE1BQU07UUFDMUQ7SUFDRixHQUFHO1FBQUNaO1FBQVlEO1FBQU1FO1FBQW9CRztRQUFNQztLQUFLO0lBRXJELHFCQUNFLDZCQUFDa0I7UUFDQ0MsV0FBVzNCO1FBQ1g0QixLQUFLO1FBQ0xDLFVBQVViO1FBQ1ZjLE1BQU07UUFDTlAsTUFBSztRQUNMRCxPQUFPWixpQkFBaUI7O0FBRzlCIn0=

package/dist/admin/components/views/LivePreview/Toolbar/SizeInput/index.scss

@@ -1,14 +1,12 @@
 @import '../../../../../scss/styles.scss';
 
-.live-preview-toolbar {
-  &__size {
-    width: 50px;
-    height: var(--base);
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--theme-elevation-200);
-    background: var(--theme-elevation-100);
-    border-radius: 2px;
-    font-size: small;
-  }
+.toolbar-input {
+  width: 50px;
+  height: var(--base);
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-elevation-100);
+  border-radius: 2px;
+  font-size: small;
 }

package/dist/admin/components/views/LivePreview/Toolbar/index.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-import type { ToolbarProviderProps } from '../PreviewContext';
+import type { ToolbarProviderProps } from '../Context';
 import './index.scss';
 export declare const LivePreviewToolbar: React.FC<Omit<ToolbarProviderProps, 'children'> & {
     iframeRef: React.RefObject<HTMLIFrameElement>;
-    style?: React.CSSProperties;
 }>;
 //# sourceMappingURL=index.d.ts.map

package/dist/admin/components/views/LivePreview/Toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/admin/components/views/LivePreview/Toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AAO7D,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,GAAG;IACvC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAC7C,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAwEF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/admin/components/views/LivePreview/Toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAOtD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,GAAG;IACvC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CAC9C,CAkFF,CAAA"}