payload 1.15.7 → 1.15.9

package/packages/payload/dist/admin/components/views/LivePreview/IFrame/index.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "IFrame", {
+    enumerable: true,
+    get: function() {
+        return IFrame;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _context = require("../Context/context");
+require("./index.scss");
+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 = {
+        __proto__: null
+    };
+    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-iframe';
+const IFrame = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
+    const { setIframeHasLoaded, url } = props;
+    const { zoom } = (0, _context.useLivePreviewContext)();
+    return /*#__PURE__*/ _react.default.createElement("iframe", {
+        className: baseClass,
+        onLoad: ()=>{
+            setIframeHasLoaded(true);
+        },
+        ref: ref,
+        src: url,
+        style: {
+            transform: typeof zoom === 'number' ? `scale(${zoom}) ` : undefined
+        },
+        title: url
+    });
+});
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L0lGcmFtZS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHsgdXNlTGl2ZVByZXZpZXdDb250ZXh0IH0gZnJvbSAnLi4vQ29udGV4dC9jb250ZXh0J1xuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGJhc2VDbGFzcyA9ICdsaXZlLXByZXZpZXctaWZyYW1lJ1xuXG5leHBvcnQgY29uc3QgSUZyYW1lOiBSZWFjdC5GQzx7XG4gIHJlZjogUmVhY3QuUmVmPEhUTUxJRnJhbWVFbGVtZW50PlxuICBzZXRJZnJhbWVIYXNMb2FkZWQ6ICh2YWx1ZTogYm9vbGVhbikgPT4gdm9pZFxuICB1cmw6IHN0cmluZ1xufT4gPSBmb3J3YXJkUmVmKChwcm9wcywgcmVmKSA9PiB7XG4gIGNvbnN0IHsgc2V0SWZyYW1lSGFzTG9hZGVkLCB1cmwgfSA9IHByb3BzXG5cbiAgY29uc3QgeyB6b29tIH0gPSB1c2VMaXZlUHJldmlld0NvbnRleHQoKVxuXG4gIHJldHVybiAoXG4gICAgPGlmcmFtZVxuICAgICAgY2xhc3NOYW1lPXtiYXNlQ2xhc3N9XG4gICAgICBvbkxvYWQ9eygpID0+IHtcbiAgICAgICAgc2V0SWZyYW1lSGFzTG9hZGVkKHRydWUpXG4gICAgICB9fVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBzcmM9e3VybH1cbiAgICAgIHN0eWxlPXt7XG4gICAgICAgIHRyYW5zZm9ybTogdHlwZW9mIHpvb20gPT09ICdudW1iZXInID8gYHNjYWxlKCR7em9vbX0pIGAgOiB1bmRlZmluZWQsXG4gICAgICB9fVxuICAgICAgdGl0bGU9e3VybH1cbiAgICAvPlxuICApXG59KVxuIl0sIm5hbWVzIjpbIklGcmFtZSIsImJhc2VDbGFzcyIsImZvcndhcmRSZWYiLCJwcm9wcyIsInJlZiIsInNldElmcmFtZUhhc0xvYWRlZCIsInVybCIsInpvb20iLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJpZnJhbWUiLCJjbGFzc05hbWUiLCJvbkxvYWQiLCJzcmMiLCJzdHlsZSIsInRyYW5zZm9ybSIsInVuZGVmaW5lZCIsInRpdGxlIl0sInJhbmdlTWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7IiwibWFwcGluZ3MiOiI7Ozs7K0JBT2FBOzs7ZUFBQUE7OzsrREFQcUI7eUJBRUk7UUFDL0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUVQLE1BQU1DLFlBQVk7QUFFWCxNQUFNRCx1QkFJUkUsSUFBQUEsaUJBQVUsRUFBQyxDQUFDQyxPQUFPQztJQUN0QixNQUFNLEVBQUVDLGtCQUFrQixFQUFFQyxHQUFHLEVBQUUsR0FBR0g7SUFFcEMsTUFBTSxFQUFFSSxJQUFJLEVBQUUsR0FBR0MsSUFBQUEsOEJBQXFCO0lBRXRDLHFCQUNFLDZCQUFDQztRQUNDQyxXQUFXVDtRQUNYVSxRQUFRO1lBQ05OLG1CQUFtQjtRQUNyQjtRQUNBRCxLQUFLQTtRQUNMUSxLQUFLTjtRQUNMTyxPQUFPO1lBQ0xDLFdBQVcsT0FBT1AsU0FBUyxXQUFXLENBQUMsTUFBTSxFQUFFQSxLQUFLLEVBQUUsQ0FBQyxHQUFHUTtRQUM1RDtRQUNBQyxPQUFPVjs7QUFHYiJ9

package/packages/payload/dist/admin/components/views/LivePreview/IFrame/index.scss

@@ -0,0 +1,9 @@
+@import '../../../../scss/styles.scss';
+
+.live-preview-iframe {
+  background-color: white;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  transform-origin: top left;
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { EditViewProps } from '../../types';
+import './index.scss';
+export declare const LivePreview: React.FC<EditViewProps>;
+//# sourceMappingURL=index.d.ts.map

package/packages/payload/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;AAExC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAUhD,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4F/C,CAAA"}

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

@@ -0,0 +1,134 @@
+"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 _ShimmerEffect = require("../../../elements/ShimmerEffect");
+const _context = require("../../../forms/Form/context");
+const _reduceFieldsToValues = /*#__PURE__*/ _interop_require_default(require("../../../forms/Form/reduceFieldsToValues"));
+const _DocumentEvents = require("../../../utilities/DocumentEvents");
+const _context1 = require("../Context/context");
+const _Device = require("../Device");
+const _IFrame = require("../IFrame");
+const _Toolbar = require("../Toolbar");
+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 = {
+        __proto__: null
+    };
+    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 LivePreview = (props)=>{
+    const { appIsReady, iframeHasLoaded, iframeRef, popupRef, previewWindowType, setIframeHasLoaded, url } = (0, _context1.useLivePreviewContext)();
+    const { mostRecentUpdate } = (0, _DocumentEvents.useDocumentEvents)();
+    const { breakpoint, fieldSchemaJSON } = (0, _context1.useLivePreviewContext)();
+    const prevWindowType = _react.default.useRef();
+    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)(()=>{
+        // 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 = (0, _reduceFieldsToValues.default)(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 = {
+                data: values,
+                externallyUpdatedRelationship: mostRecentUpdate,
+                fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined,
+                type: 'payload-live-preview'
+            };
+            // 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
+    ]);
+    if (previewWindowType === 'iframe') {
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            className: [
+                baseClass,
+                breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
+            ].filter(Boolean).join(' ')
+        }, /*#__PURE__*/ _react.default.createElement("div", {
+            className: `${baseClass}__wrapper`
+        }, /*#__PURE__*/ _react.default.createElement(_Toolbar.LivePreviewToolbar, props), /*#__PURE__*/ _react.default.createElement("div", {
+            className: `${baseClass}__main`
+        }, /*#__PURE__*/ _react.default.createElement(_Device.DeviceContainer, null, url ? /*#__PURE__*/ _react.default.createElement(_IFrame.IFrame, {
+            ref: iframeRef,
+            setIframeHasLoaded: setIframeHasLoaded,
+            url: url
+        }) : /*#__PURE__*/ _react.default.createElement(_ShimmerEffect.ShimmerEffect, {
+            height: "100%"
+        })))));
+    }
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1ByZXZpZXcvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB1c2VFZmZlY3QgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHR5cGUgeyBFZGl0Vmlld1Byb3BzIH0gZnJvbSAnLi4vLi4vdHlwZXMnXG5cbmltcG9ydCB7IFNoaW1tZXJFZmZlY3QgfSBmcm9tICcuLi8uLi8uLi9lbGVtZW50cy9TaGltbWVyRWZmZWN0J1xuaW1wb3J0IHsgdXNlQWxsRm9ybUZpZWxkcyB9IGZyb20gJy4uLy4uLy4uL2Zvcm1zL0Zvcm0vY29udGV4dCdcbmltcG9ydCByZWR1Y2VGaWVsZHNUb1ZhbHVlcyBmcm9tICcuLi8uLi8uLi9mb3Jtcy9Gb3JtL3JlZHVjZUZpZWxkc1RvVmFsdWVzJ1xuaW1wb3J0IHsgdXNlRG9jdW1lbnRFdmVudHMgfSBmcm9tICcuLi8uLi8uLi91dGlsaXRpZXMvRG9jdW1lbnRFdmVudHMnXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi9Db250ZXh0L2NvbnRleHQnXG5pbXBvcnQgeyBEZXZpY2VDb250YWluZXIgfSBmcm9tICcuLi9EZXZpY2UnXG5pbXBvcnQgeyBJRnJhbWUgfSBmcm9tICcuLi9JRnJhbWUnXG5pbXBvcnQgeyBMaXZlUHJldmlld1Rvb2xiYXIgfSBmcm9tICcuLi9Ub29sYmFyJ1xuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGJhc2VDbGFzcyA9ICdsaXZlLXByZXZpZXctd2luZG93J1xuXG5leHBvcnQgY29uc3QgTGl2ZVByZXZpZXc6IFJlYWN0LkZDPEVkaXRWaWV3UHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBhcHBJc1JlYWR5LFxuICAgIGlmcmFtZUhhc0xvYWRlZCxcbiAgICBpZnJhbWVSZWYsXG4gICAgcG9wdXBSZWYsXG4gICAgcHJldmlld1dpbmRvd1R5cGUsXG4gICAgc2V0SWZyYW1lSGFzTG9hZGVkLFxuICAgIHVybCxcbiAgfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgeyBtb3N0UmVjZW50VXBkYXRlIH0gPSB1c2VEb2N1bWVudEV2ZW50cygpXG5cbiAgY29uc3QgeyBicmVha3BvaW50LCBmaWVsZFNjaGVtYUpTT04gfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgcHJldldpbmRvd1R5cGUgPVxuICAgIFJlYWN0LnVzZVJlZjxSZXR1cm5UeXBlPHR5cGVvZiB1c2VMaXZlUHJldmlld0NvbnRleHQ+WydwcmV2aWV3V2luZG93VHlwZSddPigpXG5cbiAgY29uc3QgW2ZpZWxkc10gPSB1c2VBbGxGb3JtRmllbGRzKClcblxuICAvLyBUaGUgcHJldmlldyBjb3VsZCBlaXRoZXIgYmUgYW4gaWZyYW1lIGVtYmVkZGVkIG9uIHRoZSBwYWdlXG4gIC8vIE9yIGl0IGNvdWxkIGJlIGEgc2VwYXJhdGUgcG9wdXAgd2luZG93XG4gIC8vIFdlIG5lZWQgdG8gdHJhbnNtaXQgZGF0YSB0byBib3RoIGFjY29yZGluZ2x5XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgLy8gRm9yIHBlcmZvcm1hbmNlLCBkbyBubyByZWR1Y2UgZmllbGRzIHRvIHZhbHVlcyB1bnRpbCBhZnRlciB0aGUgaWZyYW1lIG9yIHBvcHVwIGhhcyBsb2FkZWRcbiAgICBpZiAoZmllbGRzICYmIHdpbmRvdyAmJiAncG9zdE1lc3NhZ2UnIGluIHdpbmRvdyAmJiBhcHBJc1JlYWR5KSB7XG4gICAgICBjb25zdCB2YWx1ZXMgPSByZWR1Y2VGaWVsZHNUb1ZhbHVlcyhmaWVsZHMsIHRydWUpXG5cbiAgICAgIC8vIFRvIHJlZHVjZSBvbiBsYXJnZSBgcG9zdE1lc3NhZ2VgIHBheWxvYWRzLCBvbmx5IHNlbmQgYGZpZWxkU2NoZW1hVG9KU09OYCBvbmUgdGltZVxuICAgICAgLy8gVG8gZG8gdGhpcywgdGhlIHVuZGVybHlpbmcgSlMgZnVuY3Rpb24gbWFpbnRhaW5zIGEgY2FjaGUgb2YgdGhpcyB2YWx1ZVxuICAgICAgLy8gU28gd2UgbmVlZCB0byBzZW5kIGl0IHRocm91Z2ggZWFjaCB0aW1lIHRoZSB3aW5kb3cgdHlwZSBjaGFuZ2VzXG4gICAgICAvLyBCdXQgb25seSBvbmNlIHBlciB3aW5kb3cgdHlwZSBjaGFuZ2UsIG5vdCBvbiBldmVyeSByZW5kZXIsIGJlY2F1c2UgdGhpcyBpcyBhIHBvdGVudGlhbGx5IGxhcmdlIG9ialxuICAgICAgY29uc3Qgc2hvdWxkU2VuZFNjaGVtYSA9XG4gICAgICAgICFwcmV2V2luZG93VHlwZS5jdXJyZW50IHx8IHByZXZXaW5kb3dUeXBlLmN1cnJlbnQgIT09IHByZXZpZXdXaW5kb3dUeXBlXG5cbiAgICAgIHByZXZXaW5kb3dUeXBlLmN1cnJlbnQgPSBwcmV2aWV3V2luZG93VHlwZVxuXG4gICAgICBjb25zdCBtZXNzYWdlID0ge1xuICAgICAgICBkYXRhOiB2YWx1ZXMsXG4gICAgICAgIGV4dGVybmFsbHlVcGRhdGVkUmVsYXRpb25zaGlwOiBtb3N0UmVjZW50VXBkYXRlLFxuICAgICAgICBmaWVsZFNjaGVtYUpTT046IHNob3VsZFNlbmRTY2hlbWEgPyBmaWVsZFNjaGVtYUpTT04gOiB1bmRlZmluZWQsXG4gICAgICAgIHR5cGU6ICdwYXlsb2FkLWxpdmUtcHJldmlldycsXG4gICAgICB9XG5cbiAgICAgIC8vIFBvc3QgbWVzc2FnZSB0byBleHRlcm5hbCBwb3B1cCB3aW5kb3dcbiAgICAgIGlmIChwcmV2aWV3V2luZG93VHlwZSA9PT0gJ3BvcHVwJyAmJiBwb3B1cFJlZi5jdXJyZW50KSB7XG4gICAgICAgIHBvcHVwUmVmLmN1cnJlbnQucG9zdE1lc3NhZ2UobWVzc2FnZSwgdXJsKVxuICAgICAgfVxuXG4gICAgICAvLyBQb3N0IG1lc3NhZ2UgdG8gZW1iZWRkZWQgaWZyYW1lXG4gICAgICBpZiAocHJldmlld1dpbmRvd1R5cGUgPT09ICdpZnJhbWUnICYmIGlmcmFtZVJlZi5jdXJyZW50KSB7XG4gICAgICAgIGlmcmFtZVJlZi5jdXJyZW50LmNvbnRlbnRXaW5kb3c/LnBvc3RNZXNzYWdlKG1lc3NhZ2UsIHVybClcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtcbiAgICBmaWVsZHMsXG4gICAgdXJsLFxuICAgIGlmcmFtZUhhc0xvYWRlZCxcbiAgICBwcmV2aWV3V2luZG93VHlwZSxcbiAgICBwb3B1cFJlZixcbiAgICBhcHBJc1JlYWR5LFxuICAgIGlmcmFtZVJlZixcbiAgICBzZXRJZnJhbWVIYXNMb2FkZWQsXG4gICAgZmllbGRTY2hlbWFKU09OLFxuICAgIG1vc3RSZWNlbnRVcGRhdGUsXG4gIF0pXG5cbiAgaWYgKHByZXZpZXdXaW5kb3dUeXBlID09PSAnaWZyYW1lJykge1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17W1xuICAgICAgICAgIGJhc2VDbGFzcyxcbiAgICAgICAgICBicmVha3BvaW50ICYmIGJyZWFrcG9pbnQgIT09ICdyZXNwb25zaXZlJyAmJiBgJHtiYXNlQ2xhc3N9LS1oYXMtYnJlYWtwb2ludGAsXG4gICAgICAgIF1cbiAgICAgICAgICAuZmlsdGVyKEJvb2xlYW4pXG4gICAgICAgICAgLmpvaW4oJyAnKX1cbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3dyYXBwZXJgfT5cbiAgICAgICAgICA8TGl2ZVByZXZpZXdUb29sYmFyIHsuLi5wcm9wc30gLz5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbWFpbmB9PlxuICAgICAgICAgICAgPERldmljZUNvbnRhaW5lcj5cbiAgICAgICAgICAgICAge3VybCA/IChcbiAgICAgICAgICAgICAgICA8SUZyYW1lIHJlZj17aWZyYW1lUmVmfSBzZXRJZnJhbWVIYXNMb2FkZWQ9e3NldElmcmFtZUhhc0xvYWRlZH0gdXJsPXt1cmx9IC8+XG4gICAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgICAgPFNoaW1tZXJFZmZlY3QgaGVpZ2h0PVwiMTAwJVwiIC8+XG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICA8L0RldmljZUNvbnRhaW5lcj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApXG4gIH1cbn1cbiJdLCJuYW1lcyI6WyJMaXZlUHJldmlldyIsImJhc2VDbGFzcyIsInByb3BzIiwiYXBwSXNSZWFkeSIsImlmcmFtZUhhc0xvYWRlZCIsImlmcmFtZVJlZiIsInBvcHVwUmVmIiwicHJldmlld1dpbmRvd1R5cGUiLCJzZXRJZnJhbWVIYXNMb2FkZWQiLCJ1cmwiLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJtb3N0UmVjZW50VXBkYXRlIiwidXNlRG9jdW1lbnRFdmVudHMiLCJicmVha3BvaW50IiwiZmllbGRTY2hlbWFKU09OIiwicHJldldpbmRvd1R5cGUiLCJSZWFjdCIsInVzZVJlZiIsImZpZWxkcyIsInVzZUFsbEZvcm1GaWVsZHMiLCJ1c2VFZmZlY3QiLCJ3aW5kb3ciLCJ2YWx1ZXMiLCJyZWR1Y2VGaWVsZHNUb1ZhbHVlcyIsInNob3VsZFNlbmRTY2hlbWEiLCJjdXJyZW50IiwibWVzc2FnZSIsImRhdGEiLCJleHRlcm5hbGx5VXBkYXRlZFJlbGF0aW9uc2hpcCIsInVuZGVmaW5lZCIsInR5cGUiLCJwb3N0TWVzc2FnZSIsImNvbnRlbnRXaW5kb3ciLCJkaXYiLCJjbGFzc05hbWUiLCJmaWx0ZXIiLCJCb29sZWFuIiwiam9pbiIsIkxpdmVQcmV2aWV3VG9vbGJhciIsIkRldmljZUNvbnRhaW5lciIsIklGcmFtZSIsInJlZiIsIlNoaW1tZXJFZmZlY3QiLCJoZWlnaHQiXSwicmFuZ2VNYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7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

package/packages/payload/dist/admin/components/views/LivePreview/Preview/index.scss

@@ -0,0 +1,41 @@
+@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;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: flex-start;
+  }
+
+  &__main {
+    flex-grow: 1;
+    height: 100%;
+    width: 100%;
+  }
+
+  &--has-breakpoint {
+    .live-preview-iframe {
+      border: 1px solid var(--theme-elevation-100);
+    }
+
+    .live-preview-window {
+      &__main {
+        padding: var(--base);
+      }
+    }
+  }
+
+  @include mid-break {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { EditViewProps } from '../../../types';
+import './index.scss';
+export declare const ToolbarControls: React.FC<EditViewProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/admin/components/views/LivePreview/Toolbar/Controls/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAOnD,OAAO,cAAc,CAAA;AASrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwGnD,CAAA"}

package/packages/payload/dist/admin/components/views/LivePreview/Toolbar/Controls/index.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToolbarControls", {
+    enumerable: true,
+    get: function() {
+        return ToolbarControls;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _ = require("../../../..");
+const _PopupButtonList = /*#__PURE__*/ _interop_require_wildcard(require("../../../../elements/Popup/PopupButtonList"));
+const _ExternalLink = require("../../../../graphics/ExternalLink");
+const _context = require("../../Context/context");
+const _SizeInput = require("../SizeInput");
+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 = {
+        __proto__: null
+    };
+    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-toolbar-controls';
+const zoomOptions = [
+    50,
+    75,
+    100,
+    125,
+    150,
+    200
+];
+const customOption = {
+    label: 'Custom',
+    value: 'custom'
+};
+const ToolbarControls = ()=>{
+    const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } = (0, _context.useLivePreviewContext)();
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: baseClass
+    }, breakpoints?.length > 0 && /*#__PURE__*/ _react.default.createElement(_.Popup, {
+        className: `${baseClass}__breakpoint`,
+        button: /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("span", null, breakpoints.find((bp)=>bp.name == breakpoint)?.label ?? customOption.label), " ", /*#__PURE__*/ _react.default.createElement(_.Chevron, {
+            className: `${baseClass}__chevron`
+        })),
+        render: ({ close })=>/*#__PURE__*/ _react.default.createElement(_PopupButtonList.ButtonGroup, null, /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, breakpoints.map((bp)=>/*#__PURE__*/ _react.default.createElement(_PopupButtonList.Button, {
+                    key: bp.name,
+                    active: bp.name == breakpoint,
+                    onClick: ()=>{
+                        setBreakpoint(bp.name);
+                        close();
+                    }
+                }, bp.label)), breakpoint === 'custom' && /*#__PURE__*/ _react.default.createElement(_PopupButtonList.Button, {
+                active: breakpoint == customOption.value,
+                onClick: ()=>{
+                    setBreakpoint(customOption.value);
+                    close();
+                }
+            }, customOption.label))),
+        showScrollbar: true,
+        verticalAlign: "bottom",
+        horizontalAlign: "right"
+    }), /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__device-size`
+    }, /*#__PURE__*/ _react.default.createElement(_SizeInput.PreviewFrameSizeInput, {
+        axis: "x"
+    }), /*#__PURE__*/ _react.default.createElement("span", {
+        className: `${baseClass}__size-divider`
+    }, /*#__PURE__*/ _react.default.createElement(_.X, null)), /*#__PURE__*/ _react.default.createElement(_SizeInput.PreviewFrameSizeInput, {
+        axis: "y"
+    })), /*#__PURE__*/ _react.default.createElement(_.Popup, {
+        className: `${baseClass}__zoom`,
+        button: /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("span", null, zoom * 100, "%"), " ", /*#__PURE__*/ _react.default.createElement(_.Chevron, {
+            className: `${baseClass}__chevron`
+        })),
+        render: ({ close })=>/*#__PURE__*/ _react.default.createElement(_PopupButtonList.ButtonGroup, null, /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, zoomOptions.map((zoomValue)=>/*#__PURE__*/ _react.default.createElement(_PopupButtonList.Button, {
+                    key: zoomValue,
+                    active: zoom * 100 == zoomValue,
+                    onClick: ()=>{
+                        setZoom(zoomValue / 100);
+                        close();
+                    }
+                }, zoomValue, "%")))),
+        showScrollbar: true,
+        verticalAlign: "bottom",
+        horizontalAlign: "right"
+    }), /*#__PURE__*/ _react.default.createElement("a", {
+        className: `${baseClass}__external`,
+        href: url,
+        onClick: (e)=>{
+            e.preventDefault();
+            setPreviewWindowType('popup');
+        },
+        type: "button"
+    }, /*#__PURE__*/ _react.default.createElement(_ExternalLink.ExternalLinkIcon, null)));
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1Rvb2xiYXIvQ29udHJvbHMvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHR5cGUgeyBFZGl0Vmlld1Byb3BzIH0gZnJvbSAnLi4vLi4vLi4vdHlwZXMnXG5cbmltcG9ydCB7IENoZXZyb24sIFBvcHVwLCBYIH0gZnJvbSAnLi4vLi4vLi4vLi4nXG5pbXBvcnQgKiBhcyBQb3B1cExpc3QgZnJvbSAnLi4vLi4vLi4vLi4vZWxlbWVudHMvUG9wdXAvUG9wdXBCdXR0b25MaXN0J1xuaW1wb3J0IHsgRXh0ZXJuYWxMaW5rSWNvbiB9IGZyb20gJy4uLy4uLy4uLy4uL2dyYXBoaWNzL0V4dGVybmFsTGluaydcbmltcG9ydCB7IHVzZUxpdmVQcmV2aWV3Q29udGV4dCB9IGZyb20gJy4uLy4uL0NvbnRleHQvY29udGV4dCdcbmltcG9ydCB7IFByZXZpZXdGcmFtZVNpemVJbnB1dCB9IGZyb20gJy4uL1NpemVJbnB1dCdcbmltcG9ydCAnLi9pbmRleC5zY3NzJ1xuXG5jb25zdCBiYXNlQ2xhc3MgPSAnbGl2ZS1wcmV2aWV3LXRvb2xiYXItY29udHJvbHMnXG5jb25zdCB6b29tT3B0aW9ucyA9IFs1MCwgNzUsIDEwMCwgMTI1LCAxNTAsIDIwMF1cbmNvbnN0IGN1c3RvbU9wdGlvbiA9IHtcbiAgbGFiZWw6ICdDdXN0b20nLCAvLyBUT0RPOiBBZGQgaTE4biB0byB0aGlzIHN0cmluZ1xuICB2YWx1ZTogJ2N1c3RvbScsXG59XG5cbmV4cG9ydCBjb25zdCBUb29sYmFyQ29udHJvbHM6IFJlYWN0LkZDPEVkaXRWaWV3UHJvcHM+ID0gKCkgPT4ge1xuICBjb25zdCB7IGJyZWFrcG9pbnQsIGJyZWFrcG9pbnRzLCBzZXRCcmVha3BvaW50LCBzZXRQcmV2aWV3V2luZG93VHlwZSwgc2V0Wm9vbSwgdXJsLCB6b29tIH0gPVxuICAgIHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17YmFzZUNsYXNzfT5cbiAgICAgIHticmVha3BvaW50cz8ubGVuZ3RoID4gMCAmJiAoXG4gICAgICAgIDxQb3B1cFxuICAgICAgICAgIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fYnJlYWtwb2ludGB9XG4gICAgICAgICAgYnV0dG9uPXtcbiAgICAgICAgICAgIDw+XG4gICAgICAgICAgICAgIDxzcGFuPlxuICAgICAgICAgICAgICAgIHticmVha3BvaW50cy5maW5kKChicCkgPT4gYnAubmFtZSA9PSBicmVha3BvaW50KT8ubGFiZWwgPz8gY3VzdG9tT3B0aW9uLmxhYmVsfVxuICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICAgICZuYnNwO1xuICAgICAgICAgICAgICA8Q2hldnJvbiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2NoZXZyb25gfSAvPlxuICAgICAgICAgICAgPC8+XG4gICAgICAgICAgfVxuICAgICAgICAgIHJlbmRlcj17KHsgY2xvc2UgfSkgPT4gKFxuICAgICAgICAgICAgPFBvcHVwTGlzdC5CdXR0b25Hcm91cD5cbiAgICAgICAgICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgICAgIHticmVha3BvaW50cy5tYXAoKGJwKSA9PiAoXG4gICAgICAgICAgICAgICAgICA8UG9wdXBMaXN0LkJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBrZXk9e2JwLm5hbWV9XG4gICAgICAgICAgICAgICAgICAgIGFjdGl2ZT17YnAubmFtZSA9PSBicmVha3BvaW50fVxuICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgc2V0QnJlYWtwb2ludChicC5uYW1lKVxuICAgICAgICAgICAgICAgICAgICAgIGNsb3NlKClcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAge2JwLmxhYmVsfVxuICAgICAgICAgICAgICAgICAgPC9Qb3B1cExpc3QuQnV0dG9uPlxuICAgICAgICAgICAgICAgICkpfVxuICAgICAgICAgICAgICAgIHsvKiBEeW5hbWljYWxseSBhZGQgdGhpcyBvcHRpb24gc28gdGhhdCBpdCBvbmx5IGFwcGVhcnMgd2hlbiB0aGUgd2lkdGggYW5kIGhlaWdodCBpbnB1dHMgYXJlIGV4cGxpY2l0bHkgY2hhbmdlZCAqL31cbiAgICAgICAgICAgICAgICB7YnJlYWtwb2ludCA9PT0gJ2N1c3RvbScgJiYgKFxuICAgICAgICAgICAgICAgICAgPFBvcHVwTGlzdC5CdXR0b25cbiAgICAgICAgICAgICAgICAgICAgYWN0aXZlPXticmVha3BvaW50ID09IGN1c3RvbU9wdGlvbi52YWx1ZX1cbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgIHNldEJyZWFrcG9pbnQoY3VzdG9tT3B0aW9uLnZhbHVlKVxuICAgICAgICAgICAgICAgICAgICAgIGNsb3NlKClcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAge2N1c3RvbU9wdGlvbi5sYWJlbH1cbiAgICAgICAgICAgICAgICAgIDwvUG9wdXBMaXN0LkJ1dHRvbj5cbiAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICA8L1JlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgPC9Qb3B1cExpc3QuQnV0dG9uR3JvdXA+XG4gICAgICAgICAgKX1cbiAgICAgICAgICBzaG93U2Nyb2xsYmFyXG4gICAgICAgICAgdmVydGljYWxBbGlnbj1cImJvdHRvbVwiXG4gICAgICAgICAgaG9yaXpvbnRhbEFsaWduPVwicmlnaHRcIlxuICAgICAgICAvPlxuICAgICAgKX1cbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19kZXZpY2Utc2l6ZWB9PlxuICAgICAgICA8UHJldmlld0ZyYW1lU2l6ZUlucHV0IGF4aXM9XCJ4XCIgLz5cbiAgICAgICAgPHNwYW4gY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19zaXplLWRpdmlkZXJgfT5cbiAgICAgICAgICA8WCAvPlxuICAgICAgICA8L3NwYW4+XG4gICAgICAgIDxQcmV2aWV3RnJhbWVTaXplSW5wdXQgYXhpcz1cInlcIiAvPlxuICAgICAgPC9kaXY+XG4gICAgICA8UG9wdXBcbiAgICAgICAgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X196b29tYH1cbiAgICAgICAgYnV0dG9uPXtcbiAgICAgICAgICA8PlxuICAgICAgICAgICAgPHNwYW4+e3pvb20gKiAxMDB9JTwvc3Bhbj5cbiAgICAgICAgICAgICZuYnNwO1xuICAgICAgICAgICAgPENoZXZyb24gY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19jaGV2cm9uYH0gLz5cbiAgICAgICAgICA8Lz5cbiAgICAgICAgfVxuICAgICAgICByZW5kZXI9eyh7IGNsb3NlIH0pID0+IChcbiAgICAgICAgICA8UG9wdXBMaXN0LkJ1dHRvbkdyb3VwPlxuICAgICAgICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgICB7em9vbU9wdGlvbnMubWFwKCh6b29tVmFsdWUpID0+IChcbiAgICAgICAgICAgICAgICA8UG9wdXBMaXN0LkJ1dHRvblxuICAgICAgICAgICAgICAgICAga2V5PXt6b29tVmFsdWV9XG4gICAgICAgICAgICAgICAgICBhY3RpdmU9e3pvb20gKiAxMDAgPT0gem9vbVZhbHVlfVxuICAgICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICBzZXRab29tKHpvb21WYWx1ZSAvIDEwMClcbiAgICAgICAgICAgICAgICAgICAgY2xvc2UoKVxuICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICB7em9vbVZhbHVlfSVcbiAgICAgICAgICAgICAgICA8L1BvcHVwTGlzdC5CdXR0b24+XG4gICAgICAgICAgICAgICkpfVxuICAgICAgICAgICAgPC9SZWFjdC5GcmFnbWVudD5cbiAgICAgICAgICA8L1BvcHVwTGlzdC5CdXR0b25Hcm91cD5cbiAgICAgICAgKX1cbiAgICAgICAgc2hvd1Njcm9sbGJhclxuICAgICAgICB2ZXJ0aWNhbEFsaWduPVwiYm90dG9tXCJcbiAgICAgICAgaG9yaXpvbnRhbEFsaWduPVwicmlnaHRcIlxuICAgICAgLz5cbiAgICAgIDxhXG4gICAgICAgIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fZXh0ZXJuYWxgfVxuICAgICAgICBocmVmPXt1cmx9XG4gICAgICAgIG9uQ2xpY2s9eyhlKSA9PiB7XG4gICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpXG4gICAgICAgICAgc2V0UHJldmlld1dpbmRvd1R5cGUoJ3BvcHVwJylcbiAgICAgICAgfX1cbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICA+XG4gICAgICAgIDxFeHRlcm5hbExpbmtJY29uIC8+XG4gICAgICA8L2E+XG4gICAgPC9kaXY+XG4gIClcbn1cbiJdLCJuYW1lcyI6WyJUb29sYmFyQ29udHJvbHMiLCJiYXNlQ2xhc3MiLCJ6b29tT3B0aW9ucyIsImN1c3RvbU9wdGlvbiIsImxhYmVsIiwidmFsdWUiLCJicmVha3BvaW50IiwiYnJlYWtwb2ludHMiLCJzZXRCcmVha3BvaW50Iiwic2V0UHJldmlld1dpbmRvd1R5cGUiLCJzZXRab29tIiwidXJsIiwiem9vbSIsInVzZUxpdmVQcmV2aWV3Q29udGV4dCIsImRpdiIsImNsYXNzTmFtZSIsImxlbmd0aCIsIlBvcHVwIiwiYnV0dG9uIiwic3BhbiIsImZpbmQiLCJicCIsIm5hbWUiLCJDaGV2cm9uIiwicmVuZGVyIiwiY2xvc2UiLCJQb3B1cExpc3QiLCJCdXR0b25Hcm91cCIsIlJlYWN0IiwiRnJhZ21lbnQiLCJtYXAiLCJCdXR0b24iLCJrZXkiLCJhY3RpdmUiLCJvbkNsaWNrIiwic2hvd1Njcm9sbGJhciIsInZlcnRpY2FsQWxpZ24iLCJob3Jpem9udGFsQWxpZ24iLCJQcmV2aWV3RnJhbWVTaXplSW5wdXQiLCJheGlzIiwiWCIsInpvb21WYWx1ZSIsImEiLCJocmVmIiwiZSIsInByZXZlbnREZWZhdWx0IiwidHlwZSIsIkV4dGVybmFsTGlua0ljb24iXSwicmFuZ2VNYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OyIsIm1hcHBpbmdzIjoiOzs7OytCQWtCYUE7OztlQUFBQTs7OzhEQWxCSztrQkFJZ0I7eUVBQ1A7OEJBQ007eUJBQ0s7MkJBQ0E7UUFDL0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRVAsTUFBTUMsWUFBWTtBQUNsQixNQUFNQyxjQUFjO0lBQUM7SUFBSTtJQUFJO0lBQUs7SUFBSztJQUFLO0NBQUk7QUFDaEQsTUFBTUMsZUFBZTtJQUNuQkMsT0FBTztJQUNQQyxPQUFPO0FBQ1Q7QUFFTyxNQUFNTCxrQkFBMkM7SUFDdEQsTUFBTSxFQUFFTSxVQUFVLEVBQUVDLFdBQVcsRUFBRUMsYUFBYSxFQUFFQyxvQkFBb0IsRUFBRUMsT0FBTyxFQUFFQyxHQUFHLEVBQUVDLElBQUksRUFBRSxHQUN4RkMsSUFBQUEsOEJBQXFCO0lBRXZCLHFCQUNFLDZCQUFDQztRQUFJQyxXQUFXZDtPQUNiTSxhQUFhUyxTQUFTLG1CQUNyQiw2QkFBQ0MsT0FBSztRQUNKRixXQUFXLENBQUMsRUFBRWQsVUFBVSxZQUFZLENBQUM7UUFDckNpQixzQkFDRSwwRUFDRSw2QkFBQ0MsY0FDRVosWUFBWWEsSUFBSSxDQUFDLENBQUNDLEtBQU9BLEdBQUdDLElBQUksSUFBSWhCLGFBQWFGLFNBQVNELGFBQWFDLEtBQUssR0FDeEUsbUJBRVAsNkJBQUNtQixTQUFPO1lBQUNSLFdBQVcsQ0FBQyxFQUFFZCxVQUFVLFNBQVMsQ0FBQzs7UUFHL0N1QixRQUFRLENBQUMsRUFBRUMsS0FBSyxFQUFFLGlCQUNoQiw2QkFBQ0MsaUJBQVVDLFdBQVcsc0JBQ3BCLDZCQUFDQyxjQUFLLENBQUNDLFFBQVEsUUFDWnRCLFlBQVl1QixHQUFHLENBQUMsQ0FBQ1QsbUJBQ2hCLDZCQUFDSyxpQkFBVUssTUFBTTtvQkFDZkMsS0FBS1gsR0FBR0MsSUFBSTtvQkFDWlcsUUFBUVosR0FBR0MsSUFBSSxJQUFJaEI7b0JBQ25CNEIsU0FBUzt3QkFDUDFCLGNBQWNhLEdBQUdDLElBQUk7d0JBQ3JCRztvQkFDRjttQkFFQ0osR0FBR2pCLEtBQUssSUFJWkUsZUFBZSwwQkFDZCw2QkFBQ29CLGlCQUFVSyxNQUFNO2dCQUNmRSxRQUFRM0IsY0FBY0gsYUFBYUUsS0FBSztnQkFDeEM2QixTQUFTO29CQUNQMUIsY0FBY0wsYUFBYUUsS0FBSztvQkFDaENvQjtnQkFDRjtlQUVDdEIsYUFBYUMsS0FBSztRQU03QitCLGVBQUFBO1FBQ0FDLGVBQWM7UUFDZEMsaUJBQWdCO3NCQUdwQiw2QkFBQ3ZCO1FBQUlDLFdBQVcsQ0FBQyxFQUFFZCxVQUFVLGFBQWEsQ0FBQztxQkFDekMsNkJBQUNxQyxnQ0FBcUI7UUFBQ0MsTUFBSztzQkFDNUIsNkJBQUNwQjtRQUFLSixXQUFXLENBQUMsRUFBRWQsVUFBVSxjQUFjLENBQUM7cUJBQzNDLDZCQUFDdUMsR0FBQyx3QkFFSiw2QkFBQ0YsZ0NBQXFCO1FBQUNDLE1BQUs7dUJBRTlCLDZCQUFDdEIsT0FBSztRQUNKRixXQUFXLENBQUMsRUFBRWQsVUFBVSxNQUFNLENBQUM7UUFDL0JpQixzQkFDRSwwRUFDRSw2QkFBQ0MsY0FBTVAsT0FBTyxLQUFJLE1BQVEsbUJBRTFCLDZCQUFDVyxTQUFPO1lBQUNSLFdBQVcsQ0FBQyxFQUFFZCxVQUFVLFNBQVMsQ0FBQzs7UUFHL0N1QixRQUFRLENBQUMsRUFBRUMsS0FBSyxFQUFFLGlCQUNoQiw2QkFBQ0MsaUJBQVVDLFdBQVcsc0JBQ3BCLDZCQUFDQyxjQUFLLENBQUNDLFFBQVEsUUFDWjNCLFlBQVk0QixHQUFHLENBQUMsQ0FBQ1csMEJBQ2hCLDZCQUFDZixpQkFBVUssTUFBTTtvQkFDZkMsS0FBS1M7b0JBQ0xSLFFBQVFyQixPQUFPLE9BQU82QjtvQkFDdEJQLFNBQVM7d0JBQ1B4QixRQUFRK0IsWUFBWTt3QkFDcEJoQjtvQkFDRjttQkFFQ2dCLFdBQVU7UUFNckJOLGVBQUFBO1FBQ0FDLGVBQWM7UUFDZEMsaUJBQWdCO3NCQUVsQiw2QkFBQ0s7UUFDQzNCLFdBQVcsQ0FBQyxFQUFFZCxVQUFVLFVBQVUsQ0FBQztRQUNuQzBDLE1BQU1oQztRQUNOdUIsU0FBUyxDQUFDVTtZQUNSQSxFQUFFQyxjQUFjO1lBQ2hCcEMscUJBQXFCO1FBQ3ZCO1FBQ0FxQyxNQUFLO3FCQUVMLDZCQUFDQyw4QkFBZ0I7QUFJekIifQ==

package/packages/payload/dist/admin/components/views/LivePreview/Toolbar/Controls/index.scss

@@ -0,0 +1,59 @@
+@import '../../../../../scss/styles.scss';
+
+.live-preview-toolbar-controls {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--base) / 3);
+
+  &__breakpoint {
+    border: none;
+    background: transparent;
+    height: var(--base);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__device-size {
+    display: flex;
+    align-items: center;
+  }
+
+  &__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;
+  }
+
+  &__zoom {
+    width: 55px;
+    border: none;
+    background: transparent;
+    height: var(--base);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &__external {
+    flex-shrink: 0;
+    display: flex;
+    width: var(--base);
+    height: var(--base);
+    align-items: center;
+    justify-content: center;
+    padding: 6px 0;
+  }
+
+  .popup-button {
+    display: flex;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.scss';
+export declare const PreviewFrameSizeInput: React.FC<{
+    axis?: 'x' | 'y';
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"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,CA0DA,CAAA"}

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

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PreviewFrameSizeInput", {
+    enumerable: true,
+    get: function() {
+        return PreviewFrameSizeInput;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _context = require("../../Context/context");
+require("./index.scss");
+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 = {
+        __proto__: null
+    };
+    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 = 'toolbar-input';
+const PreviewFrameSizeInput = (props)=>{
+    const { axis } = props;
+    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)=>{
+        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,
+        measuredDeviceSize,
+        size,
+        zoom
+    ]);
+    return /*#__PURE__*/ _react.default.createElement("input", {
+        className: baseClass,
+        min: 0,
+        name: axis === 'x' ? 'live-preview-width' : 'live-preview-height',
+        onChange: handleChange,
+        step: 1,
+        type: "number",
+        value: internalState || 0
+    });
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L1Rvb2xiYXIvU2l6ZUlucHV0L2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi8uLi9Db250ZXh0L2NvbnRleHQnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ3Rvb2xiYXItaW5wdXQnXG5cbmV4cG9ydCBjb25zdCBQcmV2aWV3RnJhbWVTaXplSW5wdXQ6IFJlYWN0LkZDPHtcbiAgYXhpcz86ICd4JyB8ICd5J1xufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBheGlzIH0gPSBwcm9wc1xuXG4gIGNvbnN0IHsgYnJlYWtwb2ludCwgbWVhc3VyZWREZXZpY2VTaXplLCBzZXRCcmVha3BvaW50LCBzZXRTaXplLCBzaXplLCB6b29tIH0gPVxuICAgIHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgW2ludGVybmFsU3RhdGUsIHNldEludGVybmFsU3RhdGVdID0gUmVhY3QudXNlU3RhdGU8bnVtYmVyPihcbiAgICAoYXhpcyA9PT0gJ3gnID8gbWVhc3VyZWREZXZpY2VTaXplPy53aWR0aCA6IG1lYXN1cmVkRGV2aWNlU2l6ZT8uaGVpZ2h0KSB8fCAwLFxuICApXG5cbiAgLy8gd2hlbiB0aGUgaW5wdXQgaXMgY2hhbmdlZCBtYW51YWxseSwgd2UgbmVlZCB0byBzZXQgdGhlIGJyZWFrcG9pbnQgYXMgYGN1c3RvbWBcbiAgLy8gdGhpcyB3aWxsIHRoZW4gYWxsb3cgdXMgdG8gc2V0IGFuIGV4cGxpY2l0IHdpZHRoIGFuZCBoZWlnaHRcbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgKGU6IFJlYWN0LkNoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgICBsZXQgbmV3VmFsdWUgPSBOdW1iZXIoZS50YXJnZXQudmFsdWUpXG5cbiAgICAgIGlmIChuZXdWYWx1ZSA8IDApIG5ld1ZhbHVlID0gMFxuXG4gICAgICBzZXRJbnRlcm5hbFN0YXRlKG5ld1ZhbHVlKVxuICAgICAgc2V0QnJlYWtwb2ludCgnY3VzdG9tJylcblxuICAgICAgLy8gYmUgc3VyZSB0byBzZXQgX2JvdGhfIGF4aXMgdmFsdWVzIHRvIHNvIHRoYXQgdGhlIG90aGVyIGF4aXMgZG9lc24ndCBmYWxsYmFjayB0byAwIG9uIGluaXRpYWwgY2hhbmdlXG4gICAgICAvLyB0aGlzIGlzIGJlY2F1c2UgdGhlIGByZXNwb25zaXZlYCBzaXplIGlzICcxMDAlJyBpbiBDU1MsIGFuZCBgMGAgaW4gaW5pdGlhbCBzdGF0ZVxuICAgICAgc2V0U2l6ZSh7XG4gICAgICAgIHR5cGU6ICdyZXNldCcsXG4gICAgICAgIHZhbHVlOiB7XG4gICAgICAgICAgaGVpZ2h0OiBheGlzID09PSAneScgPyBuZXdWYWx1ZSA6IE51bWJlcihtZWFzdXJlZERldmljZVNpemU/LmhlaWdodC50b0ZpeGVkKDApKSAqIHpvb20sXG4gICAgICAgICAgd2lkdGg6IGF4aXMgPT09ICd4JyA/IG5ld1ZhbHVlIDogTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZT8ud2lkdGgudG9GaXhlZCgwKSkgKiB6b29tLFxuICAgICAgICB9LFxuICAgICAgfSlcbiAgICB9LFxuICAgIFtheGlzLCBzZXRCcmVha3BvaW50LCBtZWFzdXJlZERldmljZVNpemUsIHNldFNpemUsIHpvb21dLFxuICApXG5cbiAgLy8gaWYgdGhlIGJyZWFrcG9pbnQgaXMgYHJlc3BvbnNpdmVgIHRoZW4gdGhlIGRldmljZSdzIGRpdiB3aWxsIGhhdmUgYDEwMCVgIHdpZHRoIGFuZCBoZWlnaHRcbiAgLy8gc28gd2UgbmVlZCB0byB0YWtlIHRoZSBtZWFzdXJlbWVudHMgcHJvdmlkZWQgYnkgYGFjdHVhbERldmljZVNpemVgIGFuZCBzeW5jIGludGVybmFsIHN0YXRlXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGJyZWFrcG9pbnQgPT09ICdyZXNwb25zaXZlJyAmJiBtZWFzdXJlZERldmljZVNpemUpIHtcbiAgICAgIGlmIChheGlzID09PSAneCcpIHNldEludGVybmFsU3RhdGUoTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZS53aWR0aC50b0ZpeGVkKDApKSAqIHpvb20pXG4gICAgICBlbHNlIHNldEludGVybmFsU3RhdGUoTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZS5oZWlnaHQudG9GaXhlZCgwKSkgKiB6b29tKVxuICAgIH1cblxuICAgIGlmIChicmVha3BvaW50ICE9PSAncmVzcG9uc2l2ZScgJiYgc2l6ZSkge1xuICAgICAgc2V0SW50ZXJuYWxTdGF0ZShheGlzID09PSAneCcgPyBzaXplLndpZHRoIDogc2l6ZS5oZWlnaHQpXG4gICAgfVxuICB9LCBbYnJlYWtwb2ludCwgYXhpcywgbWVhc3VyZWREZXZpY2VTaXplLCBzaXplLCB6b29tXSlcblxuICByZXR1cm4gKFxuICAgIDxpbnB1dFxuICAgICAgY2xhc3NOYW1lPXtiYXNlQ2xhc3N9XG4gICAgICBtaW49ezB9XG4gICAgICBuYW1lPXtheGlzID09PSAneCcgPyAnbGl2ZS1wcmV2aWV3LXdpZHRoJyA6ICdsaXZlLXByZXZpZXctaGVpZ2h0J31cbiAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICBzdGVwPXsxfVxuICAgICAgdHlwZT1cIm51bWJlclwiXG4gICAgICB2YWx1ZT17aW50ZXJuYWxTdGF0ZSB8fCAwfVxuICAgIC8+XG4gIClcbn1cbiJdLCJuYW1lcyI6WyJQcmV2aWV3RnJhbWVTaXplSW5wdXQiLCJiYXNlQ2xhc3MiLCJwcm9wcyIsImF4aXMiLCJicmVha3BvaW50IiwibWVhc3VyZWREZXZpY2VTaXplIiwic2V0QnJlYWtwb2ludCIsInNldFNpemUiLCJzaXplIiwiem9vbSIsInVzZUxpdmVQcmV2aWV3Q29udGV4dCIsImludGVybmFsU3RhdGUiLCJzZXRJbnRlcm5hbFN0YXRlIiwiUmVhY3QiLCJ1c2VTdGF0ZSIsIndpZHRoIiwiaGVpZ2h0IiwiaGFuZGxlQ2hhbmdlIiwidXNlQ2FsbGJhY2siLCJlIiwibmV3VmFsdWUiLCJOdW1iZXIiLCJ0YXJnZXQiLCJ2YWx1ZSIsInR5cGUiLCJ0b0ZpeGVkIiwidXNlRWZmZWN0IiwiaW5wdXQiLCJjbGFzc05hbWUiLCJtaW4iLCJuYW1lIiwib25DaGFuZ2UiLCJzdGVwIl0sInJhbmdlTWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsiLCJtYXBwaW5ncyI6Ijs7OzsrQkFPYUE7OztlQUFBQTs7OytEQVBpQzt5QkFFUjtRQUMvQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRVAsTUFBTUMsWUFBWTtBQUVYLE1BQU1ELHdCQUVSLENBQUNFO0lBQ0osTUFBTSxFQUFFQyxJQUFJLEVBQUUsR0FBR0Q7SUFFakIsTUFBTSxFQUFFRSxVQUFVLEVBQUVDLGtCQUFrQixFQUFFQyxhQUFhLEVBQUVDLE9BQU8sRUFBRUMsSUFBSSxFQUFFQyxJQUFJLEVBQUUsR0FDMUVDLElBQUFBLDhCQUFxQjtJQUV2QixNQUFNLENBQUNDLGVBQWVDLGlCQUFpQixHQUFHQyxjQUFLLENBQUNDLFFBQVEsQ0FDdEQsQUFBQ1gsQ0FBQUEsU0FBUyxNQUFNRSxvQkFBb0JVLFFBQVFWLG9CQUFvQlcsTUFBSyxLQUFNO0lBRzdFLGdGQUFnRjtJQUNoRiw4REFBOEQ7SUFDOUQsTUFBTUMsZUFBZUMsSUFBQUEsa0JBQVcsRUFDOUIsQ0FBQ0M7UUFDQyxJQUFJQyxXQUFXQyxPQUFPRixFQUFFRyxNQUFNLENBQUNDLEtBQUs7UUFFcEMsSUFBSUgsV0FBVyxHQUFHQSxXQUFXO1FBRTdCUixpQkFBaUJRO1FBQ2pCZCxjQUFjO1FBRWQsc0dBQXNHO1FBQ3RHLG1GQUFtRjtRQUNuRkMsUUFBUTtZQUNOaUIsTUFBTTtZQUNORCxPQUFPO2dCQUNMUCxRQUFRYixTQUFTLE1BQU1pQixXQUFXQyxPQUFPaEIsb0JBQW9CVyxPQUFPUyxRQUFRLE1BQU1oQjtnQkFDbEZNLE9BQU9aLFNBQVMsTUFBTWlCLFdBQVdDLE9BQU9oQixvQkFBb0JVLE1BQU1VLFFBQVEsTUFBTWhCO1lBQ2xGO1FBQ0Y7SUFDRixHQUNBO1FBQUNOO1FBQU1HO1FBQWVEO1FBQW9CRTtRQUFTRTtLQUFLO0lBRzFELDRGQUE0RjtJQUM1Riw2RkFBNkY7SUFDN0ZpQixJQUFBQSxnQkFBUyxFQUFDO1FBQ1IsSUFBSXRCLGVBQWUsZ0JBQWdCQyxvQkFBb0I7WUFDckQsSUFBSUYsU0FBUyxLQUFLUyxpQkFBaUJTLE9BQU9oQixtQkFBbUJVLEtBQUssQ0FBQ1UsT0FBTyxDQUFDLE1BQU1oQjtpQkFDNUVHLGlCQUFpQlMsT0FBT2hCLG1CQUFtQlcsTUFBTSxDQUFDUyxPQUFPLENBQUMsTUFBTWhCO1FBQ3ZFO1FBRUEsSUFBSUwsZUFBZSxnQkFBZ0JJLE1BQU07WUFDdkNJLGlCQUFpQlQsU0FBUyxNQUFNSyxLQUFLTyxLQUFLLEdBQUdQLEtBQUtRLE1BQU07UUFDMUQ7SUFDRixHQUFHO1FBQUNaO1FBQVlEO1FBQU1FO1FBQW9CRztRQUFNQztLQUFLO0lBRXJELHFCQUNFLDZCQUFDa0I7UUFDQ0MsV0FBVzNCO1FBQ1g0QixLQUFLO1FBQ0xDLE1BQU0zQixTQUFTLE1BQU0sdUJBQXVCO1FBQzVDNEIsVUFBVWQ7UUFDVmUsTUFBTTtRQUNOUixNQUFLO1FBQ0xELE9BQU9aLGlCQUFpQjs7QUFHOUIifQ==

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

@@ -0,0 +1,12 @@
+@import '../../../../../scss/styles.scss';
+
+.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;
+}