@payloadcms/next 3.0.0-alpha.0

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

@@ -0,0 +1,96 @@
+'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
+    };
+}
+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(_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, {
+            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, {
+                    active: bp.name == breakpoint,
+                    key: bp.name,
+                    onClick: ()=>{
+                        setBreakpoint(bp.name);
+                        close();
+                    }
+                }, bp.label)), breakpoint === 'custom' && /*#__PURE__*/ _react.default.createElement(_ui.PopupList.Button, {
+                active: breakpoint == customOption.value,
+                onClick: ()=>{
+                    setBreakpoint(customOption.value);
+                    close();
+                }
+            }, customOption.label))),
+        showScrollbar: true,
+        verticalAlign: "bottom"
+    }), /*#__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(_ui.X, null)), /*#__PURE__*/ _react.default.createElement(_SizeInput.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, {
+            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, {
+                    active: zoom * 100 == zoomValue,
+                    key: zoomValue,
+                    onClick: ()=>{
+                        setZoom(zoomValue / 100);
+                        close();
+                    }
+                }, zoomValue, "%")))),
+        showScrollbar: true,
+        verticalAlign: "bottom"
+    }), /*#__PURE__*/ _react.default.createElement("a", {
+        className: `${baseClass}__external`,
+        href: url,
+        onClick: (e)=>{
+            e.preventDefault();
+            setPreviewWindowType('popup');
+        },
+        type: "button"
+    }, /*#__PURE__*/ _react.default.createElement(_ui.LinkIcon, null)));
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9wYWdlcy9MaXZlUHJldmlldy9Ub29sYmFyL0NvbnRyb2xzL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcbmltcG9ydCB0eXBlIHsgRWRpdFZpZXdQcm9wcyB9IGZyb20gJ3BheWxvYWQvY29uZmlnJ1xuXG5pbXBvcnQgeyBDaGV2cm9uLCBMaW5rSWNvbiwgUG9wdXAsIFBvcHVwTGlzdCwgWCB9IGZyb20gJ0BwYXlsb2FkY21zL3VpJ1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi8uLi9Db250ZXh0L2NvbnRleHQnXG5pbXBvcnQgeyBQcmV2aWV3RnJhbWVTaXplSW5wdXQgfSBmcm9tICcuLi9TaXplSW5wdXQnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ2xpdmUtcHJldmlldy10b29sYmFyLWNvbnRyb2xzJ1xuY29uc3Qgem9vbU9wdGlvbnMgPSBbNTAsIDc1LCAxMDAsIDEyNSwgMTUwLCAyMDBdXG5jb25zdCBjdXN0b21PcHRpb24gPSB7XG4gIGxhYmVsOiAnQ3VzdG9tJywgLy8gVE9ETzogQWRkIGkxOG4gdG8gdGhpcyBzdHJpbmdcbiAgdmFsdWU6ICdjdXN0b20nLFxufVxuXG5leHBvcnQgY29uc3QgVG9vbGJhckNvbnRyb2xzOiBSZWFjdC5GQzxFZGl0Vmlld1Byb3BzPiA9ICgpID0+IHtcbiAgY29uc3QgeyBicmVha3BvaW50LCBicmVha3BvaW50cywgc2V0QnJlYWtwb2ludCwgc2V0UHJldmlld1dpbmRvd1R5cGUsIHNldFpvb20sIHVybCwgem9vbSB9ID1cbiAgICB1c2VMaXZlUHJldmlld0NvbnRleHQoKVxuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2Jhc2VDbGFzc30+XG4gICAgICB7YnJlYWtwb2ludHM/Lmxlbmd0aCA+IDAgJiYgKFxuICAgICAgICA8UG9wdXBcbiAgICAgICAgICBidXR0b249e1xuICAgICAgICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgICA8c3Bhbj5cbiAgICAgICAgICAgICAgICB7YnJlYWtwb2ludHMuZmluZCgoYnApID0+IGJwLm5hbWUgPT0gYnJlYWtwb2ludCk/LmxhYmVsID8/IGN1c3RvbU9wdGlvbi5sYWJlbH1cbiAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgICAmbmJzcDtcbiAgICAgICAgICAgICAgPENoZXZyb24gY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19jaGV2cm9uYH0gLz5cbiAgICAgICAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgICAgfVxuICAgICAgICAgIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fYnJlYWtwb2ludGB9XG4gICAgICAgICAgaG9yaXpvbnRhbEFsaWduPVwicmlnaHRcIlxuICAgICAgICAgIHJlbmRlcj17KHsgY2xvc2UgfSkgPT4gKFxuICAgICAgICAgICAgPFBvcHVwTGlzdC5CdXR0b25Hcm91cD5cbiAgICAgICAgICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgICAgIHticmVha3BvaW50cy5tYXAoKGJwKSA9PiAoXG4gICAgICAgICAgICAgICAgICA8UG9wdXBMaXN0LkJ1dHRvblxuICAgICAgICAgICAgICAgICAgICBhY3RpdmU9e2JwLm5hbWUgPT0gYnJlYWtwb2ludH1cbiAgICAgICAgICAgICAgICAgICAga2V5PXticC5uYW1lfVxuICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgc2V0QnJlYWtwb2ludChicC5uYW1lKVxuICAgICAgICAgICAgICAgICAgICAgIGNsb3NlKClcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAge2JwLmxhYmVsfVxuICAgICAgICAgICAgICAgICAgPC9Qb3B1cExpc3QuQnV0dG9uPlxuICAgICAgICAgICAgICAgICkpfVxuICAgICAgICAgICAgICAgIHsvKiBEeW5hbWljYWxseSBhZGQgdGhpcyBvcHRpb24gc28gdGhhdCBpdCBvbmx5IGFwcGVhcnMgd2hlbiB0aGUgd2lkdGggYW5kIGhlaWdodCBpbnB1dHMgYXJlIGV4cGxpY2l0bHkgY2hhbmdlZCAqL31cbiAgICAgICAgICAgICAgICB7YnJlYWtwb2ludCA9PT0gJ2N1c3RvbScgJiYgKFxuICAgICAgICAgICAgICAgICAgPFBvcHVwTGlzdC5CdXR0b25cbiAgICAgICAgICAgICAgICAgICAgYWN0aXZlPXticmVha3BvaW50ID09IGN1c3RvbU9wdGlvbi52YWx1ZX1cbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgIHNldEJyZWFrcG9pbnQoY3VzdG9tT3B0aW9uLnZhbHVlKVxuICAgICAgICAgICAgICAgICAgICAgIGNsb3NlKClcbiAgICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgICAge2N1c3RvbU9wdGlvbi5sYWJlbH1cbiAgICAgICAgICAgICAgICAgIDwvUG9wdXBMaXN0LkJ1dHRvbj5cbiAgICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICA8L1JlYWN0LkZyYWdtZW50PlxuICAgICAgICAgICAgPC9Qb3B1cExpc3QuQnV0dG9uR3JvdXA+XG4gICAgICAgICAgKX1cbiAgICAgICAgICBzaG93U2Nyb2xsYmFyXG4gICAgICAgICAgdmVydGljYWxBbGlnbj1cImJvdHRvbVwiXG4gICAgICAgIC8+XG4gICAgICApfVxuICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2RldmljZS1zaXplYH0+XG4gICAgICAgIDxQcmV2aWV3RnJhbWVTaXplSW5wdXQgYXhpcz1cInhcIiAvPlxuICAgICAgICA8c3BhbiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3NpemUtZGl2aWRlcmB9PlxuICAgICAgICAgIDxYIC8+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPFByZXZpZXdGcmFtZVNpemVJbnB1dCBheGlzPVwieVwiIC8+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxQb3B1cFxuICAgICAgICBidXR0b249e1xuICAgICAgICAgIDxSZWFjdC5GcmFnbWVudD5cbiAgICAgICAgICAgIDxzcGFuPnt6b29tICogMTAwfSU8L3NwYW4+XG4gICAgICAgICAgICAmbmJzcDtcbiAgICAgICAgICAgIDxDaGV2cm9uIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fY2hldnJvbmB9IC8+XG4gICAgICAgICAgPC9SZWFjdC5GcmFnbWVudD5cbiAgICAgICAgfVxuICAgICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX3pvb21gfVxuICAgICAgICBob3Jpem9udGFsQWxpZ249XCJyaWdodFwiXG4gICAgICAgIHJlbmRlcj17KHsgY2xvc2UgfSkgPT4gKFxuICAgICAgICAgIDxQb3B1cExpc3QuQnV0dG9uR3JvdXA+XG4gICAgICAgICAgICA8UmVhY3QuRnJhZ21lbnQ+XG4gICAgICAgICAgICAgIHt6b29tT3B0aW9ucy5tYXAoKHpvb21WYWx1ZSkgPT4gKFxuICAgICAgICAgICAgICAgIDxQb3B1cExpc3QuQnV0dG9uXG4gICAgICAgICAgICAgICAgICBhY3RpdmU9e3pvb20gKiAxMDAgPT0gem9vbVZhbHVlfVxuICAgICAgICAgICAgICAgICAga2V5PXt6b29tVmFsdWV9XG4gICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIHNldFpvb20oem9vbVZhbHVlIC8gMTAwKVxuICAgICAgICAgICAgICAgICAgICBjbG9zZSgpXG4gICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIHt6b29tVmFsdWV9JVxuICAgICAgICAgICAgICAgIDwvUG9wdXBMaXN0LkJ1dHRvbj5cbiAgICAgICAgICAgICAgKSl9XG4gICAgICAgICAgICA8L1JlYWN0LkZyYWdtZW50PlxuICAgICAgICAgIDwvUG9wdXBMaXN0LkJ1dHRvbkdyb3VwPlxuICAgICAgICApfVxuICAgICAgICBzaG93U2Nyb2xsYmFyXG4gICAgICAgIHZlcnRpY2FsQWxpZ249XCJib3R0b21cIlxuICAgICAgLz5cbiAgICAgIDxhXG4gICAgICAgIGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fZXh0ZXJuYWxgfVxuICAgICAgICBocmVmPXt1cmx9XG4gICAgICAgIG9uQ2xpY2s9eyhlKSA9PiB7XG4gICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpXG4gICAgICAgICAgc2V0UHJldmlld1dpbmRvd1R5cGUoJ3BvcHVwJylcbiAgICAgICAgfX1cbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICA+XG4gICAgICAgIDxMaW5rSWNvbiAvPlxuICAgICAgPC9hPlxuICAgIDwvZGl2PlxuICApXG59XG4iXSwibmFtZXMiOlsiVG9vbGJhckNvbnRyb2xzIiwiYmFzZUNsYXNzIiwiem9vbU9wdGlvbnMiLCJjdXN0b21PcHRpb24iLCJsYWJlbCIsInZhbHVlIiwiYnJlYWtwb2ludCIsImJyZWFrcG9pbnRzIiwic2V0QnJlYWtwb2ludCIsInNldFByZXZpZXdXaW5kb3dUeXBlIiwic2V0Wm9vbSIsInVybCIsInpvb20iLCJ1c2VMaXZlUHJldmlld0NvbnRleHQiLCJkaXYiLCJjbGFzc05hbWUiLCJsZW5ndGgiLCJQb3B1cCIsImJ1dHRvbiIsIlJlYWN0IiwiRnJhZ21lbnQiLCJzcGFuIiwiZmluZCIsImJwIiwibmFtZSIsIkNoZXZyb24iLCJob3Jpem9udGFsQWxpZ24iLCJyZW5kZXIiLCJjbG9zZSIsIlBvcHVwTGlzdCIsIkJ1dHRvbkdyb3VwIiwibWFwIiwiQnV0dG9uIiwiYWN0aXZlIiwia2V5Iiwib25DbGljayIsInNob3dTY3JvbGxiYXIiLCJ2ZXJ0aWNhbEFsaWduIiwiUHJldmlld0ZyYW1lU2l6ZUlucHV0IiwiYXhpcyIsIlgiLCJ6b29tVmFsdWUiLCJhIiwiaHJlZiIsImUiLCJwcmV2ZW50RGVmYXVsdCIsInR5cGUiLCJMaW5rSWNvbiJdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7OytCQWlCYUE7OztlQUFBQTs7O29CQWQwQzs4REFDckM7eUJBRW9COzJCQUNBO1FBQy9COzs7Ozs7QUFFUCxNQUFNQyxZQUFZO0FBQ2xCLE1BQU1DLGNBQWM7SUFBQztJQUFJO0lBQUk7SUFBSztJQUFLO0lBQUs7Q0FBSTtBQUNoRCxNQUFNQyxlQUFlO0lBQ25CQyxPQUFPO0lBQ1BDLE9BQU87QUFDVDtBQUVPLE1BQU1MLGtCQUEyQztJQUN0RCxNQUFNLEVBQUVNLFVBQVUsRUFBRUMsV0FBVyxFQUFFQyxhQUFhLEVBQUVDLG9CQUFvQixFQUFFQyxPQUFPLEVBQUVDLEdBQUcsRUFBRUMsSUFBSSxFQUFFLEdBQ3hGQyxJQUFBQSw4QkFBcUI7SUFFdkIscUJBQ0UsNkJBQUNDO1FBQUlDLFdBQVdkO09BQ2JNLGFBQWFTLFNBQVMsbUJBQ3JCLDZCQUFDQyxTQUFLO1FBQ0pDLHNCQUNFLDZCQUFDQyxjQUFLLENBQUNDLFFBQVEsc0JBQ2IsNkJBQUNDLGNBQ0VkLFlBQVllLElBQUksQ0FBQyxDQUFDQyxLQUFPQSxHQUFHQyxJQUFJLElBQUlsQixhQUFhRixTQUFTRCxhQUFhQyxLQUFLLEdBQ3hFLG1CQUVQLDZCQUFDcUIsV0FBTztZQUFDVixXQUFXLENBQUMsRUFBRWQsVUFBVSxTQUFTLENBQUM7O1FBRy9DYyxXQUFXLENBQUMsRUFBRWQsVUFBVSxZQUFZLENBQUM7UUFDckN5QixpQkFBZ0I7UUFDaEJDLFFBQVEsQ0FBQyxFQUFFQyxLQUFLLEVBQUUsaUJBQ2hCLDZCQUFDQyxhQUFTLENBQUNDLFdBQVcsc0JBQ3BCLDZCQUFDWCxjQUFLLENBQUNDLFFBQVEsUUFDWmIsWUFBWXdCLEdBQUcsQ0FBQyxDQUFDUixtQkFDaEIsNkJBQUNNLGFBQVMsQ0FBQ0csTUFBTTtvQkFDZkMsUUFBUVYsR0FBR0MsSUFBSSxJQUFJbEI7b0JBQ25CNEIsS0FBS1gsR0FBR0MsSUFBSTtvQkFDWlcsU0FBUzt3QkFDUDNCLGNBQWNlLEdBQUdDLElBQUk7d0JBQ3JCSTtvQkFDRjttQkFFQ0wsR0FBR25CLEtBQUssSUFJWkUsZUFBZSwwQkFDZCw2QkFBQ3VCLGFBQVMsQ0FBQ0csTUFBTTtnQkFDZkMsUUFBUTNCLGNBQWNILGFBQWFFLEtBQUs7Z0JBQ3hDOEIsU0FBUztvQkFDUDNCLGNBQWNMLGFBQWFFLEtBQUs7b0JBQ2hDdUI7Z0JBQ0Y7ZUFFQ3pCLGFBQWFDLEtBQUs7UUFNN0JnQyxlQUFBQTtRQUNBQyxlQUFjO3NCQUdsQiw2QkFBQ3ZCO1FBQUlDLFdBQVcsQ0FBQyxFQUFFZCxVQUFVLGFBQWEsQ0FBQztxQkFDekMsNkJBQUNxQyxnQ0FBcUI7UUFBQ0MsTUFBSztzQkFDNUIsNkJBQUNsQjtRQUFLTixXQUFXLENBQUMsRUFBRWQsVUFBVSxjQUFjLENBQUM7cUJBQzNDLDZCQUFDdUMsS0FBQyx3QkFFSiw2QkFBQ0YsZ0NBQXFCO1FBQUNDLE1BQUs7dUJBRTlCLDZCQUFDdEIsU0FBSztRQUNKQyxzQkFDRSw2QkFBQ0MsY0FBSyxDQUFDQyxRQUFRLHNCQUNiLDZCQUFDQyxjQUFNVCxPQUFPLEtBQUksTUFBUSxtQkFFMUIsNkJBQUNhLFdBQU87WUFBQ1YsV0FBVyxDQUFDLEVBQUVkLFVBQVUsU0FBUyxDQUFDOztRQUcvQ2MsV0FBVyxDQUFDLEVBQUVkLFVBQVUsTUFBTSxDQUFDO1FBQy9CeUIsaUJBQWdCO1FBQ2hCQyxRQUFRLENBQUMsRUFBRUMsS0FBSyxFQUFFLGlCQUNoQiw2QkFBQ0MsYUFBUyxDQUFDQyxXQUFXLHNCQUNwQiw2QkFBQ1gsY0FBSyxDQUFDQyxRQUFRLFFBQ1psQixZQUFZNkIsR0FBRyxDQUFDLENBQUNVLDBCQUNoQiw2QkFBQ1osYUFBUyxDQUFDRyxNQUFNO29CQUNmQyxRQUFRckIsT0FBTyxPQUFPNkI7b0JBQ3RCUCxLQUFLTztvQkFDTE4sU0FBUzt3QkFDUHpCLFFBQVErQixZQUFZO3dCQUNwQmI7b0JBQ0Y7bUJBRUNhLFdBQVU7UUFNckJMLGVBQUFBO1FBQ0FDLGVBQWM7c0JBRWhCLDZCQUFDSztRQUNDM0IsV0FBVyxDQUFDLEVBQUVkLFVBQVUsVUFBVSxDQUFDO1FBQ25DMEMsTUFBTWhDO1FBQ053QixTQUFTLENBQUNTO1lBQ1JBLEVBQUVDLGNBQWM7WUFDaEJwQyxxQkFBcUI7UUFDdkI7UUFDQXFDLE1BQUs7cUJBRUwsNkJBQUNDLFlBQVE7QUFJakIifQ==

package/dist/pages/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/dist/pages/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/dist/pages/LivePreview/Toolbar/SizeInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/pages/LivePreview/Toolbar/SizeInput/index.tsx"],"names":[],"mappings":"AACA,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/dist/pages/LivePreview/Toolbar/SizeInput/index.js

@@ -0,0 +1,112 @@
+'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;
+}
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9wYWdlcy9MaXZlUHJldmlldy9Ub29sYmFyL1NpemVJbnB1dC9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5pbXBvcnQgUmVhY3QsIHsgdXNlQ2FsbGJhY2ssIHVzZUVmZmVjdCB9IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi8uLi9Db250ZXh0L2NvbnRleHQnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ3Rvb2xiYXItaW5wdXQnXG5cbmV4cG9ydCBjb25zdCBQcmV2aWV3RnJhbWVTaXplSW5wdXQ6IFJlYWN0LkZDPHtcbiAgYXhpcz86ICd4JyB8ICd5J1xufT4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBheGlzIH0gPSBwcm9wc1xuXG4gIGNvbnN0IHsgYnJlYWtwb2ludCwgbWVhc3VyZWREZXZpY2VTaXplLCBzZXRCcmVha3BvaW50LCBzZXRTaXplLCBzaXplLCB6b29tIH0gPVxuICAgIHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgW2ludGVybmFsU3RhdGUsIHNldEludGVybmFsU3RhdGVdID0gUmVhY3QudXNlU3RhdGU8bnVtYmVyPihcbiAgICAoYXhpcyA9PT0gJ3gnID8gbWVhc3VyZWREZXZpY2VTaXplPy53aWR0aCA6IG1lYXN1cmVkRGV2aWNlU2l6ZT8uaGVpZ2h0KSB8fCAwLFxuICApXG5cbiAgLy8gd2hlbiB0aGUgaW5wdXQgaXMgY2hhbmdlZCBtYW51YWxseSwgd2UgbmVlZCB0byBzZXQgdGhlIGJyZWFrcG9pbnQgYXMgYGN1c3RvbWBcbiAgLy8gdGhpcyB3aWxsIHRoZW4gYWxsb3cgdXMgdG8gc2V0IGFuIGV4cGxpY2l0IHdpZHRoIGFuZCBoZWlnaHRcbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgKGU6IFJlYWN0LkNoYW5nZUV2ZW50PEhUTUxJbnB1dEVsZW1lbnQ+KSA9PiB7XG4gICAgICBsZXQgbmV3VmFsdWUgPSBOdW1iZXIoZS50YXJnZXQudmFsdWUpXG5cbiAgICAgIGlmIChuZXdWYWx1ZSA8IDApIG5ld1ZhbHVlID0gMFxuXG4gICAgICBzZXRJbnRlcm5hbFN0YXRlKG5ld1ZhbHVlKVxuICAgICAgc2V0QnJlYWtwb2ludCgnY3VzdG9tJylcblxuICAgICAgLy8gYmUgc3VyZSB0byBzZXQgX2JvdGhfIGF4aXMgdmFsdWVzIHRvIHNvIHRoYXQgdGhlIG90aGVyIGF4aXMgZG9lc24ndCBmYWxsYmFjayB0byAwIG9uIGluaXRpYWwgY2hhbmdlXG4gICAgICAvLyB0aGlzIGlzIGJlY2F1c2UgdGhlIGByZXNwb25zaXZlYCBzaXplIGlzICcxMDAlJyBpbiBDU1MsIGFuZCBgMGAgaW4gaW5pdGlhbCBzdGF0ZVxuICAgICAgc2V0U2l6ZSh7XG4gICAgICAgIHR5cGU6ICdyZXNldCcsXG4gICAgICAgIHZhbHVlOiB7XG4gICAgICAgICAgaGVpZ2h0OiBheGlzID09PSAneScgPyBuZXdWYWx1ZSA6IE51bWJlcihtZWFzdXJlZERldmljZVNpemU/LmhlaWdodC50b0ZpeGVkKDApKSAqIHpvb20sXG4gICAgICAgICAgd2lkdGg6IGF4aXMgPT09ICd4JyA/IG5ld1ZhbHVlIDogTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZT8ud2lkdGgudG9GaXhlZCgwKSkgKiB6b29tLFxuICAgICAgICB9LFxuICAgICAgfSlcbiAgICB9LFxuICAgIFtheGlzLCBzZXRCcmVha3BvaW50LCBtZWFzdXJlZERldmljZVNpemUsIHNldFNpemUsIHpvb21dLFxuICApXG5cbiAgLy8gaWYgdGhlIGJyZWFrcG9pbnQgaXMgYHJlc3BvbnNpdmVgIHRoZW4gdGhlIGRldmljZSdzIGRpdiB3aWxsIGhhdmUgYDEwMCVgIHdpZHRoIGFuZCBoZWlnaHRcbiAgLy8gc28gd2UgbmVlZCB0byB0YWtlIHRoZSBtZWFzdXJlbWVudHMgcHJvdmlkZWQgYnkgYGFjdHVhbERldmljZVNpemVgIGFuZCBzeW5jIGludGVybmFsIHN0YXRlXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGJyZWFrcG9pbnQgPT09ICdyZXNwb25zaXZlJyAmJiBtZWFzdXJlZERldmljZVNpemUpIHtcbiAgICAgIGlmIChheGlzID09PSAneCcpIHNldEludGVybmFsU3RhdGUoTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZS53aWR0aC50b0ZpeGVkKDApKSAqIHpvb20pXG4gICAgICBlbHNlIHNldEludGVybmFsU3RhdGUoTnVtYmVyKG1lYXN1cmVkRGV2aWNlU2l6ZS5oZWlnaHQudG9GaXhlZCgwKSkgKiB6b29tKVxuICAgIH1cblxuICAgIGlmIChicmVha3BvaW50ICE9PSAncmVzcG9uc2l2ZScgJiYgc2l6ZSkge1xuICAgICAgc2V0SW50ZXJuYWxTdGF0ZShheGlzID09PSAneCcgPyBzaXplLndpZHRoIDogc2l6ZS5oZWlnaHQpXG4gICAgfVxuICB9LCBbYnJlYWtwb2ludCwgYXhpcywgbWVhc3VyZWREZXZpY2VTaXplLCBzaXplLCB6b29tXSlcblxuICByZXR1cm4gKFxuICAgIDxpbnB1dFxuICAgICAgY2xhc3NOYW1lPXtiYXNlQ2xhc3N9XG4gICAgICBtaW49ezB9XG4gICAgICBuYW1lPXtheGlzID09PSAneCcgPyAnbGl2ZS1wcmV2aWV3LXdpZHRoJyA6ICdsaXZlLXByZXZpZXctaGVpZ2h0J31cbiAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICBzdGVwPXsxfVxuICAgICAgdHlwZT1cIm51bWJlclwiXG4gICAgICB2YWx1ZT17aW50ZXJuYWxTdGF0ZSB8fCAwfVxuICAgIC8+XG4gIClcbn1cbiJdLCJuYW1lcyI6WyJQcmV2aWV3RnJhbWVTaXplSW5wdXQiLCJiYXNlQ2xhc3MiLCJwcm9wcyIsImF4aXMiLCJicmVha3BvaW50IiwibWVhc3VyZWREZXZpY2VTaXplIiwic2V0QnJlYWtwb2ludCIsInNldFNpemUiLCJzaXplIiwiem9vbSIsInVzZUxpdmVQcmV2aWV3Q29udGV4dCIsImludGVybmFsU3RhdGUiLCJzZXRJbnRlcm5hbFN0YXRlIiwiUmVhY3QiLCJ1c2VTdGF0ZSIsIndpZHRoIiwiaGVpZ2h0IiwiaGFuZGxlQ2hhbmdlIiwidXNlQ2FsbGJhY2siLCJlIiwibmV3VmFsdWUiLCJOdW1iZXIiLCJ0YXJnZXQiLCJ2YWx1ZSIsInR5cGUiLCJ0b0ZpeGVkIiwidXNlRWZmZWN0IiwiaW5wdXQiLCJjbGFzc05hbWUiLCJtaW4iLCJuYW1lIiwib25DaGFuZ2UiLCJzdGVwIl0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7K0JBUWFBOzs7ZUFBQUE7OzsrREFQaUM7eUJBRVI7UUFDL0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUVQLE1BQU1DLFlBQVk7QUFFWCxNQUFNRCx3QkFFUixDQUFDRTtJQUNKLE1BQU0sRUFBRUMsSUFBSSxFQUFFLEdBQUdEO0lBRWpCLE1BQU0sRUFBRUUsVUFBVSxFQUFFQyxrQkFBa0IsRUFBRUMsYUFBYSxFQUFFQyxPQUFPLEVBQUVDLElBQUksRUFBRUMsSUFBSSxFQUFFLEdBQzFFQyxJQUFBQSw4QkFBcUI7SUFFdkIsTUFBTSxDQUFDQyxlQUFlQyxpQkFBaUIsR0FBR0MsY0FBSyxDQUFDQyxRQUFRLENBQ3RELEFBQUNYLENBQUFBLFNBQVMsTUFBTUUsb0JBQW9CVSxRQUFRVixvQkFBb0JXLE1BQUssS0FBTTtJQUc3RSxnRkFBZ0Y7SUFDaEYsOERBQThEO0lBQzlELE1BQU1DLGVBQWVDLElBQUFBLGtCQUFXLEVBQzlCLENBQUNDO1FBQ0MsSUFBSUMsV0FBV0MsT0FBT0YsRUFBRUcsTUFBTSxDQUFDQyxLQUFLO1FBRXBDLElBQUlILFdBQVcsR0FBR0EsV0FBVztRQUU3QlIsaUJBQWlCUTtRQUNqQmQsY0FBYztRQUVkLHNHQUFzRztRQUN0RyxtRkFBbUY7UUFDbkZDLFFBQVE7WUFDTmlCLE1BQU07WUFDTkQsT0FBTztnQkFDTFAsUUFBUWIsU0FBUyxNQUFNaUIsV0FBV0MsT0FBT2hCLG9CQUFvQlcsT0FBT1MsUUFBUSxNQUFNaEI7Z0JBQ2xGTSxPQUFPWixTQUFTLE1BQU1pQixXQUFXQyxPQUFPaEIsb0JBQW9CVSxNQUFNVSxRQUFRLE1BQU1oQjtZQUNsRjtRQUNGO0lBQ0YsR0FDQTtRQUFDTjtRQUFNRztRQUFlRDtRQUFvQkU7UUFBU0U7S0FBSztJQUcxRCw0RkFBNEY7SUFDNUYsNkZBQTZGO0lBQzdGaUIsSUFBQUEsZ0JBQVMsRUFBQztRQUNSLElBQUl0QixlQUFlLGdCQUFnQkMsb0JBQW9CO1lBQ3JELElBQUlGLFNBQVMsS0FBS1MsaUJBQWlCUyxPQUFPaEIsbUJBQW1CVSxLQUFLLENBQUNVLE9BQU8sQ0FBQyxNQUFNaEI7aUJBQzVFRyxpQkFBaUJTLE9BQU9oQixtQkFBbUJXLE1BQU0sQ0FBQ1MsT0FBTyxDQUFDLE1BQU1oQjtRQUN2RTtRQUVBLElBQUlMLGVBQWUsZ0JBQWdCSSxNQUFNO1lBQ3ZDSSxpQkFBaUJULFNBQVMsTUFBTUssS0FBS08sS0FBSyxHQUFHUCxLQUFLUSxNQUFNO1FBQzFEO0lBQ0YsR0FBRztRQUFDWjtRQUFZRDtRQUFNRTtRQUFvQkc7UUFBTUM7S0FBSztJQUVyRCxxQkFDRSw2QkFBQ2tCO1FBQ0NDLFdBQVczQjtRQUNYNEIsS0FBSztRQUNMQyxNQUFNM0IsU0FBUyxNQUFNLHVCQUF1QjtRQUM1QzRCLFVBQVVkO1FBQ1ZlLE1BQU07UUFDTlIsTUFBSztRQUNMRCxPQUFPWixpQkFBaUI7O0FBRzlCIn0=

package/dist/pages/LivePreview/Toolbar/SizeInput/index.scss

@@ -0,0 +1,10 @@
+.toolbar-input {
+  width: 50px;
+  height: var(--base);
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--theme-elevation-200);
+  background: var(--theme-elevation-100);
+  border-radius: 2px;
+  font-size: small;
+}

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

@@ -0,0 +1,7 @@
+import type { EditViewProps } from 'payload/config';
+import React from 'react';
+import './index.scss';
+export declare const LivePreviewToolbar: React.FC<EditViewProps & {
+    draggable?: boolean;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/pages/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"}

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

@@ -0,0 +1,65 @@
+'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
+    };
+}
+const baseClass = 'live-preview-toolbar';
+const DraggableToolbar = (props)=>{
+    const { toolbarPosition } = (0, _context.useLivePreviewContext)();
+    const { attributes, listeners, setNodeRef, transform } = (0, _core.useDraggable)({
+        id: 'live-preview-toolbar'
+    });
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: [
+            baseClass,
+            `${baseClass}--draggable`
+        ].join(' '),
+        style: {
+            left: `${toolbarPosition.x}px`,
+            top: `${toolbarPosition.y}px`,
+            ...transform ? {
+                transform: transform ? `translate3d(${transform?.x || 0}px, ${transform?.y || 0}px, 0)` : undefined
+            } : {}
+        }
+    }, /*#__PURE__*/ _react.default.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));
+};
+const StaticToolbar = (props)=>{
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: [
+            baseClass,
+            `${baseClass}--static`
+        ].join(' ')
+    }, /*#__PURE__*/ _react.default.createElement(_Controls.ToolbarControls, props));
+};
+const LivePreviewToolbar = (props)=>{
+    const { draggable } = props;
+    if (draggable) {
+        return /*#__PURE__*/ _react.default.createElement(DraggableToolbar, props);
+    }
+    return /*#__PURE__*/ _react.default.createElement(StaticToolbar, props);
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWdlcy9MaXZlUHJldmlldy9Ub29sYmFyL2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCdcbmltcG9ydCB0eXBlIHsgRWRpdFZpZXdQcm9wcyB9IGZyb20gJ3BheWxvYWQvY29uZmlnJ1xuXG5pbXBvcnQgeyB1c2VEcmFnZ2FibGUgfSBmcm9tICdAZG5kLWtpdC9jb3JlJ1xuaW1wb3J0IHsgRHJhZ0hhbmRsZSB9IGZyb20gJ0BwYXlsb2FkY21zL3VpJ1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgeyB1c2VMaXZlUHJldmlld0NvbnRleHQgfSBmcm9tICcuLi9Db250ZXh0L2NvbnRleHQnXG5pbXBvcnQgeyBUb29sYmFyQ29udHJvbHMgfSBmcm9tICcuL0NvbnRyb2xzJ1xuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGJhc2VDbGFzcyA9ICdsaXZlLXByZXZpZXctdG9vbGJhcidcblxuY29uc3QgRHJhZ2dhYmxlVG9vbGJhcjogUmVhY3QuRkM8RWRpdFZpZXdQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyB0b29sYmFyUG9zaXRpb24gfSA9IHVzZUxpdmVQcmV2aWV3Q29udGV4dCgpXG5cbiAgY29uc3QgeyBhdHRyaWJ1dGVzLCBsaXN0ZW5lcnMsIHNldE5vZGVSZWYsIHRyYW5zZm9ybSB9ID0gdXNlRHJhZ2dhYmxlKHtcbiAgICBpZDogJ2xpdmUtcHJldmlldy10b29sYmFyJyxcbiAgfSlcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNsYXNzTmFtZT17W2Jhc2VDbGFzcywgYCR7YmFzZUNsYXNzfS0tZHJhZ2dhYmxlYF0uam9pbignICcpfVxuICAgICAgc3R5bGU9e3tcbiAgICAgICAgbGVmdDogYCR7dG9vbGJhclBvc2l0aW9uLnh9cHhgLFxuICAgICAgICB0b3A6IGAke3Rvb2xiYXJQb3NpdGlvbi55fXB4YCxcbiAgICAgICAgLi4uKHRyYW5zZm9ybVxuICAgICAgICAgID8ge1xuICAgICAgICAgICAgICB0cmFuc2Zvcm06IHRyYW5zZm9ybVxuICAgICAgICAgICAgICAgID8gYHRyYW5zbGF0ZTNkKCR7dHJhbnNmb3JtPy54IHx8IDB9cHgsICR7dHJhbnNmb3JtPy55IHx8IDB9cHgsIDApYFxuICAgICAgICAgICAgICAgIDogdW5kZWZpbmVkLFxuICAgICAgICAgICAgfVxuICAgICAgICAgIDoge30pLFxuICAgICAgfX1cbiAgICA+XG4gICAgICA8YnV0dG9uXG4gICAgICAgIHsuLi5saXN0ZW5lcnN9XG4gICAgICAgIHsuLi5hdHRyaWJ1dGVzfVxuICAgICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2RyYWctaGFuZGxlYH1cbiAgICAgICAgcmVmPXtzZXROb2RlUmVmfVxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgID5cbiAgICAgICAgPERyYWdIYW5kbGUgLz5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPFRvb2xiYXJDb250cm9scyB7Li4ucHJvcHN9IC8+XG4gICAgPC9kaXY+XG4gIClcbn1cblxuY29uc3QgU3RhdGljVG9vbGJhcjogUmVhY3QuRkM8RWRpdFZpZXdQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17W2Jhc2VDbGFzcywgYCR7YmFzZUNsYXNzfS0tc3RhdGljYF0uam9pbignICcpfT5cbiAgICAgIDxUb29sYmFyQ29udHJvbHMgey4uLnByb3BzfSAvPlxuICAgIDwvZGl2PlxuICApXG59XG5cbmV4cG9ydCBjb25zdCBMaXZlUHJldmlld1Rvb2xiYXI6IFJlYWN0LkZDPFxuICBFZGl0Vmlld1Byb3BzICYge1xuICAgIGRyYWdnYWJsZT86IGJvb2xlYW5cbiAgfVxuPiA9IChwcm9wcykgPT4ge1xuICBjb25zdCB7IGRyYWdnYWJsZSB9ID0gcHJvcHNcblxuICBpZiAoZHJhZ2dhYmxlKSB7XG4gICAgcmV0dXJuIDxEcmFnZ2FibGVUb29sYmFyIHsuLi5wcm9wc30gLz5cbiAgfVxuXG4gIHJldHVybiA8U3RhdGljVG9vbGJhciB7Li4ucHJvcHN9IC8+XG59XG4iXSwibmFtZXMiOlsiTGl2ZVByZXZpZXdUb29sYmFyIiwiYmFzZUNsYXNzIiwiRHJhZ2dhYmxlVG9vbGJhciIsInByb3BzIiwidG9vbGJhclBvc2l0aW9uIiwidXNlTGl2ZVByZXZpZXdDb250ZXh0IiwiYXR0cmlidXRlcyIsImxpc3RlbmVycyIsInNldE5vZGVSZWYiLCJ0cmFuc2Zvcm0iLCJ1c2VEcmFnZ2FibGUiLCJpZCIsImRpdiIsImNsYXNzTmFtZSIsImpvaW4iLCJzdHlsZSIsImxlZnQiLCJ4IiwidG9wIiwieSIsInVuZGVmaW5lZCIsImJ1dHRvbiIsInJlZiIsInR5cGUiLCJEcmFnSGFuZGxlIiwiVG9vbGJhckNvbnRyb2xzIiwiU3RhdGljVG9vbGJhciIsImRyYWdnYWJsZSJdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7OytCQXlEYUE7OztlQUFBQTs7O3NCQXREZ0I7b0JBQ0Y7OERBQ1Q7eUJBRW9COzBCQUNOO1FBQ3pCOzs7Ozs7QUFFUCxNQUFNQyxZQUFZO0FBRWxCLE1BQU1DLG1CQUE0QyxDQUFDQztJQUNqRCxNQUFNLEVBQUVDLGVBQWUsRUFBRSxHQUFHQyxJQUFBQSw4QkFBcUI7SUFFakQsTUFBTSxFQUFFQyxVQUFVLEVBQUVDLFNBQVMsRUFBRUMsVUFBVSxFQUFFQyxTQUFTLEVBQUUsR0FBR0MsSUFBQUEsa0JBQVksRUFBQztRQUNwRUMsSUFBSTtJQUNOO0lBRUEscUJBQ0UsNkJBQUNDO1FBQ0NDLFdBQVc7WUFBQ1o7WUFBVyxDQUFDLEVBQUVBLFVBQVUsV0FBVyxDQUFDO1NBQUMsQ0FBQ2EsSUFBSSxDQUFDO1FBQ3ZEQyxPQUFPO1lBQ0xDLE1BQU0sQ0FBQyxFQUFFWixnQkFBZ0JhLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDOUJDLEtBQUssQ0FBQyxFQUFFZCxnQkFBZ0JlLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDN0IsR0FBSVYsWUFDQTtnQkFDRUEsV0FBV0EsWUFDUCxDQUFDLFlBQVksRUFBRUEsV0FBV1EsS0FBSyxFQUFFLElBQUksRUFBRVIsV0FBV1UsS0FBSyxFQUFFLE1BQU0sQ0FBQyxHQUNoRUM7WUFDTixJQUNBLENBQUMsQ0FBQztRQUNSO3FCQUVBLDZCQUFDQztRQUNFLEdBQUdkLFNBQVM7UUFDWixHQUFHRCxVQUFVO1FBQ2RPLFdBQVcsQ0FBQyxFQUFFWixVQUFVLGFBQWEsQ0FBQztRQUN0Q3FCLEtBQUtkO1FBQ0xlLE1BQUs7cUJBRUwsNkJBQUNDLGNBQVUsd0JBRWIsNkJBQUNDLHlCQUFlLEVBQUt0QjtBQUczQjtBQUVBLE1BQU11QixnQkFBeUMsQ0FBQ3ZCO0lBQzlDLHFCQUNFLDZCQUFDUztRQUFJQyxXQUFXO1lBQUNaO1lBQVcsQ0FBQyxFQUFFQSxVQUFVLFFBQVEsQ0FBQztTQUFDLENBQUNhLElBQUksQ0FBQztxQkFDdkQsNkJBQUNXLHlCQUFlLEVBQUt0QjtBQUczQjtBQUVPLE1BQU1ILHFCQUlULENBQUNHO0lBQ0gsTUFBTSxFQUFFd0IsU0FBUyxFQUFFLEdBQUd4QjtJQUV0QixJQUFJd0IsV0FBVztRQUNiLHFCQUFPLDZCQUFDekIsa0JBQXFCQztJQUMvQjtJQUVBLHFCQUFPLDZCQUFDdUIsZUFBa0J2QjtBQUM1QiJ9

package/dist/pages/LivePreview/Toolbar/index.scss

@@ -0,0 +1,41 @@
+@import '../../../scss/styles.scss';
+
+.live-preview-toolbar {
+  display: flex;
+  background-color: var(--theme-bg);
+  color: var(--theme-text);
+  height: calc(var(--base) * 1.75);
+  align-items: center;
+  flex-shrink: 0;
+
+  &--static {
+    position: relative;
+    width: 100%;
+    justify-content: center;
+    border-bottom: 1px solid var(--theme-elevation-100);
+  }
+
+  &--draggable {
+    @include shadow-lg;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    border-radius: 4px;
+  }
+
+  &__drag-handle {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: grab;
+
+    .icon--drag-handle .fill {
+      fill: var(--theme-elevation-300);
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}

package/dist/pages/LivePreview/ToolbarArea/index.d.ts

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

package/dist/pages/LivePreview/ToolbarArea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/pages/LivePreview/ToolbarArea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAYA,CAAA"}

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

@@ -0,0 +1,32 @@
+'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
+    };
+}
+const baseClass = 'toolbar-area';
+const ToolbarArea = (props)=>{
+    const { children } = props;
+    const { setNodeRef } = (0, _core.useDroppable)({
+        id: 'live-preview-area'
+    });
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: baseClass,
+        ref: setNodeRef
+    }, children);
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9wYWdlcy9MaXZlUHJldmlldy9Ub29sYmFyQXJlYS9pbmRleC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnXG5pbXBvcnQgeyB1c2VEcm9wcGFibGUgfSBmcm9tICdAZG5kLWtpdC9jb3JlJ1xuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcblxuY29uc3QgYmFzZUNsYXNzID0gJ3Rvb2xiYXItYXJlYSdcblxuZXhwb3J0IGNvbnN0IFRvb2xiYXJBcmVhOiBSZWFjdC5GQzx7XG4gIGNoaWxkcmVuOiBSZWFjdC5SZWFjdE5vZGVcbn0+ID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IHsgY2hpbGRyZW4gfSA9IHByb3BzXG5cbiAgY29uc3QgeyBzZXROb2RlUmVmIH0gPSB1c2VEcm9wcGFibGUoe1xuICAgIGlkOiAnbGl2ZS1wcmV2aWV3LWFyZWEnLFxuICB9KVxuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2Jhc2VDbGFzc30gcmVmPXtzZXROb2RlUmVmfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKVxufVxuIl0sIm5hbWVzIjpbIlRvb2xiYXJBcmVhIiwiYmFzZUNsYXNzIiwicHJvcHMiLCJjaGlsZHJlbiIsInNldE5vZGVSZWYiLCJ1c2VEcm9wcGFibGUiLCJpZCIsImRpdiIsImNsYXNzTmFtZSIsInJlZiJdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7OytCQVFhQTs7O2VBQUFBOzs7c0JBUGdCOzhEQUNYO1FBRVg7Ozs7OztBQUVQLE1BQU1DLFlBQVk7QUFFWCxNQUFNRCxjQUVSLENBQUNFO0lBQ0osTUFBTSxFQUFFQyxRQUFRLEVBQUUsR0FBR0Q7SUFFckIsTUFBTSxFQUFFRSxVQUFVLEVBQUUsR0FBR0MsSUFBQUEsa0JBQVksRUFBQztRQUNsQ0MsSUFBSTtJQUNOO0lBRUEscUJBQ0UsNkJBQUNDO1FBQUlDLFdBQVdQO1FBQVdRLEtBQUtMO09BQzdCRDtBQUdQIn0=

package/dist/pages/LivePreview/ToolbarArea/index.scss

@@ -0,0 +1,4 @@
+.toolbar-area {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,11 @@
+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<{
+    breakpoints: LivePreviewConfig['breakpoints'];
+    initialData: Data;
+    livePreviewConfig: LivePreviewConfig;
+    url: string;
+}>;
+//# sourceMappingURL=index.client.d.ts.map

package/dist/pages/LivePreview/index.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/pages/LivePreview/index.client.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAezC,OAAO,KAAgC,MAAM,OAAO,CAAA;AAQpD,OAAO,cAAc,CAAA;AA6KrB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,WAAW,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAA;IAC7C,WAAW,EAAE,IAAI,CAAA;IACjB,iBAAiB,EAAE,iBAAiB,CAAA;IACpC,GAAG,EAAE,MAAM,CAAA;CACZ,CAgCA,CAAA"}