@payloadcms/next 3.0.0-alpha.8 → 3.0.0-beta.1

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

@@ -1,76 +1,27 @@
 'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "LivePreview", {
-    enumerable: true,
-    get: function() {
-        return LivePreview;
-    }
-});
-const _ui = require("@payloadcms/ui");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _context = require("../Context/context");
-const _Device = require("../Device");
-const _IFrame = require("../IFrame");
-const _Toolbar = require("../Toolbar");
-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;
-}
+import { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect';
+import { useAllFormFields } from '@payloadcms/ui/forms/Form';
+import { useDocumentEvents } from '@payloadcms/ui/providers/DocumentEvents';
+import { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues';
+import React, { useEffect } from 'react';
+import { useLivePreviewContext } from '../Context/context.js';
+import { DeviceContainer } from '../Device/index.js';
+import { IFrame } from '../IFrame/index.js';
+import { LivePreviewToolbar } from '../Toolbar/index.js';
 const baseClass = 'live-preview-window';
-const LivePreview = (props)=>{
-    const { appIsReady, iframeHasLoaded, iframeRef, popupRef, previewWindowType, setIframeHasLoaded, url } = (0, _context.useLivePreviewContext)();
-    const { mostRecentUpdate } = (0, _ui.useDocumentEvents)();
-    const { breakpoint, fieldSchemaJSON } = (0, _context.useLivePreviewContext)();
-    const prevWindowType = _react.default.useRef();
-    const [fields] = (0, _ui.useAllFormFields)();
+export const LivePreview = (props)=>{
+    const { appIsReady, iframeHasLoaded, iframeRef, popupRef, previewWindowType, setIframeHasLoaded, url } = useLivePreviewContext();
+    const { mostRecentUpdate } = useDocumentEvents();
+    const { breakpoint, fieldSchemaJSON } = useLivePreviewContext();
+    const prevWindowType = React.useRef();
+    const [fields] = 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)(()=>{
+    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, _ui.reduceFieldsToValues)(fields, true);
+            const values = reduceFieldsToValues(fields, true);
             // To reduce on large `postMessage` payloads, only send `fieldSchemaToJSON` one time
             // To do this, the underlying JS function maintains a cache of this value
             // So we need to send it through each time the window type changes
@@ -105,23 +56,23 @@ const LivePreview = (props)=>{
         mostRecentUpdate
     ]);
     if (previewWindowType === 'iframe') {
-        return /*#__PURE__*/ _react.default.createElement("div", {
+        return /*#__PURE__*/ React.createElement("div", {
             className: [
                 baseClass,
                 breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`
             ].filter(Boolean).join(' ')
-        }, /*#__PURE__*/ _react.default.createElement("div", {
+        }, /*#__PURE__*/ React.createElement("div", {
             className: `${baseClass}__wrapper`
-        }, /*#__PURE__*/ _react.default.createElement(_Toolbar.LivePreviewToolbar, props), /*#__PURE__*/ _react.default.createElement("div", {
+        }, /*#__PURE__*/ React.createElement(LivePreviewToolbar, props), /*#__PURE__*/ React.createElement("div", {
             className: `${baseClass}__main`
-        }, /*#__PURE__*/ _react.default.createElement(_Device.DeviceContainer, null, url ? /*#__PURE__*/ _react.default.createElement(_IFrame.IFrame, {
+        }, /*#__PURE__*/ React.createElement(DeviceContainer, null, url ? /*#__PURE__*/ React.createElement(IFrame, {
             ref: iframeRef,
             setIframeHasLoaded: setIframeHasLoaded,
             url: url
-        }) : /*#__PURE__*/ _react.default.createElement(_ui.ShimmerEffect, {
+        }) : /*#__PURE__*/ React.createElement(ShimmerEffect, {
             height: "100%"
         })))));
     }
 };
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy92aWV3cy9MaXZlUHJldmlldy9QcmV2aWV3L2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcbmltcG9ydCB0eXBlIHsgRWRpdFZpZXdQcm9wcyB9IGZyb20gJ3BheWxvYWQvY29uZmlnJ1xuXG5pbXBvcnQge1xuICBTaGltbWVyRWZmZWN0LFxuICByZWR1Y2VGaWVsZHNUb1ZhbHVlcyxcbiAgdXNlQWxsRm9ybUZpZWxkcyxcbiAgdXNlRG9jdW1lbnRFdmVudHMsXG59IGZyb20gJ0BwYXlsb2FkY21zL3VpJ1xuaW1wb3J0IFJlYWN0LCB7IHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi9Db250ZXh0L2NvbnRleHQnXG5pbXBvcnQgeyBEZXZpY2VDb250YWluZXIgfSBmcm9tICcuLi9EZXZpY2UnXG5pbXBvcnQgeyBJRnJhbWUgfSBmcm9tICcuLi9JRnJhbWUnXG5pbXBvcnQgeyBMaXZlUHJldmlld1Rvb2xiYXIgfSBmcm9tICcuLi9Ub29sYmFyJ1xuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGJhc2VDbGFzcyA9ICdsaXZlLXByZXZpZXctd2luZG93J1xuXG5leHBvcnQgY29uc3QgTGl2ZVByZXZpZXc6IFJlYWN0LkZDPEVkaXRWaWV3UHJvcHM+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHtcbiAgICBhcHBJc1JlYWR5LFxuICAgIGlmcmFtZUhhc0xvYWRlZCxcbiAgICBpZnJhbWVSZWYsXG4gICAgcG9wdXBSZWYsXG4gICAgcHJldmlld1dpbmRvd1R5cGUsXG4gICAgc2V0SWZyYW1lSGFzTG9hZGVkLFxuICAgIHVybCxcbiAgfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgeyBtb3N0UmVjZW50VXBkYXRlIH0gPSB1c2VEb2N1bWVudEV2ZW50cygpXG5cbiAgY29uc3QgeyBicmVha3BvaW50LCBmaWVsZFNjaGVtYUpTT04gfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgcHJldldpbmRvd1R5cGUgPVxuICAgIFJlYWN0LnVzZVJlZjxSZXR1cm5UeXBlPHR5cGVvZiB1c2VMaXZlUHJldmlld0NvbnRleHQ+WydwcmV2aWV3V2luZG93VHlwZSddPigpXG5cbiAgY29uc3QgW2ZpZWxkc10gPSB1c2VBbGxGb3JtRmllbGRzKClcblxuICAvLyBUaGUgcHJldmlldyBjb3VsZCBlaXRoZXIgYmUgYW4gaWZyYW1lIGVtYmVkZGVkIG9uIHRoZSBwYWdlXG4gIC8vIE9yIGl0IGNvdWxkIGJlIGEgc2VwYXJhdGUgcG9wdXAgd2luZG93XG4gIC8vIFdlIG5lZWQgdG8gdHJhbnNtaXQgZGF0YSB0byBib3RoIGFjY29yZGluZ2x5XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgLy8gRm9yIHBlcmZvcm1hbmNlLCBkbyBubyByZWR1Y2UgZmllbGRzIHRvIHZhbHVlcyB1bnRpbCBhZnRlciB0aGUgaWZyYW1lIG9yIHBvcHVwIGhhcyBsb2FkZWRcbiAgICBpZiAoZmllbGRzICYmIHdpbmRvdyAmJiAncG9zdE1lc3NhZ2UnIGluIHdpbmRvdyAmJiBhcHBJc1JlYWR5KSB7XG4gICAgICBjb25zdCB2YWx1ZXMgPSByZWR1Y2VGaWVsZHNUb1ZhbHVlcyhmaWVsZHMsIHRydWUpXG5cbiAgICAgIC8vIFRvIHJlZHVjZSBvbiBsYXJnZSBgcG9zdE1lc3NhZ2VgIHBheWxvYWRzLCBvbmx5IHNlbmQgYGZpZWxkU2NoZW1hVG9KU09OYCBvbmUgdGltZVxuICAgICAgLy8gVG8gZG8gdGhpcywgdGhlIHVuZGVybHlpbmcgSlMgZnVuY3Rpb24gbWFpbnRhaW5zIGEgY2FjaGUgb2YgdGhpcyB2YWx1ZVxuICAgICAgLy8gU28gd2UgbmVlZCB0byBzZW5kIGl0IHRocm91Z2ggZWFjaCB0aW1lIHRoZSB3aW5kb3cgdHlwZSBjaGFuZ2VzXG4gICAgICAvLyBCdXQgb25seSBvbmNlIHBlciB3aW5kb3cgdHlwZSBjaGFuZ2UsIG5vdCBvbiBldmVyeSByZW5kZXIsIGJlY2F1c2UgdGhpcyBpcyBhIHBvdGVudGlhbGx5IGxhcmdlIG9ialxuICAgICAgY29uc3Qgc2hvdWxkU2VuZFNjaGVtYSA9XG4gICAgICAgICFwcmV2V2luZG93VHlwZS5jdXJyZW50IHx8IHByZXZXaW5kb3dUeXBlLmN1cnJlbnQgIT09IHByZXZpZXdXaW5kb3dUeXBlXG5cbiAgICAgIHByZXZXaW5kb3dUeXBlLmN1cnJlbnQgPSBwcmV2aWV3V2luZG93VHlwZVxuXG4gICAgICBjb25zdCBtZXNzYWdlID0ge1xuICAgICAgICB0eXBlOiAncGF5bG9hZC1saXZlLXByZXZpZXcnLFxuICAgICAgICBkYXRhOiB2YWx1ZXMsXG4gICAgICAgIGV4dGVybmFsbHlVcGRhdGVkUmVsYXRpb25zaGlwOiBtb3N0UmVjZW50VXBkYXRlLFxuICAgICAgICBmaWVsZFNjaGVtYUpTT046IHNob3VsZFNlbmRTY2hlbWEgPyBmaWVsZFNjaGVtYUpTT04gOiB1bmRlZmluZWQsXG4gICAgICB9XG5cbiAgICAgIC8vIFBvc3QgbWVzc2FnZSB0byBleHRlcm5hbCBwb3B1cCB3aW5kb3dcbiAgICAgIGlmIChwcmV2aWV3V2luZG93VHlwZSA9PT0gJ3BvcHVwJyAmJiBwb3B1cFJlZi5jdXJyZW50KSB7XG4gICAgICAgIHBvcHVwUmVmLmN1cnJlbnQucG9zdE1lc3NhZ2UobWVzc2FnZSwgdXJsKVxuICAgICAgfVxuXG4gICAgICAvLyBQb3N0IG1lc3NhZ2UgdG8gZW1iZWRkZWQgaWZyYW1lXG4gICAgICBpZiAocHJldmlld1dpbmRvd1R5cGUgPT09ICdpZnJhbWUnICYmIGlmcmFtZVJlZi5jdXJyZW50KSB7XG4gICAgICAgIGlmcmFtZVJlZi5jdXJyZW50LmNvbnRlbnRXaW5kb3c/LnBvc3RNZXNzYWdlKG1lc3NhZ2UsIHVybClcbiAgICAgIH1cbiAgICB9XG4gIH0sIFtcbiAgICBmaWVsZHMsXG4gICAgdXJsLFxuICAgIGlmcmFtZUhhc0xvYWRlZCxcbiAgICBwcmV2aWV3V2luZG93VHlwZSxcbiAgICBwb3B1cFJlZixcbiAgICBhcHBJc1JlYWR5LFxuICAgIGlmcmFtZVJlZixcbiAgICBzZXRJZnJhbWVIYXNMb2FkZWQsXG4gICAgZmllbGRTY2hlbWFKU09OLFxuICAgIG1vc3RSZWNlbnRVcGRhdGUsXG4gIF0pXG5cbiAgaWYgKHByZXZpZXdXaW5kb3dUeXBlID09PSAnaWZyYW1lJykge1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIGNsYXNzTmFtZT17W1xuICAgICAgICAgIGJhc2VDbGFzcyxcbiAgICAgICAgICBicmVha3BvaW50ICYmIGJyZWFrcG9pbnQgIT09ICdyZXNwb25zaXZlJyAmJiBgJHtiYXNlQ2xhc3N9LS1oYXMtYnJlYWtwb2ludGAsXG4gICAgICAgIF1cbiAgICAgICAgICAuZmlsdGVyKEJvb2xlYW4pXG4gICAgICAgICAgLmpvaW4oJyAnKX1cbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3dyYXBwZXJgfT5cbiAgICAgICAgICA8TGl2ZVByZXZpZXdUb29sYmFyIHsuLi5wcm9wc30gLz5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fbWFpbmB9PlxuICAgICAgICAgICAgPERldmljZUNvbnRhaW5lcj5cbiAgICAgICAgICAgICAge3VybCA/IChcbiAgICAgICAgICAgICAgICA8SUZyYW1lIHJlZj17aWZyYW1lUmVmfSBzZXRJZnJhbWVIYXNMb2FkZWQ9e3NldElmcmFtZUhhc0xvYWRlZH0gdXJsPXt1cmx9IC8+XG4gICAgICAgICAgICAgICkgOiAoXG4gICAgICAgICAgICAgICAgPFNoaW1tZXJFZmZlY3QgaGVpZ2h0PVwiMTAwJVwiIC8+XG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICA8L0RldmljZUNvbnRhaW5lcj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApXG4gIH1cbn1cbiJdLCJuYW1lcyI6WyJMaXZlUHJldmlldyIsImJhc2VDbGFzcyIsInByb3BzIiwiYXBwSXNSZWFkeSIsImlmcmFtZUhhc0xvYWRlZCIsImlmcmFtZVJlZiIsInBvcHVwUmVmIiwicHJldmlld1dpbmRvd1R5cGUiLCJzZXRJZnJhbWVIYXNMb2FkZWQiLCJ1cmwiLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJtb3N0UmVjZW50VXBkYXRlIiwidXNlRG9jdW1lbnRFdmVudHMiLCJicmVha3BvaW50IiwiZmllbGRTY2hlbWFKU09OIiwicHJldldpbmRvd1R5cGUiLCJSZWFjdCIsInVzZVJlZiIsImZpZWxkcyIsInVzZUFsbEZvcm1GaWVsZHMiLCJ1c2VFZmZlY3QiLCJ3aW5kb3ciLCJ2YWx1ZXMiLCJyZWR1Y2VGaWVsZHNUb1ZhbHVlcyIsInNob3VsZFNlbmRTY2hlbWEiLCJjdXJyZW50IiwibWVzc2FnZSIsInR5cGUiLCJkYXRhIiwiZXh0ZXJuYWxseVVwZGF0ZWRSZWxhdGlvbnNoaXAiLCJ1bmRlZmluZWQiLCJwb3N0TWVzc2FnZSIsImNvbnRlbnRXaW5kb3ciLCJkaXYiLCJjbGFzc05hbWUiLCJmaWx0ZXIiLCJCb29sZWFuIiwiam9pbiIsIkxpdmVQcmV2aWV3VG9vbGJhciIsIkRldmljZUNvbnRhaW5lciIsIklGcmFtZSIsInJlZiIsIlNoaW1tZXJFZmZlY3QiLCJoZWlnaHQiXSwibWFwcGluZ3MiOiJBQUFBOzs7OzsrQkFtQmFBOzs7ZUFBQUE7OztvQkFYTjsrREFDMEI7eUJBRUs7d0JBQ047d0JBQ1Q7eUJBQ1k7UUFDNUI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUVQLE1BQU1DLFlBQVk7QUFFWCxNQUFNRCxjQUF1QyxDQUFDRTtJQUNuRCxNQUFNLEVBQ0pDLFVBQVUsRUFDVkMsZUFBZSxFQUNmQyxTQUFTLEVBQ1RDLFFBQVEsRUFDUkMsaUJBQWlCLEVBQ2pCQyxrQkFBa0IsRUFDbEJDLEdBQUcsRUFDSixHQUFHQyxJQUFBQSw4QkFBcUI7SUFFekIsTUFBTSxFQUFFQyxnQkFBZ0IsRUFBRSxHQUFHQyxJQUFBQSxxQkFBaUI7SUFFOUMsTUFBTSxFQUFFQyxVQUFVLEVBQUVDLGVBQWUsRUFBRSxHQUFHSixJQUFBQSw4QkFBcUI7SUFFN0QsTUFBTUssaUJBQ0pDLGNBQUssQ0FBQ0MsTUFBTTtJQUVkLE1BQU0sQ0FBQ0MsT0FBTyxHQUFHQyxJQUFBQSxvQkFBZ0I7SUFFakMsNkRBQTZEO0lBQzdELHlDQUF5QztJQUN6QywrQ0FBK0M7SUFDL0NDLElBQUFBLGdCQUFTLEVBQUM7UUFDUiw0RkFBNEY7UUFDNUYsSUFBSUYsVUFBVUcsVUFBVSxpQkFBaUJBLFVBQVVsQixZQUFZO1lBQzdELE1BQU1tQixTQUFTQyxJQUFBQSx3QkFBb0IsRUFBQ0wsUUFBUTtZQUU1QyxvRkFBb0Y7WUFDcEYseUVBQXlFO1lBQ3pFLGtFQUFrRTtZQUNsRSxxR0FBcUc7WUFDckcsTUFBTU0sbUJBQ0osQ0FBQ1QsZUFBZVUsT0FBTyxJQUFJVixlQUFlVSxPQUFPLEtBQUtsQjtZQUV4RFEsZUFBZVUsT0FBTyxHQUFHbEI7WUFFekIsTUFBTW1CLFVBQVU7Z0JBQ2RDLE1BQU07Z0JBQ05DLE1BQU1OO2dCQUNOTywrQkFBK0JsQjtnQkFDL0JHLGlCQUFpQlUsbUJBQW1CVixrQkFBa0JnQjtZQUN4RDtZQUVBLHdDQUF3QztZQUN4QyxJQUFJdkIsc0JBQXNCLFdBQVdELFNBQVNtQixPQUFPLEVBQUU7Z0JBQ3JEbkIsU0FBU21CLE9BQU8sQ0FBQ00sV0FBVyxDQUFDTCxTQUFTakI7WUFDeEM7WUFFQSxrQ0FBa0M7WUFDbEMsSUFBSUYsc0JBQXNCLFlBQVlGLFVBQVVvQixPQUFPLEVBQUU7Z0JBQ3ZEcEIsVUFBVW9CLE9BQU8sQ0FBQ08sYUFBYSxFQUFFRCxZQUFZTCxTQUFTakI7WUFDeEQ7UUFDRjtJQUNGLEdBQUc7UUFDRFM7UUFDQVQ7UUFDQUw7UUFDQUc7UUFDQUQ7UUFDQUg7UUFDQUU7UUFDQUc7UUFDQU07UUFDQUg7S0FDRDtJQUVELElBQUlKLHNCQUFzQixVQUFVO1FBQ2xDLHFCQUNFLDZCQUFDMEI7WUFDQ0MsV0FBVztnQkFDVGpDO2dCQUNBWSxjQUFjQSxlQUFlLGdCQUFnQixDQUFDLEVBQUVaLFVBQVUsZ0JBQWdCLENBQUM7YUFDNUUsQ0FDRWtDLE1BQU0sQ0FBQ0MsU0FDUEMsSUFBSSxDQUFDO3lCQUVSLDZCQUFDSjtZQUFJQyxXQUFXLENBQUMsRUFBRWpDLFVBQVUsU0FBUyxDQUFDO3lCQUNyQyw2QkFBQ3FDLDJCQUFrQixFQUFLcEMsc0JBQ3hCLDZCQUFDK0I7WUFBSUMsV0FBVyxDQUFDLEVBQUVqQyxVQUFVLE1BQU0sQ0FBQzt5QkFDbEMsNkJBQUNzQyx1QkFBZSxRQUNiOUIsb0JBQ0MsNkJBQUMrQixjQUFNO1lBQUNDLEtBQUtwQztZQUFXRyxvQkFBb0JBO1lBQW9CQyxLQUFLQTsyQkFFckUsNkJBQUNpQyxpQkFBYTtZQUFDQyxRQUFPOztJQU9wQztBQUNGIn0=
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/Preview/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload/types'\n\nimport { ShimmerEffect } from '@payloadcms/ui/elements/ShimmerEffect'\nimport { useAllFormFields } from '@payloadcms/ui/forms/Form'\nimport { useDocumentEvents } from '@payloadcms/ui/providers/DocumentEvents'\nimport { reduceFieldsToValues } from '@payloadcms/ui/utilities/reduceFieldsToValues'\nimport React, { useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { DeviceContainer } from '../Device/index.js'\nimport { IFrame } from '../IFrame/index.js'\nimport { LivePreviewToolbar } from '../Toolbar/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-window'\n\nexport const LivePreview: React.FC<EditViewProps> = (props) => {\n  const {\n    appIsReady,\n    iframeHasLoaded,\n    iframeRef,\n    popupRef,\n    previewWindowType,\n    setIframeHasLoaded,\n    url,\n  } = useLivePreviewContext()\n\n  const { mostRecentUpdate } = useDocumentEvents()\n\n  const { breakpoint, fieldSchemaJSON } = useLivePreviewContext()\n\n  const prevWindowType =\n    React.useRef<ReturnType<typeof useLivePreviewContext>['previewWindowType']>()\n\n  const [fields] = useAllFormFields()\n\n  // The preview could either be an iframe embedded on the page\n  // Or it could be a separate popup window\n  // We need to transmit data to both accordingly\n  useEffect(() => {\n    // For performance, do no reduce fields to values until after the iframe or popup has loaded\n    if (fields && window && 'postMessage' in window && appIsReady) {\n      const values = reduceFieldsToValues(fields, true)\n\n      // To reduce on large `postMessage` payloads, only send `fieldSchemaToJSON` one time\n      // To do this, the underlying JS function maintains a cache of this value\n      // So we need to send it through each time the window type changes\n      // But only once per window type change, not on every render, because this is a potentially large obj\n      const shouldSendSchema =\n        !prevWindowType.current || prevWindowType.current !== previewWindowType\n\n      prevWindowType.current = previewWindowType\n\n      const message = {\n        type: 'payload-live-preview',\n        data: values,\n        externallyUpdatedRelationship: mostRecentUpdate,\n        fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined,\n      }\n\n      // Post message to external popup window\n      if (previewWindowType === 'popup' && popupRef.current) {\n        popupRef.current.postMessage(message, url)\n      }\n\n      // Post message to embedded iframe\n      if (previewWindowType === 'iframe' && iframeRef.current) {\n        iframeRef.current.contentWindow?.postMessage(message, url)\n      }\n    }\n  }, [\n    fields,\n    url,\n    iframeHasLoaded,\n    previewWindowType,\n    popupRef,\n    appIsReady,\n    iframeRef,\n    setIframeHasLoaded,\n    fieldSchemaJSON,\n    mostRecentUpdate,\n  ])\n\n  if (previewWindowType === 'iframe') {\n    return (\n      <div\n        className={[\n          baseClass,\n          breakpoint && breakpoint !== 'responsive' && `${baseClass}--has-breakpoint`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div className={`${baseClass}__wrapper`}>\n          <LivePreviewToolbar {...props} />\n          <div className={`${baseClass}__main`}>\n            <DeviceContainer>\n              {url ? (\n                <IFrame ref={iframeRef} setIframeHasLoaded={setIframeHasLoaded} url={url} />\n              ) : (\n                <ShimmerEffect height=\"100%\" />\n              )}\n            </DeviceContainer>\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":["ShimmerEffect","useAllFormFields","useDocumentEvents","reduceFieldsToValues","React","useEffect","useLivePreviewContext","DeviceContainer","IFrame","LivePreviewToolbar","baseClass","LivePreview","props","appIsReady","iframeHasLoaded","iframeRef","popupRef","previewWindowType","setIframeHasLoaded","url","mostRecentUpdate","breakpoint","fieldSchemaJSON","prevWindowType","useRef","fields","window","values","shouldSendSchema","current","message","type","data","externallyUpdatedRelationship","undefined","postMessage","contentWindow","div","className","filter","Boolean","join","ref","height"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,SAASA,aAAa,QAAQ,wCAAuC;AACrE,SAASC,gBAAgB,QAAQ,4BAA2B;AAC5D,SAASC,iBAAiB,QAAQ,0CAAyC;AAC3E,SAASC,oBAAoB,QAAQ,gDAA+C;AACpF,OAAOC,SAASC,SAAS,QAAQ,QAAO;AAExC,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,SAASC,eAAe,QAAQ,qBAAoB;AACpD,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,kBAAkB,QAAQ,sBAAqB;AAGxD,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAAuC,CAACC;IACnD,MAAM,EACJC,UAAU,EACVC,eAAe,EACfC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,kBAAkB,EAClBC,GAAG,EACJ,GAAGb;IAEJ,MAAM,EAAEc,gBAAgB,EAAE,GAAGlB;IAE7B,MAAM,EAAEmB,UAAU,EAAEC,eAAe,EAAE,GAAGhB;IAExC,MAAMiB,iBACJnB,MAAMoB,MAAM;IAEd,MAAM,CAACC,OAAO,GAAGxB;IAEjB,6DAA6D;IAC7D,yCAAyC;IACzC,+CAA+C;IAC/CI,UAAU;QACR,4FAA4F;QAC5F,IAAIoB,UAAUC,UAAU,iBAAiBA,UAAUb,YAAY;YAC7D,MAAMc,SAASxB,qBAAqBsB,QAAQ;YAE5C,oFAAoF;YACpF,yEAAyE;YACzE,kEAAkE;YAClE,qGAAqG;YACrG,MAAMG,mBACJ,CAACL,eAAeM,OAAO,IAAIN,eAAeM,OAAO,KAAKZ;YAExDM,eAAeM,OAAO,GAAGZ;YAEzB,MAAMa,UAAU;gBACdC,MAAM;gBACNC,MAAML;gBACNM,+BAA+Bb;gBAC/BE,iBAAiBM,mBAAmBN,kBAAkBY;YACxD;YAEA,wCAAwC;YACxC,IAAIjB,sBAAsB,WAAWD,SAASa,OAAO,EAAE;gBACrDb,SAASa,OAAO,CAACM,WAAW,CAACL,SAASX;YACxC;YAEA,kCAAkC;YAClC,IAAIF,sBAAsB,YAAYF,UAAUc,OAAO,EAAE;gBACvDd,UAAUc,OAAO,CAACO,aAAa,EAAED,YAAYL,SAASX;YACxD;QACF;IACF,GAAG;QACDM;QACAN;QACAL;QACAG;QACAD;QACAH;QACAE;QACAG;QACAI;QACAF;KACD;IAED,IAAIH,sBAAsB,UAAU;QAClC,qBACE,oBAACoB;YACCC,WAAW;gBACT5B;gBACAW,cAAcA,eAAe,gBAAgB,CAAC,EAAEX,UAAU,gBAAgB,CAAC;aAC5E,CACE6B,MAAM,CAACC,SACPC,IAAI,CAAC;yBAER,oBAACJ;YAAIC,WAAW,CAAC,EAAE5B,UAAU,SAAS,CAAC;yBACrC,oBAACD,oBAAuBG,sBACxB,oBAACyB;YAAIC,WAAW,CAAC,EAAE5B,UAAU,MAAM,CAAC;yBAClC,oBAACH,uBACEY,oBACC,oBAACX;YAAOkC,KAAK3B;YAAWG,oBAAoBA;YAAoBC,KAAKA;2BAErE,oBAACnB;YAAc2C,QAAO;;IAOpC;AACF,EAAC"}

package/dist/views/LivePreview/Toolbar/Controls/index.d.ts

@@ -1,4 +1,4 @@
-import type { EditViewProps } from 'payload/config';
+import type { EditViewProps } from 'payload/types';
 import React from 'react';
 import './index.scss';
 export declare const ToolbarControls: React.FC<EditViewProps>;

package/dist/views/LivePreview/Toolbar/Controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAGnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AASrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwGnD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAMlD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AASrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwGnD,CAAA"}

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

@@ -1,24 +1,11 @@
 'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "ToolbarControls", {
-    enumerable: true,
-    get: function() {
-        return ToolbarControls;
-    }
-});
-const _ui = require("@payloadcms/ui");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _context = require("../../Context/context");
-const _SizeInput = require("../SizeInput");
-require("./index.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+import { Popup, PopupList } from '@payloadcms/ui/elements/Popup';
+import { Chevron } from '@payloadcms/ui/icons/Chevron';
+import { LinkIcon } from '@payloadcms/ui/icons/Link';
+import { X } from '@payloadcms/ui/icons/X';
+import React from 'react';
+import { useLivePreviewContext } from '../../Context/context.js';
+import { PreviewFrameSizeInput } from '../SizeInput/index.js';
 const baseClass = 'live-preview-toolbar-controls';
 const zoomOptions = [
     50,
@@ -32,24 +19,24 @@ 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", {
+export const ToolbarControls = ()=>{
+    const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } = useLivePreviewContext();
+    return /*#__PURE__*/ React.createElement("div", {
         className: baseClass
-    }, breakpoints?.length > 0 && /*#__PURE__*/ _react.default.createElement(_ui.Popup, {
-        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(_ui.Chevron, {
+    }, breakpoints?.length > 0 && /*#__PURE__*/ React.createElement(Popup, {
+        button: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", null, breakpoints.find((bp)=>bp.name == breakpoint)?.label ?? customOption.label), " ", /*#__PURE__*/ React.createElement(Chevron, {
             className: `${baseClass}__chevron`
         })),
         className: `${baseClass}__breakpoint`,
         horizontalAlign: "right",
-        render: ({ close })=>/*#__PURE__*/ _react.default.createElement(_ui.PopupList.ButtonGroup, null, /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, breakpoints.map((bp)=>/*#__PURE__*/ _react.default.createElement(_ui.PopupList.Button, {
+        render: ({ close })=>/*#__PURE__*/ React.createElement(PopupList.ButtonGroup, null, /*#__PURE__*/ React.createElement(React.Fragment, null, breakpoints.map((bp)=>/*#__PURE__*/ React.createElement(PopupList.Button, {
                     active: bp.name == breakpoint,
                     key: bp.name,
                     onClick: ()=>{
                         setBreakpoint(bp.name);
                         close();
                     }
-                }, bp.label)), breakpoint === 'custom' && /*#__PURE__*/ _react.default.createElement(_ui.PopupList.Button, {
+                }, bp.label)), breakpoint === 'custom' && /*#__PURE__*/ React.createElement(PopupList.Button, {
                 active: breakpoint == customOption.value,
                 onClick: ()=>{
                     setBreakpoint(customOption.value);
@@ -58,21 +45,21 @@ const ToolbarControls = ()=>{
             }, customOption.label))),
         showScrollbar: true,
         verticalAlign: "bottom"
-    }), /*#__PURE__*/ _react.default.createElement("div", {
+    }), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__device-size`
-    }, /*#__PURE__*/ _react.default.createElement(_SizeInput.PreviewFrameSizeInput, {
+    }, /*#__PURE__*/ React.createElement(PreviewFrameSizeInput, {
         axis: "x"
-    }), /*#__PURE__*/ _react.default.createElement("span", {
+    }), /*#__PURE__*/ React.createElement("span", {
         className: `${baseClass}__size-divider`
-    }, /*#__PURE__*/ _react.default.createElement(_ui.X, null)), /*#__PURE__*/ _react.default.createElement(_SizeInput.PreviewFrameSizeInput, {
+    }, /*#__PURE__*/ React.createElement(X, null)), /*#__PURE__*/ React.createElement(PreviewFrameSizeInput, {
         axis: "y"
-    })), /*#__PURE__*/ _react.default.createElement(_ui.Popup, {
-        button: /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("span", null, zoom * 100, "%"), " ", /*#__PURE__*/ _react.default.createElement(_ui.Chevron, {
+    })), /*#__PURE__*/ React.createElement(Popup, {
+        button: /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", null, zoom * 100, "%"), " ", /*#__PURE__*/ React.createElement(Chevron, {
             className: `${baseClass}__chevron`
         })),
         className: `${baseClass}__zoom`,
         horizontalAlign: "right",
-        render: ({ close })=>/*#__PURE__*/ _react.default.createElement(_ui.PopupList.ButtonGroup, null, /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, zoomOptions.map((zoomValue)=>/*#__PURE__*/ _react.default.createElement(_ui.PopupList.Button, {
+        render: ({ close })=>/*#__PURE__*/ React.createElement(PopupList.ButtonGroup, null, /*#__PURE__*/ React.createElement(React.Fragment, null, zoomOptions.map((zoomValue)=>/*#__PURE__*/ React.createElement(PopupList.Button, {
                     active: zoom * 100 == zoomValue,
                     key: zoomValue,
                     onClick: ()=>{
@@ -82,7 +69,7 @@ const ToolbarControls = ()=>{
                 }, zoomValue, "%")))),
         showScrollbar: true,
         verticalAlign: "bottom"
-    }), /*#__PURE__*/ _react.default.createElement("a", {
+    }), /*#__PURE__*/ React.createElement("a", {
         className: `${baseClass}__external`,
         href: url,
         onClick: (e)=>{
@@ -90,7 +77,7 @@ const ToolbarControls = ()=>{
             setPreviewWindowType('popup');
         },
         type: "button"
-    }, /*#__PURE__*/ _react.default.createElement(_ui.LinkIcon, null)));
+    }, /*#__PURE__*/ React.createElement(LinkIcon, null)));
 };
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy92aWV3cy9MaXZlUHJldmlldy9Ub29sYmFyL0NvbnRyb2xzL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcbmltcG9ydCB0eXBlIHsgRWRpdFZpZXdQcm9wcyB9IGZyb20gJ3BheWxvYWQvY29uZmlnJ1xuXG5pbXBvcnQgeyBDaGV2cm9uLCBMaW5rSWNvbiwgUG9wdXAsIFBvcHVwTGlzdCwgWCB9IGZyb20gJ0BwYXlsb2FkY21zL3VpJ1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi8uLi9Db250ZXh0L2NvbnRleHQnXG5pbXBvcnQgeyBQcmV2aWV3RnJhbWVTaXplSW5wdXQgfSBmcm9tICcuLi9TaXplSW5wdXQnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ2xpdmUtcHJldmlldy10b29sYmFyLWNvbnRyb2xzJ1xuY29uc3Qgem9vbU9wdGlvbnMgPSBbNTAsIDc1LCAxMDAsIDEyNSwgMTUwLCAyMDBdXG5jb25zdCBjdXN0b21PcHRpb24gPSB7XG4gIGxhYmVsOiAnQ3VzdG9tJywgLy8gVE9ETzogQWRkIGkxOG4gdG8gdGhpcyBzdHJpbmdcbiAgdmFsdWU6ICdjdXN0b20nLFxufVxuXG5leHBvcnQgY29uc3QgVG9vbGJhckNvbnRyb2xzOiBSZWFjdC5GQzxFZGl0Vmlld1Byb3BzPiA9ICgpID0+IHtcbiAgY29uc3QgeyBicmVha3BvaW50LCBicmVha3BvaW50cywgc2V0QnJlYWtwb2ludCwgc2V0UHJldmlld1dpbmRvd1R5cGUsIHNldFpvb20sIHVybCwgem9vbSB9ID1cbiAgICB1c2VMaXZlUHJldmlld0NvbnRleHQoKVxuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2Jhc2VDbGFzc30+XG4gICAgICB7YnJlYWtwb2ludHM/Lmxlbmd0aCA+IDAgJiYgKFxuICAgICAgICA8UG9wdXBcbiAgICAgICAgICBidXR0b249e1xuICAgICAgICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgICA8c3Bhbj5cbiAgICAgICAgICAgICAgICB7YnJlYWtwb2ludHMuZmluZCgoYnApID0+IGJwLm5hbWUgPT0gYnJlYWtwb2ludCk/LmxhYmVsID8/IGN1c3RvbU9wdGlvbi5sYWJlbH1cbiAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAmbmJzcDtcbiAgICAgICAgICAgICAgPENoZXZyb24gY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19jaGV2cm9uYH0gLz5cbiAgICAgICAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgICAgfVxuICAgICAgICAgIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fYnJlYWtwb2ludGB9XG4gICAgICAgICAgaG9yaXpvbnRhbEFsaWduPVwicmlnaHRcIlxuICAgICAgICAgIHJlbmRlcj17KHsgY2xvc2UgfSkgPT4gKFxuICAgICAgICAgICAgPFBvcHVwTGlzdC5CdXR0b25Hcm91cD5cbiAgICAgICAgICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgICAgIHticmVha3BvaW50cy5tYXAoKGJwKSA9PiAoXG4gICAgICAgICAgICAgICAgICA8UG9wdXBMaXN0LkJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBhY3RpdmU9e2JwLm5hbWUgPT0gYnJlYWtwb2ludH1cbiAgICAgICAgICAgICAgICAgICAga2V5PXticC5uYW1lfVxuICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgc2V0QnJlYWtwb2ludChicC5uYW1lKVxuICAgICAgICAgICAgICAgICAgICAgIGNsb3NlKClcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAge2JwLmxhYmVsfVxuICAgICAgICAgICAgICAgICAgPC9Qb3B1cExpc3QuQnV0dG9uPlxuICAgICAgICAgICAgICAgICkpfVxuICAgICAgICAgICAgICAgIHsvKiBEeW5hbWljYWxseSBhZGQgdGhpcyBvcHRpb24gc28gdGhhdCBpdCBvbmx5IGFwcGVhcnMgd2hlbiB0aGUgd2lkdGggYW5kIGhlaWdodCBpbnB1dHMgYXJlIGV4cGxpY2l0bHkgY2hhbmdlZCAqL31cbiAgICAgICAgICAgICAgICB7YnJlYWtwb2ludCA9PT0gJ2N1c3RvbScgJiYgKFxuICAgICAgICAgICAgICAgICAgPFBvcHVwTGlzdC5CdXR0b25cbiAgICAgICAgICAgICAgICAgICAgYWN0aXZlPXticmVha3BvaW50ID09IGN1c3RvbU9wdGlvbi52YWx1ZX1cbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgIHNldEJyZWFrcG9pbnQoY3VzdG9tT3B0aW9uLnZhbHVlKVxuICAgICAgICAgICAgICAgICAgICAgIGNsb3NlKClcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAge2N1c3RvbU9wdGlvbi5sYWJlbH1cbiAgICAgICAgICAgICAgICAgIDwvUG9wdXBMaXN0LkJ1dHRvbj5cbiAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICA8L1JlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgPC9Qb3B1cExpc3QuQnV0dG9uR3JvdXA+XG4gICAgICAgICAgKX1cbiAgICAgICAgICBzaG93U2Nyb2xsYmFyXG4gICAgICAgICAgdmVydGljYWxBbGlnbj1cImJvdHRvbVwiXG4gICAgICAgIC8+XG4gICAgICApfVxuICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2RldmljZS1zaXplYH0+XG4gICAgICAgIDxQcmV2aWV3RnJhbWVTaXplSW5wdXQgYXhpcz1cInhcIiAvPlxuICAgICAgICA8c3BhbiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3NpemUtZGl2aWRlcmB9PlxuICAgICAgICAgIDxYIC8+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPFByZXZpZXdGcmFtZVNpemVJbnB1dCBheGlzPVwieVwiIC8+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxQb3B1cFxuICAgICAgICBidXR0b249e1xuICAgICAgICAgIDxSZWFjdC5GcmFnbWVudD5cbiAgICAgICAgICAgIDxzcGFuPnt6b29tICogMTAwfSU8L3NwYW4+XG4gICAgICAgICAgICAmbmJzcDtcbiAgICAgICAgICAgIDxDaGV2cm9uIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fY2hldnJvbmB9IC8+XG4gICAgICAgICAgPC9SZWFjdC5GcmFnbWVudD5cbiAgICAgICAgfVxuICAgICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3pvb21gfVxuICAgICAgICBob3Jpem9udGFsQWxpZ249XCJyaWdodFwiXG4gICAgICAgIHJlbmRlcj17KHsgY2xvc2UgfSkgPT4gKFxuICAgICAgICAgIDxQb3B1cExpc3QuQnV0dG9uR3JvdXA+XG4gICAgICAgICAgICA8UmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgICAgICAgIHt6b29tT3B0aW9ucy5tYXAoKHpvb21WYWx1ZSkgPT4gKFxuICAgICAgICAgICAgICAgIDxQb3B1cExpc3QuQnV0dG9uXG4gICAgICAgICAgICAgICAgICBhY3RpdmU9e3pvb20gKiAxMDAgPT0gem9vbVZhbHVlfVxuICAgICAgICAgICAgICAgICAga2V5PXt6b29tVmFsdWV9XG4gICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHNldFpvb20oem9vbVZhbHVlIC8gMTAwKVxuICAgICAgICAgICAgICAgICAgICBjbG9zZSgpXG4gICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHt6b29tVmFsdWV9JVxuICAgICAgICAgICAgICAgIDwvUG9wdXBMaXN0LkJ1dHRvbj5cbiAgICAgICAgICAgICAgKSl9XG4gICAgICAgICAgICA8L1JlYWN0LkZyYWdtZW50PlxuICAgICAgICAgIDwvUG9wdXBMaXN0LkJ1dHRvbkdyb3VwPlxuICAgICAgICApfVxuICAgICAgICBzaG93U2Nyb2xsYmFyXG4gICAgICAgIHZlcnRpY2FsQWxpZ249XCJib3R0b21cIlxuICAgICAgLz5cbiAgICAgIDxhXG4gICAgICAgIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fZXh0ZXJuYWxgfVxuICAgICAgICBocmVmPXt1cmx9XG4gICAgICAgIG9uQ2xpY2s9eyhlKSA9PiB7XG4gICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpXG4gICAgICAgICAgc2V0UHJldmlld1dpbmRvd1R5cGUoJ3BvcHVwJylcbiAgICAgICAgfX1cbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICA+XG4gICAgICAgIDxMaW5rSWNvbiAvPlxuICAgICAgPC9hPlxuICAgIDwvZGl2PlxuICApXG59XG4iXSwibmFtZXMiOlsiVG9vbGJhckNvbnRyb2xzIiwiYmFzZUNsYXNzIiwiem9vbU9wdGlvbnMiLCJjdXN0b21PcHRpb24iLCJsYWJlbCIsInZhbHVlIiwiYnJlYWtwb2ludCIsImJyZWFrcG9pbnRzIiwic2V0QnJlYWtwb2ludCIsInNldFByZXZpZXdXaW5kb3dUeXBlIiwic2V0Wm9vbSIsInVybCIsInpvb20iLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJkaXYiLCJjbGFzc05hbWUiLCJsZW5ndGgiLCJQb3B1cCIsImJ1dHRvbiIsIlJlYWN0IiwiRnJhZ21lbnQiLCJzcGFuIiwiZmluZCIsImJwIiwibmFtZSIsIkNoZXZyb24iLCJob3Jpem9udGFsQWxpZ24iLCJyZW5kZXIiLCJjbG9zZSIsIlBvcHVwTGlzdCIsIkJ1dHRvbkdyb3VwIiwibWFwIiwiQnV0dG9uIiwiYWN0aXZlIiwia2V5Iiwib25DbGljayIsInNob3dTY3JvbGxiYXIiLCJ2ZXJ0aWNhbEFsaWduIiwiUHJldmlld0ZyYW1lU2l6ZUlucHV0IiwiYXhpcyIsIlgiLCJ6b29tVmFsdWUiLCJhIiwiaHJlZiIsImUiLCJwcmV2ZW50RGVmYXVsdCIsInR5cGUiLCJMaW5rSWNvbiJdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7OytCQWlCYUE7OztlQUFBQTs7O29CQWQwQzs4REFDckM7eUJBRW9COzJCQUNBO1FBQy9COzs7Ozs7QUFFUCxNQUFNQyxZQUFZO0FBQ2xCLE1BQU1DLGNBQWM7SUFBQztJQUFJO0lBQUk7SUFBSztJQUFLO0lBQUs7Q0FBSTtBQUNoRCxNQUFNQyxlQUFlO0lBQ25CQyxPQUFPO0lBQ1BDLE9BQU87QUFDVDtBQUVPLE1BQU1MLGtCQUEyQztJQUN0RCxNQUFNLEVBQUVNLFVBQVUsRUFBRUMsV0FBVyxFQUFFQyxhQUFhLEVBQUVDLG9CQUFvQixFQUFFQyxPQUFPLEVBQUVDLEdBQUcsRUFBRUMsSUFBSSxFQUFFLEdBQ3hGQyxJQUFBQSw4QkFBcUI7SUFFdkIscUJBQ0UsNkJBQUNDO1FBQUlDLFdBQVdkO09BQ2JNLGFBQWFTLFNBQVMsbUJBQ3JCLDZCQUFDQyxTQUFLO1FBQ0pDLHNCQUNFLDZCQUFDQyxjQUFLLENBQUNDLFFBQVEsc0JBQ2IsNkJBQUNDLGNBQ0VkLFlBQVllLElBQUksQ0FBQyxDQUFDQyxLQUFPQSxHQUFHQyxJQUFJLElBQUlsQixhQUFhRixTQUFTRCxhQUFhQyxLQUFLLEdBQ3hFLG1CQUVQLDZCQUFDcUIsV0FBTztZQUFDVixXQUFXLENBQUMsRUFBRWQsVUFBVSxTQUFTLENBQUM7O1FBRy9DYyxXQUFXLENBQUMsRUFBRWQsVUFBVSxZQUFZLENBQUM7UUFDckN5QixpQkFBZ0I7UUFDaEJDLFFBQVEsQ0FBQyxFQUFFQyxLQUFLLEVBQUUsaUJBQ2hCLDZCQUFDQyxhQUFTLENBQUNDLFdBQVcsc0JBQ3BCLDZCQUFDWCxjQUFLLENBQUNDLFFBQVEsUUFDWmIsWUFBWXdCLEdBQUcsQ0FBQyxDQUFDUixtQkFDaEIsNkJBQUNNLGFBQVMsQ0FBQ0csTUFBTTtvQkFDZkMsUUFBUVYsR0FBR0MsSUFBSSxJQUFJbEI7b0JBQ25CNEIsS0FBS1gsR0FBR0MsSUFBSTtvQkFDWlcsU0FBUzt3QkFDUDNCLGNBQWNlLEdBQUdDLElBQUk7d0JBQ3JCSTtvQkFDRjttQkFFQ0wsR0FBR25CLEtBQUssSUFJWkUsZUFBZSwwQkFDZCw2QkFBQ3VCLGFBQVMsQ0FBQ0csTUFBTTtnQkFDZkMsUUFBUTNCLGNBQWNILGFBQWFFLEtBQUs7Z0JBQ3hDOEIsU0FBUztvQkFDUDNCLGNBQWNMLGFBQWFFLEtBQUs7b0JBQ2hDdUI7Z0JBQ0Y7ZUFFQ3pCLGFBQWFDLEtBQUs7UUFNN0JnQyxlQUFBQTtRQUNBQyxlQUFjO3NCQUdsQiw2QkFBQ3ZCO1FBQUlDLFdBQVcsQ0FBQyxFQUFFZCxVQUFVLGFBQWEsQ0FBQztxQkFDekMsNkJBQUNxQyxnQ0FBcUI7UUFBQ0MsTUFBSztzQkFDNUIsNkJBQUNsQjtRQUFLTixXQUFXLENBQUMsRUFBRWQsVUFBVSxjQUFjLENBQUM7cUJBQzNDLDZCQUFDdUMsS0FBQyx3QkFFSiw2QkFBQ0YsZ0NBQXFCO1FBQUNDLE1BQUs7dUJBRTlCLDZCQUFDdEIsU0FBSztRQUNKQyxzQkFDRSw2QkFBQ0MsY0FBSyxDQUFDQyxRQUFRLHNCQUNiLDZCQUFDQyxjQUFNVCxPQUFPLEtBQUksTUFBUSxtQkFFMUIsNkJBQUNhLFdBQU87WUFBQ1YsV0FBVyxDQUFDLEVBQUVkLFVBQVUsU0FBUyxDQUFDOztRQUcvQ2MsV0FBVyxDQUFDLEVBQUVkLFVBQVUsTUFBTSxDQUFDO1FBQy9CeUIsaUJBQWdCO1FBQ2hCQyxRQUFRLENBQUMsRUFBRUMsS0FBSyxFQUFFLGlCQUNoQiw2QkFBQ0MsYUFBUyxDQUFDQyxXQUFXLHNCQUNwQiw2QkFBQ1gsY0FBSyxDQUFDQyxRQUFRLFFBQ1psQixZQUFZNkIsR0FBRyxDQUFDLENBQUNVLDBCQUNoQiw2QkFBQ1osYUFBUyxDQUFDRyxNQUFNO29CQUNmQyxRQUFRckIsT0FBTyxPQUFPNkI7b0JBQ3RCUCxLQUFLTztvQkFDTE4sU0FBUzt3QkFDUHpCLFFBQVErQixZQUFZO3dCQUNwQmI7b0JBQ0Y7bUJBRUNhLFdBQVU7UUFNckJMLGVBQUFBO1FBQ0FDLGVBQWM7c0JBRWhCLDZCQUFDSztRQUNDM0IsV0FBVyxDQUFDLEVBQUVkLFVBQVUsVUFBVSxDQUFDO1FBQ25DMEMsTUFBTWhDO1FBQ053QixTQUFTLENBQUNTO1lBQ1JBLEVBQUVDLGNBQWM7WUFDaEJwQyxxQkFBcUI7UUFDdkI7UUFDQXFDLE1BQUs7cUJBRUwsNkJBQUNDLFlBQVE7QUFJakIifQ==
+//# sourceMappingURL=index.js.map

package/dist/views/LivePreview/Toolbar/Controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/views/LivePreview/Toolbar/Controls/index.tsx"],"sourcesContent":["'use client'\n\nimport type { EditViewProps } from 'payload/types'\n\nimport { Popup, PopupList } from '@payloadcms/ui/elements/Popup'\nimport { Chevron } from '@payloadcms/ui/icons/Chevron'\nimport { LinkIcon } from '@payloadcms/ui/icons/Link'\nimport { X } from '@payloadcms/ui/icons/X'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport { PreviewFrameSizeInput } from '../SizeInput/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar-controls'\nconst zoomOptions = [50, 75, 100, 125, 150, 200]\nconst customOption = {\n  label: 'Custom', // TODO: Add i18n to this string\n  value: 'custom',\n}\n\nexport const ToolbarControls: React.FC<EditViewProps> = () => {\n  const { breakpoint, breakpoints, setBreakpoint, setPreviewWindowType, setZoom, url, zoom } =\n    useLivePreviewContext()\n\n  return (\n    <div className={baseClass}>\n      {breakpoints?.length > 0 && (\n        <Popup\n          button={\n            <React.Fragment>\n              <span>\n                {breakpoints.find((bp) => bp.name == breakpoint)?.label ?? customOption.label}\n              </span>\n              &nbsp;\n              <Chevron className={`${baseClass}__chevron`} />\n            </React.Fragment>\n          }\n          className={`${baseClass}__breakpoint`}\n          horizontalAlign=\"right\"\n          render={({ close }) => (\n            <PopupList.ButtonGroup>\n              <React.Fragment>\n                {breakpoints.map((bp) => (\n                  <PopupList.Button\n                    active={bp.name == breakpoint}\n                    key={bp.name}\n                    onClick={() => {\n                      setBreakpoint(bp.name)\n                      close()\n                    }}\n                  >\n                    {bp.label}\n                  </PopupList.Button>\n                ))}\n                {/* Dynamically add this option so that it only appears when the width and height inputs are explicitly changed */}\n                {breakpoint === 'custom' && (\n                  <PopupList.Button\n                    active={breakpoint == customOption.value}\n                    onClick={() => {\n                      setBreakpoint(customOption.value)\n                      close()\n                    }}\n                  >\n                    {customOption.label}\n                  </PopupList.Button>\n                )}\n              </React.Fragment>\n            </PopupList.ButtonGroup>\n          )}\n          showScrollbar\n          verticalAlign=\"bottom\"\n        />\n      )}\n      <div className={`${baseClass}__device-size`}>\n        <PreviewFrameSizeInput axis=\"x\" />\n        <span className={`${baseClass}__size-divider`}>\n          <X />\n        </span>\n        <PreviewFrameSizeInput axis=\"y\" />\n      </div>\n      <Popup\n        button={\n          <React.Fragment>\n            <span>{zoom * 100}%</span>\n            &nbsp;\n            <Chevron className={`${baseClass}__chevron`} />\n          </React.Fragment>\n        }\n        className={`${baseClass}__zoom`}\n        horizontalAlign=\"right\"\n        render={({ close }) => (\n          <PopupList.ButtonGroup>\n            <React.Fragment>\n              {zoomOptions.map((zoomValue) => (\n                <PopupList.Button\n                  active={zoom * 100 == zoomValue}\n                  key={zoomValue}\n                  onClick={() => {\n                    setZoom(zoomValue / 100)\n                    close()\n                  }}\n                >\n                  {zoomValue}%\n                </PopupList.Button>\n              ))}\n            </React.Fragment>\n          </PopupList.ButtonGroup>\n        )}\n        showScrollbar\n        verticalAlign=\"bottom\"\n      />\n      <a\n        className={`${baseClass}__external`}\n        href={url}\n        onClick={(e) => {\n          e.preventDefault()\n          setPreviewWindowType('popup')\n        }}\n        type=\"button\"\n      >\n        <LinkIcon />\n      </a>\n    </div>\n  )\n}\n"],"names":["Popup","PopupList","Chevron","LinkIcon","X","React","useLivePreviewContext","PreviewFrameSizeInput","baseClass","zoomOptions","customOption","label","value","ToolbarControls","breakpoint","breakpoints","setBreakpoint","setPreviewWindowType","setZoom","url","zoom","div","className","length","button","Fragment","span","find","bp","name","horizontalAlign","render","close","ButtonGroup","map","Button","active","key","onClick","showScrollbar","verticalAlign","axis","zoomValue","a","href","e","preventDefault","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,SAASA,KAAK,EAAEC,SAAS,QAAQ,gCAA+B;AAChE,SAASC,OAAO,QAAQ,+BAA8B;AACtD,SAASC,QAAQ,QAAQ,4BAA2B;AACpD,SAASC,CAAC,QAAQ,yBAAwB;AAC1C,OAAOC,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,2BAA0B;AAChE,SAASC,qBAAqB,QAAQ,wBAAuB;AAG7D,MAAMC,YAAY;AAClB,MAAMC,cAAc;IAAC;IAAI;IAAI;IAAK;IAAK;IAAK;CAAI;AAChD,MAAMC,eAAe;IACnBC,OAAO;IACPC,OAAO;AACT;AAEA,OAAO,MAAMC,kBAA2C;IACtD,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,aAAa,EAAEC,oBAAoB,EAAEC,OAAO,EAAEC,GAAG,EAAEC,IAAI,EAAE,GACxFd;IAEF,qBACE,oBAACe;QAAIC,WAAWd;OACbO,aAAaQ,SAAS,mBACrB,oBAACvB;QACCwB,sBACE,oBAACnB,MAAMoB,QAAQ,sBACb,oBAACC,cACEX,YAAYY,IAAI,CAAC,CAACC,KAAOA,GAAGC,IAAI,IAAIf,aAAaH,SAASD,aAAaC,KAAK,GACxE,mBAEP,oBAACT;YAAQoB,WAAW,CAAC,EAAEd,UAAU,SAAS,CAAC;;QAG/Cc,WAAW,CAAC,EAAEd,UAAU,YAAY,CAAC;QACrCsB,iBAAgB;QAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,oBAAC/B,UAAUgC,WAAW,sBACpB,oBAAC5B,MAAMoB,QAAQ,QACZV,YAAYmB,GAAG,CAAC,CAACN,mBAChB,oBAAC3B,UAAUkC,MAAM;oBACfC,QAAQR,GAAGC,IAAI,IAAIf;oBACnBuB,KAAKT,GAAGC,IAAI;oBACZS,SAAS;wBACPtB,cAAcY,GAAGC,IAAI;wBACrBG;oBACF;mBAECJ,GAAGjB,KAAK,IAIZG,eAAe,0BACd,oBAACb,UAAUkC,MAAM;gBACfC,QAAQtB,cAAcJ,aAAaE,KAAK;gBACxC0B,SAAS;oBACPtB,cAAcN,aAAaE,KAAK;oBAChCoB;gBACF;eAECtB,aAAaC,KAAK;QAM7B4B,eAAAA;QACAC,eAAc;sBAGlB,oBAACnB;QAAIC,WAAW,CAAC,EAAEd,UAAU,aAAa,CAAC;qBACzC,oBAACD;QAAsBkC,MAAK;sBAC5B,oBAACf;QAAKJ,WAAW,CAAC,EAAEd,UAAU,cAAc,CAAC;qBAC3C,oBAACJ,yBAEH,oBAACG;QAAsBkC,MAAK;uBAE9B,oBAACzC;QACCwB,sBACE,oBAACnB,MAAMoB,QAAQ,sBACb,oBAACC,cAAMN,OAAO,KAAI,MAAQ,mBAE1B,oBAAClB;YAAQoB,WAAW,CAAC,EAAEd,UAAU,SAAS,CAAC;;QAG/Cc,WAAW,CAAC,EAAEd,UAAU,MAAM,CAAC;QAC/BsB,iBAAgB;QAChBC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,oBAAC/B,UAAUgC,WAAW,sBACpB,oBAAC5B,MAAMoB,QAAQ,QACZhB,YAAYyB,GAAG,CAAC,CAACQ,0BAChB,oBAACzC,UAAUkC,MAAM;oBACfC,QAAQhB,OAAO,OAAOsB;oBACtBL,KAAKK;oBACLJ,SAAS;wBACPpB,QAAQwB,YAAY;wBACpBV;oBACF;mBAECU,WAAU;QAMrBH,eAAAA;QACAC,eAAc;sBAEhB,oBAACG;QACCrB,WAAW,CAAC,EAAEd,UAAU,UAAU,CAAC;QACnCoC,MAAMzB;QACNmB,SAAS,CAACO;YACRA,EAAEC,cAAc;YAChB7B,qBAAqB;QACvB;QACA8B,MAAK;qBAEL,oBAAC5C;AAIT,EAAC"}

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

@@ -1,66 +1,14 @@
 'use client';
-"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;
-}
+import React, { useCallback, useEffect } from 'react';
+import { useLivePreviewContext } from '../../Context/context.js';
 const baseClass = 'toolbar-input';
-const PreviewFrameSizeInput = (props)=>{
+export 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);
+    const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } = useLivePreviewContext();
+    const [internalState, setInternalState] = React.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)=>{
+    const handleChange = useCallback((e)=>{
         let newValue = Number(e.target.value);
         if (newValue < 0) newValue = 0;
         setInternalState(newValue);
@@ -83,7 +31,7 @@ const PreviewFrameSizeInput = (props)=>{
     ]);
     // 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)(()=>{
+    useEffect(()=>{
         if (breakpoint === 'responsive' && measuredDeviceSize) {
             if (axis === 'x') setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom);
             else setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom);
@@ -98,7 +46,7 @@ const PreviewFrameSizeInput = (props)=>{
         size,
         zoom
     ]);
-    return /*#__PURE__*/ _react.default.createElement("input", {
+    return /*#__PURE__*/ React.createElement("input", {
         className: baseClass,
         min: 0,
         name: axis === 'x' ? 'live-preview-width' : 'live-preview-height',
@@ -109,4 +57,4 @@ const PreviewFrameSizeInput = (props)=>{
     });
 };
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy92aWV3cy9MaXZlUHJldmlldy9Ub29sYmFyL1NpemVJbnB1dC9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi8uLi9Db250ZXh0L2NvbnRleHQnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ3Rvb2xiYXItaW5wdXQnXG5cbmV4cG9ydCBjb25zdCBQcmV2aWV3RnJhbWVTaXplSW5wdXQ6IFJlYWN0LkZDPHtcbiAgYXhpcz86ICd4JyB8ICd5J1xufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBheGlzIH0gPSBwcm9wc1xuXG4gIGNvbnN0IHsgYnJlYWtwb2ludCwgbWVhc3VyZWREZXZpY2VTaXplLCBzZXRCcmVha3BvaW50LCBzZXRTaXplLCBzaXplLCB6b29tIH0gPVxuICAgIHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgW2ludGVybmFsU3RhdGUsIHNldEludGVybmFsU3RhdGVdID0gUmVhY3QudXNlU3RhdGU8bnVtYmVyPihcbiAgICAoYXhpcyA9PT0gJ3gnID8gbWVhc3VyZWREZXZpY2VTaXplPy53aWR0aCA6IG1lYXN1cmVkRGV2aWNlU2l6ZT8uaGVpZ2h0KSB8fCAwLFxuICApXG5cbiAgLy8gd2hlbiB0aGUgaW5wdXQgaXMgY2hhbmdlZCBtYW51YWxseSwgd2UgbmVlZCB0byBzZXQgdGhlIGJyZWFrcG9pbnQgYXMgYGN1c3RvbWBcbiAgLy8gdGhpcyB3aWxsIHRoZW4gYWxsb3cgdXMgdG8gc2V0IGFuIGV4cGxpY2l0IHdpZHRoIGFuZCBoZWlnaHRcbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgKGU6IFJlYWN0LkNoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgICBsZXQgbmV3VmFsdWUgPSBOdW1iZXIoZS50YXJnZXQudmFsdWUpXG5cbiAgICAgIGlmIChuZXdWYWx1ZSA8IDApIG5ld1ZhbHVlID0gMFxuXG4gICAgICBzZXRJbnRlcm5hbFN0YXRlKG5ld1ZhbHVlKVxuICAgICAgc2V0QnJlYWtwb2ludCgnY3VzdG9tJylcblxuICAgICAgLy8gYmUgc3VyZSB0byBzZXQgX2JvdGhfIGF4aXMgdmFsdWVzIHRvIHNvIHRoYXQgdGhlIG90aGVyIGF4aXMgZG9lc24ndCBmYWxsYmFjayB0byAwIG9uIGluaXRpYWwgY2hhbmdlXG4gICAgICAvLyB0aGlzIGlzIGJlY2F1c2UgdGhlIGByZXNwb25zaXZlYCBzaXplIGlzICcxMDAlJyBpbiBDU1MsIGFuZCBgMGAgaW4gaW5pdGlhbCBzdGF0ZVxuICAgICAgc2V0U2l6ZSh7XG4gICAgICAgIHR5cGU6ICdyZXNldCcsXG4gICAgICAgIHZhbHVlOiB7XG4gICAgICAgICAgaGVpZ2h0OiBheGlzID09PSAneScgPyBuZXdWYWx1ZSA6IE51bWJlcihtZWFzdXJlZERldmljZVNpemU/LmhlaWdodC50b0ZpeGVkKDApKSAqIHpvb20sXG4gICAgICAgICAgd2lkdGg6IGF4aXMgPT09ICd4JyA/IG5ld1ZhbHVlIDogTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZT8ud2lkdGgudG9GaXhlZCgwKSkgKiB6b29tLFxuICAgICAgICB9LFxuICAgICAgfSlcbiAgICB9LFxuICAgIFtheGlzLCBzZXRCcmVha3BvaW50LCBtZWFzdXJlZERldmljZVNpemUsIHNldFNpemUsIHpvb21dLFxuICApXG5cbiAgLy8gaWYgdGhlIGJyZWFrcG9pbnQgaXMgYHJlc3BvbnNpdmVgIHRoZW4gdGhlIGRldmljZSdzIGRpdiB3aWxsIGhhdmUgYDEwMCVgIHdpZHRoIGFuZCBoZWlnaHRcbiAgLy8gc28gd2UgbmVlZCB0byB0YWtlIHRoZSBtZWFzdXJlbWVudHMgcHJvdmlkZWQgYnkgYGFjdHVhbERldmljZVNpemVgIGFuZCBzeW5jIGludGVybmFsIHN0YXRlXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGJyZWFrcG9pbnQgPT09ICdyZXNwb25zaXZlJyAmJiBtZWFzdXJlZERldmljZVNpemUpIHtcbiAgICAgIGlmIChheGlzID09PSAneCcpIHNldEludGVybmFsU3RhdGUoTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZS53aWR0aC50b0ZpeGVkKDApKSAqIHpvb20pXG4gICAgICBlbHNlIHNldEludGVybmFsU3RhdGUoTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZS5oZWlnaHQudG9GaXhlZCgwKSkgKiB6b29tKVxuICAgIH1cblxuICAgIGlmIChicmVha3BvaW50ICE9PSAncmVzcG9uc2l2ZScgJiYgc2l6ZSkge1xuICAgICAgc2V0SW50ZXJuYWxTdGF0ZShheGlzID09PSAneCcgPyBzaXplLndpZHRoIDogc2l6ZS5oZWlnaHQpXG4gICAgfVxuICB9LCBbYnJlYWtwb2ludCwgYXhpcywgbWVhc3VyZWREZXZpY2VTaXplLCBzaXplLCB6b29tXSlcblxuICByZXR1cm4gKFxuICAgIDxpbnB1dFxuICAgICAgY2xhc3NOYW1lPXtiYXNlQ2xhc3N9XG4gICAgICBtaW49ezB9XG4gICAgICBuYW1lPXtheGlzID09PSAneCcgPyAnbGl2ZS1wcmV2aWV3LXdpZHRoJyA6ICdsaXZlLXByZXZpZXctaGVpZ2h0J31cbiAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICBzdGVwPXsxfVxuICAgICAgdHlwZT1cIm51bWJlclwiXG4gICAgICB2YWx1ZT17aW50ZXJuYWxTdGF0ZSB8fCAwfVxuICAgIC8+XG4gIClcbn1cbiJdLCJuYW1lcyI6WyJQcmV2aWV3RnJhbWVTaXplSW5wdXQiLCJiYXNlQ2xhc3MiLCJwcm9wcyIsImF4aXMiLCJicmVha3BvaW50IiwibWVhc3VyZWREZXZpY2VTaXplIiwic2V0QnJlYWtwb2ludCIsInNldFNpemUiLCJzaXplIiwiem9vbSIsInVzZUxpdmVQcmV2aWV3Q29udGV4dCIsImludGVybmFsU3RhdGUiLCJzZXRJbnRlcm5hbFN0YXRlIiwiUmVhY3QiLCJ1c2VTdGF0ZSIsIndpZHRoIiwiaGVpZ2h0IiwiaGFuZGxlQ2hhbmdlIiwidXNlQ2FsbGJhY2siLCJlIiwibmV3VmFsdWUiLCJOdW1iZXIiLCJ0YXJnZXQiLCJ2YWx1ZSIsInR5cGUiLCJ0b0ZpeGVkIiwidXNlRWZmZWN0IiwiaW5wdXQiLCJjbGFzc05hbWUiLCJtaW4iLCJuYW1lIiwib25DaGFuZ2UiLCJzdGVwIl0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7K0JBUWFBOzs7ZUFBQUE7OzsrREFQaUM7eUJBRVI7UUFDL0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUVQLE1BQU1DLFlBQVk7QUFFWCxNQUFNRCx3QkFFUixDQUFDRTtJQUNKLE1BQU0sRUFBRUMsSUFBSSxFQUFFLEdBQUdEO0lBRWpCLE1BQU0sRUFBRUUsVUFBVSxFQUFFQyxrQkFBa0IsRUFBRUMsYUFBYSxFQUFFQyxPQUFPLEVBQUVDLElBQUksRUFBRUMsSUFBSSxFQUFFLEdBQzFFQyxJQUFBQSw4QkFBcUI7SUFFdkIsTUFBTSxDQUFDQyxlQUFlQyxpQkFBaUIsR0FBR0MsY0FBSyxDQUFDQyxRQUFRLENBQ3RELEFBQUNYLENBQUFBLFNBQVMsTUFBTUUsb0JBQW9CVSxRQUFRVixvQkFBb0JXLE1BQUssS0FBTTtJQUc3RSxnRkFBZ0Y7SUFDaEYsOERBQThEO0lBQzlELE1BQU1DLGVBQWVDLElBQUFBLGtCQUFXLEVBQzlCLENBQUNDO1FBQ0MsSUFBSUMsV0FBV0MsT0FBT0YsRUFBRUcsTUFBTSxDQUFDQyxLQUFLO1FBRXBDLElBQUlILFdBQVcsR0FBR0EsV0FBVztRQUU3QlIsaUJBQWlCUTtRQUNqQmQsY0FBYztRQUVkLHNHQUFzRztRQUN0RyxtRkFBbUY7UUFDbkZDLFFBQVE7WUFDTmlCLE1BQU07WUFDTkQsT0FBTztnQkFDTFAsUUFBUWIsU0FBUyxNQUFNaUIsV0FBV0MsT0FBT2hCLG9CQUFvQlcsT0FBT1MsUUFBUSxNQUFNaEI7Z0JBQ2xGTSxPQUFPWixTQUFTLE1BQU1pQixXQUFXQyxPQUFPaEIsb0JBQW9CVSxNQUFNVSxRQUFRLE1BQU1oQjtZQUNsRjtRQUNGO0lBQ0YsR0FDQTtRQUFDTjtRQUFNRztRQUFlRDtRQUFvQkU7UUFBU0U7S0FBSztJQUcxRCw0RkFBNEY7SUFDNUYsNkZBQTZGO0lBQzdGaUIsSUFBQUEsZ0JBQVMsRUFBQztRQUNSLElBQUl0QixlQUFlLGdCQUFnQkMsb0JBQW9CO1lBQ3JELElBQUlGLFNBQVMsS0FBS1MsaUJBQWlCUyxPQUFPaEIsbUJBQW1CVSxLQUFLLENBQUNVLE9BQU8sQ0FBQyxNQUFNaEI7aUJBQzVFRyxpQkFBaUJTLE9BQU9oQixtQkFBbUJXLE1BQU0sQ0FBQ1MsT0FBTyxDQUFDLE1BQU1oQjtRQUN2RTtRQUVBLElBQUlMLGVBQWUsZ0JBQWdCSSxNQUFNO1lBQ3ZDSSxpQkFBaUJULFNBQVMsTUFBTUssS0FBS08sS0FBSyxHQUFHUCxLQUFLUSxNQUFNO1FBQzFEO0lBQ0YsR0FBRztRQUFDWjtRQUFZRDtRQUFNRTtRQUFvQkc7UUFBTUM7S0FBSztJQUVyRCxxQkFDRSw2QkFBQ2tCO1FBQ0NDLFdBQVczQjtRQUNYNEIsS0FBSztRQUNMQyxNQUFNM0IsU0FBUyxNQUFNLHVCQUF1QjtRQUM1QzRCLFVBQVVkO1FBQ1ZlLE1BQU07UUFDTlIsTUFBSztRQUNMRCxPQUFPWixpQkFBaUI7O0FBRzlCIn0=
+//# sourceMappingURL=index.js.map

package/dist/views/LivePreview/Toolbar/SizeInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/views/LivePreview/Toolbar/SizeInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect } from 'react'\n\nimport { useLivePreviewContext } from '../../Context/context.js'\nimport './index.scss'\n\nconst baseClass = 'toolbar-input'\n\nexport const PreviewFrameSizeInput: React.FC<{\n  axis?: 'x' | 'y'\n}> = (props) => {\n  const { axis } = props\n\n  const { breakpoint, measuredDeviceSize, setBreakpoint, setSize, size, zoom } =\n    useLivePreviewContext()\n\n  const [internalState, setInternalState] = React.useState<number>(\n    (axis === 'x' ? measuredDeviceSize?.width : measuredDeviceSize?.height) || 0,\n  )\n\n  // when the input is changed manually, we need to set the breakpoint as `custom`\n  // this will then allow us to set an explicit width and height\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      let newValue = Number(e.target.value)\n\n      if (newValue < 0) newValue = 0\n\n      setInternalState(newValue)\n      setBreakpoint('custom')\n\n      // be sure to set _both_ axis values to so that the other axis doesn't fallback to 0 on initial change\n      // this is because the `responsive` size is '100%' in CSS, and `0` in initial state\n      setSize({\n        type: 'reset',\n        value: {\n          height: axis === 'y' ? newValue : Number(measuredDeviceSize?.height.toFixed(0)) * zoom,\n          width: axis === 'x' ? newValue : Number(measuredDeviceSize?.width.toFixed(0)) * zoom,\n        },\n      })\n    },\n    [axis, setBreakpoint, measuredDeviceSize, setSize, zoom],\n  )\n\n  // if the breakpoint is `responsive` then the device's div will have `100%` width and height\n  // so we need to take the measurements provided by `actualDeviceSize` and sync internal state\n  useEffect(() => {\n    if (breakpoint === 'responsive' && measuredDeviceSize) {\n      if (axis === 'x') setInternalState(Number(measuredDeviceSize.width.toFixed(0)) * zoom)\n      else setInternalState(Number(measuredDeviceSize.height.toFixed(0)) * zoom)\n    }\n\n    if (breakpoint !== 'responsive' && size) {\n      setInternalState(axis === 'x' ? size.width : size.height)\n    }\n  }, [breakpoint, axis, measuredDeviceSize, size, zoom])\n\n  return (\n    <input\n      className={baseClass}\n      min={0}\n      name={axis === 'x' ? 'live-preview-width' : 'live-preview-height'}\n      onChange={handleChange}\n      step={1}\n      type=\"number\"\n      value={internalState || 0}\n    />\n  )\n}\n"],"names":["React","useCallback","useEffect","useLivePreviewContext","baseClass","PreviewFrameSizeInput","props","axis","breakpoint","measuredDeviceSize","setBreakpoint","setSize","size","zoom","internalState","setInternalState","useState","width","height","handleChange","e","newValue","Number","target","value","type","toFixed","input","className","min","name","onChange","step"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,OAAOA,SAASC,WAAW,EAAEC,SAAS,QAAQ,QAAO;AAErD,SAASC,qBAAqB,QAAQ,2BAA0B;AAGhE,MAAMC,YAAY;AAElB,OAAO,MAAMC,wBAER,CAACC;IACJ,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAM,EAAEE,UAAU,EAAEC,kBAAkB,EAAEC,aAAa,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAC1EV;IAEF,MAAM,CAACW,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CACtD,AAACT,CAAAA,SAAS,MAAME,oBAAoBQ,QAAQR,oBAAoBS,MAAK,KAAM;IAG7E,gFAAgF;IAChF,8DAA8D;IAC9D,MAAMC,eAAelB,YACnB,CAACmB;QACC,IAAIC,WAAWC,OAAOF,EAAEG,MAAM,CAACC,KAAK;QAEpC,IAAIH,WAAW,GAAGA,WAAW;QAE7BN,iBAAiBM;QACjBX,cAAc;QAEd,sGAAsG;QACtG,mFAAmF;QACnFC,QAAQ;YACNc,MAAM;YACND,OAAO;gBACLN,QAAQX,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBS,OAAOQ,QAAQ,MAAMb;gBAClFI,OAAOV,SAAS,MAAMc,WAAWC,OAAOb,oBAAoBQ,MAAMS,QAAQ,MAAMb;YAClF;QACF;IACF,GACA;QAACN;QAAMG;QAAeD;QAAoBE;QAASE;KAAK;IAG1D,4FAA4F;IAC5F,6FAA6F;IAC7FX,UAAU;QACR,IAAIM,eAAe,gBAAgBC,oBAAoB;YACrD,IAAIF,SAAS,KAAKQ,iBAAiBO,OAAOb,mBAAmBQ,KAAK,CAACS,OAAO,CAAC,MAAMb;iBAC5EE,iBAAiBO,OAAOb,mBAAmBS,MAAM,CAACQ,OAAO,CAAC,MAAMb;QACvE;QAEA,IAAIL,eAAe,gBAAgBI,MAAM;YACvCG,iBAAiBR,SAAS,MAAMK,KAAKK,KAAK,GAAGL,KAAKM,MAAM;QAC1D;IACF,GAAG;QAACV;QAAYD;QAAME;QAAoBG;QAAMC;KAAK;IAErD,qBACE,oBAACc;QACCC,WAAWxB;QACXyB,KAAK;QACLC,MAAMvB,SAAS,MAAM,uBAAuB;QAC5CwB,UAAUZ;QACVa,MAAM;QACNP,MAAK;QACLD,OAAOV,iBAAiB;;AAG9B,EAAC"}

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

@@ -1,4 +1,4 @@
-import type { EditViewProps } from 'payload/config';
+import type { EditViewProps } from 'payload/types';
 import React from 'react';
 import './index.scss';
 export declare const LivePreviewToolbar: React.FC<EditViewProps & {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAInD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAgDrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,aAAa,GAAG;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CASF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAIlD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,cAAc,CAAA;AAgDrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CACvC,aAAa,GAAG;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CASF,CAAA"}

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

@@ -1,32 +1,16 @@
 'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "LivePreviewToolbar", {
-    enumerable: true,
-    get: function() {
-        return LivePreviewToolbar;
-    }
-});
-const _core = require("@dnd-kit/core");
-const _ui = require("@payloadcms/ui");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-const _context = require("../Context/context");
-const _Controls = require("./Controls");
-require("./index.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+import { useDraggable } from '@dnd-kit/core';
+import { DragHandle } from '@payloadcms/ui/icons/DragHandle';
+import React from 'react';
+import { useLivePreviewContext } from '../Context/context.js';
+import { ToolbarControls } from './Controls/index.js';
 const baseClass = 'live-preview-toolbar';
 const DraggableToolbar = (props)=>{
-    const { toolbarPosition } = (0, _context.useLivePreviewContext)();
-    const { attributes, listeners, setNodeRef, transform } = (0, _core.useDraggable)({
+    const { toolbarPosition } = useLivePreviewContext();
+    const { attributes, listeners, setNodeRef, transform } = useDraggable({
         id: 'live-preview-toolbar'
     });
-    return /*#__PURE__*/ _react.default.createElement("div", {
+    return /*#__PURE__*/ React.createElement("div", {
         className: [
             baseClass,
             `${baseClass}--draggable`
@@ -38,28 +22,28 @@ const DraggableToolbar = (props)=>{
                 transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
             } : {}
         }
-    }, /*#__PURE__*/ _react.default.createElement("button", {
+    }, /*#__PURE__*/ React.createElement("button", {
         ...listeners,
         ...attributes,
         className: `${baseClass}__drag-handle`,
         ref: setNodeRef,
         type: "button"
-    }, /*#__PURE__*/ _react.default.createElement(_ui.DragHandle, null)), /*#__PURE__*/ _react.default.createElement(_Controls.ToolbarControls, props));
+    }, /*#__PURE__*/ React.createElement(DragHandle, null)), /*#__PURE__*/ React.createElement(ToolbarControls, props));
 };
 const StaticToolbar = (props)=>{
-    return /*#__PURE__*/ _react.default.createElement("div", {
+    return /*#__PURE__*/ React.createElement("div", {
         className: [
             baseClass,
             `${baseClass}--static`
         ].join(' ')
-    }, /*#__PURE__*/ _react.default.createElement(_Controls.ToolbarControls, props));
+    }, /*#__PURE__*/ React.createElement(ToolbarControls, props));
 };
-const LivePreviewToolbar = (props)=>{
+export const LivePreviewToolbar = (props)=>{
     const { draggable } = props;
     if (draggable) {
-        return /*#__PURE__*/ _react.default.createElement(DraggableToolbar, props);
+        return /*#__PURE__*/ React.createElement(DraggableToolbar, props);
     }
-    return /*#__PURE__*/ _react.default.createElement(StaticToolbar, props);
+    return /*#__PURE__*/ React.createElement(StaticToolbar, props);
 };
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy92aWV3cy9MaXZlUHJldmlldy9Ub29sYmFyL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcbmltcG9ydCB0eXBlIHsgRWRpdFZpZXdQcm9wcyB9IGZyb20gJ3BheWxvYWQvY29uZmlnJ1xuXG5pbXBvcnQgeyB1c2VEcmFnZ2FibGUgfSBmcm9tICdAZG5kLWtpdC9jb3JlJ1xuaW1wb3J0IHsgRHJhZ0hhbmRsZSB9IGZyb20gJ0BwYXlsb2FkY21zL3VpJ1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi9Db250ZXh0L2NvbnRleHQnXG5pbXBvcnQgeyBUb29sYmFyQ29udHJvbHMgfSBmcm9tICcuL0NvbnRyb2xzJ1xuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGJhc2VDbGFzcyA9ICdsaXZlLXByZXZpZXctdG9vbGJhcidcblxuY29uc3QgRHJhZ2dhYmxlVG9vbGJhcjogUmVhY3QuRkM8RWRpdFZpZXdQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyB0b29sYmFyUG9zaXRpb24gfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgeyBhdHRyaWJ1dGVzLCBsaXN0ZW5lcnMsIHNldE5vZGVSZWYsIHRyYW5zZm9ybSB9ID0gdXNlRHJhZ2dhYmxlKHtcbiAgICBpZDogJ2xpdmUtcHJldmlldy10b29sYmFyJyxcbiAgfSlcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNsYXNzTmFtZT17W2Jhc2VDbGFzcywgYCR7YmFzZUNsYXNzfS0tZHJhZ2dhYmxlYF0uam9pbignICcpfVxuICAgICAgc3R5bGU9e3tcbiAgICAgICAgbGVmdDogYCR7dG9vbGJhclBvc2l0aW9uLnh9cHhgLFxuICAgICAgICB0b3A6IGAke3Rvb2xiYXJQb3NpdGlvbi55fXB4YCxcbiAgICAgICAgLi4uKHRyYW5zZm9ybVxuICAgICAgICAgID8ge1xuICAgICAgICAgICAgICB0cmFuc2Zvcm06IHRyYW5zZm9ybVxuICAgICAgICAgICAgICAgID8gYHRyYW5zbGF0ZTNkKCR7dHJhbnNmb3JtPy54IHx8IDB9cHgsICR7dHJhbnNmb3JtPy55IHx8IDB9cHgsIDApYFxuICAgICAgICAgICAgICAgIDogdW5kZWZpbmVkLFxuICAgICAgICAgICAgfVxuICAgICAgICAgIDoge30pLFxuICAgICAgfX1cbiAgICA+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIHsuLi5saXN0ZW5lcnN9XG4gICAgICAgIHsuLi5hdHRyaWJ1dGVzfVxuICAgICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2RyYWctaGFuZGxlYH1cbiAgICAgICAgcmVmPXtzZXROb2RlUmVmfVxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgID5cbiAgICAgICAgPERyYWdIYW5kbGUgLz5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPFRvb2xiYXJDb250cm9scyB7Li4ucHJvcHN9IC8+XG4gICAgPC9kaXY+XG4gIClcbn1cblxuY29uc3QgU3RhdGljVG9vbGJhcjogUmVhY3QuRkM8RWRpdFZpZXdQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17W2Jhc2VDbGFzcywgYCR7YmFzZUNsYXNzfS0tc3RhdGljYF0uam9pbignICcpfT5cbiAgICAgIDxUb29sYmFyQ29udHJvbHMgey4uLnByb3BzfSAvPlxuICAgIDwvZGl2PlxuICApXG59XG5cbmV4cG9ydCBjb25zdCBMaXZlUHJldmlld1Rvb2xiYXI6IFJlYWN0LkZDPFxuICBFZGl0Vmlld1Byb3BzICYge1xuICAgIGRyYWdnYWJsZT86IGJvb2xlYW5cbiAgfVxuPiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB7IGRyYWdnYWJsZSB9ID0gcHJvcHNcblxuICBpZiAoZHJhZ2dhYmxlKSB7XG4gICAgcmV0dXJuIDxEcmFnZ2FibGVUb29sYmFyIHsuLi5wcm9wc30gLz5cbiAgfVxuXG4gIHJldHVybiA8U3RhdGljVG9vbGJhciB7Li4ucHJvcHN9IC8+XG59XG4iXSwibmFtZXMiOlsiTGl2ZVByZXZpZXdUb29sYmFyIiwiYmFzZUNsYXNzIiwiRHJhZ2dhYmxlVG9vbGJhciIsInByb3BzIiwidG9vbGJhclBvc2l0aW9uIiwidXNlTGl2ZVByZXZpZXdDb250ZXh0IiwiYXR0cmlidXRlcyIsImxpc3RlbmVycyIsInNldE5vZGVSZWYiLCJ0cmFuc2Zvcm0iLCJ1c2VEcmFnZ2FibGUiLCJpZCIsImRpdiIsImNsYXNzTmFtZSIsImpvaW4iLCJzdHlsZSIsImxlZnQiLCJ4IiwidG9wIiwieSIsInVuZGVmaW5lZCIsImJ1dHRvbiIsInJlZiIsInR5cGUiLCJEcmFnSGFuZGxlIiwiVG9vbGJhckNvbnRyb2xzIiwiU3RhdGljVG9vbGJhciIsImRyYWdnYWJsZSJdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7OytCQXlEYUE7OztlQUFBQTs7O3NCQXREZ0I7b0JBQ0Y7OERBQ1Q7eUJBRW9COzBCQUNOO1FBQ3pCOzs7Ozs7QUFFUCxNQUFNQyxZQUFZO0FBRWxCLE1BQU1DLG1CQUE0QyxDQUFDQztJQUNqRCxNQUFNLEVBQUVDLGVBQWUsRUFBRSxHQUFHQyxJQUFBQSw4QkFBcUI7SUFFakQsTUFBTSxFQUFFQyxVQUFVLEVBQUVDLFNBQVMsRUFBRUMsVUFBVSxFQUFFQyxTQUFTLEVBQUUsR0FBR0MsSUFBQUEsa0JBQVksRUFBQztRQUNwRUMsSUFBSTtJQUNOO0lBRUEscUJBQ0UsNkJBQUNDO1FBQ0NDLFdBQVc7WUFBQ1o7WUFBVyxDQUFDLEVBQUVBLFVBQVUsV0FBVyxDQUFDO1NBQUMsQ0FBQ2EsSUFBSSxDQUFDO1FBQ3ZEQyxPQUFPO1lBQ0xDLE1BQU0sQ0FBQyxFQUFFWixnQkFBZ0JhLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDOUJDLEtBQUssQ0FBQyxFQUFFZCxnQkFBZ0JlLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDN0IsR0FBSVYsWUFDQTtnQkFDRUEsV0FBV0EsWUFDUCxDQUFDLFlBQVksRUFBRUEsV0FBV1EsS0FBSyxFQUFFLElBQUksRUFBRVIsV0FBV1UsS0FBSyxFQUFFLE1BQU0sQ0FBQyxHQUNoRUM7WUFDTixJQUNBLENBQUMsQ0FBQztRQUNSO3FCQUVBLDZCQUFDQztRQUNFLEdBQUdkLFNBQVM7UUFDWixHQUFHRCxVQUFVO1FBQ2RPLFdBQVcsQ0FBQyxFQUFFWixVQUFVLGFBQWEsQ0FBQztRQUN0Q3FCLEtBQUtkO1FBQ0xlLE1BQUs7cUJBRUwsNkJBQUNDLGNBQVUsd0JBRWIsNkJBQUNDLHlCQUFlLEVBQUt0QjtBQUczQjtBQUVBLE1BQU11QixnQkFBeUMsQ0FBQ3ZCO0lBQzlDLHFCQUNFLDZCQUFDUztRQUFJQyxXQUFXO1lBQUNaO1lBQVcsQ0FBQyxFQUFFQSxVQUFVLFFBQVEsQ0FBQztTQUFDLENBQUNhLElBQUksQ0FBQztxQkFDdkQsNkJBQUNXLHlCQUFlLEVBQUt0QjtBQUczQjtBQUVPLE1BQU1ILHFCQUlULENBQUNHO0lBQ0gsTUFBTSxFQUFFd0IsU0FBUyxFQUFFLEdBQUd4QjtJQUV0QixJQUFJd0IsV0FBVztRQUNiLHFCQUFPLDZCQUFDekIsa0JBQXFCQztJQUMvQjtJQUVBLHFCQUFPLDZCQUFDdUIsZUFBa0J2QjtBQUM1QiJ9
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/Toolbar/index.tsx"],"sourcesContent":["'use client'\nimport type { EditViewProps } from 'payload/types'\n\nimport { useDraggable } from '@dnd-kit/core'\nimport { DragHandle } from '@payloadcms/ui/icons/DragHandle'\nimport React from 'react'\n\nimport { useLivePreviewContext } from '../Context/context.js'\nimport { ToolbarControls } from './Controls/index.js'\nimport './index.scss'\n\nconst baseClass = 'live-preview-toolbar'\n\nconst DraggableToolbar: React.FC<EditViewProps> = (props) => {\n  const { toolbarPosition } = useLivePreviewContext()\n\n  const { attributes, listeners, setNodeRef, transform } = useDraggable({\n    id: 'live-preview-toolbar',\n  })\n\n  return (\n    <div\n      className={[baseClass, `${baseClass}--draggable`].join(' ')}\n      style={{\n        left: `${toolbarPosition.x}px`,\n        top: `${toolbarPosition.y}px`,\n        ...(transform\n          ? {\n              transform: transform\n                ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)`\n                : undefined,\n            }\n          : {}),\n      }}\n    >\n      <button\n        {...listeners}\n        {...attributes}\n        className={`${baseClass}__drag-handle`}\n        ref={setNodeRef}\n        type=\"button\"\n      >\n        <DragHandle />\n      </button>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nconst StaticToolbar: React.FC<EditViewProps> = (props) => {\n  return (\n    <div className={[baseClass, `${baseClass}--static`].join(' ')}>\n      <ToolbarControls {...props} />\n    </div>\n  )\n}\n\nexport const LivePreviewToolbar: React.FC<\n  EditViewProps & {\n    draggable?: boolean\n  }\n> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggableToolbar {...props} />\n  }\n\n  return <StaticToolbar {...props} />\n}\n"],"names":["useDraggable","DragHandle","React","useLivePreviewContext","ToolbarControls","baseClass","DraggableToolbar","props","toolbarPosition","attributes","listeners","setNodeRef","transform","id","div","className","join","style","left","x","top","y","undefined","button","ref","type","StaticToolbar","LivePreviewToolbar","draggable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAGA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,SAASC,UAAU,QAAQ,kCAAiC;AAC5D,OAAOC,WAAW,QAAO;AAEzB,SAASC,qBAAqB,QAAQ,wBAAuB;AAC7D,SAASC,eAAe,QAAQ,sBAAqB;AAGrD,MAAMC,YAAY;AAElB,MAAMC,mBAA4C,CAACC;IACjD,MAAM,EAAEC,eAAe,EAAE,GAAGL;IAE5B,MAAM,EAAEM,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGZ,aAAa;QACpEa,IAAI;IACN;IAEA,qBACE,oBAACC;QACCC,WAAW;YAACV;YAAW,CAAC,EAAEA,UAAU,WAAW,CAAC;SAAC,CAACW,IAAI,CAAC;QACvDC,OAAO;YACLC,MAAM,CAAC,EAAEV,gBAAgBW,CAAC,CAAC,EAAE,CAAC;YAC9BC,KAAK,CAAC,EAAEZ,gBAAgBa,CAAC,CAAC,EAAE,CAAC;YAC7B,GAAIT,YACA;gBACEA,WAAWA,YACP,CAAC,YAAY,EAAEA,WAAWO,KAAK,EAAE,IAAI,EAAEP,WAAWS,KAAK,EAAE,MAAM,CAAC,GAChEC;YACN,IACA,CAAC,CAAC;QACR;qBAEA,oBAACC;QACE,GAAGb,SAAS;QACZ,GAAGD,UAAU;QACdM,WAAW,CAAC,EAAEV,UAAU,aAAa,CAAC;QACtCmB,KAAKb;QACLc,MAAK;qBAEL,oBAACxB,kCAEH,oBAACG,iBAAoBG;AAG3B;AAEA,MAAMmB,gBAAyC,CAACnB;IAC9C,qBACE,oBAACO;QAAIC,WAAW;YAACV;YAAW,CAAC,EAAEA,UAAU,QAAQ,CAAC;SAAC,CAACW,IAAI,CAAC;qBACvD,oBAACZ,iBAAoBG;AAG3B;AAEA,OAAO,MAAMoB,qBAIT,CAACpB;IACH,MAAM,EAAEqB,SAAS,EAAE,GAAGrB;IAEtB,IAAIqB,WAAW;QACb,qBAAO,oBAACtB,kBAAqBC;IAC/B;IAEA,qBAAO,oBAACmB,eAAkBnB;AAC5B,EAAC"}

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

@@ -1,32 +1,16 @@
 'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "ToolbarArea", {
-    enumerable: true,
-    get: function() {
-        return ToolbarArea;
-    }
-});
-const _core = require("@dnd-kit/core");
-const _react = /*#__PURE__*/ _interop_require_default(require("react"));
-require("./index.scss");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
+import { useDroppable } from '@dnd-kit/core';
+import React from 'react';
 const baseClass = 'toolbar-area';
-const ToolbarArea = (props)=>{
+export const ToolbarArea = (props)=>{
     const { children } = props;
-    const { setNodeRef } = (0, _core.useDroppable)({
+    const { setNodeRef } = useDroppable({
         id: 'live-preview-area'
     });
-    return /*#__PURE__*/ _react.default.createElement("div", {
+    return /*#__PURE__*/ React.createElement("div", {
         className: baseClass,
         ref: setNodeRef
     }, children);
 };
 
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy92aWV3cy9MaXZlUHJldmlldy9Ub29sYmFyQXJlYS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5pbXBvcnQgeyB1c2VEcm9wcGFibGUgfSBmcm9tICdAZG5kLWtpdC9jb3JlJ1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ3Rvb2xiYXItYXJlYSdcblxuZXhwb3J0IGNvbnN0IFRvb2xiYXJBcmVhOiBSZWFjdC5GQzx7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGVcbn0+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHsgY2hpbGRyZW4gfSA9IHByb3BzXG5cbiAgY29uc3QgeyBzZXROb2RlUmVmIH0gPSB1c2VEcm9wcGFibGUoe1xuICAgIGlkOiAnbGl2ZS1wcmV2aWV3LWFyZWEnLFxuICB9KVxuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2Jhc2VDbGFzc30gcmVmPXtzZXROb2RlUmVmfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKVxufVxuIl0sIm5hbWVzIjpbIlRvb2xiYXJBcmVhIiwiYmFzZUNsYXNzIiwicHJvcHMiLCJjaGlsZHJlbiIsInNldE5vZGVSZWYiLCJ1c2VEcm9wcGFibGUiLCJpZCIsImRpdiIsImNsYXNzTmFtZSIsInJlZiJdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7OytCQVFhQTs7O2VBQUFBOzs7c0JBUGdCOzhEQUNYO1FBRVg7Ozs7OztBQUVQLE1BQU1DLFlBQVk7QUFFWCxNQUFNRCxjQUVSLENBQUNFO0lBQ0osTUFBTSxFQUFFQyxRQUFRLEVBQUUsR0FBR0Q7SUFFckIsTUFBTSxFQUFFRSxVQUFVLEVBQUUsR0FBR0MsSUFBQUEsa0JBQVksRUFBQztRQUNsQ0MsSUFBSTtJQUNOO0lBRUEscUJBQ0UsNkJBQUNDO1FBQUlDLFdBQVdQO1FBQVdRLEtBQUtMO09BQzdCRDtBQUdQIn0=
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/views/LivePreview/ToolbarArea/index.tsx"],"sourcesContent":["'use client'\nimport { useDroppable } from '@dnd-kit/core'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'toolbar-area'\n\nexport const ToolbarArea: React.FC<{\n  children: React.ReactNode\n}> = (props) => {\n  const { children } = props\n\n  const { setNodeRef } = useDroppable({\n    id: 'live-preview-area',\n  })\n\n  return (\n    <div className={baseClass} ref={setNodeRef}>\n      {children}\n    </div>\n  )\n}\n"],"names":["useDroppable","React","baseClass","ToolbarArea","props","children","setNodeRef","id","div","className","ref"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,YAAY,QAAQ,gBAAe;AAC5C,OAAOC,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAER,CAACC;IACJ,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,MAAM,EAAEE,UAAU,EAAE,GAAGN,aAAa;QAClCO,IAAI;IACN;IAEA,qBACE,oBAACC;QAAIC,WAAWP;QAAWQ,KAAKJ;OAC7BD;AAGP,EAAC"}

package/dist/views/LivePreview/index.client.d.ts

@@ -1,11 +1,10 @@
-import type { EditViewProps, LivePreviewConfig } from 'payload/config';
+import type { LivePreviewConfig } from 'payload/config';
 import type { Data } from 'payload/types';
 import React from 'react';
 import './index.scss';
-export declare const LivePreviewClient: React.FC<EditViewProps & {
+export declare const LivePreviewClient: React.FC<{
     breakpoints: LivePreviewConfig['breakpoints'];
     initialData: Data;
-    livePreviewConfig: LivePreviewConfig;
     url: string;
 }>;
 //# sourceMappingURL=index.client.d.ts.map