tinacms 1.2.2 → 1.3.1

package/dist/index.es.js

@@ -1,17 +1,14 @@
 import { z } from "zod";
-import { useCMS, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, Nav, BranchBanner, LocalWarning, BillingWarning, Select, Input, ReactDateTimeWithStyles, textFieldClasses, Toggle, OverflowMenu, CursorPaginator, PopupModal, BaseTextField, wrapFieldsWithMeta, FormStatus, FormBuilder } from "@tinacms/toolkit";
+import { EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, useCMS, Nav, BranchBanner, LocalWarning, BillingWarning, Select, Input, ReactDateTimeWithStyles, textFieldClasses, Toggle, OverflowMenu, CursorPaginator, PopupModal, BaseTextField, Form, wrapFieldsWithMeta, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 export { MdxFieldPluginExtendible } from "@tinacms/toolkit";
-import * as G from "graphql";
-import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType as isScalarType$1, getIntrospectionQuery, buildClientSchema, print, parse, buildSchema } from "graphql";
-import set from "lodash.set";
-import React, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
-import { getIn, setIn } from "final-form";
-import { resolveForm, TinaSchema, addNamespaceToSchema, parseURL, validateSchema } from "@tinacms/schema-tools";
+import { getIntrospectionQuery, buildClientSchema, print, parse, buildSchema } from "graphql";
+import gql$1 from "graphql-tag";
+import { TinaSchema, addNamespaceToSchema, parseURL, resolveForm, validateSchema } from "@tinacms/schema-tools";
 export { NAMER, resolveForm } from "@tinacms/schema-tools";
+import React, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
 import * as yup from "yup";
-import gql$1 from "graphql-tag";
-import { setEditing, TinaDataContext, EditContext, useEditState } from "@tinacms/sharedctx";
+import { setEditing, useEditState } from "@tinacms/sharedctx";
 import { diff } from "@graphql-inspector/core";
 import { NavLink, useSearchParams, useNavigate, useParams, useLocation, Link, HashRouter, Routes, Route } from "react-router-dom";
 import { Transition, Menu } from "@headlessui/react";
@@ -38,2078 +35,9 @@ const authenticate = (clientId, frontendUrl) => {
         });
       }
     });
-    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 TypeInfo(schema);
-  const pathsToPopulate = [];
-  const visitor = {
-    leave(node2, key, parent, path, ancestors) {
-      const type = typeInfo.getType();
-      if (type) {
-        const namedType = getNamedType(type);
-        if (namedType instanceof 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 = 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 = 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 = 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
-                  }
-                ]
-              });
-            }
-          }
-        }
-      }
-    }
-  };
-  visit(query, 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(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 = getNamedType(field.type);
-            if (isLeafType(namedType)) {
-              return {
-                kind: "Field",
-                name: {
-                  kind: "Name",
-                  value: field.name
-                }
-              };
-            } else if (namedType instanceof GraphQLUnionType) {
-              return {
-                kind: "Field",
-                name: {
-                  kind: "Name",
-                  value: field.name
-                },
-                selectionSet: {
-                  kind: "SelectionSet",
-                  selections: [
-                    ...buildSelectionInlineFragments(namedType.getTypes(), callback)
-                  ]
-                }
-              };
-            } else if (namedType instanceof 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 !isScalarType$1(getNamedType(field.type));
-      })) {
-        return [
-          {
-            kind: "Field",
-            name: {
-              kind: "Name",
-              value: "__typename"
-            }
-          }
-        ];
-      }
-      return buildSelectionsFields(result.filteredFields.filter((field) => {
-        if (isScalarType$1(getNamedType(field.type))) {
-          return true;
-        }
-        return false;
-      }));
-    } else {
-      filteredFields = result.filteredFields;
-    }
-  }
-  return filteredFields.map((field) => {
-    const namedType = getNamedType(field.type);
-    if (isLeafType(namedType)) {
-      return {
-        kind: "Field",
-        name: {
-          kind: "Name",
-          value: field.name
-        }
-      };
-    } else if (namedType instanceof GraphQLUnionType) {
-      return {
-        kind: "Field",
-        name: {
-          kind: "Name",
-          value: field.name
-        },
-        selectionSet: {
-          kind: "SelectionSet",
-          selections: [
-            ...buildSelectionInlineFragments(namedType.getTypes(), callback)
-          ]
-        }
-      };
-    } else if (namedType instanceof 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 GraphQLObjectType)
-    ;
-  else {
-    throw new Error(`Expected an instance of GraphQLObjectType for type ${type.name}`);
-  }
-}
-function assertIsUnionType(type) {
-  if (type instanceof 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);
-  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 = 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 Form(formConfig);
-    if (showInSidebar) {
-      if (global) {
-        const options = typeof global === "boolean" ? [null, "fullscreen"] : [global.icon, global.layout];
-        cms.plugins.add(new GlobalFormPlugin(form, ...options));
-      } else {
-        cms.forms.add(form);
-      }
-    }
-    return form;
-  };
-  const createGlobalForm = (formConfig, options) => {
-    const form = new Form(formConfig);
-    if (showInSidebar) {
-      cms.plugins.add(new 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 = 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 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 = 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.getNamedType(t);
-  if (G.isUnionType(type)) {
-    return type.getTypes().every((type2) => {
-      return type2.getInterfaces().find((intfc) => intfc.name === "Node");
-    });
-  } else if (G.isObjectType(type)) {
-    return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
-  } else {
-    return false;
-  }
-};
-const isScalarType = (t) => {
-  const namedType = G.getNamedType(t);
-  return G.isScalarType(namedType);
-};
-const isConnectionField = (t) => {
-  const type = G.getNamedType(t);
-  if (G.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.getNamedType(object);
-  ensureObjectOrInterfaceType(namedType);
-  return namedType.getFields()[selectionNode.name.value];
-};
-const getSelectedUnionType = (unionType, selectionNode) => {
-  const namedType = G.getNamedType(unionType);
-  if (!G.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.isListType(type)) {
-    return true;
-  } else if (G.isNonNullType(type)) {
-    if (G.isListType(type.ofType)) {
-      return true;
-    }
-  }
-  return false;
-}
-function ensureObjectOrInterfaceType(type) {
-  if (G.isInterfaceType(type) || G.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.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.parse(query);
-  const visitor = {
-    OperationDefinition: (node2) => {
-      if (!node2.name) {
-        return {
-          ...node2,
-          name: {
-            kind: "Name",
-            value: `QueryOperation`
-          }
-        };
-      }
-      return node2;
-    }
-  };
-  const documentNodeWithName = G.visit(documentNode, visitor);
-  const optimizedQuery = await getOptimizedQuery(documentNodeWithName);
-  const typeInfo = new G.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.getNamedType(type);
-                if (G.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.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.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 = getIn(state.data, action.value.path) || [];
-        newData = setIn(state.data, action.value.path, [
-          action.value.value,
-          ...existing
-        ]);
-      } else {
-        newData = 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.useRef([]);
-  const [state, dispatch] = React.useReducer(reducer, {
-    status: "idle",
-    schema: void 0,
-    query: query ? G.parse(query) : null,
-    queryString: query,
-    data: {},
-    changeSets: [],
-    count: 0,
-    blueprints: [],
-    formNodes: [],
-    documentForms: []
-  });
-  React.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.useEffect(() => {
-    if (state.status === "initialized") {
-      cms.api.tina.request(query, { variables }).then((res) => {
-        delete res.paths;
-        dispatch({ type: "setData", value: res });
-      });
-    }
-  }, [state.status]);
-  React.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.useEffect(() => {
-    const run = async () => {
-      const result = await cms.api.tina.request(G.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.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.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.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.useEffect(() => {
-    formIds.current = state.documentForms.map((df) => df.id);
-  }, [state.documentForms.length]);
-  React.useEffect(() => {
-    return () => {
-      formIds.current.forEach((formId) => {
-        const form = cms.forms.find(formId);
-        if (form) {
-          cms.plugins.remove(form);
-        }
-      });
-    };
-  }, []);
-  const resolveSubFields = React.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.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.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) => {
@@ -2284,24 +212,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: print(query(gql$1)),
-        getOptimizedQuery: this.getOptimizedQuery
-      });
-      formifiedQuery = res.formifiedQuery;
-    } else {
-      formifiedQuery = formify$1(query(gql$1), schema);
-    }
-    return this.request(print(formifiedQuery), { variables });
-  }
   async request(query, { variables }) {
     const res = await fetch(this.contentApiUrl, {
       method: "POST",
@@ -2595,6 +505,7 @@ const AsyncButton = ({ name, primary, action }) => {
     }
   }, [action, setSubmitting]);
   return /* @__PURE__ */ React.createElement(Button, {
+    "data-test": name.replace(/\s/g, "-").toLowerCase(),
     variant: primary ? "primary" : "secondary",
     onClick,
     busy: submitting,
@@ -2616,6 +527,39 @@ const useTinaAuthRedirect = () => {
     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);
+  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;
@@ -3336,35 +1280,35 @@ var styles = `.tina-tailwind {
 .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;
@@ -3373,38 +1317,44 @@ var styles = `.tina-tailwind {
 .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;
@@ -3412,9 +1362,6 @@ var styles = `.tina-tailwind {
 .tina-tailwind .inline-block {
   display: inline-block;
 }
-.tina-tailwind .inline {
-  display: inline;
-}
 .tina-tailwind .flex {
   display: flex;
 }
@@ -3427,14 +1374,14 @@ var styles = `.tina-tailwind {
 .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;
@@ -3442,23 +1389,23 @@ var styles = `.tina-tailwind {
 .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;
@@ -3466,20 +1413,23 @@ var styles = `.tina-tailwind {
 .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;
@@ -3487,8 +1437,11 @@ var styles = `.tina-tailwind {
 .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%;
@@ -3509,6 +1462,10 @@ var styles = `.tina-tailwind {
   --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));
@@ -3517,8 +1474,9 @@ var styles = `.tina-tailwind {
   --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 {
@@ -3526,11 +1484,6 @@ var styles = `.tina-tailwind {
   --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));
 }
@@ -3567,14 +1520,11 @@ var styles = `.tina-tailwind {
 .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;
@@ -3582,6 +1532,9 @@ var styles = `.tina-tailwind {
 .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)));
@@ -3614,18 +1567,18 @@ var styles = `.tina-tailwind {
 .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;
@@ -3636,6 +1589,10 @@ var styles = `.tina-tailwind {
 .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));
@@ -3644,21 +1601,21 @@ var styles = `.tina-tailwind {
   --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));
@@ -3685,50 +1642,37 @@ var styles = `.tina-tailwind {
   --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;
@@ -3738,29 +1682,36 @@ var styles = `.tina-tailwind {
   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;
@@ -3768,8 +1719,17 @@ var styles = `.tina-tailwind {
 .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;
@@ -3784,10 +1744,18 @@ var styles = `.tina-tailwind {
   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;
@@ -3796,10 +1764,6 @@ var styles = `.tina-tailwind {
   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;
@@ -3816,33 +1780,28 @@ var styles = `.tina-tailwind {
 .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;
@@ -3852,16 +1811,17 @@ var styles = `.tina-tailwind {
   --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;
@@ -3871,24 +1831,26 @@ var styles = `.tina-tailwind {
   --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;
@@ -3899,9 +1861,15 @@ var styles = `.tina-tailwind {
 .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 {
@@ -3914,9 +1882,9 @@ var styles = `.tina-tailwind {
   --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 {
@@ -3934,8 +1902,8 @@ var styles = `.tina-tailwind {
 .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;
 }
@@ -3949,32 +1917,32 @@ var styles = `.tina-tailwind {
   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;
     }
@@ -3989,14 +1957,14 @@ var styles = `.tina-tailwind {
   --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;
 }
@@ -4007,14 +1975,14 @@ var styles = `.tina-tailwind {
   --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;
 }
@@ -4223,42 +2191,6 @@ const useDocumentCreatorPlugin = (args) => {
     };
   }, [plugin]);
 };
-function useTina({
-  query,
-  variables,
-  data
-}) {
-  React.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.useContext(TinaDataContext);
-  const [waitForContextRerender, setWaitForContextRerender] = useState(!isDummyContainer);
-  const isLoading = contextLoading || waitForContextRerender;
-  React.useEffect(() => {
-    setRequest({ query, variables });
-  }, [JSON.stringify(variables), query]);
-  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",
@@ -4346,12 +2278,6 @@ const TinaCMSProvider2 = ({
   ...props
 }) => {
   var _a, _b, _c, _d, _e;
-  React.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");
   }
@@ -4377,84 +2303,7 @@ const TinaCMSProvider2 = ({
     mediaStore: props.mediaStore,
     apiUrl: apiURL,
     schema: { ...schema, config: { ...schema.config, ...props } }
-  }, /* @__PURE__ */ React.createElement("style", null, styles), /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(DocumentCreator, {
-    documentCreatorCallback
-  }), /* @__PURE__ */ React.createElement(TinaDataProvider, {
-    formifyCallback
-  }, typeof props.children == "function" ? /* @__PURE__ */ React.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.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.createElement(React.Fragment, null, children(isLoading || !props.query ? props : { ...props, data: liveData }));
-};
-const TinaDataProvider = ({
-  children,
-  formifyCallback
-}) => {
-  const [request, setRequest] = useState();
-  const [state, setState] = React.useState({
-    payload: void 0,
-    isLoading: true
-  });
-  return /* @__PURE__ */ React.createElement(TinaDataContext.Provider, {
-    value: {
-      setRequest,
-      isLoading: state.isLoading,
-      state: { payload: state.payload }
-    }
-  }, /* @__PURE__ */ React.createElement(FormRegistrar, {
-    key: request == null ? void 0 : request.query,
-    request,
-    formifyCallback,
-    onPayloadStateChange: setState
-  }), children);
-};
-const FormRegistrar = ({
-  request,
-  formifyCallback,
-  onPayloadStateChange
-}) => {
-  const cms = useCMS();
-  const { setFormsRegistering } = React.useContext(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.useEffect(() => {
-    onPayloadStateChange({ payload, isLoading });
-    setFormsRegistering && setFormsRegistering(isLoading);
-  }, [JSON.stringify(payload), isLoading]);
-  return isLoading ? /* @__PURE__ */ React.createElement(Loader, null, /* @__PURE__ */ React.createElement(React.Fragment, null)) : null;
+  }, /* @__PURE__ */ React.createElement("style", null, styles), /* @__PURE__ */ React.createElement(ErrorBoundary, null, props.children)));
 };
 const Loader = (props) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
@@ -4648,10 +2497,10 @@ var __rest = globalThis && globalThis.__rest || function(s, e) {
   return t;
 };
 function Tree2Element(tree) {
-  return tree && tree.map(function(node2, i) {
-    return React.createElement(node2.tag, __assign({
+  return tree && tree.map(function(node, i) {
+    return React.createElement(node.tag, __assign({
       key: i
-    }, node2.attr), Tree2Element(node2.child));
+    }, node.attr), Tree2Element(node.child));
   });
 }
 function GenIcon(data) {
@@ -4701,6 +2550,9 @@ function IoMdClose(props) {
 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);
 }
@@ -4719,6 +2571,9 @@ function BiRename(props) {
 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);
 }
@@ -5130,6 +2985,25 @@ const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, nu
     fontWeight: "normal"
   }
 }, "Please wait, Tina is loading data..."))));
+const FullscreenError = ({
+  title = "Error",
+  errorMessage = "It looks like something went wrong."
+}) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col justify-center items-center h-screen bg-gray-100"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "text-red-500 text-4xl mb-6 flex items-center"
+  }, /* @__PURE__ */ React.createElement(BiError, {
+    className: "w-12 h-auto fill-current text-red-400 opacity-70 mr-1"
+  }), " ", title), /* @__PURE__ */ React.createElement("p", {
+    className: "text-gray-700 text-xl mb-8"
+  }, errorMessage), /* @__PURE__ */ React.createElement(Button, {
+    variant: "danger",
+    onClick: () => window.location.reload()
+  }, /* @__PURE__ */ React.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;
@@ -5173,7 +3047,7 @@ const GetCollection = ({
 }) => {
   const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "", sortKey, filterArgs) || {};
   if (error) {
-    return null;
+    return /* @__PURE__ */ React.createElement(FullscreenError, null);
   }
   if (loading) {
     return /* @__PURE__ */ React.createElement(LoadingPage, null);
@@ -5275,7 +3149,7 @@ const CollectionListPage = () => {
     }));
   }, [collectionName]);
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
-    return /* @__PURE__ */ React.createElement(GetCollection, {
+    return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(GetCollection, {
       cms,
       collectionName,
       includeDocuments: true,
@@ -5309,7 +3183,7 @@ const CollectionListPage = () => {
       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.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, deleteModalOpen && /* @__PURE__ */ React.createElement(DeleteModal, {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, deleteModalOpen && /* @__PURE__ */ React.createElement(DeleteModal, {
         filename: vars.relativePath,
         deleteFunc: async () => {
           try {
@@ -5418,7 +3292,7 @@ const CollectionListPage = () => {
             value: ""
           },
           ...filterFields.map((x) => ({
-            label: x.label || x.name,
+            label: typeof x.label === "string" && x.label || x.name,
             value: x.name
           }))
         ],
@@ -5673,8 +3547,8 @@ const CollectionListPage = () => {
             setEndCursor(prev);
           }
         }
-      }))))));
-    });
+      })))));
+    }));
   });
 };
 const NoDocumentsPlaceholder = () => {
@@ -5733,6 +3607,42 @@ const RenameModal = ({
 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);
 }
@@ -5814,7 +3724,7 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
     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) {
@@ -5847,11 +3757,11 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
           component: slugFunction ? wrapFieldsWithMeta(({ field, input, meta }) => {
             var _a3, _b3;
             return /* @__PURE__ */ React.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.createElement("span", null, "A unique filename for the content.", /* @__PURE__ */ React.createElement("br", null), "Examples: ", /* @__PURE__ */ React.createElement("code", null, "My_Document"), ", ", /* @__PURE__ */ React.createElement("code", null, "My_Document.en"), ",", " ", /* @__PURE__ */ React.createElement("code", null, "sub-folder/My_Document")),
           placeholder: `My_Document`,
           validate: (value, allValues, meta) => {
@@ -5945,7 +3855,7 @@ const GetDocument = ({
 }) => {
   const { document, loading, error } = useGetDocument(cms, collectionName, relativePath);
   if (error) {
-    return null;
+    return /* @__PURE__ */ React.createElement(FullscreenError, null);
   }
   if (loading) {
     return /* @__PURE__ */ React.createElement(LoadingPage, null);
@@ -5981,7 +3891,7 @@ const CollectionUpdatePage = () => {
       includeCollection: true,
       includeTemplate: !!collection.templates
     };
-    return /* @__PURE__ */ React.createElement(GetDocument, {
+    return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(GetDocument, {
       cms,
       collectionName: collection.name,
       relativePath
@@ -5992,7 +3902,7 @@ const CollectionUpdatePage = () => {
       relativePath,
       collection,
       mutationInfo
-    }));
+    })));
   }));
 };
 const RenderForm = ({
@@ -6038,7 +3948,7 @@ const RenderForm = ({
   const windowWidth = useWindowWidth();
   const renderNavToggle = windowWidth < navBreakpoint + 1;
   const headerPadding = renderNavToggle ? "px-20" : "px-6";
-  return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) ? /* @__PURE__ */ React.createElement(LocalWarning, null) : /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) ? /* @__PURE__ */ React.createElement(LocalWarning, null) : /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", {
     className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
   }, /* @__PURE__ */ React.createElement("div", {
     className: "max-w-form mx-auto"
@@ -6058,7 +3968,7 @@ const RenderForm = ({
   }))), /* @__PURE__ */ React.createElement(FormBuilder, {
     form,
     onPristineChange: setFormIsPristine
-  })));
+  }));
 };
 const ScreenPage = () => {
   const { screenName } = useParams();
@@ -6287,4 +4197,4 @@ const defineStaticConfig = (config) => {
   return config;
 };
 const defineConfig = defineStaticConfig;
-export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, TinaDataProvider, assertShape, asyncPoll, createClient, TinaCMSProvider2 as default, defineConfig, defineLegacyConfig, defineSchema, defineStaticConfig, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };
+export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, assertShape, asyncPoll, createClient, TinaCMSProvider2 as default, defineConfig, defineLegacyConfig, defineSchema, defineStaticConfig, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useTinaAuthRedirect };