eddev 0.1.43 → 0.1.46

package/blocks/ContentBlocks.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 export declare type ContentBlock<T extends keyof BlockProps | string = any> = {
+    attrs: any;
     blockName: T;
     props: BlockProps extends keyof BlockProps ? BlockProps[T] : any;
     innerBlocks: ContentBlock[];

package/blocks/InspectorControls.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from "react";
+export declare function InspectorControls(props: PropsWithChildren<{}>): JSX.Element | null;

package/blocks/InspectorControls.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorControls = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore
+var block_editor_1 = require("@wordpress/block-editor");
+function InspectorControls(props) {
+    if (process.admin) {
+        return (0, jsx_runtime_1.jsx)(block_editor_1.InspectorControls, { children: props.children }, void 0);
+    }
+    return null;
+}
+exports.InspectorControls = InspectorControls;

package/blocks/defineBlock.d.ts

@@ -1,2 +1,2 @@
 import { ComponentType, ReactElement } from "react";
-export declare function defineBlock<Name extends keyof BlockProps>(name: Name, component: (props: BlockProps[Name]) => ReactElement): ComponentType<BlockProps[Name]>;
+export declare function defineBlock<Name extends keyof BlockProps>(name: Name, component: (props: BlockProps[Name]) => ReactElement | null): ComponentType<BlockProps[Name]>;

package/blocks/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./defineBlock";
 export * from "./inlineEditing";
 export * from "./ContentBlocks";
+export * from "./InspectorControls";
 export { useInlineEditableValue, useInnerBlocks } from "./blockAttributes";

package/blocks/index.js

@@ -14,6 +14,7 @@ exports.useInnerBlocks = exports.useInlineEditableValue = void 0;
 __exportStar(require("./defineBlock"), exports);
 __exportStar(require("./inlineEditing"), exports);
 __exportStar(require("./ContentBlocks"), exports);
+__exportStar(require("./InspectorControls"), exports);
 var blockAttributes_1 = require("./blockAttributes");
 Object.defineProperty(exports, "useInlineEditableValue", { enumerable: true, get: function () { return blockAttributes_1.useInlineEditableValue; } });
 Object.defineProperty(exports, "useInnerBlocks", { enumerable: true, get: function () { return blockAttributes_1.useInnerBlocks; } });

package/blocks/installGutenbergHooks.js

@@ -40,6 +40,10 @@ var BlockContext = (0, react_1.createContext)(undefined);
 // Store the block manifest as a local variable
 var blocksManifest = new Observable_1.Observable(blocks_1.default);
 function installEDGutenbergHooks() {
+    // Skip this if we're not in the block editor
+    // @ts-ignore
+    if (!window.wp.blockEditor)
+        return;
     (0, react_2.globalCss)({
         ".block-editor-block-list__block:hover": {
             outline: "1px solid #e1e1e1",
@@ -125,9 +129,10 @@ function installEDGutenbergHooks() {
             if (item.tags.length) {
                 Object.defineProperty(item, "parent", {
                     get: function () {
-                        return item.tags.reduce(function (acc, tag) {
+                        var result = item.tags.reduce(function (acc, tag) {
                             return __spreadArray(__spreadArray([], acc, true), getParentsForTag(tag), true);
                         }, []);
+                        return result;
                     },
                 });
             }

package/build/get-webpack-config.js

@@ -78,9 +78,9 @@ var autoprefixer_1 = __importDefault(require("autoprefixer"));
 var plugin_name_defined_components_1 = __importDefault(require("./babel/plugin-name-defined-components"));
 function getWebpackConfig(opts) {
     return __awaiter(this, void 0, void 0, function () {
-        var compiling, ALIAS, ENTRY, PLUGINS, RULES, DEFINES, VIRTUAL_MODULES, EXTERNALS, virtualModules, isServerless, isBrowser, isSSR, isDev, entryDir, distSuffix, outputFolder, loadableManifestFile, writeVirtualModule, updateTemplateRouter, templateLookupPattern, _a, updateBlocksManifest, blockLookupManifest, _b, buildID;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var compiling, ALIAS, ENTRY, PLUGINS, RULES, DEFINES, VIRTUAL_MODULES, EXTERNALS, virtualModules, isServerless, isBrowser, isSSR, isDev, entryDir, distSuffix, outputFolder, loadableManifestFile, writeVirtualModule, updateTemplateRouter, templateLookupPattern, _a, updateFieldManifest, fieldTypeLookupPattern, _b, updateBlocksManifest, blockLookupManifest, _c, buildID;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
                     compiling = false;
                     ALIAS = {};
@@ -251,10 +251,11 @@ function getWebpackConfig(opts) {
                             var relative = path_1.default.relative(opts.baseDirectory, file);
                             var name = path_1.default.basename(file).replace(/\.(jsx|tsx|ts|js)$/i, "");
                             var module = JSON.stringify("./" + relative);
-                            var componentName = (0, change_case_1.pascalCase)(name);
+                            var componentName = "View" + (0, change_case_1.pascalCase)(name);
                             return { relative: relative, name: name, module: module, componentName: componentName };
                         });
-                        writeVirtualModule(ALIAS["@manifest/views"], "\n          ".concat(!isServerless && "import loadable from '".concat(require.resolve("@loadable/component"), "';"), "\n          import App from ").concat(JSON.stringify("./views/_app.tsx"), "\n\n          ").concat(isServerless
+                        var useLoadableViews = false;
+                        writeVirtualModule(ALIAS["@manifest/views"], "\n          ".concat(useLoadableViews && "import loadable from '".concat(require.resolve("@loadable/component"), "';"), "\n          import App from ").concat(JSON.stringify("./views/_app.tsx"), "\n\n          ").concat(!useLoadableViews
                             ? files.map(function (_a) {
                                 var componentName = _a.componentName, module = _a.module;
                                 return "import ".concat(componentName, " from ").concat(module);
@@ -262,7 +263,7 @@ function getWebpackConfig(opts) {
                             : "", "\n\n          export { App }\n\n          export default {\n            ").concat(files
                             .map(function (_a) {
                             var relative = _a.relative, componentName = _a.componentName, module = _a.module;
-                            if (!isServerless) {
+                            if (useLoadableViews) {
                                 // In serverless mode, export @loadable components. Script tags will be
                                 // auto-included in output HTML
                                 return "\"".concat(relative, "\": loadable(() => import(").concat(module, "))");
@@ -282,15 +283,53 @@ function getWebpackConfig(opts) {
                     if (!isDev) return [3 /*break*/, 3];
                     return [4 /*yield*/, (0, file_tree_1.watchFileTree)(templateLookupPattern, updateTemplateRouter)];
                 case 2:
-                    _c.sent();
+                    _d.sent();
                     return [3 /*break*/, 5];
                 case 3:
                     _a = updateTemplateRouter;
                     return [4 /*yield*/, (0, file_tree_1.getFileTree)(templateLookupPattern)];
                 case 4:
-                    _a.apply(void 0, [_c.sent()]);
-                    _c.label = 5;
+                    _a.apply(void 0, [_d.sent()]);
+                    _d.label = 5;
                 case 5:
+                    ALIAS["@manifest/fields"] = path_1.default.resolve(opts.baseDirectory, "_fields_manifest.js");
+                    updateFieldManifest = function (fileNames) {
+                        var files = fileNames
+                            .filter(function (file) { return !file.includes("/_app"); })
+                            .map(function (file) {
+                            var relative = path_1.default.relative(opts.baseDirectory, file);
+                            var name = path_1.default.basename(file).replace(/\.(jsx|tsx|ts|js)$/i, "");
+                            var module = JSON.stringify("./" + relative);
+                            var componentName = "FieldType" + (0, change_case_1.pascalCase)(name);
+                            return { relative: relative, name: name, module: module, componentName: componentName };
+                        });
+                        writeVirtualModule(ALIAS["@manifest/fields"], "\n          ".concat(files.map(function (_a) {
+                            var componentName = _a.componentName, module = _a.module;
+                            return "import ".concat(componentName, " from ").concat(module);
+                        }).join("\n"), "\n\n          export default {\n            ").concat(files
+                            .map(function (_a) {
+                            var relative = _a.relative, componentName = _a.componentName, module = _a.module, name = _a.name;
+                            return "\"".concat(name, "\": ").concat(componentName);
+                        })
+                            .join(",\n"), "\n          }\n        "));
+                    };
+                    fieldTypeLookupPattern = path_1.default.resolve(opts.baseDirectory, "backend/fields/**.tsx");
+                    if (!!opts.isAdmin) return [3 /*break*/, 6];
+                    writeVirtualModule(ALIAS["@manifest/fields"], "\n        export default {}\n      ");
+                    return [3 /*break*/, 10];
+                case 6:
+                    if (!isDev) return [3 /*break*/, 8];
+                    return [4 /*yield*/, (0, file_tree_1.watchFileTree)(fieldTypeLookupPattern, updateFieldManifest)];
+                case 7:
+                    _d.sent();
+                    return [3 /*break*/, 10];
+                case 8:
+                    _b = updateFieldManifest;
+                    return [4 /*yield*/, (0, file_tree_1.getFileTree)(templateLookupPattern)];
+                case 9:
+                    _b.apply(void 0, [_d.sent()]);
+                    _d.label = 10;
+                case 10:
                     ALIAS["@manifest/blocks"] = path_1.default.resolve(opts.baseDirectory, "_blocks_manifest.js");
                     updateBlocksManifest = function (fileNames) {
                         var files = fileNames
@@ -332,18 +371,18 @@ function getWebpackConfig(opts) {
                         }
                     };
                     blockLookupManifest = path_1.default.resolve(opts.baseDirectory, "blocks/**/*.tsx");
-                    if (!isDev) return [3 /*break*/, 7];
+                    if (!isDev) return [3 /*break*/, 12];
                     return [4 /*yield*/, (0, file_tree_1.watchFileTree)(blockLookupManifest, updateBlocksManifest)];
-                case 6:
-                    _c.sent();
-                    return [3 /*break*/, 9];
-                case 7:
-                    _b = updateBlocksManifest;
+                case 11:
+                    _d.sent();
+                    return [3 /*break*/, 14];
+                case 12:
+                    _c = updateBlocksManifest;
                     return [4 /*yield*/, (0, file_tree_1.getFileTree)(blockLookupManifest)];
-                case 8:
-                    _b.apply(void 0, [_c.sent()]);
-                    _c.label = 9;
-                case 9:
+                case 13:
+                    _c.apply(void 0, [_d.sent()]);
+                    _d.label = 14;
+                case 14:
                     // External Gutenberg
                     EXTERNALS["@wordpress/components"] = ["wp", "components"];
                     EXTERNALS["@wordpress/element"] = ["wp", "element"];
@@ -354,6 +393,7 @@ function getWebpackConfig(opts) {
                     EXTERNALS["@wordpress/block-editor"] = ["wp", "blockEditor"];
                     if (opts.isAdmin) {
                         EXTERNALS["react"] = "React";
+                        EXTERNALS["react-dom"] = "ReactDOM";
                     }
                     // Define some values
                     DEFINES["process.browser"] = JSON.stringify(isBrowser);

package/cli/display/components/BundleDisplay.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CompilerState } from "../../../build/state/compiler-state";
 import { Observable } from "../../../utils/Observable";
 export declare function BundleDisplay(props: {

package/cli/display/components/CodegenDisplay.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CodegenState } from "../../../build/state/codegen-state";
 import { Observable } from "../../../utils/Observable";
 export declare function CodegenDisplay(props: {

package/cli/display/components/DevCLIDisplay.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CodegenState } from "../../../build/state/codegen-state";
 import { CompilerState } from "../../../build/state/compiler-state";
 import { Observable } from "../../../utils/Observable";

package/cli/display/components/StatusIcon.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type Props = {
     icon: "loading" | "tick" | "error" | "none";
 };

package/components/AdminBar.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function AdminBar(): JSX.Element;

package/entry/Root.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export default function Root(): JSX.Element;

package/entry/entry.admin.dev.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var installGutenbergHooks_1 = require("../blocks/installGutenbergHooks");
 // @ts-ignore
 var _theme_1 = require("@theme");
+var installFieldTypes_1 = require("../fields/installFieldTypes");
 (0, installGutenbergHooks_1.installEDGutenbergHooks)();
+(0, installFieldTypes_1.installFieldTypes)();
 if (_theme_1.editorGlobalStyles) {
     (0, _theme_1.editorGlobalStyles)();
 }

package/entry/entry.admin.prod.js

@@ -3,7 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var installGutenbergHooks_1 = require("../blocks/installGutenbergHooks");
 // @ts-ignore
 var _theme_1 = require("@theme");
+var installFieldTypes_1 = require("../fields/installFieldTypes");
 (0, installGutenbergHooks_1.installEDGutenbergHooks)();
+(0, installFieldTypes_1.installFieldTypes)();
 if (_theme_1.editorGlobalStyles) {
     (0, _theme_1.editorGlobalStyles)();
 }

package/entry/entry.monolith.dev.js

@@ -9,7 +9,17 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  * It also assumes that it's being run from a theme directory in WordPress, and
  * that it's not being run in the Admin panel, but the user may be logged in.
  */
-var react_dom_1 = require("react-dom");
+var react_dom_1 = __importDefault(require("react-dom"));
 var BrowserRouter_1 = require("../components/BrowserRouter");
 var Root_1 = __importDefault(require("./Root"));
-(0, react_dom_1.render)((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0), document.getElementById("root"));
+// @ts-ignore
+if (!window.wp)
+    window.wp = {};
+// @ts-ignore
+if (react_dom_1.default.createRoot) {
+    // @ts-ignore
+    react_dom_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0));
+}
+else {
+    react_dom_1.default.render((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0), document.getElementById("root"));
+}

package/entry/entry.monolith.prod.js

@@ -9,7 +9,15 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  * It also assumes that it's being run from a theme directory in WordPress, and
  * that it's not being run in the Admin panel, but the user may be logged in.
  */
-var react_dom_1 = require("react-dom");
+// @ts-ignore
+var react_dom_1 = __importDefault(require("react-dom"));
 var BrowserRouter_1 = require("../components/BrowserRouter");
 var Root_1 = __importDefault(require("./Root"));
-(0, react_dom_1.render)((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0), document.getElementById("root"));
+// @ts-ignore
+if (react_dom_1.default.createRoot) {
+    // @ts-ignore
+    react_dom_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0));
+}
+else {
+    react_dom_1.default.render((0, jsx_runtime_1.jsx)(BrowserRouter_1.BrowserRouter, { children: (0, jsx_runtime_1.jsx)(Root_1.default, {}, void 0) }, void 0), document.getElementById("root"));
+}

package/fields/ImageWell.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    previewSize: string;
+    value: number;
+    onChange: (value: number | null) => void;
+};
+export declare function ImageWell(props: Props): JSX.Element;
+export {};

package/fields/ImageWell.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageWell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@stitches/react");
+var react_2 = require("react");
+function ImageWell(props) {
+    var _a = (0, react_2.useState)(null), selectedImage = _a[0], setSelectedImage = _a[1];
+    var _b = (0, react_2.useState)(false), imageIsLoading = _b[0], setImageIsLoading = _b[1];
+    (0, react_2.useEffect)(function () {
+        if (props.value) {
+            var cancelled = false;
+            setImageIsLoading(true);
+            fetch("/wp-json/ed/v1/media/" + Number(props.value))
+                .then(function (response) { return response.json(); })
+                .then(function (image) {
+                setImageIsLoading(false);
+                setSelectedImage(image);
+            });
+        }
+    }, [props.value]);
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [imageIsLoading ? ((0, jsx_runtime_1.jsx)(Loading, { children: (0, jsx_runtime_1.jsx)(Spinner, {}, void 0) }, void 0)) : selectedImage ? ((0, jsx_runtime_1.jsx)(ImageContainer, { children: (0, jsx_runtime_1.jsx)("img", { src: selectedImage.sizes[props.previewSize] || selectedImage.sizes["thumbnail"] }, void 0) }, void 0)) : null, (0, jsx_runtime_1.jsx)(Toolbar, { children: selectedImage || imageIsLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button, { children: "Remove" }, void 0), (0, jsx_runtime_1.jsx)(Button, { children: "Edit" }, void 0), (0, jsx_runtime_1.jsx)(Button, { children: "View" }, void 0)] }, void 0)) : null }, void 0)] }, void 0));
+}
+exports.ImageWell = ImageWell;
+var Wrapper = (0, react_1.styled)("div", {
+    position: "relative",
+    display: "block",
+    width: "100%",
+    border: "1px solid #aaaaaa",
+});
+var ImageContainer = (0, react_1.styled)("div", {
+    padding: "4px",
+    img: {
+        maxWidth: "100%",
+    },
+});
+var spin = (0, react_1.keyframes)({
+    from: {
+        transform: "rotate(0deg)",
+    },
+    to: {
+        transform: "rotate(360deg)",
+    },
+});
+var Spinner = (0, react_1.styled)("div", {
+    display: "block",
+    width: "32px",
+    height: "32px",
+    border: "4px solid transparent",
+    borderTop: "currentColor",
+    animation: "".concat(spin, " 1s linear infinite"),
+});
+var Loading = (0, react_1.styled)("div", {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: "8px",
+});
+var Toolbar = (0, react_1.styled)("div", {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    padding: "4px",
+});

package/fields/components/ImageWell.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare type Props = {
+    previewSize: string;
+    aspects: string[];
+    value: number | null | undefined;
+    noBorder?: boolean;
+    onChange: (value: number | null) => void;
+};
+export declare function ImageWell(props: Props): JSX.Element;
+export {};

package/fields/components/ImageWell.js

@@ -0,0 +1,209 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageWell = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("@stitches/react");
+var react_2 = require("react");
+var selectMedia_1 = require("../selectMedia");
+var react_use_1 = require("react-use");
+function ImageWell(props) {
+    // @ts-ignore
+    var acf = window.acf;
+    var _a = (0, react_2.useState)(null), selectedImage = _a[0], setSelectedImage = _a[1];
+    var _b = (0, react_2.useState)(false), imageIsLoading = _b[0], setImageIsLoading = _b[1];
+    (0, react_2.useEffect)(function () {
+        if (props.value) {
+            var cancelled_1 = false;
+            setImageIsLoading(true);
+            fetch("/wp-json/ed/v1/media/" + Number(props.value))
+                .then(function (response) { return response.json(); })
+                .then(function (image) {
+                if (cancelled_1)
+                    return;
+                setImageIsLoading(false);
+                setSelectedImage(image);
+            });
+            return function () {
+                cancelled_1 = true;
+            };
+        }
+        else {
+            setSelectedImage(null);
+            setImageIsLoading(false);
+        }
+    }, [props.value]);
+    var _c = (0, react_use_1.useMeasure)(), imgRef = _c[0], size = _c[1];
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ noBorder: props.noBorder }, { children: [imageIsLoading ? ((0, jsx_runtime_1.jsx)(Loading, { children: (0, jsx_runtime_1.jsx)(Spinner, {}, void 0) }, void 0)) : selectedImage ? ((0, jsx_runtime_1.jsxs)(ImageContainer, { children: [(0, jsx_runtime_1.jsx)("img", { ref: imgRef, src: selectedImage.sizes[props.previewSize] || selectedImage.sizes["thumbnail"] }, void 0), (0, jsx_runtime_1.jsx)(AspectWrapper, __assign({ css: {
+                            width: size.width,
+                            height: size.height,
+                        } }, { children: props.aspects &&
+                            props.aspects.map(function (aspect) {
+                                var _a;
+                                var x, y, width, height, originalAspect = 0, ownAspect = 0;
+                                try {
+                                    ;
+                                    _a = aspect.split(/\s*\/\s*/), x = _a[0], y = _a[1];
+                                    originalAspect = size.width / size.height;
+                                    ownAspect = Number(x) / Number(y);
+                                }
+                                catch (err) {
+                                    return null;
+                                }
+                                width = ownAspect > originalAspect ? size.width : size.height * ownAspect;
+                                height = ownAspect > originalAspect ? size.width / ownAspect : size.height;
+                                return (0, jsx_runtime_1.jsx)(AspectDisplay, { style: { width: width + "px", height: height + "px" } }, aspect);
+                            }) }), void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(NoSelection, { children: (0, jsx_runtime_1.jsx)(ChooseButton, __assign({ onClick: function (e) {
+                        e.preventDefault();
+                        (0, selectMedia_1.selectMedia)({
+                            mode: "select",
+                            type: "image",
+                            title: "Select an image",
+                            select: function (selected) {
+                                if (selected) {
+                                    props.onChange(selected.id);
+                                }
+                            },
+                        });
+                        // acf.newMediaPopup({
+                        //   mode: "edit",
+                        //   type: "image",
+                        //   title: "Select Image",
+                        //   attachment: [props.value],
+                        //   select: (selected: any) => console.log("Selected", selected),
+                        // })
+                    } }, { children: "Choose an image" }), void 0) }, void 0)), (0, jsx_runtime_1.jsx)(Toolbar, { children: selectedImage || imageIsLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarButton, __assign({ onClick: function (e) {
+                                e.preventDefault();
+                                props.onChange(null);
+                            } }, { children: (0, jsx_runtime_1.jsx)("span", { className: "dashicons dashicons-trash" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(ToolbarButton, __assign({ onClick: function (e) {
+                                e.preventDefault();
+                                (0, selectMedia_1.selectMedia)({
+                                    mode: "edit",
+                                    type: "image",
+                                    attachment: Number(props.value),
+                                    title: "Edit Image",
+                                });
+                            } }, { children: (0, jsx_runtime_1.jsx)("span", { className: "dashicons dashicons-edit" }, void 0) }), void 0), selectedImage && ((0, jsx_runtime_1.jsx)(ToolbarButton, __assign({ onClick: function (e) {
+                                e.preventDefault();
+                                window.open(selectedImage.url);
+                            } }, { children: (0, jsx_runtime_1.jsx)("span", { className: "dashicons dashicons-external" }, void 0) }), void 0))] }, void 0)) : null }, void 0)] }), void 0));
+}
+exports.ImageWell = ImageWell;
+var Wrapper = (0, react_1.styled)("div", {
+    position: "relative",
+    display: "block",
+    width: "100%",
+    border: "1px solid #eeeeee",
+    borderRadius: "4px",
+    variants: {
+        noBorder: {
+            true: {
+                border: "0px",
+            },
+        },
+    },
+});
+var ImageContainer = (0, react_1.styled)("div", {
+    margin: "4px",
+    display: "block",
+    position: "relative",
+    img: {
+        maxWidth: "min(100%, 300px)",
+        display: "block",
+    },
+});
+var spin = (0, react_1.keyframes)({
+    from: {
+        transform: "rotate(0deg)",
+    },
+    to: {
+        transform: "rotate(360deg)",
+    },
+});
+var Spinner = (0, react_1.styled)("div", {
+    display: "block",
+    width: "16px",
+    height: "16px",
+    borderRadius: "100px",
+    border: "4px solid transparent",
+    borderTopColor: "currentColor",
+    animation: "".concat(spin, " 0.5s linear infinite"),
+});
+var Loading = (0, react_1.styled)("div", {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: "10px",
+});
+var Toolbar = (0, react_1.styled)("div", {
+    position: "absolute",
+    top: "0",
+    right: "6px",
+    bottom: "0",
+    padding: "4px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+});
+var ToolbarButton = (0, react_1.styled)("button", {
+    width: "24px",
+    height: "24px",
+    fontSize: "12px",
+    borderRadius: "100px",
+    background: "white",
+    border: "none",
+    color: "black",
+    cursor: "pointer",
+    appearance: "none",
+    boxShadow: "rgba(0,0,0,0.2) 0px 1px 3px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "4px 0",
+});
+ToolbarButton.defaultProps = {
+    className: "dashicons",
+};
+var NoSelection = (0, react_1.styled)("div", {
+    display: "flex",
+    justifyContent: "center",
+    padding: "10px 0px",
+});
+var ChooseButton = (0, react_1.styled)("button", {
+    appearance: "none",
+    border: "0px",
+    background: "#f6f6f6",
+    color: "black",
+    padding: "10px 16px",
+    borderRadius: "100px",
+    cursor: "pointer",
+});
+var AspectWrapper = (0, react_1.styled)("div", {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    opacity: 0.3,
+    transition: "opacity 0.3s",
+    "&:hover": {
+        opacity: 1,
+    },
+});
+var AspectDisplay = (0, react_1.styled)("div", {
+    position: "absolute",
+    border: "1px solid white",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+});

package/fields/defineFIeld.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from "react";
+export declare type FieldProps<T> = {
+    value: T;
+    onChange: (value: T) => void;
+    settings: {
+        [key: string]: any;
+    };
+};
+export declare type FieldTypeDefinition<T> = {
+    render: (props: FieldProps<T>) => ReactElement;
+    defaultValue?: T;
+    validate?: (value: T) => boolean | string;
+};
+export declare function defineField<T>(args: FieldTypeDefinition<T>): FieldTypeDefinition<T>;

package/fields/defineFIeld.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineField = void 0;
+function defineField(args) {
+    return args;
+}
+exports.defineField = defineField;

package/fields/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./defineFIeld";
+export * from "./components/ImageWell";

package/fields/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./defineFIeld"), exports);
+__exportStar(require("./components/ImageWell"), exports);

package/fields/installFieldTypes.d.ts

@@ -0,0 +1 @@
+export declare function installFieldTypes(): void;

package/fields/installFieldTypes.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installFieldTypes = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore
+var fields_1 = __importDefault(require("@manifest/fields"));
+var ReactDOM = __importStar(require("react-dom"));
+var react_1 = require("react");
+function installFieldTypes() {
+    // @ts-ignore
+    var acf = window.acf;
+    var _loop_1 = function (name_1) {
+        var type = fields_1.default[name_1];
+        var Component = type.render;
+        var init = function (_a) {
+            var $el = _a.$el, cid = _a.cid, data = _a.data;
+            var input = $el.find("input[type='hidden']");
+            var container = document.createElement("div");
+            $el.append(container);
+            ReactDOM.render((0, jsx_runtime_1.jsx)(FieldWrapper, { defaultValue: type.defaultValue, validate: type.validate, field: data, input: input[0], settings: input.data("settings"), Component: Component }, void 0), container);
+        };
+        acf.addAction("ready_field/type=" + name_1, init);
+        acf.addAction("append_field/type=" + name_1, init);
+    };
+    for (var name_1 in fields_1.default) {
+        _loop_1(name_1);
+    }
+}
+exports.installFieldTypes = installFieldTypes;
+function FieldWrapper(_a) {
+    var input = _a.input, defaultValue = _a.defaultValue, Component = _a.Component, settings = _a.settings;
+    var _b = (0, react_1.useState)(function () { var _a; return (_a = (input.value ? JSON.parse(input.value) : null)) !== null && _a !== void 0 ? _a : defaultValue; }), value = _b[0], setValue = _b[1];
+    (0, react_1.useEffect)(function () {
+        input.value = JSON.stringify(value);
+        console.log(input.value);
+    }, [value]);
+    return (0, jsx_runtime_1.jsx)(Component, { value: value, onChange: setValue, settings: settings }, void 0);
+}

package/fields/selectMedia.d.ts

@@ -0,0 +1,31 @@
+declare type Attachment = {
+    id: number;
+    filename: string;
+    mime: string;
+    height: number;
+    width: number;
+    attributes: any;
+    url: string;
+    sizes: {
+        [key: string]: {
+            width: number;
+            height: number;
+            url: string;
+            orientation: string;
+        };
+    };
+};
+declare type MediaPopupArgs = {
+    mode?: "select" | "edit";
+    type?: string;
+    title?: string;
+    button?: string;
+    allowedTypes?: string;
+    library?: string;
+    attachment?: number;
+    multiple?: boolean;
+    value?: string | string[];
+    select?: (attachments: Attachment[]) => void;
+};
+export declare function selectMedia(args: MediaPopupArgs): any;
+export {};

package/fields/selectMedia.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectMedia = void 0;
+function selectMedia(args) {
+    // @ts-ignore
+    var acf = window.acf;
+    return acf.newMediaPopup(args);
+}
+exports.selectMedia = selectMedia;

package/gravityforms/gravity-forms.d.ts

@@ -0,0 +1,16 @@
+export declare type GravityFormsField = {
+    type: string;
+    id: number;
+    label: string;
+    isRequired: boolean;
+} & {
+    [key: string]: any;
+};
+export declare type GravityFormData = {
+    id: number;
+    fields: GravityFormsField[];
+    title: string;
+    button: {
+        text: string;
+    };
+};

package/gravityforms/gravity-forms.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/gravityforms/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useGravityForm";
+export * from "./gravity-forms";

package/gravityforms/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useGravityForm"), exports);
+__exportStar(require("./gravity-forms"), exports);

package/gravityforms/useGravityForm.d.ts

@@ -0,0 +1,30 @@
+import { GravityFormsField } from ".";
+import { GravityFormData } from "./gravity-forms";
+declare type Options = {
+    form: GravityFormData;
+};
+export declare type GravityFormsFieldState<T = any> = GravityFormsField & {
+    value: T | undefined;
+    error: string | undefined;
+    set(value: T | undefined): void;
+};
+export declare function useGravityForm(opts: Options): {
+    fields: GravityFormsFieldState<any>[];
+    submit(): void;
+    updateField(id: number, value: any): void;
+    submitting: boolean;
+    complete: boolean;
+    successMessage: string | null;
+    mainError: string | null;
+    hasErrors: boolean;
+    values: {
+        [key: number]: any;
+    };
+    errors: {
+        [key: number]: string | undefined;
+    };
+    validity: {
+        [key: number]: boolean;
+    };
+};
+export {};

package/gravityforms/useGravityForm.js

@@ -0,0 +1,181 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGravityForm = void 0;
+var react_1 = require("react");
+var react_2 = require("react");
+var react_3 = require("react");
+var reducer = function (state, action) {
+    var _a, _b, _c;
+    switch (action.type) {
+        case "field":
+            return __assign(__assign({}, state), { errors: __assign(__assign({}, state.errors), (_a = {}, _a[action.id] = undefined, _a)), values: __assign(__assign({}, state.values), (_b = {}, _b[action.id] = action.value, _b)) });
+        case "submitting":
+            return __assign(__assign({}, state), { errors: {}, validity: {}, hasErrors: false, submitting: true });
+        case "success":
+            return __assign(__assign({}, state), { submitting: false, complete: true, errors: {}, validity: {}, hasErrors: false, successMessage: action.message });
+        case "mainError":
+            return __assign(__assign({}, state), { submitting: false, hasErrors: true, mainError: action.message });
+        case "errors":
+            return __assign(__assign({}, state), { submitting: false, hasErrors: true, errors: action.errors });
+        case "clearError":
+            return __assign(__assign({}, state), { submitting: false, errors: __assign(__assign({}, state.errors), (_c = {}, _c[action.id] = undefined, _c)) });
+        default:
+            throw new Error("Unknown GravityForms action ".concat(JSON.stringify(action)));
+    }
+    return state;
+};
+var initializer = function (form) {
+    return {
+        submitting: false,
+        mainError: null,
+        complete: false,
+        successMessage: null,
+        hasErrors: false,
+        values: {},
+        errors: {},
+        validity: {},
+    };
+};
+function useGravityForm(opts) {
+    var form = opts.form;
+    var _a = (0, react_3.useReducer)(reducer, form, initializer), state = _a[0], dispatch = _a[1];
+    var fields = form.fields.map(function (field) { return (__assign(__assign({}, field), { value: state.values[field.id], error: state.errors[field.id], set: function (value) {
+            dispatch({ type: "field", id: field.id, value: value });
+        } })); });
+    var _b = (0, react_2.useState)(null), submitter = _b[0], setSubmitter = _b[1];
+    (0, react_1.useEffect)(function () {
+        var cancelled = false;
+        setSubmitter({
+            submit: function (state) {
+                dispatch({ type: "submitting" });
+                submit(form, state).then(function (result) {
+                    console.log("RESULT", result);
+                    if (cancelled)
+                        return;
+                    if (result.success) {
+                        dispatch({ type: "success", message: result.successMessage || "" });
+                    }
+                    else if (result.errors) {
+                        dispatch({ type: "errors", errors: result.errors });
+                    }
+                    else if (result.mainError) {
+                        dispatch({ type: "mainError", message: result.mainError });
+                    }
+                });
+            },
+        });
+        return function () {
+            cancelled = true;
+        };
+    }, []);
+    return __assign(__assign({}, state), { fields: fields, submit: function () {
+            submitter === null || submitter === void 0 ? void 0 : submitter.submit(state);
+        }, updateField: function (id, value) {
+            dispatch({ type: "field", id: id, value: value });
+        } });
+}
+exports.useGravityForm = useGravityForm;
+function prepareValuesPayload(form, state, data) {
+    for (var _i = 0, _a = form.fields; _i < _a.length; _i++) {
+        var field = _a[_i];
+        var value = state.values[field.id];
+        data["input_" + field.id] = value;
+    }
+    return data;
+}
+function submit(form, state) {
+    return __awaiter(this, void 0, void 0, function () {
+        var url, params, result, payload, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 3, , 4]);
+                    console.log("Submitting", { form: form, state: state });
+                    url = "/wp-json/ed/v1/gf/submit";
+                    params = {
+                        formID: form.id,
+                        values: prepareValuesPayload(form, state, {}),
+                    };
+                    return [4 /*yield*/, fetch(url, {
+                            method: "POST",
+                            headers: {
+                                "Content-type": "application/json",
+                            },
+                            credentials: "include",
+                            body: JSON.stringify(params),
+                        })];
+                case 1:
+                    result = _a.sent();
+                    return [4 /*yield*/, result.json()];
+                case 2:
+                    payload = _a.sent();
+                    if (!payload.is_valid) {
+                        return [2 /*return*/, __assign(__assign({}, payload), { success: false, errors: payload.validation_messages })];
+                    }
+                    else if (payload.is_valid) {
+                        return [2 /*return*/, __assign(__assign({}, payload), { success: true, successMessage: payload.confirmation_message })];
+                    }
+                    else {
+                        console.error("Not sure what to do with GF response", payload);
+                        return [2 /*return*/, __assign({}, payload)];
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _a.sent();
+                    console.error(err_1);
+                    return [2 /*return*/, {
+                            success: false,
+                            mainError: "An error occurred while submitting this form. Please contact us directly if the issue persists.",
+                        }];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "0.1.43",
+  "version": "0.1.46",
   "main": "./index.js",
   "license": "MIT",
   "bin": {
@@ -42,12 +42,12 @@
     "@graphql-tools/load": "^7.4.1",
     "@graphql-tools/url-loader": "^7.1.0",
     "@loadable/babel-plugin": "^5.13.2",
-    "@loadable/component": "^5.15.0",
-    "@loadable/webpack-plugin": "^5.15.1",
+    "@loadable/component": "^5.15.2",
+    "@loadable/webpack-plugin": "^5.15.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@soda/friendly-errors-webpack-plugin": "^1.8.0",
-    "@stitches/core": "^1.2.5",
-    "@stitches/react": "^1.2.5",
+    "@stitches/core": "^1.2.6",
+    "@stitches/react": "^1.2.6",
     "autoprefixer": "^10.3.4",
     "babel-loader": "^8.2.2",
     "chalk": "^4.1.2",
@@ -87,7 +87,7 @@
     "zustand": "^3.5.10"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.0.0-rc.0",
+    "react-dom": "^18.0.0-rc.0"
   }
 }

package/style/createStitches.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DefaultThemeMap } from "@stitches/react";
 import { ConfigType } from "@stitches/core/types/config";
 import { Properties as CSS } from "csstype";