payload 2.0.0-beta.1 → 2.0.0-beta.4

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

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LivePreviewView", {
+    enumerable: true,
+    get: function() {
+        return LivePreviewView;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reacti18next = require("react-i18next");
+const _getTranslation = require("../../../../utilities/getTranslation");
+const _DocumentControls = require("../../elements/DocumentControls");
+const _Gutter = require("../../elements/Gutter");
+const _RenderFields = /*#__PURE__*/ _interop_require_default(require("../../forms/RenderFields"));
+const _filterFields = require("../../forms/RenderFields/filterFields");
+const _fieldtypes = require("../../forms/field-types");
+const _LeaveWithoutSaving = /*#__PURE__*/ _interop_require_default(require("../../modals/LeaveWithoutSaving"));
+const _Meta = /*#__PURE__*/ _interop_require_default(require("../../utilities/Meta"));
+const _PreviewWindow = require("./PreviewWindow");
+require("./index.scss");
+const _usePopupWindow = require("./usePopupWindow");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const baseClass = 'live-preview';
+const LivePreviewView = (props)=>{
+    const { i18n, t } = (0, _reacti18next.useTranslation)('general');
+    let url;
+    if ('collection' in props) {
+        url = props?.collection.admin.livePreview.url;
+    }
+    if ('global' in props) {
+        url = props?.global.admin.livePreview.url;
+    }
+    const popupState = (0, _usePopupWindow.usePopupWindow)({
+        eventType: 'livePreview',
+        href: url
+    });
+    const { apiURL, data, permissions } = props;
+    let collection;
+    let global;
+    let disableActions;
+    let disableLeaveWithoutSaving;
+    let hasSavePermission;
+    let isEditing;
+    let id;
+    if ('collection' in props) {
+        collection = props?.collection;
+        disableActions = props?.disableActions;
+        disableLeaveWithoutSaving = props?.disableLeaveWithoutSaving;
+        hasSavePermission = props?.hasSavePermission;
+        isEditing = props?.isEditing;
+        id = props?.id;
+    }
+    if ('global' in props) {
+        global = props?.global;
+    }
+    const { fields } = collection;
+    const sidebarFields = (0, _filterFields.filterFields)({
+        fieldSchema: fields,
+        fieldTypes: _fieldtypes.fieldTypes,
+        filter: (field)=>field?.admin?.position === 'sidebar',
+        permissions: permissions.fields,
+        readOnly: !hasSavePermission
+    });
+    return /*#__PURE__*/ _react.default.createElement(_react.Fragment, null, /*#__PURE__*/ _react.default.createElement(_DocumentControls.DocumentControls, {
+        apiURL: apiURL,
+        collection: collection,
+        data: data,
+        disableActions: disableActions,
+        global: global,
+        hasSavePermission: hasSavePermission,
+        id: id,
+        isEditing: isEditing,
+        permissions: permissions
+    }), /*#__PURE__*/ _react.default.createElement("div", {
+        className: [
+            baseClass,
+            popupState?.isPopupOpen && `${baseClass}--detached`
+        ].filter(Boolean).join(' ')
+    }, /*#__PURE__*/ _react.default.createElement("div", {
+        className: `${baseClass}__main`
+    }, /*#__PURE__*/ _react.default.createElement(_Meta.default, {
+        description: t('editing'),
+        keywords: `${(0, _getTranslation.getTranslation)(collection.labels.singular, i18n)}, Payload, CMS`,
+        title: `${isEditing ? t('editing') : t('creating')} - ${(0, _getTranslation.getTranslation)(collection.labels.singular, i18n)}`
+    }), !(collection.versions?.drafts && collection.versions?.drafts?.autosave) && !disableLeaveWithoutSaving && /*#__PURE__*/ _react.default.createElement(_LeaveWithoutSaving.default, null), /*#__PURE__*/ _react.default.createElement(_Gutter.Gutter, {
+        className: `${baseClass}__edit`
+    }, /*#__PURE__*/ _react.default.createElement(_RenderFields.default, {
+        fieldSchema: fields,
+        fieldTypes: _fieldtypes.fieldTypes,
+        filter: (field)=>!field?.admin?.position || field?.admin?.position !== 'sidebar',
+        permissions: permissions.fields,
+        readOnly: !hasSavePermission
+    }), sidebarFields && sidebarFields.length > 0 && /*#__PURE__*/ _react.default.createElement(_RenderFields.default, {
+        fieldTypes: _fieldtypes.fieldTypes,
+        fields: sidebarFields
+    }))), /*#__PURE__*/ _react.default.createElement(_PreviewWindow.PreviewWindow, {
+        ...props,
+        popupState: popupState,
+        url: url
+    })));
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L2luZGV4LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgRnJhZ21lbnQgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IHVzZVRyYW5zbGF0aW9uIH0gZnJvbSAncmVhY3QtaTE4bmV4dCdcblxuaW1wb3J0IHR5cGUgeyBTYW5pdGl6ZWRDb2xsZWN0aW9uQ29uZmlnLCBTYW5pdGl6ZWRHbG9iYWxDb25maWcgfSBmcm9tICcuLi8uLi8uLi8uLi9leHBvcnRzL3R5cGVzJ1xuaW1wb3J0IHR5cGUgeyBFZGl0Vmlld1Byb3BzIH0gZnJvbSAnLi4vdHlwZXMnXG5cbmltcG9ydCB7IGdldFRyYW5zbGF0aW9uIH0gZnJvbSAnLi4vLi4vLi4vLi4vdXRpbGl0aWVzL2dldFRyYW5zbGF0aW9uJ1xuaW1wb3J0IHsgRG9jdW1lbnRDb250cm9scyB9IGZyb20gJy4uLy4uL2VsZW1lbnRzL0RvY3VtZW50Q29udHJvbHMnXG5pbXBvcnQgeyBHdXR0ZXIgfSBmcm9tICcuLi8uLi9lbGVtZW50cy9HdXR0ZXInXG5pbXBvcnQgUmVuZGVyRmllbGRzIGZyb20gJy4uLy4uL2Zvcm1zL1JlbmRlckZpZWxkcydcbmltcG9ydCB7IGZpbHRlckZpZWxkcyB9IGZyb20gJy4uLy4uL2Zvcm1zL1JlbmRlckZpZWxkcy9maWx0ZXJGaWVsZHMnXG5pbXBvcnQgeyBmaWVsZFR5cGVzIH0gZnJvbSAnLi4vLi4vZm9ybXMvZmllbGQtdHlwZXMnXG5pbXBvcnQgTGVhdmVXaXRob3V0U2F2aW5nIGZyb20gJy4uLy4uL21vZGFscy9MZWF2ZVdpdGhvdXRTYXZpbmcnXG5pbXBvcnQgTWV0YSBmcm9tICcuLi8uLi91dGlsaXRpZXMvTWV0YSdcbmltcG9ydCB7IFByZXZpZXdXaW5kb3cgfSBmcm9tICcuL1ByZXZpZXdXaW5kb3cnXG5pbXBvcnQgJy4vaW5kZXguc2NzcydcbmltcG9ydCB7IHVzZVBvcHVwV2luZG93IH0gZnJvbSAnLi91c2VQb3B1cFdpbmRvdydcblxuY29uc3QgYmFzZUNsYXNzID0gJ2xpdmUtcHJldmlldydcblxuZXhwb3J0IGNvbnN0IExpdmVQcmV2aWV3VmlldzogUmVhY3QuRkM8RWRpdFZpZXdQcm9wcz4gPSAocHJvcHMpID0+IHtcbiAgY29uc3QgeyBpMThuLCB0IH0gPSB1c2VUcmFuc2xhdGlvbignZ2VuZXJhbCcpXG5cbiAgbGV0IHVybFxuXG4gIGlmICgnY29sbGVjdGlvbicgaW4gcHJvcHMpIHtcbiAgICB1cmwgPSBwcm9wcz8uY29sbGVjdGlvbi5hZG1pbi5saXZlUHJldmlldy51cmxcbiAgfVxuXG4gIGlmICgnZ2xvYmFsJyBpbiBwcm9wcykge1xuICAgIHVybCA9IHByb3BzPy5nbG9iYWwuYWRtaW4ubGl2ZVByZXZpZXcudXJsXG4gIH1cblxuICBjb25zdCBwb3B1cFN0YXRlID0gdXNlUG9wdXBXaW5kb3coe1xuICAgIGV2ZW50VHlwZTogJ2xpdmVQcmV2aWV3JyxcbiAgICBocmVmOiB1cmwsXG4gIH0pXG5cbiAgY29uc3QgeyBhcGlVUkwsIGRhdGEsIHBlcm1pc3Npb25zIH0gPSBwcm9wc1xuXG4gIGxldCBjb2xsZWN0aW9uOiBTYW5pdGl6ZWRDb2xsZWN0aW9uQ29uZmlnXG4gIGxldCBnbG9iYWw6IFNhbml0aXplZEdsb2JhbENvbmZpZ1xuICBsZXQgZGlzYWJsZUFjdGlvbnM6IGJvb2xlYW5cbiAgbGV0IGRpc2FibGVMZWF2ZVdpdGhvdXRTYXZpbmc6IGJvb2xlYW5cbiAgbGV0IGhhc1NhdmVQZXJtaXNzaW9uOiBib29sZWFuXG4gIGxldCBpc0VkaXRpbmc6IGJvb2xlYW5cbiAgbGV0IGlkOiBzdHJpbmdcblxuICBpZiAoJ2NvbGxlY3Rpb24nIGluIHByb3BzKSB7XG4gICAgY29sbGVjdGlvbiA9IHByb3BzPy5jb2xsZWN0aW9uXG4gICAgZGlzYWJsZUFjdGlvbnMgPSBwcm9wcz8uZGlzYWJsZUFjdGlvbnNcbiAgICBkaXNhYmxlTGVhdmVXaXRob3V0U2F2aW5nID0gcHJvcHM/LmRpc2FibGVMZWF2ZVdpdGhvdXRTYXZpbmdcbiAgICBoYXNTYXZlUGVybWlzc2lvbiA9IHByb3BzPy5oYXNTYXZlUGVybWlzc2lvblxuICAgIGlzRWRpdGluZyA9IHByb3BzPy5pc0VkaXRpbmdcbiAgICBpZCA9IHByb3BzPy5pZFxuICB9XG5cbiAgaWYgKCdnbG9iYWwnIGluIHByb3BzKSB7XG4gICAgZ2xvYmFsID0gcHJvcHM/Lmdsb2JhbFxuICB9XG5cbiAgY29uc3QgeyBmaWVsZHMgfSA9IGNvbGxlY3Rpb25cblxuICBjb25zdCBzaWRlYmFyRmllbGRzID0gZmlsdGVyRmllbGRzKHtcbiAgICBmaWVsZFNjaGVtYTogZmllbGRzLFxuICAgIGZpZWxkVHlwZXMsXG4gICAgZmlsdGVyOiAoZmllbGQpID0+IGZpZWxkPy5hZG1pbj8ucG9zaXRpb24gPT09ICdzaWRlYmFyJyxcbiAgICBwZXJtaXNzaW9uczogcGVybWlzc2lvbnMuZmllbGRzLFxuICAgIHJlYWRPbmx5OiAhaGFzU2F2ZVBlcm1pc3Npb24sXG4gIH0pXG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8RG9jdW1lbnRDb250cm9sc1xuICAgICAgICBhcGlVUkw9e2FwaVVSTH1cbiAgICAgICAgY29sbGVjdGlvbj17Y29sbGVjdGlvbn1cbiAgICAgICAgZGF0YT17ZGF0YX1cbiAgICAgICAgZGlzYWJsZUFjdGlvbnM9e2Rpc2FibGVBY3Rpb25zfVxuICAgICAgICBnbG9iYWw9e2dsb2JhbH1cbiAgICAgICAgaGFzU2F2ZVBlcm1pc3Npb249e2hhc1NhdmVQZXJtaXNzaW9ufVxuICAgICAgICBpZD17aWR9XG4gICAgICAgIGlzRWRpdGluZz17aXNFZGl0aW5nfVxuICAgICAgICBwZXJtaXNzaW9ucz17cGVybWlzc2lvbnN9XG4gICAgICAvPlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzc05hbWU9e1tiYXNlQ2xhc3MsIHBvcHVwU3RhdGU/LmlzUG9wdXBPcGVuICYmIGAke2Jhc2VDbGFzc30tLWRldGFjaGVkYF1cbiAgICAgICAgICAuZmlsdGVyKEJvb2xlYW4pXG4gICAgICAgICAgLmpvaW4oJyAnKX1cbiAgICAgID5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX21haW5gfT5cbiAgICAgICAgICA8TWV0YVxuICAgICAgICAgICAgZGVzY3JpcHRpb249e3QoJ2VkaXRpbmcnKX1cbiAgICAgICAgICAgIGtleXdvcmRzPXtgJHtnZXRUcmFuc2xhdGlvbihjb2xsZWN0aW9uLmxhYmVscy5zaW5ndWxhciwgaTE4bil9LCBQYXlsb2FkLCBDTVNgfVxuICAgICAgICAgICAgdGl0bGU9e2Ake2lzRWRpdGluZyA/IHQoJ2VkaXRpbmcnKSA6IHQoJ2NyZWF0aW5nJyl9IC0gJHtnZXRUcmFuc2xhdGlvbihcbiAgICAgICAgICAgICAgY29sbGVjdGlvbi5sYWJlbHMuc2luZ3VsYXIsXG4gICAgICAgICAgICAgIGkxOG4sXG4gICAgICAgICAgICApfWB9XG4gICAgICAgICAgLz5cbiAgICAgICAgICB7IShjb2xsZWN0aW9uLnZlcnNpb25zPy5kcmFmdHMgJiYgY29sbGVjdGlvbi52ZXJzaW9ucz8uZHJhZnRzPy5hdXRvc2F2ZSkgJiZcbiAgICAgICAgICAgICFkaXNhYmxlTGVhdmVXaXRob3V0U2F2aW5nICYmIDxMZWF2ZVdpdGhvdXRTYXZpbmcgLz59XG4gICAgICAgICAgPEd1dHRlciBjbGFzc05hbWU9e2Ake2Jhc2VDbGFzc31fX2VkaXRgfT5cbiAgICAgICAgICAgIDxSZW5kZXJGaWVsZHNcbiAgICAgICAgICAgICAgZmllbGRTY2hlbWE9e2ZpZWxkc31cbiAgICAgICAgICAgICAgZmllbGRUeXBlcz17ZmllbGRUeXBlc31cbiAgICAgICAgICAgICAgZmlsdGVyPXsoZmllbGQpID0+ICFmaWVsZD8uYWRtaW4/LnBvc2l0aW9uIHx8IGZpZWxkPy5hZG1pbj8ucG9zaXRpb24gIT09ICdzaWRlYmFyJ31cbiAgICAgICAgICAgICAgcGVybWlzc2lvbnM9e3Blcm1pc3Npb25zLmZpZWxkc31cbiAgICAgICAgICAgICAgcmVhZE9ubHk9eyFoYXNTYXZlUGVybWlzc2lvbn1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgICB7c2lkZWJhckZpZWxkcyAmJiBzaWRlYmFyRmllbGRzLmxlbmd0aCA+IDAgJiYgKFxuICAgICAgICAgICAgICA8UmVuZGVyRmllbGRzIGZpZWxkVHlwZXM9e2ZpZWxkVHlwZXN9IGZpZWxkcz17c2lkZWJhckZpZWxkc30gLz5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC9HdXR0ZXI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8UHJldmlld1dpbmRvdyB7Li4ucHJvcHN9IHBvcHVwU3RhdGU9e3BvcHVwU3RhdGV9IHVybD17dXJsfSAvPlxuICAgICAgPC9kaXY+XG4gICAgPC9GcmFnbWVudD5cbiAgKVxufVxuIl0sIm5hbWVzIjpbIkxpdmVQcmV2aWV3VmlldyIsImJhc2VDbGFzcyIsInByb3BzIiwiaTE4biIsInQiLCJ1c2VUcmFuc2xhdGlvbiIsInVybCIsImNvbGxlY3Rpb24iLCJhZG1pbiIsImxpdmVQcmV2aWV3IiwiZ2xvYmFsIiwicG9wdXBTdGF0ZSIsInVzZVBvcHVwV2luZG93IiwiZXZlbnRUeXBlIiwiaHJlZiIsImFwaVVSTCIsImRhdGEiLCJwZXJtaXNzaW9ucyIsImRpc2FibGVBY3Rpb25zIiwiZGlzYWJsZUxlYXZlV2l0aG91dFNhdmluZyIsImhhc1NhdmVQZXJtaXNzaW9uIiwiaXNFZGl0aW5nIiwiaWQiLCJmaWVsZHMiLCJzaWRlYmFyRmllbGRzIiwiZmlsdGVyRmllbGRzIiwiZmllbGRTY2hlbWEiLCJmaWVsZFR5cGVzIiwiZmlsdGVyIiwiZmllbGQiLCJwb3NpdGlvbiIsInJlYWRPbmx5IiwiRnJhZ21lbnQiLCJEb2N1bWVudENvbnRyb2xzIiwiZGl2IiwiY2xhc3NOYW1lIiwiaXNQb3B1cE9wZW4iLCJCb29sZWFuIiwiam9pbiIsIk1ldGEiLCJkZXNjcmlwdGlvbiIsImtleXdvcmRzIiwiZ2V0VHJhbnNsYXRpb24iLCJsYWJlbHMiLCJzaW5ndWxhciIsInRpdGxlIiwidmVyc2lvbnMiLCJkcmFmdHMiLCJhdXRvc2F2ZSIsIkxlYXZlV2l0aG91dFNhdmluZyIsIkd1dHRlciIsIlJlbmRlckZpZWxkcyIsImxlbmd0aCIsIlByZXZpZXdXaW5kb3ciXSwibWFwcGluZ3MiOiI7Ozs7K0JBb0JhQTs7O2VBQUFBOzs7K0RBcEJtQjs4QkFDRDtnQ0FLQTtrQ0FDRTt3QkFDVjtxRUFDRTs4QkFDSTs0QkFDRjsyRUFDSTs2REFDZDsrQkFDYTtRQUN2QjtnQ0FDd0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUUvQixNQUFNQyxZQUFZO0FBRVgsTUFBTUQsa0JBQTJDLENBQUNFO0lBQ3ZELE1BQU0sRUFBRUMsSUFBSSxFQUFFQyxDQUFDLEVBQUUsR0FBR0MsSUFBQUEsNEJBQWMsRUFBQztJQUVuQyxJQUFJQztJQUVKLElBQUksZ0JBQWdCSixPQUFPO1FBQ3pCSSxNQUFNSixPQUFPSyxXQUFXQyxNQUFNQyxZQUFZSDtJQUM1QztJQUVBLElBQUksWUFBWUosT0FBTztRQUNyQkksTUFBTUosT0FBT1EsT0FBT0YsTUFBTUMsWUFBWUg7SUFDeEM7SUFFQSxNQUFNSyxhQUFhQyxJQUFBQSw4QkFBYyxFQUFDO1FBQ2hDQyxXQUFXO1FBQ1hDLE1BQU1SO0lBQ1I7SUFFQSxNQUFNLEVBQUVTLE1BQU0sRUFBRUMsSUFBSSxFQUFFQyxXQUFXLEVBQUUsR0FBR2Y7SUFFdEMsSUFBSUs7SUFDSixJQUFJRztJQUNKLElBQUlRO0lBQ0osSUFBSUM7SUFDSixJQUFJQztJQUNKLElBQUlDO0lBQ0osSUFBSUM7SUFFSixJQUFJLGdCQUFnQnBCLE9BQU87UUFDekJLLGFBQWFMLE9BQU9LO1FBQ3BCVyxpQkFBaUJoQixPQUFPZ0I7UUFDeEJDLDRCQUE0QmpCLE9BQU9pQjtRQUNuQ0Msb0JBQW9CbEIsT0FBT2tCO1FBQzNCQyxZQUFZbkIsT0FBT21CO1FBQ25CQyxLQUFLcEIsT0FBT29CO0lBQ2Q7SUFFQSxJQUFJLFlBQVlwQixPQUFPO1FBQ3JCUSxTQUFTUixPQUFPUTtJQUNsQjtJQUVBLE1BQU0sRUFBRWEsTUFBTSxFQUFFLEdBQUdoQjtJQUVuQixNQUFNaUIsZ0JBQWdCQyxJQUFBQSwwQkFBWSxFQUFDO1FBQ2pDQyxhQUFhSDtRQUNiSSxZQUFBQSxzQkFBVTtRQUNWQyxRQUFRLENBQUNDLFFBQVVBLE9BQU9yQixPQUFPc0IsYUFBYTtRQUM5Q2IsYUFBYUEsWUFBWU0sTUFBTTtRQUMvQlEsVUFBVSxDQUFDWDtJQUNiO0lBRUEscUJBQ0UsNkJBQUNZLGVBQVEsc0JBQ1AsNkJBQUNDLGtDQUFnQjtRQUNmbEIsUUFBUUE7UUFDUlIsWUFBWUE7UUFDWlMsTUFBTUE7UUFDTkUsZ0JBQWdCQTtRQUNoQlIsUUFBUUE7UUFDUlUsbUJBQW1CQTtRQUNuQkUsSUFBSUE7UUFDSkQsV0FBV0E7UUFDWEosYUFBYUE7c0JBRWYsNkJBQUNpQjtRQUNDQyxXQUFXO1lBQUNsQztZQUFXVSxZQUFZeUIsZUFBZSxDQUFDLEVBQUVuQyxVQUFVLFVBQVUsQ0FBQztTQUFDLENBQ3hFMkIsTUFBTSxDQUFDUyxTQUNQQyxJQUFJLENBQUM7cUJBRVIsNkJBQUNKO1FBQUlDLFdBQVcsQ0FBQyxFQUFFbEMsVUFBVSxNQUFNLENBQUM7cUJBQ2xDLDZCQUFDc0MsYUFBSTtRQUNIQyxhQUFhcEMsRUFBRTtRQUNmcUMsVUFBVSxDQUFDLEVBQUVDLElBQUFBLDhCQUFjLEVBQUNuQyxXQUFXb0MsTUFBTSxDQUFDQyxRQUFRLEVBQUV6QyxNQUFNLGNBQWMsQ0FBQztRQUM3RTBDLE9BQU8sQ0FBQyxFQUFFeEIsWUFBWWpCLEVBQUUsYUFBYUEsRUFBRSxZQUFZLEdBQUcsRUFBRXNDLElBQUFBLDhCQUFjLEVBQ3BFbkMsV0FBV29DLE1BQU0sQ0FBQ0MsUUFBUSxFQUMxQnpDLE1BQ0EsQ0FBQztRQUVKLENBQUVJLENBQUFBLFdBQVd1QyxRQUFRLEVBQUVDLFVBQVV4QyxXQUFXdUMsUUFBUSxFQUFFQyxRQUFRQyxRQUFPLEtBQ3BFLENBQUM3QiwyQ0FBNkIsNkJBQUM4QiwyQkFBa0IsdUJBQ25ELDZCQUFDQyxjQUFNO1FBQUNmLFdBQVcsQ0FBQyxFQUFFbEMsVUFBVSxNQUFNLENBQUM7cUJBQ3JDLDZCQUFDa0QscUJBQVk7UUFDWHpCLGFBQWFIO1FBQ2JJLFlBQVlBLHNCQUFVO1FBQ3RCQyxRQUFRLENBQUNDLFFBQVUsQ0FBQ0EsT0FBT3JCLE9BQU9zQixZQUFZRCxPQUFPckIsT0FBT3NCLGFBQWE7UUFDekViLGFBQWFBLFlBQVlNLE1BQU07UUFDL0JRLFVBQVUsQ0FBQ1g7UUFFWkksaUJBQWlCQSxjQUFjNEIsTUFBTSxHQUFHLG1CQUN2Qyw2QkFBQ0QscUJBQVk7UUFBQ3hCLFlBQVlBLHNCQUFVO1FBQUVKLFFBQVFDO3dCQUlwRCw2QkFBQzZCLDRCQUFhO1FBQUUsR0FBR25ELEtBQUs7UUFBRVMsWUFBWUE7UUFBWUwsS0FBS0E7O0FBSS9EIn0=

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

@@ -0,0 +1,75 @@
+@import '../../../scss/styles.scss';
+
+.live-preview {
+  width: 100%;
+  display: flex;
+
+  [dir='rtl'] & {
+    flex-direction: row-reverse;
+  }
+
+  &--popup-open {
+    .live-preview {
+      &__edit {
+        padding-right: var(--gutter-h);
+      }
+    }
+  }
+
+  &__main {
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    position: relative;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: calc(var(--base) * 2);
+      height: 100%;
+      background: linear-gradient(to left, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
+      pointer-events: none;
+      z-index: -1;
+    }
+  }
+
+  &__edit {
+    padding-top: calc(var(--base) * 1.5);
+    padding-bottom: base(4);
+    flex-grow: 1;
+    padding-right: calc(var(--base) * 2);
+
+    [dir='rtl'] & {
+      padding-right: 0;
+      padding-left: calc(var(--base) * 2);
+    }
+  }
+
+  @include mid-break {
+    flex-direction: column;
+
+    &__main {
+      min-height: initial;
+    }
+
+    &__form {
+      display: block;
+    }
+
+    &__edit {
+      padding-top: var(--base);
+      padding-bottom: 0;
+      padding-right: var(--gutter-h);
+    }
+  }
+
+  @include small-break {
+    &__edit {
+      padding-top: calc(var(--base) / 2);
+    }
+  }
+}

package/dist/admin/components/views/LivePreview/useLivePreview.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useLivePreview", {
+    enumerable: true,
+    get: function() {
+        return useLivePreview;
+    }
+});
+const _react = require("react");
+const useLivePreview = (props)=>{
+    const { initialPage, serverURL } = props;
+    const [data, setData] = (0, _react.useState)(initialPage);
+    const [isLoading, setIsLoading] = (0, _react.useState)(true);
+    const handleMessage = (0, _react.useCallback)((event)=>{
+        if (event.origin === serverURL && event.data) {
+            const eventData = JSON.parse(event?.data);
+            if (eventData.type === 'livePreview') {
+                setData(eventData?.data);
+                setIsLoading(false);
+            }
+        }
+    }, [
+        serverURL
+    ]);
+    (0, _react.useEffect)(()=>{
+        window.addEventListener('message', handleMessage);
+        window.parent.postMessage('ready', serverURL);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [
+        serverURL,
+        handleMessage
+    ]);
+    return {
+        data,
+        isLoading
+    };
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L3VzZUxpdmVQcmV2aWV3LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnXG5cbi8vIFRvIHByZXZlbnQgdGhlIGZsaWNrZXIgb2YgbWlzc2luZyBkYXRhIG9uIGluaXRpYWwgbG9hZCxcbi8vIHlvdSBjYW4gcGFzcyBpbiB0aGUgaW5pdGlhbCBwYWdlIGRhdGEgZnJvbSB0aGUgc2VydmVyXG4vLyBUbyBwcmV2ZW50IHRoZSBmbGlja2VyIG9mIHN0YWxlIGRhdGEgd2hpbGUgdGhlIHBvc3QgbWVzc2FnZSBpcyBiZWluZyBzZW50LFxuLy8geW91IGNhbiBjb25kaXRpb25hbGx5IHJlbmRlciBsb2FkaW5nIFVJIGJhc2VkIG9uIHRoZSBgaXNMb2FkaW5nYCBzdGF0ZVxuZXhwb3J0IGNvbnN0IHVzZUxpdmVQcmV2aWV3ID0gKHByb3BzOiB7XG4gIGluaXRpYWxQYWdlOiBhbnlcbiAgc2VydmVyVVJMOiBzdHJpbmdcbn0pOiB7XG4gIGRhdGE6IGFueVxuICBpc0xvYWRpbmc6IGJvb2xlYW5cbn0gPT4ge1xuICBjb25zdCB7IGluaXRpYWxQYWdlLCBzZXJ2ZXJVUkwgfSA9IHByb3BzXG4gIGNvbnN0IFtkYXRhLCBzZXREYXRhXSA9IHVzZVN0YXRlPGFueT4oaW5pdGlhbFBhZ2UpXG4gIGNvbnN0IFtpc0xvYWRpbmcsIHNldElzTG9hZGluZ10gPSB1c2VTdGF0ZTxib29sZWFuPih0cnVlKVxuXG4gIGNvbnN0IGhhbmRsZU1lc3NhZ2UgPSB1c2VDYWxsYmFjayhcbiAgICAoZXZlbnQ6IE1lc3NhZ2VFdmVudCkgPT4ge1xuICAgICAgaWYgKGV2ZW50Lm9yaWdpbiA9PT0gc2VydmVyVVJMICYmIGV2ZW50LmRhdGEpIHtcbiAgICAgICAgY29uc3QgZXZlbnREYXRhID0gSlNPTi5wYXJzZShldmVudD8uZGF0YSlcbiAgICAgICAgaWYgKGV2ZW50RGF0YS50eXBlID09PSAnbGl2ZVByZXZpZXcnKSB7XG4gICAgICAgICAgc2V0RGF0YShldmVudERhdGE/LmRhdGEpXG4gICAgICAgICAgc2V0SXNMb2FkaW5nKGZhbHNlKVxuICAgICAgICB9XG4gICAgICB9XG4gICAgfSxcbiAgICBbc2VydmVyVVJMXSxcbiAgKVxuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ21lc3NhZ2UnLCBoYW5kbGVNZXNzYWdlKVxuICAgIHdpbmRvdy5wYXJlbnQucG9zdE1lc3NhZ2UoJ3JlYWR5Jywgc2VydmVyVVJMKVxuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKCdtZXNzYWdlJywgaGFuZGxlTWVzc2FnZSlcbiAgICB9XG4gIH0sIFtzZXJ2ZXJVUkwsIGhhbmRsZU1lc3NhZ2VdKVxuXG4gIHJldHVybiB7XG4gICAgZGF0YSxcbiAgICBpc0xvYWRpbmcsXG4gIH1cbn1cbiJdLCJuYW1lcyI6WyJ1c2VMaXZlUHJldmlldyIsInByb3BzIiwiaW5pdGlhbFBhZ2UiLCJzZXJ2ZXJVUkwiLCJkYXRhIiwic2V0RGF0YSIsInVzZVN0YXRlIiwiaXNMb2FkaW5nIiwic2V0SXNMb2FkaW5nIiwiaGFuZGxlTWVzc2FnZSIsInVzZUNhbGxiYWNrIiwiZXZlbnQiLCJvcmlnaW4iLCJldmVudERhdGEiLCJKU09OIiwicGFyc2UiLCJ0eXBlIiwidXNlRWZmZWN0Iiwid2luZG93IiwiYWRkRXZlbnRMaXN0ZW5lciIsInBhcmVudCIsInBvc3RNZXNzYWdlIiwicmVtb3ZlRXZlbnRMaXN0ZW5lciJdLCJtYXBwaW5ncyI6Ijs7OzsrQkFNYUE7OztlQUFBQTs7O3VCQU5vQztBQU0xQyxNQUFNQSxpQkFBaUIsQ0FBQ0M7SUFPN0IsTUFBTSxFQUFFQyxXQUFXLEVBQUVDLFNBQVMsRUFBRSxHQUFHRjtJQUNuQyxNQUFNLENBQUNHLE1BQU1DLFFBQVEsR0FBR0MsSUFBQUEsZUFBUSxFQUFNSjtJQUN0QyxNQUFNLENBQUNLLFdBQVdDLGFBQWEsR0FBR0YsSUFBQUEsZUFBUSxFQUFVO0lBRXBELE1BQU1HLGdCQUFnQkMsSUFBQUEsa0JBQVcsRUFDL0IsQ0FBQ0M7UUFDQyxJQUFJQSxNQUFNQyxNQUFNLEtBQUtULGFBQWFRLE1BQU1QLElBQUksRUFBRTtZQUM1QyxNQUFNUyxZQUFZQyxLQUFLQyxLQUFLLENBQUNKLE9BQU9QO1lBQ3BDLElBQUlTLFVBQVVHLElBQUksS0FBSyxlQUFlO2dCQUNwQ1gsUUFBUVEsV0FBV1Q7Z0JBQ25CSSxhQUFhO1lBQ2Y7UUFDRjtJQUNGLEdBQ0E7UUFBQ0w7S0FBVTtJQUdiYyxJQUFBQSxnQkFBUyxFQUFDO1FBQ1JDLE9BQU9DLGdCQUFnQixDQUFDLFdBQVdWO1FBQ25DUyxPQUFPRSxNQUFNLENBQUNDLFdBQVcsQ0FBQyxTQUFTbEI7UUFFbkMsT0FBTztZQUNMZSxPQUFPSSxtQkFBbUIsQ0FBQyxXQUFXYjtRQUN4QztJQUNGLEdBQUc7UUFBQ047UUFBV007S0FBYztJQUU3QixPQUFPO1FBQ0xMO1FBQ0FHO0lBQ0Y7QUFDRiJ9

package/dist/admin/components/views/LivePreview/usePopupWindow.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePopupWindow", {
+    enumerable: true,
+    get: function() {
+        return usePopupWindow;
+    }
+});
+const _react = require("react");
+const _Config = require("../../utilities/Config");
+const usePopupWindow = (props)=>{
+    const { eventType, href, onMessage } = props;
+    const isReceivingMessage = (0, _react.useRef)(false);
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const [popupHasLoaded, setPopupHasLoaded] = (0, _react.useState)(false);
+    const { serverURL } = (0, _Config.useConfig)();
+    const popupRef = (0, _react.useRef)(null);
+    // Optionally broadcast messages back out to the parent component
+    (0, _react.useEffect)(()=>{
+        const receiveMessage = async (event)=>{
+            if (event.origin !== window.location.origin || event.origin !== href || event.origin !== serverURL) {
+                // console.warn(`Message received by ${event.origin}; IGNORED.`) // eslint-disable-line no-console
+                return;
+            }
+            if (typeof onMessage === 'function' && event.data?.type === eventType && !isReceivingMessage.current) {
+                isReceivingMessage.current = true;
+                await onMessage(event.data?.searchParams);
+                isReceivingMessage.current = false;
+            }
+        };
+        window.addEventListener('message', receiveMessage, false);
+        return ()=>{
+            window.removeEventListener('message', receiveMessage);
+        };
+    }, [
+        onMessage,
+        eventType,
+        href,
+        serverURL
+    ]);
+    // Customize the size, position, and style of the popup window
+    const openPopupWindow = (0, _react.useCallback)((e)=>{
+        e.preventDefault();
+        const features = {
+            height: 700,
+            left: 'auto',
+            menubar: 'no',
+            popup: 'yes',
+            toolbar: 'no',
+            top: 'auto',
+            width: 800
+        };
+        const popupOptions = Object.entries(features).reduce((str, [key, value])=>{
+            let strCopy = str;
+            if (value === 'auto') {
+                if (key === 'top') {
+                    const v = Math.round(window.innerHeight / 2 - features.height / 2);
+                    strCopy += `top=${v},`;
+                } else if (key === 'left') {
+                    const v = Math.round(window.innerWidth / 2 - features.width / 2);
+                    strCopy += `left=${v},`;
+                }
+                return strCopy;
+            }
+            strCopy += `${key}=${value},`;
+            return strCopy;
+        }, '').slice(0, -1) // remove last ',' (comma)
+        ;
+        const newWindow = window.open(href, '_blank', popupOptions);
+        popupRef.current = newWindow;
+        setIsOpen(true);
+    }, [
+        href
+    ]);
+    // the only cross-origin way of detecting when a popup window has loaded
+    // we catch a message event that the site rendered within the popup window fires
+    // there is no way in js to add an event listener to a popup window across domains
+    (0, _react.useEffect)(()=>{
+        window.addEventListener('message', (event)=>{
+            if (event.origin === href && event.data === 'ready') {
+                setPopupHasLoaded(true);
+            }
+        });
+    }, [
+        href
+    ]);
+    // this is the most stable and widely supported way to check if a popup window is no longer open
+    // we poll its ref every x ms and use the popup window's `closed` property
+    (0, _react.useEffect)(()=>{
+        let timer;
+        if (isOpen) {
+            timer = setInterval(function() {
+                if (popupRef.current.closed) {
+                    clearInterval(timer);
+                    setIsOpen(false);
+                    setPopupHasLoaded(false);
+                }
+            }, 1000);
+        } else {
+            clearInterval(timer);
+        }
+        return ()=>{
+            if (timer) {
+                clearInterval(timer);
+            }
+        };
+    }, [
+        isOpen,
+        popupRef
+    ]);
+    return {
+        isPopupOpen: isOpen,
+        openPopupWindow,
+        popupHasLoaded,
+        popupRef
+    };
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL0xpdmVQcmV2aWV3L3VzZVBvcHVwV2luZG93LnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZVJlZiwgdXNlU3RhdGUgfSBmcm9tICdyZWFjdCdcblxuaW1wb3J0IHsgdXNlQ29uZmlnIH0gZnJvbSAnLi4vLi4vdXRpbGl0aWVzL0NvbmZpZydcblxuZXhwb3J0IGludGVyZmFjZSBQb3B1cE1lc3NhZ2Uge1xuICBzZWFyY2hQYXJhbXM6IHtcbiAgICBba2V5OiBzdHJpbmddOiBzdHJpbmcgfCB1bmRlZmluZWRcbiAgICBjb2RlOiBzdHJpbmdcbiAgICBpbnN0YWxsYXRpb25faWQ6IHN0cmluZ1xuICAgIHN0YXRlOiBzdHJpbmdcbiAgfVxuICB0eXBlOiBzdHJpbmdcbn1cblxuZXhwb3J0IGNvbnN0IHVzZVBvcHVwV2luZG93ID0gKHByb3BzOiB7XG4gIGV2ZW50VHlwZT86IHN0cmluZ1xuICBocmVmOiBzdHJpbmdcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgb25NZXNzYWdlPzogKHNlYXJjaFBhcmFtczogUG9wdXBNZXNzYWdlWydzZWFyY2hQYXJhbXMnXSkgPT4gUHJvbWlzZTx2b2lkPlxufSk6IHtcbiAgaXNQb3B1cE9wZW46IGJvb2xlYW5cbiAgb3BlblBvcHVwV2luZG93OiAoZTogUmVhY3QuTW91c2VFdmVudDxIVE1MQW5jaG9yRWxlbWVudD4pID0+IHZvaWRcbiAgcG9wdXBIYXNMb2FkZWQ6IGJvb2xlYW5cbiAgcG9wdXBSZWY/OiBSZWFjdC5NdXRhYmxlUmVmT2JqZWN0PFdpbmRvdyB8IG51bGw+XG59ID0+IHtcbiAgY29uc3QgeyBldmVudFR5cGUsIGhyZWYsIG9uTWVzc2FnZSB9ID0gcHJvcHNcbiAgY29uc3QgaXNSZWNlaXZpbmdNZXNzYWdlID0gdXNlUmVmKGZhbHNlKVxuICBjb25zdCBbaXNPcGVuLCBzZXRJc09wZW5dID0gdXNlU3RhdGUoZmFsc2UpXG4gIGNvbnN0IFtwb3B1cEhhc0xvYWRlZCwgc2V0UG9wdXBIYXNMb2FkZWRdID0gdXNlU3RhdGUoZmFsc2UpXG4gIGNvbnN0IHsgc2VydmVyVVJMIH0gPSB1c2VDb25maWcoKVxuICBjb25zdCBwb3B1cFJlZiA9IHVzZVJlZjxXaW5kb3cgfCBudWxsPihudWxsKVxuXG4gIC8vIE9wdGlvbmFsbHkgYnJvYWRjYXN0IG1lc3NhZ2VzIGJhY2sgb3V0IHRvIHRoZSBwYXJlbnQgY29tcG9uZW50XG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgcmVjZWl2ZU1lc3NhZ2UgPSBhc3luYyAoZXZlbnQ6IE1lc3NhZ2VFdmVudCk6IFByb21pc2U8dm9pZD4gPT4ge1xuICAgICAgaWYgKFxuICAgICAgICBldmVudC5vcmlnaW4gIT09IHdpbmRvdy5sb2NhdGlvbi5vcmlnaW4gfHxcbiAgICAgICAgZXZlbnQub3JpZ2luICE9PSBocmVmIHx8XG4gICAgICAgIGV2ZW50Lm9yaWdpbiAhPT0gc2VydmVyVVJMXG4gICAgICApIHtcbiAgICAgICAgLy8gY29uc29sZS53YXJuKGBNZXNzYWdlIHJlY2VpdmVkIGJ5ICR7ZXZlbnQub3JpZ2lufTsgSUdOT1JFRC5gKSAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG5vLWNvbnNvbGVcbiAgICAgICAgcmV0dXJuXG4gICAgICB9XG5cbiAgICAgIGlmIChcbiAgICAgICAgdHlwZW9mIG9uTWVzc2FnZSA9PT0gJ2Z1bmN0aW9uJyAmJlxuICAgICAgICBldmVudC5kYXRhPy50eXBlID09PSBldmVudFR5cGUgJiZcbiAgICAgICAgIWlzUmVjZWl2aW5nTWVzc2FnZS5jdXJyZW50XG4gICAgICApIHtcbiAgICAgICAgaXNSZWNlaXZpbmdNZXNzYWdlLmN1cnJlbnQgPSB0cnVlXG4gICAgICAgIGF3YWl0IG9uTWVzc2FnZShldmVudC5kYXRhPy5zZWFyY2hQYXJhbXMpXG4gICAgICAgIGlzUmVjZWl2aW5nTWVzc2FnZS5jdXJyZW50ID0gZmFsc2VcbiAgICAgIH1cbiAgICB9XG5cbiAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignbWVzc2FnZScsIHJlY2VpdmVNZXNzYWdlLCBmYWxzZSlcblxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcignbWVzc2FnZScsIHJlY2VpdmVNZXNzYWdlKVxuICAgIH1cbiAgfSwgW29uTWVzc2FnZSwgZXZlbnRUeXBlLCBocmVmLCBzZXJ2ZXJVUkxdKVxuXG4gIC8vIEN1c3RvbWl6ZSB0aGUgc2l6ZSwgcG9zaXRpb24sIGFuZCBzdHlsZSBvZiB0aGUgcG9wdXAgd2luZG93XG4gIGNvbnN0IG9wZW5Qb3B1cFdpbmRvdyA9IHVzZUNhbGxiYWNrKFxuICAgIChlKSA9PiB7XG4gICAgICBlLnByZXZlbnREZWZhdWx0KClcblxuICAgICAgY29uc3QgZmVhdHVyZXMgPSB7XG4gICAgICAgIGhlaWdodDogNzAwLFxuICAgICAgICBsZWZ0OiAnYXV0bycsXG4gICAgICAgIG1lbnViYXI6ICdubycsXG4gICAgICAgIHBvcHVwOiAneWVzJyxcbiAgICAgICAgdG9vbGJhcjogJ25vJyxcbiAgICAgICAgdG9wOiAnYXV0bycsXG4gICAgICAgIHdpZHRoOiA4MDAsXG4gICAgICB9XG5cbiAgICAgIGNvbnN0IHBvcHVwT3B0aW9ucyA9IE9iamVjdC5lbnRyaWVzKGZlYXR1cmVzKVxuICAgICAgICAucmVkdWNlKChzdHIsIFtrZXksIHZhbHVlXSkgPT4ge1xuICAgICAgICAgIGxldCBzdHJDb3B5ID0gc3RyXG4gICAgICAgICAgaWYgKHZhbHVlID09PSAnYXV0bycpIHtcbiAgICAgICAgICAgIGlmIChrZXkgPT09ICd0b3AnKSB7XG4gICAgICAgICAgICAgIGNvbnN0IHYgPSBNYXRoLnJvdW5kKHdpbmRvdy5pbm5lckhlaWdodCAvIDIgLSBmZWF0dXJlcy5oZWlnaHQgLyAyKVxuICAgICAgICAgICAgICBzdHJDb3B5ICs9IGB0b3A9JHt2fSxgXG4gICAgICAgICAgICB9IGVsc2UgaWYgKGtleSA9PT0gJ2xlZnQnKSB7XG4gICAgICAgICAgICAgIGNvbnN0IHYgPSBNYXRoLnJvdW5kKHdpbmRvdy5pbm5lcldpZHRoIC8gMiAtIGZlYXR1cmVzLndpZHRoIC8gMilcbiAgICAgICAgICAgICAgc3RyQ29weSArPSBgbGVmdD0ke3Z9LGBcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIHJldHVybiBzdHJDb3B5XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgc3RyQ29weSArPSBgJHtrZXl9PSR7dmFsdWV9LGBcbiAgICAgICAgICByZXR1cm4gc3RyQ29weVxuICAgICAgICB9LCAnJylcbiAgICAgICAgLnNsaWNlKDAsIC0xKSAvLyByZW1vdmUgbGFzdCAnLCcgKGNvbW1hKVxuICAgICAgY29uc3QgbmV3V2luZG93ID0gd2luZG93Lm9wZW4oaHJlZiwgJ19ibGFuaycsIHBvcHVwT3B0aW9ucylcbiAgICAgIHBvcHVwUmVmLmN1cnJlbnQgPSBuZXdXaW5kb3dcbiAgICAgIHNldElzT3Blbih0cnVlKVxuICAgIH0sXG4gICAgW2hyZWZdLFxuICApXG5cbiAgLy8gdGhlIG9ubHkgY3Jvc3Mtb3JpZ2luIHdheSBvZiBkZXRlY3Rpbmcgd2hlbiBhIHBvcHVwIHdpbmRvdyBoYXMgbG9hZGVkXG4gIC8vIHdlIGNhdGNoIGEgbWVzc2FnZSBldmVudCB0aGF0IHRoZSBzaXRlIHJlbmRlcmVkIHdpdGhpbiB0aGUgcG9wdXAgd2luZG93IGZpcmVzXG4gIC8vIHRoZXJlIGlzIG5vIHdheSBpbiBqcyB0byBhZGQgYW4gZXZlbnQgbGlzdGVuZXIgdG8gYSBwb3B1cCB3aW5kb3cgYWNyb3NzIGRvbWFpbnNcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICB3aW5kb3cuYWRkRXZlbnRMaXN0ZW5lcignbWVzc2FnZScsIChldmVudCkgPT4ge1xuICAgICAgaWYgKGV2ZW50Lm9yaWdpbiA9PT0gaHJlZiAmJiBldmVudC5kYXRhID09PSAncmVhZHknKSB7XG4gICAgICAgIHNldFBvcHVwSGFzTG9hZGVkKHRydWUpXG4gICAgICB9XG4gICAgfSlcbiAgfSwgW2hyZWZdKVxuXG4gIC8vIHRoaXMgaXMgdGhlIG1vc3Qgc3RhYmxlIGFuZCB3aWRlbHkgc3VwcG9ydGVkIHdheSB0byBjaGVjayBpZiBhIHBvcHVwIHdpbmRvdyBpcyBubyBsb25nZXIgb3BlblxuICAvLyB3ZSBwb2xsIGl0cyByZWYgZXZlcnkgeCBtcyBhbmQgdXNlIHRoZSBwb3B1cCB3aW5kb3cncyBgY2xvc2VkYCBwcm9wZXJ0eVxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGxldCB0aW1lcjogTm9kZUpTLlRpbWVvdXRcblxuICAgIGlmIChpc09wZW4pIHtcbiAgICAgIHRpbWVyID0gc2V0SW50ZXJ2YWwoZnVuY3Rpb24gKCkge1xuICAgICAgICBpZiAocG9wdXBSZWYuY3VycmVudC5jbG9zZWQpIHtcbiAgICAgICAgICBjbGVhckludGVydmFsKHRpbWVyKVxuICAgICAgICAgIHNldElzT3BlbihmYWxzZSlcbiAgICAgICAgICBzZXRQb3B1cEhhc0xvYWRlZChmYWxzZSlcbiAgICAgICAgfVxuICAgICAgfSwgMTAwMClcbiAgICB9IGVsc2Uge1xuICAgICAgY2xlYXJJbnRlcnZhbCh0aW1lcilcbiAgICB9XG5cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgaWYgKHRpbWVyKSB7XG4gICAgICAgIGNsZWFySW50ZXJ2YWwodGltZXIpXG4gICAgICB9XG4gICAgfVxuICB9LCBbaXNPcGVuLCBwb3B1cFJlZl0pXG5cbiAgcmV0dXJuIHtcbiAgICBpc1BvcHVwT3BlbjogaXNPcGVuLFxuICAgIG9wZW5Qb3B1cFdpbmRvdyxcbiAgICBwb3B1cEhhc0xvYWRlZCxcbiAgICBwb3B1cFJlZixcbiAgfVxufVxuIl0sIm5hbWVzIjpbInVzZVBvcHVwV2luZG93IiwicHJvcHMiLCJldmVudFR5cGUiLCJocmVmIiwib25NZXNzYWdlIiwiaXNSZWNlaXZpbmdNZXNzYWdlIiwidXNlUmVmIiwiaXNPcGVuIiwic2V0SXNPcGVuIiwidXNlU3RhdGUiLCJwb3B1cEhhc0xvYWRlZCIsInNldFBvcHVwSGFzTG9hZGVkIiwic2VydmVyVVJMIiwidXNlQ29uZmlnIiwicG9wdXBSZWYiLCJ1c2VFZmZlY3QiLCJyZWNlaXZlTWVzc2FnZSIsImV2ZW50Iiwib3JpZ2luIiwid2luZG93IiwibG9jYXRpb24iLCJkYXRhIiwidHlwZSIsImN1cnJlbnQiLCJzZWFyY2hQYXJhbXMiLCJhZGRFdmVudExpc3RlbmVyIiwicmVtb3ZlRXZlbnRMaXN0ZW5lciIsIm9wZW5Qb3B1cFdpbmRvdyIsInVzZUNhbGxiYWNrIiwiZSIsInByZXZlbnREZWZhdWx0IiwiZmVhdHVyZXMiLCJoZWlnaHQiLCJsZWZ0IiwibWVudWJhciIsInBvcHVwIiwidG9vbGJhciIsInRvcCIsIndpZHRoIiwicG9wdXBPcHRpb25zIiwiT2JqZWN0IiwiZW50cmllcyIsInJlZHVjZSIsInN0ciIsImtleSIsInZhbHVlIiwic3RyQ29weSIsInYiLCJNYXRoIiwicm91bmQiLCJpbm5lckhlaWdodCIsImlubmVyV2lkdGgiLCJzbGljZSIsIm5ld1dpbmRvdyIsIm9wZW4iLCJ0aW1lciIsInNldEludGVydmFsIiwiY2xvc2VkIiwiY2xlYXJJbnRlcnZhbCIsImlzUG9wdXBPcGVuIl0sIm1hcHBpbmdzIjoiOzs7OytCQWNhQTs7O2VBQUFBOzs7dUJBZDRDO3dCQUUvQjtBQVluQixNQUFNQSxpQkFBaUIsQ0FBQ0M7SUFXN0IsTUFBTSxFQUFFQyxTQUFTLEVBQUVDLElBQUksRUFBRUMsU0FBUyxFQUFFLEdBQUdIO0lBQ3ZDLE1BQU1JLHFCQUFxQkMsSUFBQUEsYUFBTSxFQUFDO0lBQ2xDLE1BQU0sQ0FBQ0MsUUFBUUMsVUFBVSxHQUFHQyxJQUFBQSxlQUFRLEVBQUM7SUFDckMsTUFBTSxDQUFDQyxnQkFBZ0JDLGtCQUFrQixHQUFHRixJQUFBQSxlQUFRLEVBQUM7SUFDckQsTUFBTSxFQUFFRyxTQUFTLEVBQUUsR0FBR0MsSUFBQUEsaUJBQVM7SUFD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

package/dist/admin/components/views/NotFound/index.scss

@@ -20,7 +20,7 @@
     margin-top: calc(var(--base) * 2);
   }
 
-  @include mid-break {
+  @include large-break {
     &--margin-top-large {
       margin-top: var(--base);
     }

package/dist/admin/components/views/RestAPI/index.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "QueryInspector", {
+    enumerable: true,
+    get: function() {
+        return QueryInspector;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reacti18next = require("react-i18next");
+const _api = require("../../../api");
+const _Gutter = require("../../elements/Gutter");
+const _Input = /*#__PURE__*/ _interop_require_default(require("../../forms/field-types/Text/Input"));
+const _Config = require("../../utilities/Config");
+const _DocumentInfo = require("../../utilities/DocumentInfo");
+require("./index.scss");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const baseClass = 'query-inspector';
+const QueryInspector = ()=>{
+    const { id, collection } = (0, _DocumentInfo.useDocumentInfo)();
+    const { serverURL } = (0, _Config.useConfig)();
+    const { i18n } = (0, _reacti18next.useTranslation)();
+    const [query, setQuery] = _react.useState('');
+    const containerRef = _react.useRef(null);
+    _react.useEffect(()=>{
+        const fetchData = async ()=>{
+            if (id) {
+                const request = await _api.requests.get(`${serverURL}/api/${collection.slug}/${id}${query ? `${query}` : ''}`, {
+                    headers: {
+                        'Accept-Language': i18n.language
+                    }
+                });
+                const json = await request.json();
+                // const formatter = new JsonFormatter(json, Infinity)
+                // const formattedJSON = formatter.render()
+                containerRef.current.innerHTML = '' // Clear previous content
+                ;
+                containerRef.current.appendChild(json);
+            }
+        };
+        fetchData();
+    }, [
+        id,
+        collection,
+        serverURL,
+        i18n.language,
+        query
+    ]);
+    return /*#__PURE__*/ _react.createElement(_Gutter.Gutter, {
+        className: baseClass,
+        right: false
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: `${baseClass}__configuration`
+    }, /*#__PURE__*/ _react.createElement("h3", {
+        className: `${baseClass}__configuration-title`
+    }, "Query Builder"), /*#__PURE__*/ _react.createElement(_Input.default, {
+        name: "query",
+        onChange: (e)=>setQuery(e.target.value),
+        path: "query",
+        placeholder: "?depth=1",
+        value: query
+    })), /*#__PURE__*/ _react.createElement("div", {
+        className: `${baseClass}__results-container`,
+        ref: containerRef
+    }));
+};
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9hZG1pbi9jb21wb25lbnRzL3ZpZXdzL1Jlc3RBUEkvaW5kZXgudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHsgdXNlVHJhbnNsYXRpb24gfSBmcm9tICdyZWFjdC1pMThuZXh0J1xuXG5pbXBvcnQgeyByZXF1ZXN0cyB9IGZyb20gJy4uLy4uLy4uL2FwaSdcbmltcG9ydCB7IEd1dHRlciB9IGZyb20gJy4uLy4uL2VsZW1lbnRzL0d1dHRlcidcbmltcG9ydCBUZXh0SW5wdXQgZnJvbSAnLi4vLi4vZm9ybXMvZmllbGQtdHlwZXMvVGV4dC9JbnB1dCdcbmltcG9ydCB7IHVzZUNvbmZpZyB9IGZyb20gJy4uLy4uL3V0aWxpdGllcy9Db25maWcnXG5pbXBvcnQgeyB1c2VEb2N1bWVudEluZm8gfSBmcm9tICcuLi8uLi91dGlsaXRpZXMvRG9jdW1lbnRJbmZvJ1xuaW1wb3J0ICcuL2luZGV4LnNjc3MnXG5cbmNvbnN0IGJhc2VDbGFzcyA9ICdxdWVyeS1pbnNwZWN0b3InXG5cbmV4cG9ydCBjb25zdCBRdWVyeUluc3BlY3RvciA9ICgpID0+IHtcbiAgY29uc3QgeyBpZCwgY29sbGVjdGlvbiB9ID0gdXNlRG9jdW1lbnRJbmZvKClcbiAgY29uc3QgeyBzZXJ2ZXJVUkwgfSA9IHVzZUNvbmZpZygpXG4gIGNvbnN0IHsgaTE4biB9ID0gdXNlVHJhbnNsYXRpb24oKVxuXG4gIGNvbnN0IFtxdWVyeSwgc2V0UXVlcnldID0gUmVhY3QudXNlU3RhdGU8c3RyaW5nPignJylcbiAgY29uc3QgY29udGFpbmVyUmVmID0gUmVhY3QudXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKVxuXG4gIFJlYWN0LnVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgZmV0Y2hEYXRhID0gYXN5bmMgKCkgPT4ge1xuICAgICAgaWYgKGlkKSB7XG4gICAgICAgIGNvbnN0IHJlcXVlc3QgPSBhd2FpdCByZXF1ZXN0cy5nZXQoXG4gICAgICAgICAgYCR7c2VydmVyVVJMfS9hcGkvJHtjb2xsZWN0aW9uLnNsdWd9LyR7aWR9JHtxdWVyeSA/IGAke3F1ZXJ5fWAgOiAnJ31gLFxuICAgICAgICAgIHtcbiAgICAgICAgICAgIGhlYWRlcnM6IHtcbiAgICAgICAgICAgICAgJ0FjY2VwdC1MYW5ndWFnZSc6IGkxOG4ubGFuZ3VhZ2UsXG4gICAgICAgICAgICB9LFxuICAgICAgICAgIH0sXG4gICAgICAgIClcblxuICAgICAgICBjb25zdCBqc29uID0gYXdhaXQgcmVxdWVzdC5qc29uKClcbiAgICAgICAgLy8gY29uc3QgZm9ybWF0dGVyID0gbmV3IEpzb25Gb3JtYXR0ZXIoanNvbiwgSW5maW5pdHkpXG4gICAgICAgIC8vIGNvbnN0IGZvcm1hdHRlZEpTT04gPSBmb3JtYXR0ZXIucmVuZGVyKClcblxuICAgICAgICBjb250YWluZXJSZWYuY3VycmVudC5pbm5lckhUTUwgPSAnJyAvLyBDbGVhciBwcmV2aW91cyBjb250ZW50XG4gICAgICAgIGNvbnRhaW5lclJlZi5jdXJyZW50LmFwcGVuZENoaWxkKGpzb24pXG4gICAgICB9XG4gICAgfVxuXG4gICAgZmV0Y2hEYXRhKClcbiAgfSwgW2lkLCBjb2xsZWN0aW9uLCBzZXJ2ZXJVUkwsIGkxOG4ubGFuZ3VhZ2UsIHF1ZXJ5XSlcblxuICByZXR1cm4gKFxuICAgIDxHdXR0ZXIgY2xhc3NOYW1lPXtiYXNlQ2xhc3N9IHJpZ2h0PXtmYWxzZX0+XG4gICAgICA8ZGl2IGNsYXNzTmFtZT17YCR7YmFzZUNsYXNzfV9fY29uZmlndXJhdGlvbmB9PlxuICAgICAgICA8aDMgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19jb25maWd1cmF0aW9uLXRpdGxlYH0+UXVlcnkgQnVpbGRlcjwvaDM+XG4gICAgICAgIDxUZXh0SW5wdXRcbiAgICAgICAgICBuYW1lPVwicXVlcnlcIlxuICAgICAgICAgIG9uQ2hhbmdlPXsoZSkgPT4gc2V0UXVlcnkoZS50YXJnZXQudmFsdWUpfVxuICAgICAgICAgIHBhdGg9XCJxdWVyeVwiXG4gICAgICAgICAgcGxhY2Vob2xkZXI9XCI/ZGVwdGg9MVwiXG4gICAgICAgICAgdmFsdWU9e3F1ZXJ5fVxuICAgICAgICAvPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPXtgJHtiYXNlQ2xhc3N9X19yZXN1bHRzLWNvbnRhaW5lcmB9IHJlZj17Y29udGFpbmVyUmVmfSAvPlxuICAgIDwvR3V0dGVyPlxuICApXG59XG4iXSwibmFtZXMiOlsiUXVlcnlJbnNwZWN0b3IiLCJiYXNlQ2xhc3MiLCJpZCIsImNvbGxlY3Rpb24iLCJ1c2VEb2N1bWVudEluZm8iLCJzZXJ2ZXJVUkwiLCJ1c2VDb25maWciLCJpMThuIiwidXNlVHJhbnNsYXRpb24iLCJxdWVyeSIsInNldFF1ZXJ5IiwiUmVhY3QiLCJ1c2VTdGF0ZSIsImNvbnRhaW5lclJlZiIsInVzZVJlZiIsInVzZUVmZmVjdCIsImZldGNoRGF0YSIsInJlcXVlc3QiLCJyZXF1ZXN0cyIsImdldCIsInNsdWciLCJoZWFkZXJzIiwibGFuZ3VhZ2UiLCJqc29uIiwiY3VycmVudCIsImlubmVySFRNTCIsImFwcGVuZENoaWxkIiwiR3V0dGVyIiwiY2xhc3NOYW1lIiwicmlnaHQiLCJkaXYiLCJoMyIsIlRleHRJbnB1dCIsIm5hbWUiLCJvbkNoYW5nZSIsImUiLCJ0YXJnZXQiLCJ2YWx1ZSIsInBhdGgiLCJwbGFjZWhvbGRlciIsInJlZiJdLCJtYXBwaW5ncyI6Ijs7OzsrQkFZYUE7OztlQUFBQTs7OytEQVpVOzhCQUNRO3FCQUVOO3dCQUNGOzhEQUNEO3dCQUNJOzhCQUNNO1FBQ3pCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFUCxNQUFNQyxZQUFZO0FBRVgsTUFBTUQsaUJBQWlCO0lBQzVCLE1BQU0sRUFBRUUsRUFBRSxFQUFFQyxVQUFVLEVBQUUsR0FBR0MsSUFBQUEsNkJBQWU7SUFDMUMsTUFBTSxFQUFFQyxTQUFTLEVBQUUsR0FBR0MsSUFBQUEsaUJBQVM7SUFDL0IsTUFBTSxFQUFFQyxJQUFJLEVBQUUsR0FBR0MsSUFBQUEsNEJBQWM7SUFFL0IsTUFBTSxDQUFDQyxPQUFPQyxTQUFTLEdBQUdDLE9BQU1DLFFBQVEsQ0FBUztJQUNqRCxNQUFNQyxlQUFlRixPQUFNRyxNQUFNLENBQWlCO0lBRWxESCxPQUFNSSxTQUFTLENBQUM7UUFDZCxNQUFNQyxZQUFZO1lBQ2hCLElBQUlkLElBQUk7Z0JBQ04sTUFBTWUsVUFBVSxNQUFNQyxhQUFRLENBQUNDLEdBQUcsQ0FDaEMsQ0FBQyxFQUFFZCxVQUFVLEtBQUssRUFBRUYsV0FBV2lCLElBQUksQ0FBQyxDQUFDLEVBQUVsQixHQUFHLEVBQUVPLFFBQVEsQ0FBQyxFQUFFQSxNQUFNLENBQUMsR0FBRyxHQUFHLENBQUMsRUFDckU7b0JBQ0VZLFNBQVM7d0JBQ1AsbUJBQW1CZCxLQUFLZSxRQUFRO29CQUNsQztnQkFDRjtnQkFHRixNQUFNQyxPQUFPLE1BQU1OLFFBQVFNLElBQUk7Z0JBQy9CLHNEQUFzRDtnQkFDdEQsMkNBQTJDO2dCQUUzQ1YsYUFBYVcsT0FBTyxDQUFDQyxTQUFTLEdBQUcsR0FBRyx5QkFBeUI7O2dCQUM3RFosYUFBYVcsT0FBTyxDQUFDRSxXQUFXLENBQUNIO1lBQ25DO1FBQ0Y7UUFFQVA7SUFDRixHQUFHO1FBQUNkO1FBQUlDO1FBQVlFO1FBQVdFLEtBQUtlLFFBQVE7UUFBRWI7S0FBTTtJQUVwRCxxQkFDRSxxQkFBQ2tCLGNBQU07UUFBQ0MsV0FBVzNCO1FBQVc0QixPQUFPO3FCQUNuQyxxQkFBQ0M7UUFBSUYsV0FBVyxDQUFDLEVBQUUzQixVQUFVLGVBQWUsQ0FBQztxQkFDM0MscUJBQUM4QjtRQUFHSCxXQUFXLENBQUMsRUFBRTNCLFVBQVUscUJBQXFCLENBQUM7T0FBRSxnQ0FDcEQscUJBQUMrQixjQUFTO1FBQ1JDLE1BQUs7UUFDTEMsVUFBVSxDQUFDQyxJQUFNekIsU0FBU3lCLEVBQUVDLE1BQU0sQ0FBQ0MsS0FBSztRQUN4Q0MsTUFBSztRQUNMQyxhQUFZO1FBQ1pGLE9BQU81Qjt1QkFJWCxxQkFBQ3FCO1FBQUlGLFdBQVcsQ0FBQyxFQUFFM0IsVUFBVSxtQkFBbUIsQ0FBQztRQUFFdUMsS0FBSzNCOztBQUc5RCJ9

package/dist/admin/components/views/RestAPI/index.scss

@@ -0,0 +1,107 @@
+.query-inspector {
+  display: flex;
+  gap: var(--base);
+}
+
+.query-inspector__configuration {
+  margin-top: calc(var(--base) * 2);
+}
+
+.query-inspector__results-container {
+  --inspector-bg: var(--theme-elevation-50);
+  overflow: auto;
+  background-color: var(--inspector-bg);
+  flex-grow: 1;
+  padding-top: calc(var(--base) * 0.5);
+  padding-left: calc(var(--base) * 0.5);
+  padding-bottom: calc(var(--base) * 0.5);
+
+  .json-formatter-constructor-name,
+  .json-formatter-constructor-name + *,
+  > .json-formatter-row > .json-formatter-toggler-link {
+    display: none;
+  }
+
+  > .json-formatter-row {
+    border: none !important;
+  }
+
+  .json-formatter-constructor-name,
+  .json-formatter-key,
+  .json-formatter-bracket {
+    color: var(--theme-text);
+  }
+
+  .json-formatter-row {
+    position: relative;
+  }
+
+  .json-formatter-children {
+    position: relative;
+  }
+
+  .json-formatter-toggler-link {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  .json-formatter-toggler-link {
+    &:before {
+      content: '';
+      position: absolute;
+      width: 0px;
+      border-left: 1px dashed var(--theme-elevation-400);
+      opacity: 0.5;
+      height: calc(100% - 25px);
+      top: 25px;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  .json-formatter-row .json-formatter-toggler {
+    height: 5px;
+    width: 5px;
+    position: relative;
+    opacity: 1;
+
+    &:after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      border: 4px solid transparent;
+      border-left-color: var(--theme-text);
+      transform: translate3d(-50%, -50%, 0px) !important;
+      left: 0;
+      top: 5px;
+    }
+  }
+
+  .json-formatter-row.json-formatter-open > .json-formatter-toggler-link > .json-formatter-toggler {
+    &:after {
+      border-top-color: var(--theme-text);
+      border-left-color: transparent;
+    }
+  }
+
+  .json-formatter-key {
+  }
+
+  .json-formatter-number {
+    color: #62c3f3;
+  }
+}
+
+html[data-theme='dark'] {
+  .query-inspector__results-container {
+    .json-formatter-toggler {
+    }
+
+    .json-formatter-key {
+    }
+
+    .json-formatter-number {
+    }
+  }
+}