tinacms 1.2.2 → 1.3.1

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("final-form"), require("@tinacms/schema-tools"), require("yup"), require("graphql-tag"), require("@tinacms/sharedctx"), require("@graphql-inspector/core"), require("react-router-dom"), require("@headlessui/react"), require("@react-hook/window-size")) : typeof define === "function" && define.amd ? define(["exports", "zod", "@tinacms/toolkit", "graphql", "lodash.set", "react", "final-form", "@tinacms/schema-tools", "yup", "graphql-tag", "@tinacms/sharedctx", "@graphql-inspector/core", "react-router-dom", "@headlessui/react", "@react-hook/window-size"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, zod, toolkit, G, set, React, finalForm, schemaTools, yup, gql$1, sharedctx, core, reactRouterDom, react, windowSize) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("@tinacms/toolkit"), require("graphql"), require("graphql-tag"), require("@tinacms/schema-tools"), require("react"), require("yup"), require("@tinacms/sharedctx"), require("@graphql-inspector/core"), require("react-router-dom"), require("@headlessui/react"), require("@react-hook/window-size")) : typeof define === "function" && define.amd ? define(["exports", "zod", "@tinacms/toolkit", "graphql", "graphql-tag", "@tinacms/schema-tools", "react", "yup", "@tinacms/sharedctx", "@graphql-inspector/core", "react-router-dom", "@headlessui/react", "@react-hook/window-size"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, zod, toolkit, graphql, gql$1, schemaTools, React, yup, sharedctx, core, reactRouterDom, react, windowSize) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -25,11 +25,9 @@
     n["default"] = e;
     return Object.freeze(n);
   }
-  var G__namespace = /* @__PURE__ */ _interopNamespace(G);
-  var set__default = /* @__PURE__ */ _interopDefaultLegacy(set);
+  var gql__default = /* @__PURE__ */ _interopDefaultLegacy(gql$1);
   var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
   var yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
-  var gql__default = /* @__PURE__ */ _interopDefaultLegacy(gql$1);
   function popupWindow(url, title, window2, w, h) {
     const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
     const x = window2.top.outerWidth / 2 + window2.top.screenX - w / 2;
@@ -52,2078 +50,9 @@
           });
         }
       });
-      const origin = `${window.location.protocol}//${window.location.host}`;
-      authTab = popupWindow(`${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`, "_blank", window, 1e3, 700);
-    });
-  };
-  const formify$1 = (query, schema) => {
-    const typeInfo = new G.TypeInfo(schema);
-    const pathsToPopulate = [];
-    const visitor = {
-      leave(node2, key, parent, path, ancestors) {
-        const type = typeInfo.getType();
-        if (type) {
-          const namedType = G.getNamedType(type);
-          if (namedType instanceof G.GraphQLObjectType) {
-            const hasNodeInterface = !!namedType.getInterfaces().find((i) => i.name === "Node");
-            if (hasNodeInterface) {
-              if (typeof path[path.length - 1] === "number") {
-                assertIsObjectType(namedType);
-                const valuesNode = namedType.getFields().values;
-                const namedValuesNode = G.getNamedType(valuesNode.type);
-                const pathForValues = [...path];
-                pathForValues.push("selectionSet");
-                pathForValues.push("selections");
-                const valuesAst = buildValuesForType(namedValuesNode);
-                pathForValues.push(100);
-                const formNode = namedType.getFields().form;
-                const namedFormNode = G.getNamedType(formNode.type);
-                const pathForForm = [...path];
-                pathForForm.push("selectionSet");
-                pathForForm.push("selections");
-                const formAst = buildFormForType(namedFormNode);
-                pathForForm.push(101);
-                const sysNode = namedType.getFields().sys;
-                const namedSysNode = G.getNamedType(sysNode.type);
-                const pathForSys = [...path];
-                pathForSys.push("selectionSet");
-                pathForSys.push("selections");
-                const sysAst = buildSysForType(namedSysNode);
-                pathForSys.push(102);
-                pathsToPopulate.push({
-                  path: path.map((p) => p.toString()).join("-"),
-                  paths: [
-                    {
-                      path: pathForValues.map((p) => p.toString()),
-                      ast: valuesAst
-                    },
-                    {
-                      path: pathForForm.map((p) => p.toString()),
-                      ast: formAst
-                    },
-                    {
-                      path: pathForSys.map((p) => p.toString()),
-                      ast: sysAst
-                    }
-                  ]
-                });
-              }
-            }
-          }
-        }
-      }
-    };
-    G.visit(query, G.visitWithTypeInfo(typeInfo, visitor));
-    const topLevelPaths = pathsToPopulate.filter((p, i) => {
-      const otherPaths = pathsToPopulate.filter((_, index) => index !== i);
-      const isChildOfOtherPaths = otherPaths.some((op) => {
-        if (p.path.startsWith(op.path)) {
-          return true;
-        } else {
-          return false;
-        }
-      });
-      if (isChildOfOtherPaths) {
-        return false;
-      } else {
-        return true;
-      }
-    });
-    topLevelPaths.map((p) => {
-      p.paths.map((pathNode) => {
-        set__default["default"](query, pathNode.path, pathNode.ast);
-      });
-    });
-    return query;
-  };
-  const buildSysForType = (type) => {
-    assertIsObjectType(type);
-    return {
-      kind: "Field",
-      alias: {
-        kind: "Name",
-        value: "_internalSys"
-      },
-      name: {
-        kind: "Name",
-        value: "sys"
-      },
-      selectionSet: {
-        kind: "SelectionSet",
-        selections: buildSelectionsFields(Object.values(type.getFields()), (fields) => {
-          return {
-            continue: true,
-            filteredFields: fields.filter((field) => field.name !== "documents")
-          };
-        })
-      }
-    };
-  };
-  const buildValuesForType = (type) => {
-    try {
-      assertIsUnionType(type);
-      return {
-        kind: "Field",
-        name: {
-          kind: "Name",
-          value: "values"
-        },
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: buildSelectionInlineFragments(type.getTypes())
-        }
-      };
-    } catch (e) {
-      return {
-        kind: "Field",
-        name: {
-          kind: "Name",
-          value: "values"
-        }
-      };
-    }
-  };
-  const buildFormForType = (type) => {
-    try {
-      assertIsUnionType(type);
-      return {
-        kind: "Field",
-        name: {
-          kind: "Name",
-          value: "form"
-        },
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: buildSelectionInlineFragments(type.getTypes())
-        }
-      };
-    } catch (e) {
-      return {
-        kind: "Field",
-        name: {
-          kind: "Name",
-          value: "form"
-        }
-      };
-    }
-  };
-  const buildSelectionInlineFragments = (types, callback) => {
-    return types.map((type) => {
-      return {
-        kind: "InlineFragment",
-        typeCondition: {
-          kind: "NamedType",
-          name: {
-            kind: "Name",
-            value: type.name
-          }
-        },
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: [
-            ...Object.values(type.getFields()).map((field) => {
-              const namedType = G.getNamedType(field.type);
-              if (G.isLeafType(namedType)) {
-                return {
-                  kind: "Field",
-                  name: {
-                    kind: "Name",
-                    value: field.name
-                  }
-                };
-              } else if (namedType instanceof G.GraphQLUnionType) {
-                return {
-                  kind: "Field",
-                  name: {
-                    kind: "Name",
-                    value: field.name
-                  },
-                  selectionSet: {
-                    kind: "SelectionSet",
-                    selections: [
-                      ...buildSelectionInlineFragments(namedType.getTypes(), callback)
-                    ]
-                  }
-                };
-              } else if (namedType instanceof G.GraphQLObjectType) {
-                return {
-                  kind: "Field",
-                  name: {
-                    kind: "Name",
-                    value: field.name
-                  },
-                  selectionSet: {
-                    kind: "SelectionSet",
-                    selections: [
-                      ...buildSelectionsFields(Object.values(namedType.getFields()), callback)
-                    ]
-                  }
-                };
-              } else {
-                throw new Error(`Unexpected GraphQL type for field ${namedType.name}`);
-              }
-            })
-          ]
-        }
-      };
-    });
-  };
-  const buildSelectionsFields = (fields, callback) => {
-    let filteredFields = fields;
-    if (callback) {
-      const result = callback(fields);
-      if (!result.continue) {
-        if (fields.every((field) => {
-          return !G.isScalarType(G.getNamedType(field.type));
-        })) {
-          return [
-            {
-              kind: "Field",
-              name: {
-                kind: "Name",
-                value: "__typename"
-              }
-            }
-          ];
-        }
-        return buildSelectionsFields(result.filteredFields.filter((field) => {
-          if (G.isScalarType(G.getNamedType(field.type))) {
-            return true;
-          }
-          return false;
-        }));
-      } else {
-        filteredFields = result.filteredFields;
-      }
-    }
-    return filteredFields.map((field) => {
-      const namedType = G.getNamedType(field.type);
-      if (G.isLeafType(namedType)) {
-        return {
-          kind: "Field",
-          name: {
-            kind: "Name",
-            value: field.name
-          }
-        };
-      } else if (namedType instanceof G.GraphQLUnionType) {
-        return {
-          kind: "Field",
-          name: {
-            kind: "Name",
-            value: field.name
-          },
-          selectionSet: {
-            kind: "SelectionSet",
-            selections: [
-              ...buildSelectionInlineFragments(namedType.getTypes(), callback)
-            ]
-          }
-        };
-      } else if (namedType instanceof G.GraphQLObjectType) {
-        return {
-          kind: "Field",
-          name: {
-            kind: "Name",
-            value: field.name
-          },
-          selectionSet: {
-            kind: "SelectionSet",
-            selections: [
-              ...buildSelectionsFields(Object.values(namedType.getFields()), callback)
-            ]
-          }
-        };
-      } else {
-        return {
-          kind: "Field",
-          name: {
-            kind: "Name",
-            value: field.name
-          },
-          selectionSet: {
-            kind: "SelectionSet",
-            selections: []
-          }
-        };
-      }
-    });
-  };
-  function assertIsObjectType(type) {
-    if (type instanceof G.GraphQLObjectType)
-      ;
-    else {
-      throw new Error(`Expected an instance of GraphQLObjectType for type ${type.name}`);
-    }
-  }
-  function assertIsUnionType(type) {
-    if (type instanceof G.GraphQLUnionType)
-      ;
-    else {
-      throw new Error(`Expected an instance of GraphQLUnionType for type ${type.name}`);
-    }
-  }
-  const createClient = ({
-    clientId,
-    isLocalClient = true,
-    branch,
-    tinaioConfig,
-    schema,
-    apiUrl
-  }) => {
-    return isLocalClient ? new LocalClient({ customContentApiUrl: apiUrl, schema }) : new Client({
-      clientId: clientId || "",
-      branch: branch || "main",
-      tokenStorage: "LOCAL_STORAGE",
-      tinaioConfig,
-      schema
-    });
-  };
-  function assertShape(value, yupSchema, errorMessage) {
-    const shape = yupSchema(yup__namespace);
-    try {
-      shape.validateSync(value);
-    } catch (e) {
-      const message = errorMessage || `Failed to assertShape - ${e.message}`;
-      throw new Error(message);
-    }
-  }
-  function safeAssertShape(value, yupSchema) {
-    try {
-      assertShape(value, yupSchema);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-  function useGraphqlForms({
-    variables,
-    onSubmit,
-    query,
-    formify: formify2,
-    eventList
-  }) {
-    const cms = toolkit.useCMS();
-    const state = useFormify({
-      query,
-      cms,
-      variables,
-      formify: formify2,
-      eventList,
-      onSubmit
-    });
-    if (!query) {
-      return [state.data, false];
-    }
-    return [state.data, state.status !== "done"];
-  }
-  const transformDocumentIntoMutationRequestPayload = (document, instructions) => {
-    const { _collection, __typename, _template, ...rest } = document;
-    const params = transformParams(rest);
-    const paramsWithTemplate = instructions.includeTemplate ? { [_template]: params } : params;
-    return instructions.includeCollection ? { [_collection]: paramsWithTemplate } : paramsWithTemplate;
-  };
-  const transformParams = (data) => {
-    if (["string", "number", "boolean"].includes(typeof data)) {
-      return data;
-    }
-    if (Array.isArray(data)) {
-      return data.map((item) => transformParams(item));
-    }
-    try {
-      assertShape(data, (yup2) => yup2.object({ _template: yup2.string().required() }));
-      const { _template, __typename, ...rest } = data;
-      const nested = transformParams(rest);
-      return { [_template]: nested };
-    } catch (e) {
-      if (e.message === "Failed to assertShape - _template is a required field") {
-        if (!data) {
-          return [];
-        }
-        const accum = {};
-        Object.entries(data).map(([keyName, value]) => {
-          accum[keyName] = transformParams(value);
-        });
-        return accum;
-      } else {
-        if (!data) {
-          return [];
-        }
-        throw e;
-      }
-    }
-  };
-  const generateFormCreators = (cms, showInSidebar, global) => {
-    const createForm = (formConfig) => {
-      const form = new toolkit.Form(formConfig);
-      if (showInSidebar) {
-        if (global) {
-          const options = typeof global === "boolean" ? [null, "fullscreen"] : [global.icon, global.layout];
-          cms.plugins.add(new toolkit.GlobalFormPlugin(form, ...options));
-        } else {
-          cms.forms.add(form);
-        }
-      }
-      return form;
-    };
-    const createGlobalForm = (formConfig, options) => {
-      const form = new toolkit.Form(formConfig);
-      if (showInSidebar) {
-        cms.plugins.add(new toolkit.GlobalFormPlugin(form, options == null ? void 0 : options.icon, options == null ? void 0 : options.layout));
-      }
-      return form;
-    };
-    return { createForm, createGlobalForm };
-  };
-  const getValueForBlueprint = (state, path) => {
-    const pathArray = path.split(".");
-    let latest = state;
-    pathArray.every((item, index) => {
-      if (item === "[]") {
-        const restOfItems = pathArray.slice(index + 1);
-        if (latest) {
-          const next = [];
-          if (Array.isArray(latest)) {
-            latest.forEach((latest2, index2) => {
-              const res = getValueForBlueprint(latest2, restOfItems.join("."));
-              next.push(res);
-            });
-          } else {
-            throw new Error(`Expected value to be an array for "[]" item`);
-          }
-          if (next.length > 0) {
-            latest = next;
-          } else {
-            latest = void 0;
-          }
-        }
-        return false;
-      } else {
-        if (latest) {
-          latest = latest[item];
-        } else {
-          latest = void 0;
-        }
-      }
-      return true;
-    });
-    return latest;
-  };
-  const getFieldNameOrAlias = (fieldBlueprint) => {
-    return fieldBlueprint.path[fieldBlueprint.path.length - 1].alias;
-  };
-  const spliceLocation = (string, location) => {
-    const accum = [];
-    let counter = 0;
-    string.split(".").forEach((item) => {
-      if (item === "[]") {
-        accum.push(location[counter]);
-        counter++;
-      } else {
-        accum.push(item);
-      }
-    });
-    return accum.join(".");
-  };
-  const getPathToChange = (documentBlueprint, formNode, event) => {
-    const fieldName = event.field.name;
-    const location = [...formNode.location, ...stripIndices(fieldName)];
-    const accum = [];
-    let counter = 0;
-    documentBlueprint.path.forEach((item) => {
-      accum.push(item.alias);
-      if (item.list) {
-        if (location[counter] !== void 0) {
-          accum.push(location[counter]);
-          counter++;
-        }
-      }
-    });
-    return accum.join(".");
-  };
-  const buildForm = (doc, cms, formify2, showInSidebar = false, onSubmit) => {
-    var _a;
-    const id = doc._internalSys.path;
-    const enrichedSchema = cms.api.tina.schema;
-    const collection = enrichedSchema.getCollection(doc._internalSys.collection.name);
-    const { createForm, createGlobalForm } = generateFormCreators(cms, showInSidebar, (_a = collection.ui) == null ? void 0 : _a.global);
-    const SKIPPED = "SKIPPED";
-    let form;
-    let skipped;
-    const skip = () => {
-      skipped = SKIPPED;
-    };
-    if (skipped)
-      return;
-    const template = enrichedSchema.getTemplateForData({
-      collection,
-      data: doc._values
-    });
-    const formCommon = {
-      id,
-      label: id,
-      initialValues: doc._values,
-      onSubmit: async (payload) => {
-        try {
-          const params = transformDocumentIntoMutationRequestPayload(payload, {
-            includeCollection: false,
-            includeTemplate: !!collection.templates
-          });
-          const variables = { params };
-          const mutationString = `#graphql
-          mutation UpdateDocument($collection: String!, $relativePath: String!, $params: DocumentUpdateMutation!) {
-            updateDocument(collection: $collection, relativePath: $relativePath, params: $params) {
-              __typename
-            }
-          }
-        `;
-          if (onSubmit) {
-            onSubmit({
-              queryString: mutationString,
-              mutationString,
-              variables: {
-                collection: doc._internalSys.collection.name,
-                relativePath: doc._internalSys.relativePath,
-                params: { [doc._internalSys.collection.name]: variables }
-              }
-            });
-          } else {
-            try {
-              await cms.api.tina.request(mutationString, {
-                variables: {
-                  collection: doc._internalSys.collection.name,
-                  relativePath: doc._internalSys.relativePath,
-                  params: {
-                    [doc._internalSys.collection.name]: variables.params
-                  }
-                }
-              });
-              cms.alerts.success("Document saved!");
-            } catch (e) {
-              cms.alerts.error("There was a problem saving your document.");
-              console.error(e);
-            }
-          }
-        } catch (e) {
-          console.error(e);
-          cms.alerts.error("There was a problem saving your document.");
-        }
-      }
-    };
-    let formConfig = {};
-    const formInfo = schemaTools.resolveForm({
-      collection,
-      basename: collection.name,
-      schema: enrichedSchema,
-      template
-    });
-    formConfig = {
-      label: formInfo.label,
-      fields: formInfo.fields,
-      ...formCommon
-    };
-    if (formify2) {
-      form = formify2({
-        formConfig,
-        createForm,
-        createGlobalForm,
-        skip
-      }, cms);
-    } else {
-      form = createForm(formConfig);
-    }
-    if (!(form instanceof toolkit.Form)) {
-      if (skipped === SKIPPED) {
-        return;
-      }
-      throw new Error("formify must return a form or skip()");
-    }
-    return form;
-  };
-  const formNodeId = (formNode) => {
-    return spliceLocation(formNode.documentBlueprintId, formNode.location) + formNode.documentFormId;
-  };
-  const formNodePath = (formNode) => {
-    return spliceLocation(formNode.documentBlueprintId, formNode.location);
-  };
-  const formNodeNotIn = (formNode, formNodes) => {
-    return !formNodes.find((fn) => formNodeId(fn) === formNodeId(formNode));
-  };
-  const sequential = async (items, callback) => {
-    const accum = [];
-    if (!items) {
-      return [];
-    }
-    const reducePromises = async (previous, endpoint) => {
-      const prev = await previous;
-      if (prev) {
-        accum.push(prev);
-      }
-      return callback(endpoint, accum.length);
-    };
-    const result = await items.reduce(reducePromises, Promise.resolve());
-    if (result) {
-      accum.push(result);
-    }
-    return accum;
-  };
-  const getFormNodesStartingWith = (string, state) => {
-    return state.formNodes.filter((subFormNode) => {
-      return subFormNode.documentBlueprintId.startsWith(string);
-    });
-  };
-  const getFormNodesForField = (fieldBlueprint, formNode, event, state) => {
-    const pathToChange = getPathToChange(fieldBlueprint, formNode, event);
-    const formNodes = getFormNodesStartingWith(fieldBlueprint.id, state);
-    const eventLocation = [
-      ...formNode.location,
-      ...stripIndices(event.field.name)
-    ];
-    const existing = finalForm.getIn(state.data, pathToChange);
-    return { pathToChange, formNodes, eventLocation, existing };
-  };
-  const getBlueprintAliasPath = (blueprint) => {
-    const namePath = [];
-    const aliasPath = [];
-    blueprint.path.forEach((p) => {
-      namePath.push(p.name);
-      aliasPath.push(p.alias);
-      if (p.list) {
-        namePath.push("[]");
-        aliasPath.push("[]");
-      }
-    });
-    return aliasPath.join(".");
-  };
-  const getBlueprintFieldsForEvent = (blueprint, event) => {
-    return blueprint.fields.filter((fbp) => {
-      if (getBlueprintNamePath(fbp) === getEventPath(event, blueprint)) {
-        return true;
-      }
-    }).filter((fbp) => {
-      return filterFieldBlueprintsByParentTypename(fbp, event.field.data.tinaField.parentTypename);
-    });
-  };
-  const filterFieldBlueprintsByParentTypename = (fbp, typename) => {
-    let lastDisambiguator;
-    fbp.path.forEach((path) => {
-      if (path.parentTypename) {
-        lastDisambiguator = path.parentTypename;
-      }
-    });
-    if (lastDisambiguator) {
-      return typename === lastDisambiguator;
-    } else {
-      return true;
-    }
-  };
-  const getBlueprintNamePath = (blueprint, disambiguator) => {
-    const namePath = [];
-    blueprint.path.forEach((p) => {
-      if (disambiguator) {
-        if (p.parentTypename) {
-          namePath.push(p.parentTypename);
-        }
-      }
-      namePath.push(p.name);
-      if (p.list) {
-        namePath.push("[]");
-      }
-    });
-    return namePath.join(".");
-  };
-  const getEventPath = (event, blueprint) => {
-    const stringArray = event.field.name.split(".");
-    const eventPath = stringArray.map((item) => {
-      if (isNaN(Number(item))) {
-        return item;
-      }
-      return `[]`;
-    }).join(".");
-    const items = [blueprint.id, eventPath];
-    const isList = event.field.data.tinaField.list;
-    if (isList && !eventPath.endsWith("[]")) {
-      items.push(`[]`);
-    }
-    return items.join(".");
-  };
-  const stripIndices = (string) => {
-    const accum = [];
-    const stringArray = string.split(".");
-    stringArray.forEach((item) => {
-      if (isNaN(item))
-        ;
-      else {
-        accum.push(Number(item));
-      }
-    });
-    return accum;
-  };
-  const replaceRealNum = (string) => {
-    const stringArray = string.split(".");
-    return stringArray.map((item) => {
-      if (isNaN(item)) {
-        return item;
-      }
-      return "[]";
-    }).join(".");
-  };
-  const getMatchName = ({ field, prefix, blueprint }) => {
-    const fieldName = field.list ? `${field.name}.[]` : field.name;
-    const blueprintName = getBlueprintNamePath(blueprint);
-    const extra = [];
-    if (prefix) {
-      extra.push(prefix);
-    }
-    const matchName = [blueprintName, ...extra, fieldName].join(".");
-    return { matchName, fieldName };
-  };
-  const getFormNodesFromEvent = (state, event) => {
-    const formNodes = state.formNodes.filter((formNode) => formNode.documentFormId === event.formId);
-    return formNodes;
-  };
-  const printEvent = (event) => {
-    var _a, _b;
-    return {
-      type: event.type,
-      value: event.value,
-      previousValue: event.previousValue,
-      mutationType: event.mutationType,
-      formId: event.formId,
-      field: {
-        data: (_a = event.field) == null ? void 0 : _a.data,
-        name: (_b = event.field) == null ? void 0 : _b.name
-      }
-    };
-  };
-  const getFormNodeBlueprint = (formNode, state) => {
-    return state.blueprints.find((d) => d.id === formNode.documentBlueprintId);
-  };
-  const getMoveMapping = (existing, from, to) => {
-    const newOrderObject = {};
-    if (from < to) {
-      existing.map((_, i) => {
-        if (i === from) {
-          newOrderObject[i] = to;
-          return;
-        }
-        if (i > from) {
-          if (i < to) {
-            newOrderObject[i] = i - 1;
-            return;
-          } else {
-            if (i === to) {
-              newOrderObject[i] = i - 1;
-              return;
-            }
-            newOrderObject[i] = i;
-            return;
-          }
-        } else {
-          newOrderObject[i] = i;
-          return;
-        }
-      });
-    } else {
-      existing.map((_, i) => {
-        if (i === from) {
-          newOrderObject[i] = to;
-          return;
-        }
-        if (i > to) {
-          if (i < from) {
-            newOrderObject[i] = i + 1;
-            return;
-          } else {
-            newOrderObject[i] = i;
-            return;
-          }
-        } else {
-          if (i === to) {
-            newOrderObject[i] = i + 1;
-            return;
-          }
-          newOrderObject[i] = i;
-          return;
-        }
-      });
-    }
-    return newOrderObject;
-  };
-  const matchLocation = (eventLocation, formNode) => {
-    return eventLocation.every((item, index) => item === formNode.location[index]);
-  };
-  const bumpLocation = (location) => {
-    return location.map((item, index) => {
-      if (index === location.length - 1) {
-        return item + 1;
-      }
-      return item;
-    });
-  };
-  const maybeLowerLocation = (location, at) => {
-    return location.map((item, index) => {
-      if (index === location.length - 1) {
-        return item < at ? item : item - 1;
-      }
-      return item;
-    });
-  };
-  const matchesAt = (location, at) => {
-    let matches = false;
-    location.map((item, index) => {
-      if (index === location.length - 1) {
-        if (item === at) {
-          matches = true;
-        }
-      }
-    });
-    return matches;
-  };
-  const swapLocation = (location, mapping) => {
-    return location.map((item, index) => {
-      if (index === location.length - 1) {
-        return mapping[item];
-      }
-      return item;
-    });
-  };
-  const getSubFields = (changeSet) => {
-    var _a;
-    const fields = changeSet.fieldDefinition.fields ? changeSet.fieldDefinition.fields : changeSet.fieldDefinition.templates[changeSet.value[0]._template].fields;
-    let __typename;
-    if ((_a = changeSet.fieldDefinition) == null ? void 0 : _a.templates) {
-      __typename = changeSet.fieldDefinition.typeMap[changeSet.value[0]._template];
-    }
-    return { fields, __typename };
-  };
-  const isFormifiableDocument = (t) => {
-    const type = G__namespace.getNamedType(t);
-    if (G__namespace.isUnionType(type)) {
-      return type.getTypes().every((type2) => {
-        return type2.getInterfaces().find((intfc) => intfc.name === "Node");
-      });
-    } else if (G__namespace.isObjectType(type)) {
-      return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
-    } else {
-      return false;
-    }
-  };
-  const isScalarType = (t) => {
-    const namedType = G__namespace.getNamedType(t);
-    return G__namespace.isScalarType(namedType);
-  };
-  const isConnectionField = (t) => {
-    const type = G__namespace.getNamedType(t);
-    if (G__namespace.isObjectType(type)) {
-      return !!type.getInterfaces().find((intfc) => intfc.name === "Connection");
-    } else {
-      throw new Error(`Expected GraphQLObjectType for isConnectionField check`);
-    }
-  };
-  const getObjectField = (object, selectionNode) => {
-    const namedType = G__namespace.getNamedType(object);
-    ensureObjectOrInterfaceType(namedType);
-    return namedType.getFields()[selectionNode.name.value];
-  };
-  const getSelectedUnionType = (unionType, selectionNode) => {
-    const namedType = G__namespace.getNamedType(unionType);
-    if (!G__namespace.isUnionType(namedType)) {
-      return;
-    }
-    const types = namedType.getTypes();
-    const typeCondition = selectionNode.typeCondition.name.value;
-    let intfc;
-    types.forEach((type) => {
-      intfc = type.getInterfaces().find((intfc2) => intfc2.name === typeCondition);
-    });
-    if (intfc) {
-      return intfc;
-    }
-    return namedType.getTypes().find((type) => type.name === typeCondition);
-  };
-  function isListType(type) {
-    if (G__namespace.isListType(type)) {
-      return true;
-    } else if (G__namespace.isNonNullType(type)) {
-      if (G__namespace.isListType(type.ofType)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  function ensureObjectOrInterfaceType(type) {
-    if (G__namespace.isInterfaceType(type) || G__namespace.isObjectType(type))
-      ;
-    else {
-      console.log("Expected type to be GraphQLObjectType or GraphQLInterfaceType", type);
-      throw new Error(`Expected type to be GraphQLObjectType or GraphQLInterfaceType`);
-    }
-  }
-  function ensureOperationDefinition(type) {
-    if (type.kind !== "OperationDefinition") {
-      throw new Error(`Expected top-level definition to be an OperationDefinition node, ensure your query has been optimized before calling formify`);
-    }
-  }
-  function buildPath({
-    fieldNode,
-    type,
-    parentTypename,
-    path
-  }) {
-    const p = path || [];
-    const list = isListType(type);
-    const isNode = isFormifiableDocument(type);
-    return [
-      ...p,
-      {
-        name: fieldNode.name.value,
-        alias: fieldNode.alias ? fieldNode.alias.value : fieldNode.name.value,
-        parentTypename,
-        list: !!list,
-        isNode: !!isNode
-      }
-    ];
-  }
-  const node = G__namespace.parse(`
- query Sample {
-  ...on Document {
-    _internalSys: _sys {
-      path
-      relativePath
-      collection {
-        name
-      }
-    }
-    _values
-  }
- }`);
-  const metaFields = node.definitions[0].selectionSet.selections;
-  const getRelativeBlueprint = (path) => {
-    let indexOfLastNode = 0;
-    path.forEach((item, i) => {
-      if (item.isNode) {
-        if (i === path.length - 1)
-          ;
-        else {
-          indexOfLastNode = i;
-        }
-      }
-    });
-    const documentBlueprintPath = path.slice(0, indexOfLastNode + 1);
-    return getBlueprintNamePath({ path: documentBlueprintPath });
-  };
-  const isSysField = (fieldNode) => {
-    if (fieldNode.name.value === "__typename") {
-      return true;
-    }
-    if (fieldNode.name.value === "_sys") {
-      return true;
-    }
-    if (fieldNode.name.value === "_values") {
-      return true;
-    }
-    if (fieldNode.name.value === "id") {
-      return true;
-    }
-    return false;
-  };
-  const getBlueprintId = (path) => {
-    const namePath = [];
-    const aliasPath = [];
-    path.forEach((p) => {
-      namePath.push(p.name);
-      aliasPath.push(p.alias);
-      if (p.list) {
-        namePath.push("[]");
-        aliasPath.push("[]");
-      }
-    });
-    return namePath.join(".");
-  };
-  const NOOP = "This is either an error or is not yet supported";
-  const UNEXPECTED = "Formify encountered an unexpected error, please contact support";
-  const EDGES_NODE_NAME = "edges";
-  const NODE_NAME = "node";
-  const COLLECTION_FIELD_NAME = "collection";
-  const COLLECTIONS_FIELD_NAME = "collections";
-  const COLLECTIONS_DOCUMENTS_NAME = "documents";
-  const formify = async ({
-    schema,
-    query,
-    getOptimizedQuery
-  }) => {
-    const blueprints = [];
-    const documentNode = G__namespace.parse(query);
-    const visitor = {
-      OperationDefinition: (node2) => {
-        if (!node2.name) {
-          return {
-            ...node2,
-            name: {
-              kind: "Name",
-              value: `QueryOperation`
-            }
-          };
-        }
-        return node2;
-      }
-    };
-    const documentNodeWithName = G__namespace.visit(documentNode, visitor);
-    const optimizedQuery = await getOptimizedQuery(documentNodeWithName);
-    const typeInfo = new G__namespace.TypeInfo(schema);
-    const formifyConnection = ({
-      parentType,
-      selectionNode,
-      path
-    }) => {
-      return {
-        ...selectionNode,
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: selectionNode.selectionSet.selections.map((selectionNode2) => {
-            switch (selectionNode2.kind) {
-              case "Field":
-                if (selectionNode2.name.value === EDGES_NODE_NAME) {
-                  const edgeField = getObjectField(parentType, selectionNode2);
-                  const edgesPath = buildPath({
-                    fieldNode: selectionNode2,
-                    type: edgeField.type,
-                    path
-                  });
-                  return {
-                    ...selectionNode2,
-                    selectionSet: {
-                      kind: "SelectionSet",
-                      selections: selectionNode2.selectionSet.selections.map((subSelectionNode) => {
-                        switch (subSelectionNode.kind) {
-                          case "Field":
-                            if (subSelectionNode.name.value === NODE_NAME) {
-                              const nodeField = getObjectField(edgeField.type, subSelectionNode);
-                              return formifyFieldNodeDocument({
-                                fieldNode: subSelectionNode,
-                                type: nodeField.type,
-                                path: buildPath({
-                                  fieldNode: subSelectionNode,
-                                  type: nodeField.type,
-                                  path: edgesPath
-                                }),
-                                showInSidebar: false
-                              });
-                            } else {
-                              return subSelectionNode;
-                            }
-                          default:
-                            throw new FormifyError("NOOP");
-                        }
-                      })
-                    }
-                  };
-                }
-                return selectionNode2;
-              default:
-                throw new FormifyError("UNEXPECTED");
-            }
-          })
-        }
-      };
-    };
-    function formifyInlineFragmentDocument({
-      inlineFragmentNode,
-      type,
-      path,
-      showInSidebar = false
-    }) {
-      return formifyDocument({
-        selection: inlineFragmentNode,
-        type,
-        path,
-        showInSidebar
-      });
-    }
-    function formifyFieldNodeDocument({
-      fieldNode,
-      type,
-      path,
-      showInSidebar = false
-    }) {
-      return formifyDocument({ selection: fieldNode, type, path, showInSidebar });
-    }
-    function formifyDocument({
-      selection,
-      type,
-      path,
-      showInSidebar = false
-    }) {
-      let extraFields = [];
-      const hasDataJSONField = false;
-      let hasValuesField = false;
-      let shouldFormify = false;
-      selection.selectionSet.selections.forEach((selection2) => {
-        if (selection2.kind === "Field") {
-          shouldFormify = true;
-          if (selection2.name.value === "_values") {
-            hasValuesField = true;
-          }
-        }
-      });
-      if (shouldFormify) {
-        blueprints.push({
-          id: getBlueprintId(path),
-          path,
-          selection,
-          fields: [],
-          showInSidebar,
-          hasDataJSONField,
-          hasValuesField
-        });
-        extraFields = metaFields;
-      }
-      return {
-        ...selection,
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: [
-            ...selection.selectionSet.selections.map((selectionNode) => {
-              switch (selectionNode.kind) {
-                case "InlineFragment": {
-                  const namedType = G__namespace.getNamedType(type);
-                  if (G__namespace.isInterfaceType(namedType)) {
-                    const subType = schema.getImplementations(namedType).objects.find((item) => item.name === selectionNode.typeCondition.name.value);
-                    return formifyInlineFragmentDocument({
-                      inlineFragmentNode: selectionNode,
-                      type: subType,
-                      path,
-                      showInSidebar: true
-                    });
-                  }
-                  return formifyInlineFragmentNode({
-                    inlineFragmentNode: selectionNode,
-                    parentType: type,
-                    path,
-                    showInSidebar: true
-                  });
-                }
-                case "Field": {
-                  return formifyFieldNode({
-                    fieldNode: selectionNode,
-                    parentType: type,
-                    path
-                  });
-                }
-                default:
-                  throw new FormifyError("UNEXPECTED");
-              }
-            }),
-            ...extraFields
-          ]
-        }
-      };
-    }
-    const formifyFieldNode = ({
-      fieldNode,
-      parentType,
-      path
-    }) => {
-      if (fieldNode.name.value === "__typename") {
-        return fieldNode;
-      }
-      const field = getObjectField(parentType, fieldNode);
-      if (!field) {
-        return fieldNode;
-      }
-      const fieldPath = buildPath({
-        fieldNode,
-        type: field.type,
-        parentTypename: G__namespace.getNamedType(parentType).name,
-        path
-      });
-      const blueprint = blueprints.find((blueprint2) => blueprint2.id === getRelativeBlueprint(fieldPath));
-      if (!blueprint) {
-        return fieldNode;
-      }
-      if (isSysField(fieldNode)) {
-        return fieldNode;
-      }
-      blueprint.fields.push({
-        id: getBlueprintId(fieldPath),
-        documentBlueprintId: blueprint.id,
-        path: fieldPath
-      });
-      if (isScalarType(field.type)) {
-        return fieldNode;
-      }
-      return {
-        ...fieldNode,
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: [
-            ...fieldNode.selectionSet.selections.map((selectionNode) => {
-              switch (selectionNode.kind) {
-                case "Field": {
-                  return formifyFieldNode({
-                    fieldNode: selectionNode,
-                    parentType: field.type,
-                    path: fieldPath
-                  });
-                }
-                case "InlineFragment": {
-                  return formifyInlineFragmentNode({
-                    inlineFragmentNode: selectionNode,
-                    parentType: field.type,
-                    path: fieldPath,
-                    showInSidebar: false
-                  });
-                }
-                default:
-                  throw new FormifyError("UNEXPECTED", `selection ${selectionNode.kind}`);
-              }
-            })
-          ]
-        }
-      };
-    };
-    const formifyInlineFragmentNode = ({
-      inlineFragmentNode,
-      parentType,
-      path,
-      showInSidebar
-    }) => {
-      const type = getSelectedUnionType(parentType, inlineFragmentNode);
-      if (!type) {
-        return inlineFragmentNode;
-      }
-      if (isFormifiableDocument(type)) {
-        return formifyInlineFragmentDocument({
-          inlineFragmentNode,
-          type,
-          path,
-          showInSidebar
-        });
-      }
-      return {
-        ...inlineFragmentNode,
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: inlineFragmentNode.selectionSet.selections.map((selectionNode) => {
-            switch (selectionNode.kind) {
-              case "Field":
-                return formifyFieldNode({
-                  fieldNode: selectionNode,
-                  parentType: type,
-                  path
-                });
-              default:
-                throw new FormifyError("UNEXPECTED", `selection ${selectionNode.kind}`);
-            }
-          })
-        }
-      };
-    };
-    const formifiedQuery = {
-      kind: "Document",
-      definitions: optimizedQuery.definitions.map((definition) => {
-        typeInfo.enter(definition);
-        ensureOperationDefinition(definition);
-        const parentType = typeInfo.getType();
-        return {
-          ...definition,
-          selectionSet: {
-            kind: "SelectionSet",
-            selections: definition.selectionSet.selections.map((selectionNode) => {
-              switch (selectionNode.kind) {
-                case "Field":
-                  const field = getObjectField(parentType, selectionNode);
-                  const path = buildPath({
-                    fieldNode: selectionNode,
-                    type: field.type
-                  });
-                  if (isFormifiableDocument(field.type)) {
-                    return formifyFieldNodeDocument({
-                      fieldNode: selectionNode,
-                      type: field.type,
-                      path,
-                      showInSidebar: true
-                    });
-                  } else if (isConnectionField(field.type)) {
-                    return formifyConnection({
-                      parentType: field.type,
-                      selectionNode,
-                      path
-                    });
-                  }
-                  if (selectionNode.name.value === COLLECTION_FIELD_NAME || selectionNode.name.value === COLLECTIONS_FIELD_NAME) {
-                    const path2 = buildPath({
-                      fieldNode: selectionNode,
-                      type: field.type
-                    });
-                    return {
-                      ...selectionNode,
-                      selectionSet: {
-                        kind: "SelectionSet",
-                        selections: selectionNode.selectionSet.selections.map((subSelectionNode) => {
-                          switch (subSelectionNode.kind) {
-                            case "Field":
-                              if (subSelectionNode.name.value === COLLECTIONS_DOCUMENTS_NAME) {
-                                const subField = getObjectField(field.type, subSelectionNode);
-                                return formifyConnection({
-                                  parentType: subField.type,
-                                  selectionNode: subSelectionNode,
-                                  path: buildPath({
-                                    fieldNode: subSelectionNode,
-                                    type: subField.type,
-                                    path: path2
-                                  })
-                                });
-                              }
-                              return subSelectionNode;
-                            default:
-                              throw new FormifyError("NOOP");
-                          }
-                        })
-                      }
-                    };
-                  }
-                  throw new FormifyError("NOOP");
-                default:
-                  throw new FormifyError("UNEXPECTED");
-              }
-            })
-          }
-        };
-      })
-    };
-    return { formifiedQuery, blueprints };
-  };
-  class FormifyError extends Error {
-    constructor(code, details) {
-      let message;
-      switch (code) {
-        case "NOOP":
-          message = NOOP;
-          break;
-        case "UNEXPECTED":
-          message = UNEXPECTED;
-          break;
-        default:
-          message = "";
-          break;
-      }
-      super(`${message} ${details || ""}`);
-      this.name = "FormifyError";
-    }
-  }
-  const defaultState = {
-    status: "idle",
-    schema: void 0,
-    query: null,
-    queryString: null,
-    data: {},
-    changeSets: [],
-    count: 0,
-    blueprints: [],
-    formNodes: [],
-    documentForms: []
-  };
-  function reducer(state, action) {
-    var _a, _b, _c, _d;
-    switch (action.type) {
-      case "start":
-        return {
-          ...state,
-          ...defaultState,
-          query: action.value.query ? G__namespace.parse(action.value.query) : null,
-          queryString: action.value.query,
-          status: "initialized"
-        };
-      case "addDocumentBlueprints":
-        return {
-          ...state,
-          status: "formified",
-          blueprints: action.value.blueprints,
-          query: action.value.formifiedQuery
-        };
-      case "addOrReplaceDocumentFormNode": {
-        const existingDocumentForms = state.documentForms.filter((documentForm) => {
-          var _a2, _b2;
-          return documentForm.id !== ((_b2 = (_a2 = action.value) == null ? void 0 : _a2.documentForm) == null ? void 0 : _b2.id);
-        });
-        const existingDocumentFormNodes = state.formNodes.filter((formNode) => {
-          return formNodeId(formNode) !== formNodeId(action.value.formNode);
-        });
-        const newDocumentForms = [];
-        if ((_a = action.value) == null ? void 0 : _a.documentForm) {
-          newDocumentForms.push((_b = action.value) == null ? void 0 : _b.documentForm);
-        }
-        return {
-          ...state,
-          formNodes: [...existingDocumentFormNodes, action.value.formNode],
-          documentForms: [...existingDocumentForms, ...newDocumentForms]
-        };
-      }
-      case "onFieldChange": {
-        const event = action.value.event;
-        const changeSets = [];
-        const formNodesToReplace = [];
-        const formNodesToRemove = [];
-        const newFormNodes = [];
-        const form = state.documentForms.find((documentForm) => documentForm.id === event.formId);
-        getFormNodesFromEvent(state, event).forEach((formNode) => {
-          const blueprint = getFormNodeBlueprint(formNode, state);
-          if (blueprint.hasValuesField) {
-            changeSets.push({
-              path: [formNodePath(formNode), "values"].join("."),
-              ...buildChangeSet(event, formNode),
-              value: form.values,
-              mutationType: {
-                type: "global"
-              }
-            });
-          }
-          if (blueprint.hasDataJSONField) {
-            changeSets.push({
-              path: [formNodePath(formNode), "dataJSON"].join("."),
-              ...buildChangeSet(event, formNode),
-              value: form.values,
-              mutationType: {
-                type: "global"
-              }
-            });
-          }
-          if (event.mutationType.type === "change") {
-            if (!action.value.form) {
-              getBlueprintFieldsForEvent(blueprint, event).forEach((fieldBlueprint) => {
-                const { pathToChange } = getFormNodesForField(fieldBlueprint, formNode, event, state);
-                changeSets.push({
-                  path: pathToChange,
-                  ...buildChangeSet(event, formNode)
-                });
-              });
-            }
-          } else if (event.mutationType.type === "referenceChange") {
-            getBlueprintFieldsForEvent(blueprint, event).forEach((fieldBlueprint) => {
-              const {
-                pathToChange,
-                formNodes: subFormNodes,
-                eventLocation
-              } = getFormNodesForField(fieldBlueprint, formNode, event, state);
-              if (action.value.form && state.blueprints.find((blueprint2) => blueprint2.id === fieldBlueprint.id)) {
-                const newFormNode = {
-                  documentBlueprintId: fieldBlueprint.id,
-                  documentFormId: action.value.form.id,
-                  location: eventLocation
-                };
-                newFormNodes.push(newFormNode);
-                changeSets.push({
-                  path: pathToChange,
-                  ...buildChangeSet(event, newFormNode)
-                });
-              }
-              subFormNodes.forEach((subFormNode) => {
-                if (matchLocation(eventLocation, subFormNode)) {
-                  if (!action.value.form) {
-                    changeSets.push({
-                      path: pathToChange,
-                      ...buildChangeSet(event, subFormNode),
-                      value: null
-                    });
-                  }
-                  formNodesToReplace.push(subFormNode);
-                }
-              });
-            });
-          } else {
-            getBlueprintFieldsForEvent(blueprint, event).forEach((fieldBlueprint) => {
-              const { pathToChange, formNodes, existing, eventLocation } = getFormNodesForField(fieldBlueprint, formNode, event, state);
-              if (event.mutationType.type === "insert") {
-                formNodes.forEach((subFormNode) => {
-                  if (matchLocation(eventLocation, subFormNode)) {
-                    newFormNodes.push({
-                      ...subFormNode,
-                      location: bumpLocation(subFormNode.location)
-                    });
-                    formNodesToReplace.push(subFormNode);
-                  }
-                });
-                changeSets.push({
-                  path: pathToChange,
-                  ...buildChangeSet(event, formNode)
-                });
-              }
-              if (event.mutationType.type === "remove") {
-                const { at } = event.mutationType;
-                formNodes.forEach((subFormNode) => {
-                  if (matchLocation(eventLocation, subFormNode)) {
-                    if (matchesAt(subFormNode.location, at)) {
-                      formNodesToRemove.push(subFormNode);
-                    } else {
-                      newFormNodes.push({
-                        ...subFormNode,
-                        location: maybeLowerLocation(subFormNode.location, at)
-                      });
-                      formNodesToReplace.push(subFormNode);
-                    }
-                  }
-                });
-                const next = existing.filter((_, index) => index !== at);
-                changeSets.push({
-                  path: pathToChange,
-                  ...buildChangeSet(event, formNode),
-                  value: next
-                });
-              }
-              if (event.mutationType.type === "move") {
-                const next = [];
-                const { from, to } = event.mutationType;
-                const newOrderObject = getMoveMapping(existing, from, to);
-                formNodes.forEach((subFormNode) => {
-                  if (matchLocation(eventLocation, subFormNode)) {
-                    newFormNodes.push({
-                      ...subFormNode,
-                      location: swapLocation(subFormNode.location, newOrderObject)
-                    });
-                    formNodesToReplace.push(subFormNode);
-                  }
-                });
-                Object.values(newOrderObject).forEach((orderIndex, index) => {
-                  next[orderIndex] = existing[index];
-                });
-                changeSets.push({
-                  path: pathToChange,
-                  ...buildChangeSet(event, formNode),
-                  value: next
-                });
-              }
-            });
-          }
-        });
-        const existingDocumentForms = state.documentForms.filter((documentForm) => {
-          var _a2;
-          return documentForm.id !== ((_a2 = action.value.form) == null ? void 0 : _a2.id);
-        });
-        const newDocumentForms = [];
-        if ((_c = action.value) == null ? void 0 : _c.form) {
-          newDocumentForms.push((_d = action.value) == null ? void 0 : _d.form);
-        }
-        return {
-          ...state,
-          changeSets,
-          formNodes: [
-            ...state.formNodes.filter((formNode) => formNodeNotIn(formNode, formNodesToReplace)).filter((formNode) => formNodeNotIn(formNode, formNodesToRemove)),
-            ...newFormNodes
-          ],
-          documentForms: [...existingDocumentForms, ...newDocumentForms]
-        };
-      }
-      case "formOnReset": {
-        const { event } = action.value;
-        const changeSets = [];
-        const form = state.documentForms.find((documentForm) => documentForm.id === event.formId);
-        state.formNodes.filter((fn) => fn.documentFormId === (form == null ? void 0 : form.id)).forEach((formNode) => {
-          const blueprint = getFormNodeBlueprint(formNode, state);
-          if (blueprint.hasValuesField) {
-            changeSets.push({
-              path: [formNodePath(formNode), "_values"].join("."),
-              ...buildChangeSet(event, formNode)
-            });
-          }
-          changeSets.push({
-            path: [formNodePath(formNode)].join("."),
-            ...buildChangeSet(event, formNode)
-          });
-        });
-        return { ...state, changeSets };
-      }
-      case "ready":
-        return { ...state, status: "ready" };
-      case "done":
-        return { ...state, status: "done" };
-      case "setData":
-        return { ...state, data: action.value };
-      case "setIn": {
-        let newData;
-        if (action.value.displaceIndex) {
-          const existing = finalForm.getIn(state.data, action.value.path) || [];
-          newData = finalForm.setIn(state.data, action.value.path, [
-            action.value.value,
-            ...existing
-          ]);
-        } else {
-          newData = finalForm.setIn(state.data, action.value.path, action.value.value);
-        }
-        const changeSets = state.changeSets.filter((cs) => cs.path !== action.value.path);
-        return {
-          ...state,
-          data: newData,
-          changeSets
-        };
-      }
-      default:
-        return state;
-    }
-  }
-  const buildChangeSet = (event, formNode) => {
-    var _a, _b, _c;
-    return {
-      fieldDefinition: (_b = (_a = event.field) == null ? void 0 : _a.data) == null ? void 0 : _b.tinaField,
-      name: (_c = event.field) == null ? void 0 : _c.name,
-      formId: event.formId,
-      mutationType: event.mutationType,
-      value: event.value,
-      formNode
-    };
-  };
-  const useFormify = ({
-    query,
-    cms,
-    variables,
-    onSubmit,
-    formify: formifyFunc,
-    eventList
-  }) => {
-    const formIds = React__default["default"].useRef([]);
-    const [state, dispatch] = React__default["default"].useReducer(reducer, {
-      status: "idle",
-      schema: void 0,
-      query: query ? G__namespace.parse(query) : null,
-      queryString: query,
-      data: {},
-      changeSets: [],
-      count: 0,
-      blueprints: [],
-      formNodes: [],
-      documentForms: []
-    });
-    React__default["default"].useEffect(() => {
-      if (query) {
-        dispatch({ type: "start", value: { query } });
-        formIds.current.forEach((formId) => {
-          const form = cms.forms.find(formId);
-          if (form) {
-            cms.plugins.remove(form);
-          }
-        });
-      }
-    }, [query, JSON.stringify(variables)]);
-    React__default["default"].useEffect(() => {
-      if (state.status === "initialized") {
-        cms.api.tina.request(query, { variables }).then((res) => {
-          delete res.paths;
-          dispatch({ type: "setData", value: res });
-        });
-      }
-    }, [state.status]);
-    React__default["default"].useEffect(() => {
-      const run = async () => {
-        const schema = await cms.api.tina.getSchema();
-        const result = await formify({
-          schema,
-          query,
-          getOptimizedQuery: cms.api.tina.getOptimizedQuery
-        });
-        dispatch({
-          type: "addDocumentBlueprints",
-          value: result
-        });
-      };
-      if (state.status === "initialized") {
-        run();
-      }
-    }, [state.status]);
-    React__default["default"].useEffect(() => {
-      const run = async () => {
-        const result = await cms.api.tina.request(G__namespace.print(state.query), {
-          variables
-        });
-        state.blueprints.map((blueprint) => {
-          const responseAtBlueprint = getValueForBlueprint(result, getBlueprintAliasPath(blueprint));
-          const location = [];
-          const findFormNodes = (res, location2) => {
-            if (Array.isArray(res)) {
-              res.forEach((item, index) => {
-                if (Array.isArray(item)) {
-                  findFormNodes(item, [...location2, index]);
-                } else {
-                  if (item) {
-                    const form = buildForm(item, cms, formifyFunc, blueprint.showInSidebar, onSubmit);
-                    const formNode = buildFormNode(blueprint, form, [
-                      ...location2,
-                      index
-                    ]);
-                    dispatch({
-                      type: "addOrReplaceDocumentFormNode",
-                      value: {
-                        formNode,
-                        documentForm: form
-                      }
-                    });
-                  }
-                }
-              });
-            } else {
-              if (res) {
-                const form = buildForm(res, cms, formifyFunc, blueprint.showInSidebar, onSubmit);
-                const formNode = buildFormNode(blueprint, form, location2);
-                dispatch({
-                  type: "addOrReplaceDocumentFormNode",
-                  value: {
-                    formNode,
-                    documentForm: form
-                  }
-                });
-              }
-            }
-          };
-          findFormNodes(responseAtBlueprint, location);
-        });
-        dispatch({ type: "ready" });
-      };
-      if (state.status === "formified") {
-        run();
-      }
-    }, [state.status]);
-    React__default["default"].useEffect(() => {
-      if (state.status === "ready") {
-        cms.events.subscribe(`forms:reset`, (event) => {
-          if (eventList) {
-            eventList.push(printEvent(event));
-          }
-          dispatch({ type: "formOnReset", value: { event } });
-        });
-        cms.events.subscribe(`forms:fields:onChange`, async (event) => {
-          if (eventList) {
-            eventList.push(printEvent(event));
-          }
-          if (event.field.data.tinaField.type === "reference") {
-            let form;
-            if (event.value && typeof event.value === "string") {
-              const existingForm = cms.forms.find(event.value);
-              if (existingForm) {
-                form = existingForm;
-              } else {
-                const formInfo = await cms.api.tina.request(`#graphql
-                    query Node($id: String!) {
-                      node(id: $id) {
-                        ...on Document {
-                          _values
-                          _internalSys: _sys {
-                            path
-                            relativePath
-                            collection {
-                              name
-                            }
-                          }
-                        }
-                      }
-                    }
-                    `, { variables: { id: event.value } });
-                form = buildForm(formInfo.node, cms, formifyFunc, false, onSubmit);
-              }
-            }
-            dispatch({
-              type: "onFieldChange",
-              value: {
-                event: {
-                  ...event,
-                  mutationType: { type: "referenceChange" }
-                },
-                form
-              }
-            });
-          } else {
-            dispatch({ type: "onFieldChange", value: { event } });
-          }
-        });
-        dispatch({ type: "done" });
-      }
-    }, [state.status]);
-    React__default["default"].useEffect(() => {
-      state.changeSets.forEach((changeSet) => {
-        if (changeSet.mutationType.type === "reset") {
-          const form = cms.forms.find(changeSet.formId);
-          resolveSubFields({
-            formNode: changeSet.formNode,
-            form,
-            loc: []
-          }).then((res) => {
-            dispatch({
-              type: "setIn",
-              value: {
-                value: res,
-                path: changeSet.path
-              }
-            });
-          });
-          return;
-        } else if (changeSet.mutationType.type === "insert") {
-          if (changeSet.fieldDefinition.type === "object") {
-            const fieldName = changeSet.fieldDefinition.list ? `${changeSet.name}.[]` : changeSet.name;
-            const { fields, __typename } = getSubFields(changeSet);
-            resolveSubFields({
-              formNode: changeSet.formNode,
-              prefix: replaceRealNum(fieldName),
-              loc: [...stripIndices(changeSet.path), 0],
-              form: {
-                fields,
-                values: changeSet.value[0]
-              }
-            }).then((res) => {
-              const extra = {};
-              if (__typename) {
-                extra["__typename"] = __typename;
-              }
-              dispatch({
-                type: "setIn",
-                value: {
-                  displaceIndex: true,
-                  ...changeSet,
-                  value: {
-                    ...res,
-                    ...extra
-                  }
-                }
-              });
-            });
-          } else {
-            dispatch({
-              type: "setIn",
-              value: {
-                displaceIndex: true,
-                ...changeSet,
-                value: changeSet.value[0]
-              }
-            });
-          }
-        } else {
-          if (changeSet.mutationType.type === "referenceChange") {
-            const { formNode } = changeSet;
-            const blueprint = getFormNodeBlueprint(formNode, state);
-            if (!changeSet.value) {
-              dispatch({
-                type: "setIn",
-                value: {
-                  ...changeSet,
-                  value: null
-                }
-              });
-            } else {
-              cms.api.tina.request(`
-              query Node($id: String!) {
-                node(id: $id) {
-                  ${G__namespace.print(blueprint.selection)}
-                }
-              }
-            `, { variables: { id: changeSet.value } }).then(async (res) => {
-                const form = state.documentForms.find((documentForm) => documentForm.id === formNode.documentFormId);
-                const data = await resolveSubFields({
-                  formNode,
-                  form,
-                  loc: formNode.location
-                });
-                dispatch({
-                  type: "setIn",
-                  value: {
-                    ...changeSet,
-                    value: {
-                      ...res.node,
-                      ...data
-                    }
-                  }
-                });
-              }).catch((e) => {
-                cms.alerts.error(`Unexpected error fetching reference.`);
-                console.log(e);
-              });
-            }
-          } else {
-            dispatch({ type: "setIn", value: changeSet });
-          }
-        }
-      });
-    }, [JSON.stringify(state.changeSets)]);
-    React__default["default"].useEffect(() => {
-      formIds.current = state.documentForms.map((df) => df.id);
-    }, [state.documentForms.length]);
-    React__default["default"].useEffect(() => {
-      return () => {
-        formIds.current.forEach((formId) => {
-          const form = cms.forms.find(formId);
-          if (form) {
-            cms.plugins.remove(form);
-          }
-        });
-      };
-    }, []);
-    const resolveSubFields = React__default["default"].useCallback(async (args) => {
-      const { form, formNode, prefix, loc } = args;
-      const data = {};
-      await sequential(form.fields, async (field) => {
-        const value = form.values[field.name];
-        const blueprint = getFormNodeBlueprint(formNode, state);
-        const { matchName, fieldName } = getMatchName({
-          field,
-          prefix,
-          blueprint
-        });
-        const fieldBlueprints = blueprint.fields.filter((fieldBlueprint) => {
-          return matchName === getBlueprintNamePath(fieldBlueprint);
-        }).filter((fbp) => filterFieldBlueprintsByParentTypename(fbp, field.parentTypename));
-        switch (field.type) {
-          case "object":
-            if (field.templates) {
-              if (field.list) {
-                await sequential(fieldBlueprints, async (fieldBlueprint) => {
-                  const keyName = getFieldNameOrAlias(fieldBlueprint);
-                  if (!value) {
-                    data[keyName] = null;
-                    return true;
-                  }
-                  if (!Array.isArray(value)) {
-                    throw new Error(`Expected value for object list field to be an array`);
-                  }
-                  data[keyName] = await sequential(value, async (item, index) => {
-                    const template = field.templates[item._template];
-                    return {
-                      ...await resolveSubFields({
-                        formNode,
-                        form: { fields: template.fields, values: item },
-                        prefix: prefix ? [prefix, fieldName].join(".") : fieldName,
-                        loc: [...loc, index]
-                      }),
-                      __typename: field.typeMap[item._template]
-                    };
-                  });
-                });
-              } else {
-                throw new Error("blocks without list true is not yet supported");
-              }
-            } else {
-              if (field.list) {
-                await sequential(fieldBlueprints, async (fieldBlueprint) => {
-                  const keyName = getFieldNameOrAlias(fieldBlueprint);
-                  if (!value) {
-                    data[keyName] = null;
-                    return true;
-                  }
-                  if (!Array.isArray(value)) {
-                    throw new Error(`Expected value for object list field to be an array`);
-                  }
-                  data[keyName] = await sequential(value, async (item, index) => {
-                    return resolveSubFields({
-                      formNode,
-                      form: { fields: field.fields, values: item },
-                      prefix: [prefix, fieldName].join("."),
-                      loc: [...loc, index]
-                    });
-                  });
-                  return true;
-                });
-              } else {
-                await sequential(fieldBlueprints, async (fieldBlueprint) => {
-                  const keyName = getFieldNameOrAlias(fieldBlueprint);
-                  if (!value) {
-                    data[keyName] = null;
-                    return true;
-                  }
-                  data[keyName] = await resolveSubFields({
-                    formNode,
-                    form: { fields: field.fields, values: value },
-                    prefix: [prefix, fieldName].join("."),
-                    loc
-                  });
-                  return true;
-                });
-              }
-            }
-            break;
-          case "reference":
-            let form2;
-            if (typeof value === "string") {
-              const existingForm = cms.forms.find(value);
-              if (existingForm) {
-                form2 = existingForm;
-              } else {
-                const formInfo = await cms.api.tina.request(`#graphql
-                      query Node($id: String!) {
-                        node(id: $id) {
-                          ...on Document {
-                            _values
-                            _internalSys: _sys {
-                              path
-                              relativePath
-                              collection {
-                                name
-                              }
-                            }
-                          }
-                        }
-                      }
-                    `, { variables: { id: value } });
-                form2 = buildForm(formInfo.node, cms, formifyFunc, false, onSubmit);
-              }
-            }
-            await sequential(fieldBlueprints, async (fieldBlueprint) => {
-              const keyName = getFieldNameOrAlias(fieldBlueprint);
-              if (!value) {
-                data[keyName] = null;
-                return true;
-              }
-              const documentBlueprint = state.blueprints.find((dp) => getBlueprintNamePath(dp) === matchName);
-              const location = [...formNode.location];
-              if (loc) {
-                loc.forEach((item) => location.push(item));
-              }
-              const subDocumentFormNode = buildFormNode(documentBlueprint, form2, location);
-              dispatch({
-                type: "addOrReplaceDocumentFormNode",
-                value: {
-                  formNode: subDocumentFormNode,
-                  documentForm: form2
-                }
-              });
-              const res = await cms.api.tina.request(`
-                    query Node($id: String!) {
-                      node(id: $id) {
-                        ${G__namespace.print(documentBlueprint.selection)}
-                      }
-                    }
-                  `, { variables: { id: value } });
-              data[keyName] = {
-                ...res.node,
-                ...await resolveSubFields({
-                  formNode: subDocumentFormNode,
-                  form: form2,
-                  loc: location
-                })
-              };
-            });
-            break;
-          default:
-            fieldBlueprints.forEach((fieldBlueprint) => {
-              const keyName = getFieldNameOrAlias(fieldBlueprint);
-              if (!value) {
-                data[keyName] = null;
-              } else {
-                data[keyName] = value;
-              }
-            });
-            break;
-        }
-        return true;
-      });
-      return data;
-    }, [cms, JSON.stringify(state), dispatch]);
-    return {
-      ...state,
-      queryString: G__namespace.print(state.query)
-    };
-  };
-  const buildFormNode = (documentBlueprint, form, location) => {
-    return {
-      documentBlueprintId: documentBlueprint.id,
-      documentFormId: form.id,
-      location
-    };
+      const origin = `${window.location.protocol}//${window.location.host}`;
+      authTab = popupWindow(`${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`, "_blank", window, 1e3, 700);
+    });
   };
   const captureBranchName = /^refs\/heads\/(.*)/;
   const parseRefForBranchName = (ref) => {
@@ -2197,10 +126,10 @@ mutation addPendingDocumentMutation(
       };
       this.getSchema = async () => {
         if (!this.gqlSchema) {
-          const data = await this.request(G.getIntrospectionQuery(), {
+          const data = await this.request(graphql.getIntrospectionQuery(), {
             variables: {}
           });
-          this.gqlSchema = G.buildClientSchema(data);
+          this.gqlSchema = graphql.buildClientSchema(data);
         }
         return this.gqlSchema;
       };
@@ -2208,9 +137,9 @@ mutation addPendingDocumentMutation(
         const data = await this.request(`query GetOptimizedQuery($queryString: String!) {
         getOptimizedQuery(queryString: $queryString)
       }`, {
-          variables: { queryString: G.print(documentNode) }
+          variables: { queryString: graphql.print(documentNode) }
         });
-        return G.parse(data.getOptimizedQuery);
+        return graphql.parse(data.getOptimizedQuery);
       };
       this.onLogin = (_d = (_c = (_b = (_a = options.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.admin) == null ? void 0 : _c.auth) == null ? void 0 : _d.onLogin;
       this.onLogout = (_h = (_g = (_f = (_e = options.schema) == null ? void 0 : _e.config) == null ? void 0 : _f.admin) == null ? void 0 : _g.auth) == null ? void 0 : _h.onLogout;
@@ -2298,24 +227,6 @@ mutation addPendingDocumentMutation(
       this.contentApiBase = ((_d = this.options.tinaioConfig) == null ? void 0 : _d.contentApiUrlOverride) || `https://content.tinajs.io`;
       this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
     }
-    async requestWithForm(query, {
-      variables,
-      useUnstableFormify
-    }) {
-      const schema = await this.getSchema();
-      let formifiedQuery;
-      if (useUnstableFormify) {
-        const res = await formify({
-          schema,
-          query: G.print(query(gql__default["default"])),
-          getOptimizedQuery: this.getOptimizedQuery
-        });
-        formifiedQuery = res.formifiedQuery;
-      } else {
-        formifiedQuery = formify$1(query(gql__default["default"]), schema);
-      }
-      return this.request(G.print(formifiedQuery), { variables });
-    }
     async request(query, { variables }) {
       const res = await fetch(this.contentApiUrl, {
         method: "POST",
@@ -2324,7 +235,7 @@ mutation addPendingDocumentMutation(
           Authorization: "Bearer " + (await this.getToken()).id_token
         },
         body: JSON.stringify({
-          query: typeof query === "function" ? G.print(query(gql__default["default"])) : query,
+          query: typeof query === "function" ? graphql.print(query(gql__default["default"])) : query,
           variables
         })
       });
@@ -2609,6 +520,7 @@ mutation addPendingDocumentMutation(
       }
     }, [action, setSubmitting]);
     return /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      "data-test": name.replace(/\s/g, "-").toLowerCase(),
       variant: primary ? "primary" : "secondary",
       onClick,
       busy: submitting,
@@ -2630,6 +542,39 @@ mutation addPendingDocumentMutation(
       localStorage[TINA_AUTH_CONFIG] = JSON.stringify(config);
     }, []);
   };
+  const createClient = ({
+    clientId,
+    isLocalClient = true,
+    branch,
+    tinaioConfig,
+    schema,
+    apiUrl
+  }) => {
+    return isLocalClient ? new LocalClient({ customContentApiUrl: apiUrl, schema }) : new Client({
+      clientId: clientId || "",
+      branch: branch || "main",
+      tokenStorage: "LOCAL_STORAGE",
+      tinaioConfig,
+      schema
+    });
+  };
+  function assertShape(value, yupSchema, errorMessage) {
+    const shape = yupSchema(yup__namespace);
+    try {
+      shape.validateSync(value);
+    } catch (e) {
+      const message = errorMessage || `Failed to assertShape - ${e.message}`;
+      throw new Error(message);
+    }
+  }
+  function safeAssertShape(value, yupSchema) {
+    try {
+      assertShape(value, yupSchema);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
   class TinaAdminApi {
     constructor(cms) {
       this.api = cms.api.tina;
@@ -2641,7 +586,7 @@ mutation addPendingDocumentMutation(
     async checkGraphqlSchema({ localSchema }) {
       const schemaFromCloud = await this.api.getSchema();
       const schema1 = schemaFromCloud;
-      const schema2 = G.buildSchema(G.print(localSchema));
+      const schema2 = graphql.buildSchema(graphql.print(localSchema));
       const diffOutput = await core.diff(schema1, schema2);
       if (diffOutput.length > 0) {
         return false;
@@ -3350,35 +1295,35 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .left-0 {
   left: 0px;
 }
-.tina-tailwind .top-0 {
-  top: 0px;
-}
-.tina-tailwind .top-8 {
-  top: 32px;
+.tina-tailwind .left-2 {
+  left: 8px;
 }
 .tina-tailwind .right-0 {
   right: 0px;
 }
+.tina-tailwind .top-0 {
+  top: 0px;
+}
+.tina-tailwind .top-1\\/2 {
+  top: 50%;
+}
 .tina-tailwind .top-10 {
   top: 40px;
 }
 .tina-tailwind .top-4 {
   top: 16px;
 }
-.tina-tailwind .top-1\\/2 {
-  top: 50%;
-}
-.tina-tailwind .left-2 {
-  left: 8px;
+.tina-tailwind .top-8 {
+  top: 32px;
 }
-.tina-tailwind .z-overlay {
-  z-index: 10600;
+.tina-tailwind .z-50 {
+  z-index: 50;
 }
 .tina-tailwind .z-menu {
   z-index: 9800;
 }
-.tina-tailwind .z-50 {
-  z-index: 50;
+.tina-tailwind .z-overlay {
+  z-index: 10600;
 }
 .tina-tailwind .mx-auto {
   margin-left: auto;
@@ -3387,38 +1332,44 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .-ml-px {
   margin-left: -1px;
 }
-.tina-tailwind .mr-2 {
-  margin-right: 8px;
+.tina-tailwind .-mt-0 {
+  margin-top: -0px;
 }
-.tina-tailwind .ml-1 {
-  margin-left: 4px;
+.tina-tailwind .-mt-0\\.5 {
+  margin-top: -2px;
+}
+.tina-tailwind .mb-1 {
+  margin-bottom: 4px;
 }
 .tina-tailwind .mb-2 {
   margin-bottom: 8px;
 }
-.tina-tailwind .mb-1 {
-  margin-bottom: 4px;
+.tina-tailwind .mb-4 {
+  margin-bottom: 16px;
 }
-.tina-tailwind .-mt-0\\.5 {
-  margin-top: -2px;
+.tina-tailwind .mb-6 {
+  margin-bottom: 24px;
 }
-.tina-tailwind .-mt-0 {
-  margin-top: -0px;
+.tina-tailwind .mb-8 {
+  margin-bottom: 32px;
 }
-.tina-tailwind .mt-2 {
-  margin-top: 8px;
+.tina-tailwind .ml-1 {
+  margin-left: 4px;
 }
 .tina-tailwind .ml-1\\.5 {
   margin-left: 6px;
 }
-.tina-tailwind .mb-4 {
-  margin-bottom: 16px;
+.tina-tailwind .mr-1 {
+  margin-right: 4px;
 }
 .tina-tailwind .mr-1\\.5 {
   margin-right: 6px;
 }
-.tina-tailwind .mr-1 {
-  margin-right: 4px;
+.tina-tailwind .mr-2 {
+  margin-right: 8px;
+}
+.tina-tailwind .mt-2 {
+  margin-top: 8px;
 }
 .tina-tailwind .block {
   display: block;
@@ -3426,9 +1377,6 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .inline-block {
   display: inline-block;
 }
-.tina-tailwind .inline {
-  display: inline;
-}
 .tina-tailwind .flex {
   display: flex;
 }
@@ -3441,14 +1389,14 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .grid {
   display: grid;
 }
-.tina-tailwind .h-screen {
-  height: 100vh;
+.tina-tailwind .h-10 {
+  height: 40px;
 }
-.tina-tailwind .h-auto {
-  height: auto;
+.tina-tailwind .h-12 {
+  height: 48px;
 }
-.tina-tailwind .h-full {
-  height: 100%;
+.tina-tailwind .h-5 {
+  height: 20px;
 }
 .tina-tailwind .h-6 {
   height: 24px;
@@ -3456,23 +1404,23 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .h-7 {
   height: 28px;
 }
-.tina-tailwind .h-5 {
-  height: 20px;
+.tina-tailwind .h-auto {
+  height: auto;
 }
-.tina-tailwind .h-10 {
-  height: 40px;
+.tina-tailwind .h-full {
+  height: 100%;
 }
-.tina-tailwind .h-12 {
-  height: 48px;
+.tina-tailwind .h-screen {
+  height: 100vh;
 }
-.tina-tailwind .w-full {
-  width: 100%;
+.tina-tailwind .w-0 {
+  width: 0px;
 }
 .tina-tailwind .w-10 {
   width: 40px;
 }
-.tina-tailwind .w-auto {
-  width: auto;
+.tina-tailwind .w-12 {
+  width: 48px;
 }
 .tina-tailwind .w-5 {
   width: 20px;
@@ -3480,20 +1428,23 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .w-56 {
   width: 224px;
 }
+.tina-tailwind .w-6 {
+  width: 24px;
+}
+.tina-tailwind .w-7 {
+  width: 28px;
+}
 .tina-tailwind .w-\\[15\\%\\] {
   width: 15%;
 }
-.tina-tailwind .w-0 {
-  width: 0px;
-}
-.tina-tailwind .w-6 {
-  width: 24px;
+.tina-tailwind .w-auto {
+  width: auto;
 }
-.tina-tailwind .max-w-lg {
-  max-width: 32rem;
+.tina-tailwind .w-full {
+  width: 100%;
 }
-.tina-tailwind .max-w-screen-xl {
-  max-width: 1280px;
+.tina-tailwind .max-w-0 {
+  max-width: 0rem;
 }
 .tina-tailwind .max-w-form {
   max-width: 900px;
@@ -3501,8 +1452,11 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .max-w-full {
   max-width: 100%;
 }
-.tina-tailwind .max-w-0 {
-  max-width: 0rem;
+.tina-tailwind .max-w-lg {
+  max-width: 32rem;
+}
+.tina-tailwind .max-w-screen-xl {
+  max-width: 1280px;
 }
 .tina-tailwind .flex-1 {
   flex: 1 1 0%;
@@ -3523,6 +1477,10 @@ mutation addPendingDocumentMutation(
   --tw-translate-x: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.tina-tailwind .-translate-y-1\\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .tina-tailwind .translate-x-0 {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3531,8 +1489,9 @@ mutation addPendingDocumentMutation(
   --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.tina-tailwind .-translate-y-1\\/2 {
-  --tw-translate-y: -50%;
+.tina-tailwind .scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 .tina-tailwind .scale-95 {
@@ -3540,11 +1499,6 @@ mutation addPendingDocumentMutation(
   --tw-scale-y: .95;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.tina-tailwind .scale-100 {
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .tina-tailwind .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -3581,14 +1535,11 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .justify-between {
   justify-content: space-between;
 }
-.tina-tailwind .gap-0\\.5 {
-  gap: 2px;
-}
 .tina-tailwind .gap-0 {
   gap: 0px;
 }
-.tina-tailwind .gap-4 {
-  gap: 16px;
+.tina-tailwind .gap-0\\.5 {
+  gap: 2px;
 }
 .tina-tailwind .gap-2 {
   gap: 8px;
@@ -3596,6 +1547,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .gap-3 {
   gap: 12px;
 }
+.tina-tailwind .gap-4 {
+  gap: 16px;
+}
 .tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -3628,18 +1582,18 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .whitespace-nowrap {
   white-space: nowrap;
 }
-.tina-tailwind .rounded-lg {
-  border-radius: 8px;
-}
 .tina-tailwind .rounded {
   border-radius: 4px;
 }
-.tina-tailwind .rounded-md {
-  border-radius: 6px;
-}
 .tina-tailwind .rounded-full {
   border-radius: 9999px;
 }
+.tina-tailwind .rounded-lg {
+  border-radius: 8px;
+}
+.tina-tailwind .rounded-md {
+  border-radius: 6px;
+}
 .tina-tailwind .rounded-r-md {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
@@ -3650,6 +1604,10 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .border-b {
   border-bottom-width: 1px;
 }
+.tina-tailwind .border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(237 236 243 / var(--tw-border-opacity));
+}
 .tina-tailwind .border-gray-150 {
   --tw-border-opacity: 1;
   border-color: rgb(230 227 239 / var(--tw-border-opacity));
@@ -3658,21 +1616,21 @@ mutation addPendingDocumentMutation(
   --tw-border-opacity: 1;
   border-color: rgb(225 221 236 / var(--tw-border-opacity));
 }
-.tina-tailwind .border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(237 236 243 / var(--tw-border-opacity));
+.tina-tailwind .bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 132 255 / var(--tw-bg-opacity));
 }
-.tina-tailwind .bg-white {
+.tina-tailwind .bg-gray-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(237 236 243 / var(--tw-bg-opacity));
 }
 .tina-tailwind .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(246 246 249 / var(--tw-bg-opacity));
 }
-.tina-tailwind .bg-blue-500 {
+.tina-tailwind .bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(0 132 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 .tina-tailwind .bg-gradient-to-b {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
@@ -3699,50 +1657,37 @@ mutation addPendingDocumentMutation(
   --tw-gradient-to: rgb(37 35 54 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), #252336, var(--tw-gradient-to);
 }
-.tina-tailwind .to-gray-900 {
-  --tw-gradient-to: #252336;
-}
-.tina-tailwind .to-gray-50 {
-  --tw-gradient-to: #F6F6F9;
-}
 .tina-tailwind .to-black {
   --tw-gradient-to: #000;
 }
-.tina-tailwind .px-4 {
-  padding-left: 16px;
-  padding-right: 16px;
-}
-.tina-tailwind .py-6 {
-  padding-top: 24px;
-  padding-bottom: 24px;
+.tina-tailwind .to-gray-50 {
+  --tw-gradient-to: #F6F6F9;
 }
-.tina-tailwind .px-5 {
-  padding-left: 20px;
-  padding-right: 20px;
+.tina-tailwind .to-gray-900 {
+  --tw-gradient-to: #252336;
 }
-.tina-tailwind .py-4 {
-  padding-top: 16px;
-  padding-bottom: 16px;
+.tina-tailwind .fill-current {
+  fill: currentColor;
 }
 .tina-tailwind .px-12 {
   padding-left: 48px;
   padding-right: 48px;
 }
-.tina-tailwind .py-8 {
-  padding-top: 32px;
-  padding-bottom: 32px;
+.tina-tailwind .px-20 {
+  padding-left: 80px;
+  padding-right: 80px;
 }
-.tina-tailwind .py-10 {
-  padding-top: 40px;
-  padding-bottom: 40px;
+.tina-tailwind .px-3 {
+  padding-left: 12px;
+  padding-right: 12px;
 }
-.tina-tailwind .py-2 {
-  padding-top: 8px;
-  padding-bottom: 8px;
+.tina-tailwind .px-4 {
+  padding-left: 16px;
+  padding-right: 16px;
 }
-.tina-tailwind .px-20 {
-  padding-left: 80px;
-  padding-right: 80px;
+.tina-tailwind .px-5 {
+  padding-left: 20px;
+  padding-right: 20px;
 }
 .tina-tailwind .px-6 {
   padding-left: 24px;
@@ -3752,29 +1697,36 @@ mutation addPendingDocumentMutation(
   padding-top: 4px;
   padding-bottom: 4px;
 }
-.tina-tailwind .px-3 {
-  padding-left: 12px;
-  padding-right: 12px;
+.tina-tailwind .py-10 {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+.tina-tailwind .py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 .tina-tailwind .py-3 {
   padding-top: 12px;
   padding-bottom: 12px;
 }
+.tina-tailwind .py-4 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
 .tina-tailwind .py-5 {
   padding-top: 20px;
   padding-bottom: 20px;
 }
-.tina-tailwind .pt-4 {
-  padding-top: 16px;
-}
-.tina-tailwind .pt-12 {
-  padding-top: 48px;
+.tina-tailwind .py-6 {
+  padding-top: 24px;
+  padding-bottom: 24px;
 }
-.tina-tailwind .pr-3 {
-  padding-right: 12px;
+.tina-tailwind .py-8 {
+  padding-top: 32px;
+  padding-bottom: 32px;
 }
-.tina-tailwind .pl-8 {
-  padding-left: 32px;
+.tina-tailwind .pl-18 {
+  padding-left: 72px;
 }
 .tina-tailwind .pl-3 {
   padding-left: 12px;
@@ -3782,8 +1734,17 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .pl-5 {
   padding-left: 20px;
 }
-.tina-tailwind .pl-18 {
-  padding-left: 72px;
+.tina-tailwind .pl-8 {
+  padding-left: 32px;
+}
+.tina-tailwind .pr-3 {
+  padding-right: 12px;
+}
+.tina-tailwind .pt-12 {
+  padding-top: 48px;
+}
+.tina-tailwind .pt-4 {
+  padding-top: 16px;
 }
 .tina-tailwind .text-left {
   text-align: left;
@@ -3798,10 +1759,18 @@ mutation addPendingDocumentMutation(
   font-size: 24px;
   line-height: 1.33;
 }
+.tina-tailwind .text-4xl {
+  font-size: 36px;
+  line-height: 1.1;
+}
 .tina-tailwind .text-base {
   font-size: 16px;
   line-height: 1.5;
 }
+.tina-tailwind .text-md {
+  font-size: 16px;
+  line-height: 1.5;
+}
 .tina-tailwind .text-sm {
   font-size: 14px;
   line-height: 1.43;
@@ -3810,10 +1779,6 @@ mutation addPendingDocumentMutation(
   font-size: 20px;
   line-height: 1.4;
 }
-.tina-tailwind .text-md {
-  font-size: 16px;
-  line-height: 1.5;
-}
 .tina-tailwind .text-xs {
   font-size: 13px;
   line-height: 1.33;
@@ -3830,33 +1795,28 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .italic {
   font-style: italic;
 }
+.tina-tailwind .leading-5 {
+  line-height: 20px;
+}
 .tina-tailwind .leading-normal {
   line-height: 1.5;
 }
 .tina-tailwind .leading-tight {
   line-height: 1.25;
 }
-.tina-tailwind .leading-5 {
-  line-height: 20px;
-}
 .tina-tailwind .tracking-wide {
   letter-spacing: 0.025em;
 }
-.tina-tailwind .text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(86 81 101 / var(--tw-text-opacity));
-}
-.tina-tailwind .text-gray-700 {
+.tina-tailwind .text-blue-500 {
   --tw-text-opacity: 1;
-  color: rgb(67 62 82 / var(--tw-text-opacity));
+  color: rgb(0 132 255 / var(--tw-text-opacity));
 }
 .tina-tailwind .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(5 116 228 / var(--tw-text-opacity));
 }
-.tina-tailwind .text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(113 108 127 / var(--tw-text-opacity));
+.tina-tailwind .text-current {
+  color: currentColor;
 }
 .tina-tailwind .text-gray-300 {
   --tw-text-opacity: 1;
@@ -3866,16 +1826,17 @@ mutation addPendingDocumentMutation(
   --tw-text-opacity: 1;
   color: rgb(145 140 158 / var(--tw-text-opacity));
 }
-.tina-tailwind .text-blue-500 {
+.tina-tailwind .text-gray-500 {
   --tw-text-opacity: 1;
-  color: rgb(0 132 255 / var(--tw-text-opacity));
+  color: rgb(113 108 127 / var(--tw-text-opacity));
 }
-.tina-tailwind .text-current {
-  color: currentColor;
+.tina-tailwind .text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(86 81 101 / var(--tw-text-opacity));
 }
-.tina-tailwind .text-white {
+.tina-tailwind .text-gray-700 {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(67 62 82 / var(--tw-text-opacity));
 }
 .tina-tailwind .text-gray-800 {
   --tw-text-opacity: 1;
@@ -3885,24 +1846,26 @@ mutation addPendingDocumentMutation(
   --tw-text-opacity: 1;
   color: rgb(37 35 54 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .tina-tailwind .underline {
   text-decoration-line: underline;
 }
-.tina-tailwind .opacity-100 {
-  opacity: 1;
-}
 .tina-tailwind .opacity-0 {
   opacity: 0;
 }
-.tina-tailwind .opacity-80 {
-  opacity: .8;
-}
-.tina-tailwind .opacity-90 {
-  opacity: .9;
+.tina-tailwind .opacity-100 {
+  opacity: 1;
 }
 .tina-tailwind .opacity-20 {
   opacity: .2;
@@ -3913,9 +1876,15 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .opacity-70 {
   opacity: .7;
 }
-.tina-tailwind .shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+.tina-tailwind .opacity-80 {
+  opacity: .8;
+}
+.tina-tailwind .opacity-90 {
+  opacity: .9;
+}
+.tina-tailwind .shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .tina-tailwind .shadow-2xl {
@@ -3928,9 +1897,9 @@ mutation addPendingDocumentMutation(
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.tina-tailwind .shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+.tina-tailwind .shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .tina-tailwind .ring-1 {
@@ -3948,8 +1917,8 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.tina-tailwind .transition-opacity {
-  transition-property: opacity;
+.tina-tailwind .transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -3963,32 +1932,32 @@ mutation addPendingDocumentMutation(
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.tina-tailwind .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+.tina-tailwind .transition-opacity {
+  transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.tina-tailwind .duration-300 {
-  transition-duration: 300ms;
-}
-.tina-tailwind .duration-200 {
-  transition-duration: 200ms;
+.tina-tailwind .duration-100 {
+  transition-duration: 100ms;
 }
 .tina-tailwind .duration-150 {
   transition-duration: 150ms;
 }
-.tina-tailwind .duration-100 {
-  transition-duration: 100ms;
+.tina-tailwind .duration-200 {
+  transition-duration: 200ms;
+}
+.tina-tailwind .duration-300 {
+  transition-duration: 300ms;
 }
 .tina-tailwind .duration-75 {
   transition-duration: 75ms;
 }
-.tina-tailwind .ease-out {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
 .tina-tailwind .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
+.tina-tailwind .ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
 .tina-tailwind .icon-parent svg {
       fill: currentColor;
     }
@@ -4003,14 +1972,14 @@ mutation addPendingDocumentMutation(
   --tw-bg-opacity: 1;
   background-color: rgb(5 116 228 / var(--tw-bg-opacity));
 }
-.tina-tailwind .hover\\:text-blue-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(5 116 228 / var(--tw-text-opacity));
-}
 .tina-tailwind .hover\\:text-blue-400:hover {
   --tw-text-opacity: 1;
   color: rgb(34 150 254 / var(--tw-text-opacity));
 }
+.tina-tailwind .hover\\:text-blue-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(5 116 228 / var(--tw-text-opacity));
+}
 .tina-tailwind .hover\\:opacity-100:hover {
   opacity: 1;
 }
@@ -4021,14 +1990,14 @@ mutation addPendingDocumentMutation(
   --tw-border-opacity: 1;
   border-color: rgb(0 132 255 / var(--tw-border-opacity));
 }
-.tina-tailwind .focus\\:text-gray-900:focus {
-  --tw-text-opacity: 1;
-  color: rgb(37 35 54 / var(--tw-text-opacity));
-}
 .tina-tailwind .focus\\:text-blue-400:focus {
   --tw-text-opacity: 1;
   color: rgb(34 150 254 / var(--tw-text-opacity));
 }
+.tina-tailwind .focus\\:text-gray-900:focus {
+  --tw-text-opacity: 1;
+  color: rgb(37 35 54 / var(--tw-text-opacity));
+}
 .tina-tailwind .focus\\:underline:focus {
   text-decoration-line: underline;
 }
@@ -4237,42 +2206,6 @@ mutation addPendingDocumentMutation(
       };
     }, [plugin]);
   };
-  function useTina({
-    query,
-    variables,
-    data
-  }) {
-    React__default["default"].useEffect(() => {
-      console.warn(`
-  "useTina" from 'tinacms/dist/edit-state' is now deprecated
-  * Use "import { useTina } from 'tinacms/dist/react" instead.
-  * See https://tina.io/blog/upgrading-to-iframe/ for full migration details
-  `);
-    }, []);
-    const {
-      setRequest,
-      state,
-      isDummyContainer,
-      isLoading: contextLoading
-    } = React__default["default"].useContext(sharedctx.TinaDataContext);
-    const [waitForContextRerender, setWaitForContextRerender] = React.useState(!isDummyContainer);
-    const isLoading = contextLoading || waitForContextRerender;
-    React__default["default"].useEffect(() => {
-      setRequest({ query, variables });
-    }, [JSON.stringify(variables), query]);
-    React.useEffect(() => {
-      if (!isDummyContainer) {
-        setTimeout(() => setWaitForContextRerender(false), 0);
-      }
-      return () => {
-        setRequest(void 0);
-      };
-    }, [isDummyContainer]);
-    return {
-      data: isDummyContainer || isLoading ? data : state.payload,
-      isLoading
-    };
-  }
   const errorButtonStyles = {
     background: "#eb6337",
     padding: "12px 18px",
@@ -4360,12 +2293,6 @@ mutation addPendingDocumentMutation(
     ...props
   }) => {
     var _a, _b, _c, _d, _e;
-    React__default["default"].useEffect(() => {
-      console.warn(`
-    * Tina no longer requires wrapping your site in the TinaProvider
-    * See https://tina.io/blog/upgrading-to-iframe/ for full migration details
-    `);
-    }, []);
     if (props == null ? void 0 : props.apiURL) {
       console.warn("The apiURL prop is deprecated. Please see https://tina.io/blog/tina-v-0.68.14 for information on how to upgrade to the new API");
     }
@@ -4391,84 +2318,7 @@ mutation addPendingDocumentMutation(
       mediaStore: props.mediaStore,
       apiUrl: apiURL,
       schema: { ...schema, config: { ...schema.config, ...props } }
-    }, /* @__PURE__ */ React__default["default"].createElement("style", null, styles), /* @__PURE__ */ React__default["default"].createElement(ErrorBoundary, null, /* @__PURE__ */ React__default["default"].createElement(DocumentCreator, {
-      documentCreatorCallback
-    }), /* @__PURE__ */ React__default["default"].createElement(TinaDataProvider, {
-      formifyCallback
-    }, typeof props.children == "function" ? /* @__PURE__ */ React__default["default"].createElement(TinaQuery, {
-      ...props,
-      variables: props.variables,
-      data: props.data,
-      query,
-      formifyCallback,
-      children: props.children
-    }) : props.children))));
-  };
-  const DocumentCreator = ({
-    documentCreatorCallback
-  }) => {
-    useDocumentCreatorPlugin(documentCreatorCallback);
-    return null;
-  };
-  const TinaQuery = (props) => {
-    return /* @__PURE__ */ React__default["default"].createElement(TinaQueryInner, {
-      key: `rootQuery-${props.query}`,
-      ...props
-    });
-  };
-  const TinaQueryInner = ({ children, ...props }) => {
-    const { data: liveData, isLoading } = useTina({
-      query: props.query,
-      variables: props.variables,
-      data: props.data
-    });
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(isLoading || !props.query ? props : { ...props, data: liveData }));
-  };
-  const TinaDataProvider = ({
-    children,
-    formifyCallback
-  }) => {
-    const [request, setRequest] = React.useState();
-    const [state, setState] = React__default["default"].useState({
-      payload: void 0,
-      isLoading: true
-    });
-    return /* @__PURE__ */ React__default["default"].createElement(sharedctx.TinaDataContext.Provider, {
-      value: {
-        setRequest,
-        isLoading: state.isLoading,
-        state: { payload: state.payload }
-      }
-    }, /* @__PURE__ */ React__default["default"].createElement(FormRegistrar, {
-      key: request == null ? void 0 : request.query,
-      request,
-      formifyCallback,
-      onPayloadStateChange: setState
-    }), children);
-  };
-  const FormRegistrar = ({
-    request,
-    formifyCallback,
-    onPayloadStateChange
-  }) => {
-    const cms = toolkit.useCMS();
-    const { setFormsRegistering } = React__default["default"].useContext(sharedctx.EditContext);
-    const [payload, isLoading] = useGraphqlForms({
-      query: request == null ? void 0 : request.query,
-      variables: request == null ? void 0 : request.variables,
-      formify: (args) => {
-        if (formifyCallback) {
-          return formifyCallback(args, cms);
-        } else {
-          return args.createForm(args.formConfig);
-        }
-      }
-    });
-    React__default["default"].useEffect(() => {
-      onPayloadStateChange({ payload, isLoading });
-      setFormsRegistering && setFormsRegistering(isLoading);
-    }, [JSON.stringify(payload), isLoading]);
-    return isLoading ? /* @__PURE__ */ React__default["default"].createElement(Loader, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null)) : null;
+    }, /* @__PURE__ */ React__default["default"].createElement("style", null, styles), /* @__PURE__ */ React__default["default"].createElement(ErrorBoundary, null, props.children)));
   };
   const Loader = (props) => {
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4662,10 +2512,10 @@ This will work when developing locally but NOT when deployed to production.
     return t;
   };
   function Tree2Element(tree) {
-    return tree && tree.map(function(node2, i) {
-      return React__default["default"].createElement(node2.tag, __assign({
+    return tree && tree.map(function(node, i) {
+      return React__default["default"].createElement(node.tag, __assign({
         key: i
-      }, node2.attr), Tree2Element(node2.child));
+      }, node.attr), Tree2Element(node.child));
     });
   }
   function GenIcon(data) {
@@ -4715,6 +2565,9 @@ This will work when developing locally but NOT when deployed to production.
   function BiEdit(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" } }, { "tag": "path", "attr": { "d": "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" } }] })(props);
   }
+  function BiError(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M11.001 10h2v5h-2zM11 16h2v2h-2z" } }, { "tag": "path", "attr": { "d": "M13.768 4.2C13.42 3.545 12.742 3.138 12 3.138s-1.42.407-1.768 1.063L2.894 18.064a1.986 1.986 0 0 0 .054 1.968A1.984 1.984 0 0 0 4.661 21h14.678c.708 0 1.349-.362 1.714-.968a1.989 1.989 0 0 0 .054-1.968L13.768 4.2zM4.661 19 12 5.137 19.344 19H4.661z" } }] })(props);
+  }
   function BiLogIn(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
   }
@@ -4733,6 +2586,9 @@ This will work when developing locally but NOT when deployed to production.
   function BiSearch(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z" } }] })(props);
   }
+  function BiSync(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 7.101.01.001a4.978 4.978 0 0 1 2.526 1.362 5.005 5.005 0 0 1 1.363 2.528 5.061 5.061 0 0 1-.001 2.016 4.976 4.976 0 0 1-1.363 2.527l1.414 1.414a7.014 7.014 0 0 0 1.908-3.54 6.98 6.98 0 0 0 0-2.819 6.957 6.957 0 0 0-1.907-3.539 6.97 6.97 0 0 0-2.223-1.5 6.921 6.921 0 0 0-1.315-.408c-.137-.028-.275-.043-.412-.063V2L9 6l4 4V7.101zm-7.45 7.623c.174.412.392.812.646 1.19.249.37.537.718.854 1.034a7.036 7.036 0 0 0 2.224 1.501c.425.18.868.317 1.315.408.167.034.338.056.508.078v2.944l4-4-4-4v3.03c-.035-.006-.072-.003-.107-.011a4.978 4.978 0 0 1-2.526-1.362 4.994 4.994 0 0 1 .001-7.071L7.051 7.05a7.01 7.01 0 0 0-1.5 2.224A6.974 6.974 0 0 0 5 12a6.997 6.997 0 0 0 .55 2.724z" } }] })(props);
+  }
   function BiTrash(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z" } }, { "tag": "path", "attr": { "d": "M9 10h2v8H9zm4 0h2v8h-2z" } }] })(props);
   }
@@ -5144,6 +3000,25 @@ This will work when developing locally but NOT when deployed to production.
       fontWeight: "normal"
     }
   }, "Please wait, Tina is loading data..."))));
+  const FullscreenError = ({
+    title = "Error",
+    errorMessage = "It looks like something went wrong."
+  }) => {
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex flex-col justify-center items-center h-screen bg-gray-100"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "text-red-500 text-4xl mb-6 flex items-center"
+    }, /* @__PURE__ */ React__default["default"].createElement(BiError, {
+      className: "w-12 h-auto fill-current text-red-400 opacity-70 mr-1"
+    }), " ", title), /* @__PURE__ */ React__default["default"].createElement("p", {
+      className: "text-gray-700 text-xl mb-8"
+    }, errorMessage), /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      variant: "danger",
+      onClick: () => window.location.reload()
+    }, /* @__PURE__ */ React__default["default"].createElement(BiSync, {
+      className: "w-7 h-auto fill-current opacity-70 mr-1"
+    }), " Reload"));
+  };
   const useGetCollection = (cms, collectionName, includeDocuments = true, after = "", sortKey, filterArgs) => {
     const api = new TinaAdminApi(cms);
     const schema = cms.api.tina.schema;
@@ -5187,7 +3062,7 @@ This will work when developing locally but NOT when deployed to production.
   }) => {
     const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "", sortKey, filterArgs) || {};
     if (error) {
-      return null;
+      return /* @__PURE__ */ React__default["default"].createElement(FullscreenError, null);
     }
     if (loading) {
       return /* @__PURE__ */ React__default["default"].createElement(LoadingPage, null);
@@ -5289,7 +3164,7 @@ This will work when developing locally but NOT when deployed to production.
       }));
     }, [collectionName]);
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
-      return /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
+      return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
         cms,
         collectionName,
         includeDocuments: true,
@@ -5323,7 +3198,7 @@ This will work when developing locally but NOT when deployed to production.
         const collectionDefinition = cms.api.tina.schema.getCollection(collection.name);
         const allowCreate = (_e = (_d = (_c = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _c.allowedActions) == null ? void 0 : _d.create) != null ? _e : true;
         const allowDelete = (_h = (_g = (_f = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _f.allowedActions) == null ? void 0 : _g.delete) != null ? _h : true;
-        return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, deleteModalOpen && /* @__PURE__ */ React__default["default"].createElement(DeleteModal, {
+        return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, deleteModalOpen && /* @__PURE__ */ React__default["default"].createElement(DeleteModal, {
           filename: vars.relativePath,
           deleteFunc: async () => {
             try {
@@ -5432,7 +3307,7 @@ This will work when developing locally but NOT when deployed to production.
               value: ""
             },
             ...filterFields.map((x) => ({
-              label: x.label || x.name,
+              label: typeof x.label === "string" && x.label || x.name,
               value: x.name
             }))
           ],
@@ -5687,8 +3562,8 @@ This will work when developing locally but NOT when deployed to production.
               setEndCursor(prev);
             }
           }
-        }))))));
-      });
+        })))));
+      }));
     });
   };
   const NoDocumentsPlaceholder = () => {
@@ -5747,6 +3622,42 @@ This will work when developing locally but NOT when deployed to production.
   function HiChevronRight(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
   }
+  const transformDocumentIntoMutationRequestPayload = (document, instructions) => {
+    const { _collection, __typename, _template, ...rest } = document;
+    const params = transformParams(rest);
+    const paramsWithTemplate = instructions.includeTemplate ? { [_template]: params } : params;
+    return instructions.includeCollection ? { [_collection]: paramsWithTemplate } : paramsWithTemplate;
+  };
+  const transformParams = (data) => {
+    if (["string", "number", "boolean"].includes(typeof data)) {
+      return data;
+    }
+    if (Array.isArray(data)) {
+      return data.map((item) => transformParams(item));
+    }
+    try {
+      assertShape(data, (yup2) => yup2.object({ _template: yup2.string().required() }));
+      const { _template, __typename, ...rest } = data;
+      const nested = transformParams(rest);
+      return { [_template]: nested };
+    } catch (e) {
+      if (e.message === "Failed to assertShape - _template is a required field") {
+        if (!data) {
+          return [];
+        }
+        const accum = {};
+        Object.entries(data).map(([keyName, value]) => {
+          accum[keyName] = transformParams(value);
+        });
+        return accum;
+      } else {
+        if (!data) {
+          return [];
+        }
+        throw e;
+      }
+    }
+  };
   function FaLock(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" } }] })(props);
   }
@@ -5828,7 +3739,7 @@ This will work when developing locally but NOT when deployed to production.
       schema,
       template
     });
-    let slugFunction = (_b = (_a = template == null ? void 0 : template.ui) == null ? void 0 : _a.filename) == null ? void 0 : _b.slugify;
+    let slugFunction = (_b = (_a = schemaCollection.ui) == null ? void 0 : _a.filename) == null ? void 0 : _b.slugify;
     if (!slugFunction) {
       const titleField = (_c = template == null ? void 0 : template.fields.find((x) => x.required && x.type === "string" && x.isTitle)) == null ? void 0 : _c.name;
       if (titleField) {
@@ -5861,11 +3772,11 @@ This will work when developing locally but NOT when deployed to production.
             component: slugFunction ? toolkit.wrapFieldsWithMeta(({ field, input, meta }) => {
               var _a3, _b3;
               return /* @__PURE__ */ React__default["default"].createElement(FilenameInput, {
-                readonly: (_b3 = (_a3 = template == null ? void 0 : template.ui) == null ? void 0 : _a3.filename) == null ? void 0 : _b3.readonly,
+                readonly: (_b3 = (_a3 = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _a3.filename) == null ? void 0 : _b3.readonly,
                 ...input
               });
             }) : "text",
-            disabled: (_b2 = (_a2 = template == null ? void 0 : template.ui) == null ? void 0 : _a2.filename) == null ? void 0 : _b2.readonly,
+            disabled: (_b2 = (_a2 = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _a2.filename) == null ? void 0 : _b2.readonly,
             description: /* @__PURE__ */ React__default["default"].createElement("span", null, "A unique filename for the content.", /* @__PURE__ */ React__default["default"].createElement("br", null), "Examples: ", /* @__PURE__ */ React__default["default"].createElement("code", null, "My_Document"), ", ", /* @__PURE__ */ React__default["default"].createElement("code", null, "My_Document.en"), ",", " ", /* @__PURE__ */ React__default["default"].createElement("code", null, "sub-folder/My_Document")),
             placeholder: `My_Document`,
             validate: (value, allValues, meta) => {
@@ -5959,7 +3870,7 @@ This will work when developing locally but NOT when deployed to production.
   }) => {
     const { document, loading, error } = useGetDocument(cms, collectionName, relativePath);
     if (error) {
-      return null;
+      return /* @__PURE__ */ React__default["default"].createElement(FullscreenError, null);
     }
     if (loading) {
       return /* @__PURE__ */ React__default["default"].createElement(LoadingPage, null);
@@ -5995,7 +3906,7 @@ This will work when developing locally but NOT when deployed to production.
         includeCollection: true,
         includeTemplate: !!collection.templates
       };
-      return /* @__PURE__ */ React__default["default"].createElement(GetDocument, {
+      return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(GetDocument, {
         cms,
         collectionName: collection.name,
         relativePath
@@ -6006,7 +3917,7 @@ This will work when developing locally but NOT when deployed to production.
         relativePath,
         collection,
         mutationInfo
-      }));
+      })));
     }));
   };
   const RenderForm = ({
@@ -6052,7 +3963,7 @@ This will work when developing locally but NOT when deployed to production.
     const windowWidth = windowSize.useWindowWidth();
     const renderNavToggle = windowWidth < navBreakpoint + 1;
     const headerPadding = renderNavToggle ? "px-20" : "px-6";
-    return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) ? /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null) : /* @__PURE__ */ React__default["default"].createElement(toolkit.BillingWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) ? /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null) : /* @__PURE__ */ React__default["default"].createElement(toolkit.BillingWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "max-w-form mx-auto"
@@ -6072,7 +3983,7 @@ This will work when developing locally but NOT when deployed to production.
     }))), /* @__PURE__ */ React__default["default"].createElement(toolkit.FormBuilder, {
       form,
       onPristineChange: setFormIsPristine
-    })));
+    }));
   };
   const ScreenPage = () => {
     const { screenName } = reactRouterDom.useParams();
@@ -6329,7 +4240,6 @@ This will work when developing locally but NOT when deployed to production.
   exports2.TinaCMSProvider2 = TinaCMSProvider2;
   exports2.TinaCloudAuthWall = TinaCloudAuthWall;
   exports2.TinaCloudProvider = TinaCloudProvider;
-  exports2.TinaDataProvider = TinaDataProvider;
   exports2.assertShape = assertShape;
   exports2.asyncPoll = asyncPoll;
   exports2.createClient = createClient;
@@ -6343,7 +4253,6 @@ This will work when developing locally but NOT when deployed to production.
   exports2.safeAssertShape = safeAssertShape;
   exports2.staticRequest = staticRequest;
   exports2.useDocumentCreatorPlugin = useDocumentCreatorPlugin;
-  exports2.useGraphqlForms = useGraphqlForms;
   exports2.useTinaAuthRedirect = useTinaAuthRedirect;
   Object.keys(toolkit).forEach(function(k) {
     if (k !== "default" && !exports2.hasOwnProperty(k))