tinacms 0.66.4 → 0.66.7

package/dist/index.js

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("graphql-tag"), require("react"), require("styled-components"), require("yup"), require("@tinacms/sharedctx"), require("final-form"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "graphql-tag", "react", "styled-components", "yup", "@tinacms/sharedctx", "final-form", "url-pattern", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, toolkit, graphql, set, gql$1, React, styled, yup, sharedctx, finalForm, UrlPattern, reactRouterDom, react) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("graphql-tag"), require("styled-components"), require("yup"), require("@tinacms/sharedctx"), require("final-form"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "react", "graphql-tag", "styled-components", "yup", "@tinacms/sharedctx", "final-form", "url-pattern", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, toolkit, G, set, React, gql$1, styled, yup, sharedctx, finalForm, UrlPattern, reactRouterDom, react) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -56,9 +56,10 @@ var __objRest = (source, exclude) => {
     n["default"] = e;
     return Object.freeze(n);
   }
+  var G__namespace = /* @__PURE__ */ _interopNamespace(G);
   var set__default = /* @__PURE__ */ _interopDefaultLegacy(set);
-  var gql__default = /* @__PURE__ */ _interopDefaultLegacy(gql$1);
   var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
+  var gql__default = /* @__PURE__ */ _interopDefaultLegacy(gql$1);
   var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
   var yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
   var UrlPattern__default = /* @__PURE__ */ _interopDefaultLegacy(UrlPattern);
@@ -88,35 +89,35 @@ var __objRest = (source, exclude) => {
       authTab = popupWindow(`${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`, "_blank", window, 1e3, 700);
     });
   };
-  const formify = (query, schema) => {
-    const typeInfo = new graphql.TypeInfo(schema);
+  const formify$1 = (query, schema) => {
+    const typeInfo = new G.TypeInfo(schema);
     const pathsToPopulate = [];
     const visitor = {
-      leave(node, key, parent, path, ancestors) {
+      leave(node2, key, parent, path, ancestors) {
         const type = typeInfo.getType();
         if (type) {
-          const namedType = graphql.getNamedType(type);
-          if (namedType instanceof graphql.GraphQLObjectType) {
+          const namedType = G.getNamedType(type);
+          if (namedType instanceof G.GraphQLObjectType) {
             const hasNodeInterface = !!namedType.getInterfaces().find((i) => i.name === "Node");
             if (hasNodeInterface) {
               if (typeof path[path.length - 1] === "number") {
                 assertIsObjectType(namedType);
                 const valuesNode = namedType.getFields().values;
-                const namedValuesNode = graphql.getNamedType(valuesNode.type);
+                const namedValuesNode = G.getNamedType(valuesNode.type);
                 const pathForValues = [...path];
                 pathForValues.push("selectionSet");
                 pathForValues.push("selections");
                 const valuesAst = buildValuesForType(namedValuesNode);
                 pathForValues.push(100);
                 const formNode = namedType.getFields().form;
-                const namedFormNode = graphql.getNamedType(formNode.type);
+                const namedFormNode = G.getNamedType(formNode.type);
                 const pathForForm = [...path];
                 pathForForm.push("selectionSet");
                 pathForForm.push("selections");
                 const formAst = buildFormForType(namedFormNode);
                 pathForForm.push(101);
                 const sysNode = namedType.getFields().sys;
-                const namedSysNode = graphql.getNamedType(sysNode.type);
+                const namedSysNode = G.getNamedType(sysNode.type);
                 const pathForSys = [...path];
                 pathForSys.push("selectionSet");
                 pathForSys.push("selections");
@@ -145,7 +146,7 @@ var __objRest = (source, exclude) => {
         }
       }
     };
-    graphql.visit(query, graphql.visitWithTypeInfo(typeInfo, visitor));
+    G.visit(query, G.visitWithTypeInfo(typeInfo, visitor));
     const topLevelPaths = pathsToPopulate.filter((p, i) => {
       const otherPaths = pathsToPopulate.filter((_, index) => index !== i);
       const isChildOfOtherPaths = otherPaths.some((op) => {
@@ -254,8 +255,8 @@ var __objRest = (source, exclude) => {
           kind: "SelectionSet",
           selections: [
             ...Object.values(type.getFields()).map((field) => {
-              const namedType = graphql.getNamedType(field.type);
-              if (graphql.isLeafType(namedType)) {
+              const namedType = G.getNamedType(field.type);
+              if (G.isLeafType(namedType)) {
                 return {
                   kind: "Field",
                   name: {
@@ -263,7 +264,7 @@ var __objRest = (source, exclude) => {
                     value: field.name
                   }
                 };
-              } else if (namedType instanceof graphql.GraphQLUnionType) {
+              } else if (namedType instanceof G.GraphQLUnionType) {
                 return {
                   kind: "Field",
                   name: {
@@ -277,7 +278,7 @@ var __objRest = (source, exclude) => {
                     ]
                   }
                 };
-              } else if (namedType instanceof graphql.GraphQLObjectType) {
+              } else if (namedType instanceof G.GraphQLObjectType) {
                 return {
                   kind: "Field",
                   name: {
@@ -306,7 +307,7 @@ var __objRest = (source, exclude) => {
       const result = callback(fields);
       if (!result.continue) {
         if (fields.every((field) => {
-          return !graphql.isScalarType(graphql.getNamedType(field.type));
+          return !G.isScalarType(G.getNamedType(field.type));
         })) {
           return [
             {
@@ -319,7 +320,7 @@ var __objRest = (source, exclude) => {
           ];
         }
         return buildSelectionsFields(result.filteredFields.filter((field) => {
-          if (graphql.isScalarType(graphql.getNamedType(field.type))) {
+          if (G.isScalarType(G.getNamedType(field.type))) {
             return true;
           }
           return false;
@@ -329,8 +330,8 @@ var __objRest = (source, exclude) => {
       }
     }
     return filteredFields.map((field) => {
-      const namedType = graphql.getNamedType(field.type);
-      if (graphql.isLeafType(namedType)) {
+      const namedType = G.getNamedType(field.type);
+      if (G.isLeafType(namedType)) {
         return {
           kind: "Field",
           name: {
@@ -338,7 +339,7 @@ var __objRest = (source, exclude) => {
             value: field.name
           }
         };
-      } else if (namedType instanceof graphql.GraphQLUnionType) {
+      } else if (namedType instanceof G.GraphQLUnionType) {
         return {
           kind: "Field",
           name: {
@@ -352,7 +353,7 @@ var __objRest = (source, exclude) => {
             ]
           }
         };
-      } else if (namedType instanceof graphql.GraphQLObjectType) {
+      } else if (namedType instanceof G.GraphQLObjectType) {
         return {
           kind: "Field",
           name: {
@@ -382,19 +383,448 @@ var __objRest = (source, exclude) => {
     });
   };
   function assertIsObjectType(type) {
-    if (type instanceof graphql.GraphQLObjectType)
+    if (type instanceof G.GraphQLObjectType)
       ;
     else {
       throw new Error(`Expected an instance of GraphQLObjectType for type ${type.name}`);
     }
   }
   function assertIsUnionType(type) {
-    if (type instanceof graphql.GraphQLUnionType)
+    if (type instanceof G.GraphQLUnionType)
       ;
     else {
       throw new Error(`Expected an instance of GraphQLUnionType for type ${type.name}`);
     }
   }
+  const isNodeField = (type) => {
+    if (G__namespace.isUnionType(type)) {
+      return type.getTypes().every((type2) => {
+        return type2.getInterfaces().find((intfc) => intfc.name === "Node");
+      });
+    } else if (G__namespace.isObjectType(type)) {
+      return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
+    } else if (G__namespace.isInterfaceType(type)) {
+      if (type.name === "Node") {
+        return true;
+      }
+    } else {
+      throw new Error(`Expected GraphQLObjectType or GraphQLUnionType for isNodeField check`);
+    }
+  };
+  const isConnectionField = (type) => {
+    if (G__namespace.isObjectType(type)) {
+      return !!type.getInterfaces().find((intfc) => intfc.name === "Connection");
+    } else {
+      throw new Error(`Expected GraphQLObjectType for isCollectionField check`);
+    }
+  };
+  const getObjectField = (object, selectionNode) => {
+    return object.getFields()[selectionNode.name.value];
+  };
+  const getSelectedUnionType = (unionType, selectionNode) => {
+    return unionType.getTypes().find((type) => type.name === selectionNode.typeCondition.name.value);
+  };
+  function ensureNodeField(field) {
+    if (!isNodeField(field)) {
+      throw new Error(`Expected field to implement Node interface`);
+    }
+  }
+  function ensureUnionType(type) {
+    if (!G__namespace.isUnionType(type)) {
+      throw new Error(`Expected type to be GraphQLUnionType`);
+    }
+  }
+  function ensureObjectType(type) {
+    if (!G__namespace.isObjectType(type)) {
+      console.log(type);
+      throw new Error(`Expected type to be GraphQLObjectType`);
+    }
+  }
+  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 getNameAndAlias(fieldNode, list) {
+    return {
+      name: fieldNode.name.value,
+      alias: fieldNode.alias ? fieldNode.alias.value : fieldNode.name.value,
+      list: !!list
+    };
+  }
+  const node = G__namespace.parse(`
+ query Sample {
+   _internalSys: sys {
+     path
+     collection {
+       name
+     }
+   }
+   form
+   values
+ }`);
+  const metaFields = node.definitions[0].selectionSet.selections;
+  const NOOP = "This is either an error or is not yet supported";
+  const UNEXPECTED = "Formify encountered an unexpected error, please contact support";
+  const DATA_NODE_NAME = "data";
+  const EDGES_NODE_NAME = "edges";
+  const NODE_NAME = "node";
+  const COLLECTION_FIELD_NAME = "getCollection";
+  const COLLECTIONS_FIELD_NAME = "getCollections";
+  const COLLECTIONS_DOCUMENTS_NAME = "documents";
+  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 formify = async ({
+    schema,
+    query,
+    getOptimizedQuery
+  }) => {
+    const nodes = [];
+    const documentNode = G__namespace.parse(query);
+    const visitor2 = {
+      OperationDefinition: (node2) => {
+        if (!node2.name) {
+          return __spreadProps(__spreadValues({}, node2), {
+            name: {
+              kind: "Name",
+              value: `QueryOperation`
+            }
+          });
+        }
+        return node2;
+      }
+    };
+    const documentNodeWithName = G.visit(documentNode, visitor2);
+    const optimizedQuery = await getOptimizedQuery(documentNodeWithName);
+    const typeInfo = new G__namespace.TypeInfo(schema);
+    const formifyConnection = ({
+      namedFieldType,
+      selectionNode,
+      path
+    }) => {
+      ensureObjectType(namedFieldType);
+      return __spreadProps(__spreadValues({}, selectionNode), {
+        selectionSet: {
+          kind: "SelectionSet",
+          selections: selectionNode.selectionSet.selections.map((selectionNode2) => {
+            switch (selectionNode2.kind) {
+              case "Field":
+                if (selectionNode2.name.value === EDGES_NODE_NAME) {
+                  const edgeField = namedFieldType.getFields()[EDGES_NODE_NAME];
+                  const edgeType = G__namespace.getNamedType(edgeField.type);
+                  ensureObjectType(edgeType);
+                  return __spreadProps(__spreadValues({}, selectionNode2), {
+                    selectionSet: {
+                      kind: "SelectionSet",
+                      selections: selectionNode2.selectionSet.selections.map((subSelectionNode) => {
+                        switch (subSelectionNode.kind) {
+                          case "Field":
+                            if (subSelectionNode.name.value === NODE_NAME) {
+                              const nodeField = edgeType.getFields()[NODE_NAME];
+                              return formifyNode({
+                                fieldOrInlineFragmentNode: subSelectionNode,
+                                parentType: nodeField.type,
+                                path: [
+                                  ...path,
+                                  getNameAndAlias(selectionNode2),
+                                  getNameAndAlias(subSelectionNode, true)
+                                ]
+                              });
+                            } else {
+                              return subSelectionNode;
+                            }
+                          default:
+                            throw new FormifyError("NOOP");
+                        }
+                      })
+                    }
+                  });
+                }
+                return selectionNode2;
+              default:
+                throw new FormifyError("UNEXPECTED");
+            }
+          })
+        }
+      });
+    };
+    function formifyNode({
+      fieldOrInlineFragmentNode,
+      parentType,
+      path
+    }) {
+      let extraFields = [];
+      const namedParentType = G__namespace.getNamedType(parentType);
+      const formifiedNode = __spreadProps(__spreadValues({}, fieldOrInlineFragmentNode), {
+        selectionSet: {
+          kind: "SelectionSet",
+          selections: [
+            ...fieldOrInlineFragmentNode.selectionSet.selections.map((selectionNode) => {
+              switch (selectionNode.kind) {
+                case "InlineFragment":
+                  if (G__namespace.isInterfaceType(namedParentType)) {
+                    const type2 = schema.getImplementations(namedParentType).objects[selectionNode.typeCondition.name.value];
+                    return formifyNode({
+                      fieldOrInlineFragmentNode: selectionNode,
+                      parentType: type2,
+                      path
+                    });
+                  }
+                  ensureUnionType(namedParentType);
+                  const type = getSelectedUnionType(namedParentType, selectionNode);
+                  return formifyNode({
+                    fieldOrInlineFragmentNode: selectionNode,
+                    parentType: type,
+                    path
+                  });
+                case "Field":
+                  if (selectionNode.name.value === DATA_NODE_NAME) {
+                    extraFields = metaFields;
+                    if (G__namespace.isObjectType(namedParentType)) {
+                      const field = getObjectField(namedParentType, selectionNode);
+                      const namedType = G__namespace.getNamedType(field.type);
+                      ensureObjectType(namedType);
+                      return __spreadProps(__spreadValues({}, selectionNode), {
+                        selectionSet: {
+                          kind: "SelectionSet",
+                          selections: [
+                            ...selectionNode.selectionSet.selections.map((subSelectionNode) => {
+                              switch (subSelectionNode.kind) {
+                                case "Field":
+                                  const subSelectionField = getObjectField(namedType, subSelectionNode);
+                                  if (!subSelectionField) {
+                                    return subSelectionNode;
+                                  }
+                                  return formifyField({
+                                    fieldNode: subSelectionNode,
+                                    parentType: field.type,
+                                    path: [
+                                      ...path,
+                                      getNameAndAlias(subSelectionNode, G__namespace.isListType(subSelectionField.type))
+                                    ]
+                                  });
+                                default:
+                                  throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
+                              }
+                            })
+                          ]
+                        }
+                      });
+                    }
+                    return selectionNode;
+                  }
+                  return selectionNode;
+                default:
+                  throw new FormifyError("UNEXPECTED");
+              }
+            }),
+            ...extraFields
+          ]
+        }
+      });
+      return formifiedNode;
+    }
+    const formifyField = ({
+      fieldNode,
+      parentType,
+      path
+    }) => {
+      const namedParentType = G__namespace.getNamedType(parentType);
+      ensureObjectType(namedParentType);
+      const field = getObjectField(namedParentType, fieldNode);
+      if (!field) {
+        if (fieldNode.name.value === "__typename") {
+          return fieldNode;
+        } else {
+          throw new FormifyError("UNEXPECTED", `field with no associated type ${fieldNode.name.value}`);
+        }
+      }
+      const namedType = G__namespace.getNamedType(field.type);
+      if (G__namespace.isScalarType(namedType)) {
+        return fieldNode;
+      }
+      return __spreadProps(__spreadValues({}, fieldNode), {
+        selectionSet: {
+          kind: "SelectionSet",
+          selections: [
+            ...fieldNode.selectionSet.selections.map((selectionNode) => {
+              switch (selectionNode.kind) {
+                case "Field":
+                  if (selectionNode.name.value === "__typename") {
+                    return selectionNode;
+                  }
+                  ensureObjectType(namedType);
+                  const field2 = getObjectField(namedType, selectionNode);
+                  if (!field2) {
+                    return fieldNode;
+                  }
+                  if (G__namespace.isScalarType(G__namespace.getNamedType(field2.type))) {
+                    return selectionNode;
+                  }
+                  return __spreadProps(__spreadValues({}, selectionNode), {
+                    selectionSet: {
+                      kind: "SelectionSet",
+                      selections: selectionNode.selectionSet.selections.map((selectionNode2) => {
+                        switch (selectionNode2.kind) {
+                          case "Field":
+                            if (selectionNode2.name.value === "__typename") {
+                              return selectionNode2;
+                            }
+                            return formifyField({
+                              fieldNode: selectionNode2,
+                              parentType: field2.type,
+                              path
+                            });
+                          case "InlineFragment":
+                            const namedType2 = G__namespace.getNamedType(field2.type);
+                            ensureNodeField(namedType2);
+                            return formifyNode({
+                              fieldOrInlineFragmentNode: selectionNode2,
+                              parentType: field2.type,
+                              path
+                            });
+                          default:
+                            throw new FormifyError("UNEXPECTED", `selection ${selectionNode2.kind}`);
+                        }
+                      })
+                    }
+                  });
+                case "InlineFragment":
+                  ensureUnionType(namedType);
+                  if (isNodeField(namedType)) {
+                    const parentType2 = getSelectedUnionType(namedType, selectionNode);
+                    return formifyNode({
+                      fieldOrInlineFragmentNode: selectionNode,
+                      parentType: parentType2,
+                      path
+                    });
+                  }
+                  return __spreadProps(__spreadValues({}, selectionNode), {
+                    selectionSet: {
+                      kind: "SelectionSet",
+                      selections: selectionNode.selectionSet.selections.map((subSelectionNode) => {
+                        switch (subSelectionNode.kind) {
+                          case "Field":
+                            const parentType2 = getSelectedUnionType(namedType, selectionNode);
+                            return formifyField({
+                              fieldNode: subSelectionNode,
+                              parentType: parentType2,
+                              path
+                            });
+                          default:
+                            throw new FormifyError("UNEXPECTED", `selection ${subSelectionNode.kind}`);
+                        }
+                      })
+                    }
+                  });
+                default:
+                  throw new FormifyError("UNEXPECTED", `selection ${selectionNode.kind}`);
+              }
+            })
+          ]
+        }
+      });
+    };
+    const formifiedQuery = {
+      kind: "Document",
+      definitions: optimizedQuery.definitions.map((definition) => {
+        typeInfo.enter(definition);
+        ensureOperationDefinition(definition);
+        const type = typeInfo.getType();
+        const namedType = G__namespace.getNamedType(type);
+        ensureObjectType(namedType);
+        return __spreadProps(__spreadValues({}, definition), {
+          selectionSet: {
+            kind: "SelectionSet",
+            selections: definition.selectionSet.selections.map((selectionNode) => {
+              switch (selectionNode.kind) {
+                case "Field":
+                  const parentType = type;
+                  const namedParentType = G__namespace.getNamedType(parentType);
+                  ensureObjectType(namedParentType);
+                  const field = getObjectField(namedParentType, selectionNode);
+                  const namedFieldType = G__namespace.getNamedType(field.type);
+                  if (isNodeField(namedFieldType)) {
+                    return formifyNode({
+                      fieldOrInlineFragmentNode: selectionNode,
+                      parentType: field.type,
+                      path: [getNameAndAlias(selectionNode)]
+                    });
+                  } else if (isConnectionField(namedFieldType)) {
+                    return formifyConnection({
+                      namedFieldType,
+                      selectionNode,
+                      path: [getNameAndAlias(selectionNode)]
+                    });
+                  }
+                  if (selectionNode.name.value === COLLECTION_FIELD_NAME || selectionNode.name.value === COLLECTIONS_FIELD_NAME) {
+                    return __spreadProps(__spreadValues({}, selectionNode), {
+                      selectionSet: {
+                        kind: "SelectionSet",
+                        selections: selectionNode.selectionSet.selections.map((selectionNode2) => {
+                          switch (selectionNode2.kind) {
+                            case "Field":
+                              if (selectionNode2.name.value === COLLECTIONS_DOCUMENTS_NAME) {
+                                ensureObjectType(namedFieldType);
+                                const n = namedFieldType.getFields()[COLLECTIONS_DOCUMENTS_NAME];
+                                const docType = G__namespace.getNamedType(n.type);
+                                return formifyConnection({
+                                  namedFieldType: docType,
+                                  selectionNode: selectionNode2,
+                                  path: [getNameAndAlias(selectionNode2)]
+                                });
+                              }
+                              return selectionNode2;
+                            default:
+                              throw new FormifyError("NOOP");
+                          }
+                        })
+                      }
+                    });
+                  }
+                  throw new FormifyError("NOOP");
+                default:
+                  throw new FormifyError("UNEXPECTED");
+              }
+            })
+          }
+        });
+      })
+    };
+    nodes.map((node2) => {
+      const namePath = [];
+      const aliasPath = [];
+      node2.path.forEach((p) => {
+        namePath.push(p.name);
+        aliasPath.push(p.alias);
+        if (p.list) {
+          namePath.push("NUM");
+          aliasPath.push("NUM");
+        }
+      });
+      JSON.stringify({
+        namePath: namePath.join("."),
+        aliasPath: aliasPath.join(".")
+      }, null, 2);
+    });
+    return { formifiedQuery, nodes };
+  };
   const captureBranchName = /^refs\/heads\/(.*)/;
   const parseRefForBranchName = (ref) => {
     const matches = ref.match(captureBranchName);
@@ -435,13 +865,21 @@ mutation addPendingDocumentMutation(
       };
       this.getSchema = async () => {
         if (!this.schema) {
-          const data = await this.request(graphql.getIntrospectionQuery(), {
+          const data = await this.request(G.getIntrospectionQuery(), {
             variables: {}
           });
-          this.schema = graphql.buildClientSchema(data);
+          this.schema = G.buildClientSchema(data);
         }
         return this.schema;
       };
+      this.getOptimizedQuery = async (documentNode) => {
+        const data = await this.request(`query GetOptimizedQuery($queryString: String!) {
+        getOptimizedQuery(queryString: $queryString)
+      }`, {
+          variables: { queryString: G.print(documentNode) }
+        });
+        return G.parse(data.getOptimizedQuery);
+      };
       this.options = options;
       this.setBranch(options.branch);
       this.events.subscribe("branch:change", ({ branchName }) => {
@@ -501,10 +939,23 @@ mutation addPendingDocumentMutation(
       this.contentApiBase = ((_c = this.options.tinaioConfig) == null ? void 0 : _c.contentApiUrlOverride) || `https://content.tinajs.io`;
       this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/content/${this.options.clientId}/github/${encodedBranch}`;
     }
-    async requestWithForm(query, { variables }) {
+    async requestWithForm(query, {
+      variables,
+      useUnstableFormify
+    }) {
       const schema = await this.getSchema();
-      const formifiedQuery = formify(query(gql__default["default"]), schema);
-      return this.request(graphql.print(formifiedQuery), { variables });
+      let formifiedQuery;
+      if (useUnstableFormify) {
+        const res = await formify({
+          schema,
+          query: G.print(query(gql__default["default"])),
+          getOptimizedQuery: this.getOptimizedQuery
+        });
+        formifiedQuery = res.formifiedQuery;
+      } else {
+        formifiedQuery = formify$1(query(gql__default["default"]), schema);
+      }
+      return this.request(G.print(formifiedQuery), { variables });
     }
     async request(query, { variables }) {
       const res = await fetch(this.contentApiUrl, {
@@ -514,7 +965,7 @@ mutation addPendingDocumentMutation(
           Authorization: "Bearer " + (await this.getToken()).id_token
         },
         body: JSON.stringify({
-          query: typeof query === "function" ? graphql.print(query(gql__default["default"])) : query,
+          query: typeof query === "function" ? G.print(query(gql__default["default"])) : query,
           variables
         })
       });
@@ -539,7 +990,7 @@ mutation addPendingDocumentMutation(
     async getRefreshedToken(tokens) {
       const { access_token, id_token, refresh_token } = JSON.parse(tokens);
       const { exp, iss, client_id } = this.parseJwt(access_token);
-      if (Date.now() / 1e3 >= exp) {
+      if (Date.now() / 1e3 >= exp - 120) {
         const refreshResponse = await fetch(iss, {
           method: "POST",
           headers: {
@@ -897,6 +1348,9 @@ mutation addPendingDocumentMutation(
     if (!cms.api.tina) {
       cms.registerApi("tina", createClient(props));
     }
+    if (!cms.api.admin) {
+      cms.registerApi("admin", new TinaAdminApi(cms));
+    }
     const setupMedia = async () => {
       var _a;
       if (props.mediaStore) {
@@ -921,11 +1375,6 @@ mutation addPendingDocumentMutation(
       return newBranch;
     };
     setupMedia();
-    React__default["default"].useMemo(() => {
-      if (cms.flags.get("tina-admin") === true) {
-        cms.registerApi("admin", new TinaAdminApi(cms));
-      }
-    }, [cms, cms.flags.get("tina-admin")]);
     const [branchingEnabled, setBranchingEnabled] = React__default["default"].useState(() => cms.flags.get("branch-switcher"));
     React__default["default"].useEffect(() => {
       cms.events.subscribe("flag:set", ({ key, value }) => {
@@ -1034,7 +1483,8 @@ mutation addPendingDocumentMutation(
       const formIds = [];
       setIsLoading(true);
       cms.api.tina.requestWithForm((gql2) => gql2(query), {
-        variables
+        variables,
+        useUnstableFormify: cms.flags.get("use-unstable-formify")
       }).then((payload) => {
         cms.plugins.remove(new toolkit.FormMetaPlugin({ name: "tina-admin-link" }));
         setData(payload);
@@ -1405,1326 +1855,7 @@ mutation addPendingDocumentMutation(
       };
     }, [plugin]);
   };
-  var styles = `/**
-Use a better box model (opinionated).
-*/
-
-.tina-tailwind *,
-.tina-tailwind ::before,
-.tina-tailwind ::after {
-	box-sizing: border-box;
-}
-
-/**
-Use a more readable tab size (opinionated).
-*/
-
-.tina-tailwind html {
-	-moz-tab-size: 4;
-	tab-size: 4;
-}
-
-/**
-1. Correct the line height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-*/
-
-.tina-tailwind html {
-	line-height: 1.15; /* 1 */
-	-webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
-Remove the margin in all browsers.
-*/
-
-.tina-tailwind body {
-	margin: 0;
-}
-
-/**
-Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-*/
-
-.tina-tailwind body {
-	font-family:
-		system-ui,
-		-apple-system, /* Firefox supports this but not yet \`system-ui\` */
-		'Segoe UI',
-		Roboto,
-		Helvetica,
-		Arial,
-		sans-serif,
-		'Apple Color Emoji',
-		'Segoe UI Emoji';
-}
-
-/**
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-*/
-
-.tina-tailwind hr {
-	height: 0; /* 1 */
-	color: inherit; /* 2 */
-}
-
-/**
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-.tina-tailwind abbr[title] {
-	text-decoration: underline dotted;
-}
-
-/**
-Add the correct font weight in Edge and Safari.
-*/
-
-.tina-tailwind b,
-.tina-tailwind strong {
-	font-weight: bolder;
-}
-
-/**
-1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
-2. Correct the odd 'em' font sizing in all browsers.
-*/
-
-.tina-tailwind code,
-.tina-tailwind kbd,
-.tina-tailwind samp,
-.tina-tailwind pre {
-	font-family:
-		ui-monospace,
-		SFMono-Regular,
-		Consolas,
-		'Liberation Mono',
-		Menlo,
-		monospace; /* 1 */
-	font-size: 1em; /* 2 */
-}
-
-/**
-Add the correct font size in all browsers.
-*/
-
-.tina-tailwind small {
-	font-size: 80%;
-}
-
-/**
-Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
-*/
-
-.tina-tailwind sub,
-.tina-tailwind sup {
-	font-size: 75%;
-	line-height: 0;
-	position: relative;
-	vertical-align: baseline;
-}
-
-/*
-Text-level semantics
-====================
-*/
-
-.tina-tailwind sub {
-	bottom: -0.25em;
-}
-
-/*
-Grouping content
-================
-*/
-
-.tina-tailwind sup {
-	top: -0.5em;
-}
-
-/**
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-*/
-
-.tina-tailwind table {
-	text-indent: 0; /* 1 */
-	border-color: inherit; /* 2 */
-}
-
-/**
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-*/
-
-.tina-tailwind button,
-.tina-tailwind input,
-.tina-tailwind optgroup,
-.tina-tailwind select,
-.tina-tailwind textarea {
-	font-family: inherit; /* 1 */
-	font-size: 100%; /* 1 */
-	line-height: 1.15; /* 1 */
-	margin: 0; /* 2 */
-}
-
-/**
-Remove the inheritance of text transform in Edge and Firefox.
-1. Remove the inheritance of text transform in Firefox.
-*/
-
-.tina-tailwind button,
-.tina-tailwind select { /* 1 */
-	text-transform: none;
-}
-
-/**
-Correct the inability to style clickable types in iOS and Safari.
-*/
-
-.tina-tailwind button,
-.tina-tailwind [type='button'],
-.tina-tailwind [type='reset'],
-.tina-tailwind [type='submit'] {
-	-webkit-appearance: button;
-}
-
-/**
-Remove the inner border and padding in Firefox.
-*/
-
-.tina-tailwind ::-moz-focus-inner {
-	border-style: none;
-	padding: 0;
-}
-
-/**
-Restore the focus styles unset by the previous rule.
-*/
-
-.tina-tailwind :-moz-focusring {
-	outline: 1px dotted ButtonText;
-}
-
-/**
-Remove the additional ':invalid' styles in Firefox.
-See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
-*/
-
-.tina-tailwind :-moz-ui-invalid {
-	box-shadow: none;
-}
-
-/**
-Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
-*/
-
-.tina-tailwind legend {
-	padding: 0;
-}
-
-/**
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-.tina-tailwind progress {
-	vertical-align: baseline;
-}
-
-/**
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-.tina-tailwind ::-webkit-inner-spin-button,
-.tina-tailwind ::-webkit-outer-spin-button {
-	height: auto;
-}
-
-/**
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-.tina-tailwind [type='search'] {
-	-webkit-appearance: textfield; /* 1 */
-	outline-offset: -2px; /* 2 */
-}
-
-/**
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-.tina-tailwind ::-webkit-search-decoration {
-	-webkit-appearance: none;
-}
-
-/**
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to 'inherit' in Safari.
-*/
-
-.tina-tailwind ::-webkit-file-upload-button {
-	-webkit-appearance: button; /* 1 */
-	font: inherit; /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-.tina-tailwind summary {
-	display: list-item;
-}
-
-/**
- * Removes the default spacing and border for appropriate elements.
- */
-
-.tina-tailwind blockquote,
-.tina-tailwind dl,
-.tina-tailwind dd,
-.tina-tailwind h1,
-.tina-tailwind h2,
-.tina-tailwind h3,
-.tina-tailwind h4,
-.tina-tailwind h5,
-.tina-tailwind h6,
-.tina-tailwind hr,
-.tina-tailwind figure,
-.tina-tailwind p,
-.tina-tailwind pre {
-  margin: 0;
-}
-
-/**
- * Manually forked from SUIT CSS Base: https://github.com/suitcss/base
- * A thin layer on top of normalize.css that provides a starting point more
- * suitable for web applications.
- */
-
-.tina-tailwind button {
-  background-color: transparent;
-  background-image: none;
-}
-
-/*
-Interactive
-===========
-*/
-
-.tina-tailwind fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-/*
-Forms
-=====
-*/
-
-.tina-tailwind ol,
-.tina-tailwind ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/**
- * 1. Use the user's configured \`sans\` font-family (with Tailwind's default
- *    sans-serif font stack as a fallback) as a sane default.
- * 2. Use Tailwind's default "normal" line-height so the user isn't forced
- *    to override it to ensure consistency even when using the default theme.
- */
-
-.tina-tailwind html {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 1 */
-  line-height: 1.5; /* 2 */
-}
-
-/**
- * Inherit font-family and line-height from \`html\` so users can set them as
- * a class directly on the \`html\` element.
- */
-
-.tina-tailwind body {
-  font-family: inherit;
-  line-height: inherit;
-}
-
-/**
- * 1. Prevent padding and border from affecting element width.
- *
- *    We used to set this in the html element and inherit from
- *    the parent element for everything else. This caused issues
- *    in shadow-dom-enhanced elements like <details> where the content
- *    is wrapped by a div with box-sizing set to \`content-box\`.
- *
- *    https://github.com/mozdevs/cssremedy/issues/4
- *
- *
- * 2. Allow adding a border to an element by just adding a border-width.
- *
- *    By default, the way the browser specifies that an element should have no
- *    border is by setting it's border-style to \`none\` in the user-agent
- *    stylesheet.
- *
- *    In order to easily add borders to elements by just setting the \`border-width\`
- *    property, we change the default border-style for all elements to \`solid\`, and
- *    use border-width to hide them instead. This way our \`border\` utilities only
- *    need to set the \`border-width\` property instead of the entire \`border\`
- *    shorthand, making our border utilities much more straightforward to compose.
- *
- *    https://github.com/tailwindcss/tailwindcss/pull/116
- */
-
-.tina-tailwind *,
-.tina-tailwind ::before,
-.tina-tailwind ::after {
-  box-sizing: border-box; /* 1 */
-  border-width: 0; /* 2 */
-  border-style: solid; /* 2 */
-  border-color: currentColor; /* 2 */
-}
-
-/*
- * Ensure horizontal rules are visible by default
- */
-
-.tina-tailwind hr {
-  border-top-width: 1px;
-}
-
-/**
- * Undo the \`border-style: none\` reset that Normalize applies to images so that
- * our \`border-{width}\` utilities have the expected effect.
- *
- * The Normalize reset is unnecessary for us since we default the border-width
- * to 0 on all elements.
- *
- * https://github.com/tailwindcss/tailwindcss/issues/362
- */
-
-.tina-tailwind img {
-  border-style: solid;
-}
-
-/**
- * Tailwind custom reset styles
- */
-
-.tina-tailwind textarea {
-  resize: vertical;
-}
-
-/*
-Tabular data
-============
-*/
-
-.tina-tailwind input::placeholder,
-.tina-tailwind textarea::placeholder {
-  opacity: 1;
-  color: #918c9e;
-}
-
-/*
-Sections
-========
-*/
-
-.tina-tailwind button,
-.tina-tailwind [role="button"] {
-  cursor: pointer;
-}
-
-/**
- * Override legacy focus reset from Normalize with modern Firefox focus styles.
- *
- * This is actually an improvement over the new defaults in Firefox in our testing,
- * as it triggers the better focus styles even for links, which still use a dotted
- * outline in Firefox by default.
- */
-
-.tina-tailwind :-moz-focusring {
-	outline: auto;
-}
-
-/*
-Document
-========
-*/
-
-.tina-tailwind table {
-  border-collapse: collapse;
-}
-
-/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-
-.tina-tailwind h1,
-.tina-tailwind h2,
-.tina-tailwind h3,
-.tina-tailwind h4,
-.tina-tailwind h5,
-.tina-tailwind h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/**
- * Reset links to optimize for opt-in styling instead of
- * opt-out.
- */
-
-.tina-tailwind a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/**
- * Reset form element properties that are easy to forget to
- * style explicitly so you don't inadvertently introduce
- * styles that deviate from your design system. These styles
- * supplement a partial reset that is already applied by
- * normalize.css.
- */
-
-.tina-tailwind button,
-.tina-tailwind input,
-.tina-tailwind optgroup,
-.tina-tailwind select,
-.tina-tailwind textarea {
-  padding: 0;
-  line-height: inherit;
-  color: inherit;
-}
-
-/**
- * Use the configured 'mono' font family for elements that
- * are expected to be rendered with a monospace font, falling
- * back to the system monospace stack if there is no configured
- * 'mono' font family.
- */
-
-.tina-tailwind pre,
-.tina-tailwind code,
-.tina-tailwind kbd,
-.tina-tailwind samp {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
-
-/**
- * 1. Make replaced elements \`display: block\` by default as that's
- *    the behavior you want almost all of the time. Inspired by
- *    CSS Remedy, with \`svg\` added as well.
- *
- *    https://github.com/mozdevs/cssremedy/issues/14
- * 
- * 2. Add \`vertical-align: middle\` to align replaced elements more
- *    sensibly by default when overriding \`display\` by adding a
- *    utility like \`inline\`.
- *
- *    This can trigger a poorly considered linting error in some
- *    tools but is included by design.
- * 
- *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210
- */
-
-.tina-tailwind img,
-.tina-tailwind svg,
-.tina-tailwind video,
-.tina-tailwind canvas,
-.tina-tailwind audio,
-.tina-tailwind iframe,
-.tina-tailwind embed,
-.tina-tailwind object {
-  display: block; /* 1 */
-  vertical-align: middle; /* 2 */
-}
-
-/**
- * Constrain images and videos to the parent width and preserve
- * their intrinsic aspect ratio.
- *
- * https://github.com/mozdevs/cssremedy/issues/14
- */
-
-.tina-tailwind img,
-.tina-tailwind video {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Ensure the default browser behavior of the \`hidden\` attribute.
- */
-
-.tina-tailwind [hidden] {
-  display: none;
-}
-
-/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com
-*/
-
-.tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {
-	--tw-translate-x: 0;
-	--tw-translate-y: 0;
-	--tw-rotate: 0;
-	--tw-skew-x: 0;
-	--tw-skew-y: 0;
-	--tw-scale-x: 1;
-	--tw-scale-y: 1;
-	--tw-transform: translateX(var(--tw-translate-x)) translateY(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 *, .tina-tailwind ::before, .tina-tailwind ::after {
-	--tw-border-opacity: 1;
-	border-color: rgba(225, 221, 236, var(--tw-border-opacity));
-}
-
-.tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {
-	--tw-ring-offset-shadow: 0 0 #0000;
-	--tw-ring-shadow: 0 0 #0000;
-	--tw-shadow: 0 0 #0000;
-}
-
-.tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {
-	--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
-	--tw-ring-offset-width: 0px;
-	--tw-ring-offset-color: #fff;
-	--tw-ring-color: rgba(0, 132, 255, 0.5);
-	--tw-ring-offset-shadow: 0 0 #0000;
-	--tw-ring-shadow: 0 0 #0000;
-	--tw-shadow: 0 0 #0000;
-}
-
-.tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {
-	--tw-blur: var(--tw-empty,/*!*/ /*!*/);
-	--tw-brightness: var(--tw-empty,/*!*/ /*!*/);
-	--tw-contrast: var(--tw-empty,/*!*/ /*!*/);
-	--tw-grayscale: var(--tw-empty,/*!*/ /*!*/);
-	--tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);
-	--tw-invert: var(--tw-empty,/*!*/ /*!*/);
-	--tw-saturate: var(--tw-empty,/*!*/ /*!*/);
-	--tw-sepia: var(--tw-empty,/*!*/ /*!*/);
-	--tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);
-	--tw-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 .static {
-	position: static !important;
-}
-
-.tina-tailwind .fixed {
-	position: fixed !important;
-}
-
-.tina-tailwind .absolute {
-	position: absolute !important;
-}
-
-.tina-tailwind .relative {
-	position: relative !important;
-}
-
-.tina-tailwind .left-0 {
-	left: 0px !important;
-}
-
-.tina-tailwind .right-0 {
-	right: 0px !important;
-}
-
-.tina-tailwind .bottom-2 {
-	bottom: 8px !important;
-}
-
-.tina-tailwind .right-5 {
-	right: 20px !important;
-}
-
-.tina-tailwind .z-50 {
-	z-index: 50 !important;
-}
-
-.tina-tailwind .mx-auto {
-	margin-left: auto !important;
-	margin-right: auto !important;
-}
-
-.tina-tailwind .mr-2 {
-	margin-right: 8px !important;
-}
-
-.tina-tailwind .mb-2 {
-	margin-bottom: 8px !important;
-}
-
-.tina-tailwind .mb-1 {
-	margin-bottom: 4px !important;
-}
-
-.tina-tailwind .-mt-0\\.5 {
-	margin-top: -2px !important;
-}
-
-.tina-tailwind .-mt-0 {
-	margin-top: 0px !important;
-}
-
-.tina-tailwind .ml-1 {
-	margin-left: 4px !important;
-}
-
-.tina-tailwind .mt-2 {
-	margin-top: 8px !important;
-}
-
-.tina-tailwind .mr-1\\.5 {
-	margin-right: 6px !important;
-}
-
-.tina-tailwind .mr-1 {
-	margin-right: 4px !important;
-}
-
-.tina-tailwind .block {
-	display: block !important;
-}
-
-.tina-tailwind .inline-block {
-	display: inline-block !important;
-}
-
-.tina-tailwind .flex {
-	display: flex !important;
-}
-
-.tina-tailwind .inline-flex {
-	display: inline-flex !important;
-}
-
-.tina-tailwind .table {
-	display: table !important;
-}
-
-.tina-tailwind .h-screen {
-	height: 100vh !important;
-}
-
-.tina-tailwind .h-auto {
-	height: auto !important;
-}
-
-.tina-tailwind .h-full {
-	height: 100% !important;
-}
-
-.tina-tailwind .h-6 {
-	height: 24px !important;
-}
-
-.tina-tailwind .h-10 {
-	height: 40px !important;
-}
-
-.tina-tailwind .h-5 {
-	height: 20px !important;
-}
-
-.tina-tailwind .w-full {
-	width: 100% !important;
-}
-
-.tina-tailwind .w-10 {
-	width: 40px !important;
-}
-
-.tina-tailwind .w-auto {
-	width: auto !important;
-}
-
-.tina-tailwind .w-5 {
-	width: 20px !important;
-}
-
-.tina-tailwind .w-56 {
-	width: 224px !important;
-}
-
-.tina-tailwind .w-6 {
-	width: 24px !important;
-}
-
-.tina-tailwind .max-w-lg {
-	max-width: 32rem !important;
-}
-
-.tina-tailwind .max-w-screen-xl {
-	max-width: 1280px !important;
-}
-
-.tina-tailwind .max-w-form {
-	max-width: 900px !important;
-}
-
-.tina-tailwind .max-w-full {
-	max-width: 100% !important;
-}
-
-.tina-tailwind .flex-1 {
-	flex: 1 1 0% !important;
-}
-
-.tina-tailwind .table-auto {
-	table-layout: auto !important;
-}
-
-.tina-tailwind .origin-top-right {
-	transform-origin: top right !important;
-}
-
-.tina-tailwind .translate-y-full {
-	--tw-translate-y: 100% !important;
-	transform: var(--tw-transform) !important;
-}
-
-.tina-tailwind .-translate-y-2 {
-	--tw-translate-y: -8px !important;
-	transform: var(--tw-transform) !important;
-}
-
-.tina-tailwind .translate-y-0 {
-	--tw-translate-y: 0px !important;
-	transform: var(--tw-transform) !important;
-}
-
-.tina-tailwind .scale-95 {
-	--tw-scale-x: .95 !important;
-	--tw-scale-y: .95 !important;
-	transform: var(--tw-transform) !important;
-}
-
-.tina-tailwind .scale-100 {
-	--tw-scale-x: 1 !important;
-	--tw-scale-y: 1 !important;
-	transform: var(--tw-transform) !important;
-}
-
-.tina-tailwind .transform {
-	transform: var(--tw-transform) !important;
-}
-
-.tina-tailwind .flex-col {
-	flex-direction: column !important;
-}
-
-.tina-tailwind .items-end {
-	align-items: flex-end !important;
-}
-
-.tina-tailwind .items-center {
-	align-items: center !important;
-}
-
-.tina-tailwind .items-stretch {
-	align-items: stretch !important;
-}
-
-.tina-tailwind .justify-center {
-	justify-content: center !important;
-}
-
-.tina-tailwind .justify-between {
-	justify-content: space-between !important;
-}
-
-.tina-tailwind .gap-0\\.5 {
-	gap: 2px !important;
-}
-
-.tina-tailwind .gap-0 {
-	gap: 0px !important;
-}
-
-.tina-tailwind .gap-4 {
-	gap: 16px !important;
-}
-
-.tina-tailwind .gap-3 {
-	gap: 12px !important;
-}
-
-.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {
-	--tw-divide-y-reverse: 0 !important;
-	border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
-	border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) !important;
-}
-
-.tina-tailwind .overflow-hidden {
-	overflow: hidden !important;
-}
-
-.tina-tailwind .overflow-y-auto {
-	overflow-y: auto !important;
-}
-
-.tina-tailwind .whitespace-nowrap {
-	white-space: nowrap !important;
-}
-
-.tina-tailwind .rounded-lg {
-	border-radius: 8px !important;
-}
-
-.tina-tailwind .rounded-full {
-	border-radius: 9999px !important;
-}
-
-.tina-tailwind .rounded-md {
-	border-radius: 6px !important;
-}
-
-.tina-tailwind .border {
-	border-width: 1px !important;
-}
-
-.tina-tailwind .border-b {
-	border-bottom-width: 1px !important;
-}
-
-.tina-tailwind .border-gray-200 {
-	--tw-border-opacity: 1 !important;
-	border-color: rgba(225, 221, 236, var(--tw-border-opacity)) !important;
-}
-
-.tina-tailwind .border-transparent {
-	border-color: transparent !important;
-}
-
-.tina-tailwind .bg-white {
-	--tw-bg-opacity: 1 !important;
-	background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
-}
-
-.tina-tailwind .bg-gray-50 {
-	--tw-bg-opacity: 1 !important;
-	background-color: rgba(246, 246, 249, var(--tw-bg-opacity)) !important;
-}
-
-.tina-tailwind .bg-blue-500 {
-	--tw-bg-opacity: 1 !important;
-	background-color: rgba(0, 132, 255, var(--tw-bg-opacity)) !important;
-}
-
-.tina-tailwind .bg-gradient-to-b {
-	background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
-}
-
-.tina-tailwind .from-blue-900 {
-	--tw-gradient-from: #1D2C6C !important;
-	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 44, 108, 0)) !important;
-}
-
-.tina-tailwind .to-gray-900 {
-	--tw-gradient-to: #252336 !important;
-}
-
-.tina-tailwind .px-4 {
-	padding-left: 16px !important;
-	padding-right: 16px !important;
-}
-
-.tina-tailwind .py-6 {
-	padding-top: 24px !important;
-	padding-bottom: 24px !important;
-}
-
-.tina-tailwind .px-5 {
-	padding-left: 20px !important;
-	padding-right: 20px !important;
-}
-
-.tina-tailwind .py-4 {
-	padding-top: 16px !important;
-	padding-bottom: 16px !important;
-}
-
-.tina-tailwind .px-12 {
-	padding-left: 48px !important;
-	padding-right: 48px !important;
-}
-
-.tina-tailwind .py-10 {
-	padding-top: 40px !important;
-	padding-bottom: 40px !important;
-}
-
-.tina-tailwind .px-20 {
-	padding-left: 80px !important;
-	padding-right: 80px !important;
-}
-
-.tina-tailwind .px-6 {
-	padding-left: 24px !important;
-	padding-right: 24px !important;
-}
-
-.tina-tailwind .py-1 {
-	padding-top: 4px !important;
-	padding-bottom: 4px !important;
-}
-
-.tina-tailwind .py-2 {
-	padding-top: 8px !important;
-	padding-bottom: 8px !important;
-}
-
-.tina-tailwind .py-3 {
-	padding-top: 12px !important;
-	padding-bottom: 12px !important;
-}
-
-.tina-tailwind .px-8 {
-	padding-left: 32px !important;
-	padding-right: 32px !important;
-}
-
-.tina-tailwind .pb-4 {
-	padding-bottom: 16px !important;
-}
-
-.tina-tailwind .pt-18 {
-	padding-top: 72px !important;
-}
-
-.tina-tailwind .text-left {
-	text-align: left !important;
-}
-
-.tina-tailwind .text-center {
-	text-align: center !important;
-}
-
-.tina-tailwind .font-sans {
-	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
-}
-
-.tina-tailwind .text-2xl {
-	font-size: 24px !important;
-	line-height: 1.33 !important;
-}
-
-.tina-tailwind .text-base {
-	font-size: 16px !important;
-	line-height: 1.5 !important;
-}
-
-.tina-tailwind .text-sm {
-	font-size: 14px !important;
-	line-height: 1.43 !important;
-}
-
-.tina-tailwind .text-xl {
-	font-size: 20px !important;
-	line-height: 1.4 !important;
-}
-
-.tina-tailwind .text-md {
-	font-size: 16px !important;
-	line-height: 1.5 !important;
-}
-
-.tina-tailwind .text-xs {
-	font-size: 13px !important;
-	line-height: 1.33 !important;
-}
-
-.tina-tailwind .font-medium {
-	font-weight: 500 !important;
-}
-
-.tina-tailwind .uppercase {
-	text-transform: uppercase !important;
-}
-
-.tina-tailwind .italic {
-	font-style: italic !important;
-}
-
-.tina-tailwind .leading-normal {
-	line-height: 1.5 !important;
-}
-
-.tina-tailwind .leading-tight {
-	line-height: 1.25 !important;
-}
-
-.tina-tailwind .leading-5 {
-	line-height: 20px !important;
-}
-
-.tina-tailwind .leading-4 {
-	line-height: 16px !important;
-}
-
-.tina-tailwind .tracking-wide {
-	letter-spacing: 0.025em !important;
-}
-
-.tina-tailwind .text-gray-700 {
-	--tw-text-opacity: 1 !important;
-	color: rgba(67, 62, 82, var(--tw-text-opacity)) !important;
-}
-
-.tina-tailwind .text-blue-600 {
-	--tw-text-opacity: 1 !important;
-	color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
-}
-
-.tina-tailwind .text-gray-500 {
-	--tw-text-opacity: 1 !important;
-	color: rgba(113, 108, 127, var(--tw-text-opacity)) !important;
-}
-
-.tina-tailwind .text-gray-400 {
-	--tw-text-opacity: 1 !important;
-	color: rgba(145, 140, 158, var(--tw-text-opacity)) !important;
-}
-
-.tina-tailwind .text-current {
-	color: currentColor !important;
-}
-
-.tina-tailwind .text-white {
-	--tw-text-opacity: 1 !important;
-	color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;
-}
-
-.tina-tailwind .text-gray-600 {
-	--tw-text-opacity: 1 !important;
-	color: rgba(86, 81, 101, var(--tw-text-opacity)) !important;
-}
-
-.tina-tailwind .text-gray-800 {
-	--tw-text-opacity: 1 !important;
-	color: rgba(54, 49, 69, var(--tw-text-opacity)) !important;
-}
-
-.tina-tailwind .text-gray-900 {
-	--tw-text-opacity: 1 !important;
-	color: rgba(37, 35, 54, var(--tw-text-opacity)) !important;
-}
-
-.tina-tailwind .text-blue-500 {
-	--tw-text-opacity: 1 !important;
-	color: rgba(0, 132, 255, var(--tw-text-opacity)) !important;
-}
-
-.tina-tailwind .text-blue-400 {
-	--tw-text-opacity: 1 !important;
-	color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
-}
-
-.tina-tailwind .underline {
-	text-decoration: underline !important;
-}
-
-.tina-tailwind .opacity-100 {
-	opacity: 1 !important;
-}
-
-.tina-tailwind .opacity-90 {
-	opacity: .9 !important;
-}
-
-.tina-tailwind .opacity-80 {
-	opacity: .8 !important;
-}
-
-.tina-tailwind .opacity-50 {
-	opacity: .5 !important;
-}
-
-.tina-tailwind .opacity-70 {
-	opacity: .7 !important;
-}
-
-.tina-tailwind .opacity-0 {
-	opacity: 0 !important;
-}
-
-.tina-tailwind .shadow-lg {
-	--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
-	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-}
-
-.tina-tailwind .shadow-2xl {
-	--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-}
-
-.tina-tailwind .shadow {
-	--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
-	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-}
-
-.tina-tailwind .shadow-sm {
-	--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
-	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-}
-
-.tina-tailwind .ring-1 {
-	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
-	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-}
-
-.tina-tailwind .ring-black {
-	--tw-ring-opacity: 1 !important;
-	--tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity)) !important;
-}
-
-.tina-tailwind .ring-opacity-5 {
-	--tw-ring-opacity: .05 !important;
-}
-
-.tina-tailwind .filter {
-	filter: var(--tw-filter) !important;
-}
-
-.tina-tailwind .transition-opacity {
-	transition-property: opacity !important;
-	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
-	transition-duration: 150ms !important;
-}
-
-.tina-tailwind .transition-colors {
-	transition-property: background-color, border-color, color, fill, stroke !important;
-	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
-	transition-duration: 150ms !important;
-}
-
-.tina-tailwind .transition-all {
-	transition-property: all !important;
-	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
-	transition-duration: 150ms !important;
-}
-
-.tina-tailwind .transition {
-	transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
-	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
-	transition-duration: 150ms !important;
-}
-
-.tina-tailwind .duration-300 {
-	transition-duration: 300ms !important;
-}
-
-.tina-tailwind .duration-150 {
-	transition-duration: 150ms !important;
-}
-
-.tina-tailwind .duration-100 {
-	transition-duration: 100ms !important;
-}
-
-.tina-tailwind .duration-75 {
-	transition-duration: 75ms !important;
-}
-
-.tina-tailwind .ease-out {
-	transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
-}
-
-.tina-tailwind .ease-in {
-	transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
-}
-
-.tina-tailwind .ease-in-out {
-	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
-}
-
-.tina-tailwind .icon-parent svg {
-        fill: currentColor !important;
-      }
-
-.tina-tailwind {
-    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --tw-text-opacity: 1;
-    color: rgba(86, 81, 101, var(--tw-text-opacity));
-}
-
-.first\\:pt-3:first-child {
-	padding-top: 12px !important;
-}
-
-.last\\:pb-3:last-child {
-	padding-bottom: 12px !important;
-}
-
-.hover\\:bg-blue-600:hover {
-	--tw-bg-opacity: 1 !important;
-	background-color: rgba(5, 116, 228, var(--tw-bg-opacity)) !important;
-}
-
-.hover\\:bg-gray-50:hover {
-	--tw-bg-opacity: 1 !important;
-	background-color: rgba(246, 246, 249, var(--tw-bg-opacity)) !important;
-}
-
-.hover\\:text-blue-600:hover {
-	--tw-text-opacity: 1 !important;
-	color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;
-}
-
-.hover\\:text-blue-400:hover {
-	--tw-text-opacity: 1 !important;
-	color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
-}
-
-.hover\\:opacity-100:hover {
-	opacity: 1 !important;
-}
-
-.hover\\:opacity-80:hover {
-	opacity: .8 !important;
-}
-
-.focus\\:text-blue-400:focus {
-	--tw-text-opacity: 1 !important;
-	color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;
-}
-
-.focus\\:underline:focus {
-	text-decoration: underline !important;
-}
-
-.focus\\:shadow-outline:focus {
-	--tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5) !important;
-	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-}
-
-.focus\\:outline-none:focus {
-	outline: 2px solid transparent !important;
-	outline-offset: 2px !important;
-}
-
-.focus\\:ring-2:focus {
-	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
-	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-}
-
-.focus\\:ring-blue-500:focus {
-	--tw-ring-opacity: 1 !important;
-	--tw-ring-color: rgba(0, 132, 255, var(--tw-ring-opacity)) !important;
-}
-
-.group:hover .group-hover\\:opacity-100 {
-	opacity: 1 !important;
-}
-`;
+  var styles = '*, ::before, ::after {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-rotate: 0;\n      --tw-skew-x: 0;\n      --tw-skew-y: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-pan-x:  ;\n      --tw-pan-y:  ;\n      --tw-pinch-zoom:  ;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-ordinal:  ;\n      --tw-slashed-zero:  ;\n      --tw-numeric-figure:  ;\n      --tw-numeric-spacing:  ;\n      --tw-numeric-fraction:  ;\n      --tw-ring-inset:  ;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-color: rgb(0 132 255 / 0.5);\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-colored: 0 0 #0000;\n      --tw-blur:  ;\n      --tw-brightness:  ;\n      --tw-contrast:  ;\n      --tw-grayscale:  ;\n      --tw-hue-rotate:  ;\n      --tw-invert:  ;\n      --tw-saturate:  ;\n      --tw-sepia:  ;\n      --tw-drop-shadow:  ;\n      --tw-backdrop-blur:  ;\n      --tw-backdrop-brightness:  ;\n      --tw-backdrop-contrast:  ;\n      --tw-backdrop-grayscale:  ;\n      --tw-backdrop-hue-rotate:  ;\n      --tw-backdrop-invert:  ;\n      --tw-backdrop-opacity:  ;\n      --tw-backdrop-saturate:  ;\n      --tw-backdrop-sepia:  ;\n}\n.tina-tailwind .static {\n      position: static;\n}\n.tina-tailwind .fixed {\n      position: fixed;\n}\n.tina-tailwind .absolute {\n      position: absolute;\n}\n.tina-tailwind .relative {\n      position: relative;\n}\n.tina-tailwind .left-0 {\n      left: 0px;\n}\n.tina-tailwind .right-0 {\n      right: 0px;\n}\n.tina-tailwind .mx-auto {\n      margin-left: auto;\n      margin-right: auto;\n}\n.tina-tailwind .mr-2 {\n      margin-right: 8px;\n}\n.tina-tailwind .mb-2 {\n      margin-bottom: 8px;\n}\n.tina-tailwind .mb-1 {\n      margin-bottom: 4px;\n}\n.tina-tailwind .-mt-0\\.5 {\n      margin-top: -2px;\n}\n.tina-tailwind .-mt-0 {\n      margin-top: -0px;\n}\n.tina-tailwind .ml-1 {\n      margin-left: 4px;\n}\n.tina-tailwind .mt-2 {\n      margin-top: 8px;\n}\n.tina-tailwind .mr-1\\.5 {\n      margin-right: 6px;\n}\n.tina-tailwind .mr-1 {\n      margin-right: 4px;\n}\n.tina-tailwind .block {\n      display: block;\n}\n.tina-tailwind .inline-block {\n      display: inline-block;\n}\n.tina-tailwind .inline {\n      display: inline;\n}\n.tina-tailwind .flex {\n      display: flex;\n}\n.tina-tailwind .inline-flex {\n      display: inline-flex;\n}\n.tina-tailwind .table {\n      display: table;\n}\n.tina-tailwind .h-screen {\n      height: 100vh;\n}\n.tina-tailwind .h-auto {\n      height: auto;\n}\n.tina-tailwind .h-full {\n      height: 100%;\n}\n.tina-tailwind .h-6 {\n      height: 24px;\n}\n.tina-tailwind .h-10 {\n      height: 40px;\n}\n.tina-tailwind .h-5 {\n      height: 20px;\n}\n.tina-tailwind .h-12 {\n      height: 48px;\n}\n.tina-tailwind .w-full {\n      width: 100%;\n}\n.tina-tailwind .w-10 {\n      width: 40px;\n}\n.tina-tailwind .w-auto {\n      width: auto;\n}\n.tina-tailwind .w-5 {\n      width: 20px;\n}\n.tina-tailwind .w-56 {\n      width: 224px;\n}\n.tina-tailwind .w-6 {\n      width: 24px;\n}\n.tina-tailwind .max-w-lg {\n      max-width: 32rem;\n}\n.tina-tailwind .max-w-screen-xl {\n      max-width: 1280px;\n}\n.tina-tailwind .max-w-form {\n      max-width: 900px;\n}\n.tina-tailwind .max-w-full {\n      max-width: 100%;\n}\n.tina-tailwind .flex-1 {\n      flex: 1 1 0%;\n}\n.tina-tailwind .flex-shrink-0 {\n      flex-shrink: 0;\n}\n.tina-tailwind .flex-grow-0 {\n      flex-grow: 0;\n}\n.tina-tailwind .table-auto {\n      table-layout: auto;\n}\n.tina-tailwind .origin-top-right {\n      transform-origin: top right;\n}\n.tina-tailwind .scale-95 {\n      --tw-scale-x: .95;\n      --tw-scale-y: .95;\n      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));\n}\n.tina-tailwind .scale-100 {\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      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));\n}\n.tina-tailwind .transform {\n      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));\n}\n.tina-tailwind .cursor-pointer {\n      cursor: pointer;\n}\n.tina-tailwind .flex-col {\n      flex-direction: column;\n}\n.tina-tailwind .items-end {\n      align-items: flex-end;\n}\n.tina-tailwind .items-center {\n      align-items: center;\n}\n.tina-tailwind .items-stretch {\n      align-items: stretch;\n}\n.tina-tailwind .justify-end {\n      justify-content: flex-end;\n}\n.tina-tailwind .justify-center {\n      justify-content: center;\n}\n.tina-tailwind .justify-between {\n      justify-content: space-between;\n}\n.tina-tailwind .gap-0\\.5 {\n      gap: 2px;\n}\n.tina-tailwind .gap-0 {\n      gap: 0px;\n}\n.tina-tailwind .gap-4 {\n      gap: 16px;\n}\n.tina-tailwind .gap-3 {\n      gap: 12px;\n}\n.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-y-reverse: 0;\n      border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n      border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.tina-tailwind .divide-gray-150 > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-divide-opacity));\n}\n.tina-tailwind .overflow-hidden {\n      overflow: hidden;\n}\n.tina-tailwind .overflow-y-auto {\n      overflow-y: auto;\n}\n.tina-tailwind .whitespace-nowrap {\n      white-space: nowrap;\n}\n.tina-tailwind .rounded-lg {\n      border-radius: 8px;\n}\n.tina-tailwind .rounded-full {\n      border-radius: 9999px;\n}\n.tina-tailwind .rounded-md {\n      border-radius: 6px;\n}\n.tina-tailwind .border {\n      border-width: 1px;\n}\n.tina-tailwind .border-b {\n      border-bottom-width: 1px;\n}\n.tina-tailwind .border-gray-150 {\n      --tw-border-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-border-opacity));\n}\n.tina-tailwind .border-gray-200 {\n      --tw-border-opacity: 1;\n      border-color: rgb(225 221 236 / var(--tw-border-opacity));\n}\n.tina-tailwind .bg-white {\n      --tw-bg-opacity: 1;\n      background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gray-50 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(246 246 249 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-blue-500 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(0 132 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gradient-to-b {\n      background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.tina-tailwind .from-blue-900 {\n      --tw-gradient-from: #1D2C6C;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));\n}\n.tina-tailwind .to-gray-900 {\n      --tw-gradient-to: #252336;\n}\n.tina-tailwind .px-4 {\n      padding-left: 16px;\n      padding-right: 16px;\n}\n.tina-tailwind .py-6 {\n      padding-top: 24px;\n      padding-bottom: 24px;\n}\n.tina-tailwind .px-5 {\n      padding-left: 20px;\n      padding-right: 20px;\n}\n.tina-tailwind .py-4 {\n      padding-top: 16px;\n      padding-bottom: 16px;\n}\n.tina-tailwind .px-12 {\n      padding-left: 48px;\n      padding-right: 48px;\n}\n.tina-tailwind .py-10 {\n      padding-top: 40px;\n      padding-bottom: 40px;\n}\n.tina-tailwind .px-20 {\n      padding-left: 80px;\n      padding-right: 80px;\n}\n.tina-tailwind .px-6 {\n      padding-left: 24px;\n      padding-right: 24px;\n}\n.tina-tailwind .py-1 {\n      padding-top: 4px;\n      padding-bottom: 4px;\n}\n.tina-tailwind .py-2 {\n      padding-top: 8px;\n      padding-bottom: 8px;\n}\n.tina-tailwind .pt-4 {\n      padding-top: 16px;\n}\n.tina-tailwind .pb-4 {\n      padding-bottom: 16px;\n}\n.tina-tailwind .pt-18 {\n      padding-top: 72px;\n}\n.tina-tailwind .text-left {\n      text-align: left;\n}\n.tina-tailwind .text-center {\n      text-align: center;\n}\n.tina-tailwind .font-sans {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n.tina-tailwind .text-2xl {\n      font-size: 24px;\n      line-height: 1.33;\n}\n.tina-tailwind .text-base {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-sm {\n      font-size: 14px;\n      line-height: 1.43;\n}\n.tina-tailwind .text-xl {\n      font-size: 20px;\n      line-height: 1.4;\n}\n.tina-tailwind .text-md {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-xs {\n      font-size: 13px;\n      line-height: 1.33;\n}\n.tina-tailwind .font-medium {\n      font-weight: 500;\n}\n.tina-tailwind .uppercase {\n      text-transform: uppercase;\n}\n.tina-tailwind .italic {\n      font-style: italic;\n}\n.tina-tailwind .leading-normal {\n      line-height: 1.5;\n}\n.tina-tailwind .leading-tight {\n      line-height: 1.25;\n}\n.tina-tailwind .leading-5 {\n      line-height: 20px;\n}\n.tina-tailwind .tracking-wide {\n      letter-spacing: 0.025em;\n}\n.tina-tailwind .text-gray-700 {\n      --tw-text-opacity: 1;\n      color: rgb(67 62 82 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-blue-600 {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-500 {\n      --tw-text-opacity: 1;\n      color: rgb(113 108 127 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-400 {\n      --tw-text-opacity: 1;\n      color: rgb(145 140 158 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-current {\n      color: currentColor;\n}\n.tina-tailwind .text-white {\n      --tw-text-opacity: 1;\n      color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-600 {\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-800 {\n      --tw-text-opacity: 1;\n      color: rgb(54 49 69 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-900 {\n      --tw-text-opacity: 1;\n      color: rgb(37 35 54 / var(--tw-text-opacity));\n}\n.tina-tailwind .underline {\n      text-decoration-line: underline;\n}\n.tina-tailwind .opacity-100 {\n      opacity: 1;\n}\n.tina-tailwind .opacity-90 {\n      opacity: .9;\n}\n.tina-tailwind .opacity-80 {\n      opacity: .8;\n}\n.tina-tailwind .opacity-50 {\n      opacity: .5;\n}\n.tina-tailwind .opacity-70 {\n      opacity: .7;\n}\n.tina-tailwind .opacity-0 {\n      opacity: 0;\n}\n.tina-tailwind .shadow-lg {\n      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow-2xl {\n      --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n      --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow {\n      --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .ring-1 {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.tina-tailwind .ring-black {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.tina-tailwind .ring-opacity-5 {\n      --tw-ring-opacity: .05;\n}\n.tina-tailwind .filter {\n      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);\n}\n.tina-tailwind .transition-opacity {\n      transition-property: opacity;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-colors {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-all {\n      transition-property: all;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-300 {\n      transition-duration: 300ms;\n}\n.tina-tailwind .duration-150 {\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-100 {\n      transition-duration: 100ms;\n}\n.tina-tailwind .duration-75 {\n      transition-duration: 75ms;\n}\n.tina-tailwind .ease-out {\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.tina-tailwind .ease-in {\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.tina-tailwind .icon-parent svg {\n      fill: currentColor;\n    }\n\n.tina-tailwind {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n      font-size: 16px;\n      line-height: 1.5;\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:bg-blue-600:hover {\n      --tw-bg-opacity: 1;\n      background-color: rgb(5 116 228 / var(--tw-bg-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-600:hover {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-400:hover {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:opacity-100:hover {\n      opacity: 1;\n}\n\n.tina-tailwind .focus\\:text-blue-400:focus {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .focus\\:underline:focus {\n      text-decoration-line: underline;\n}\n\n.tina-tailwind .focus\\:shadow-outline:focus {\n      --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n      --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.tina-tailwind .focus\\:outline-none:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n}\n\n.tina-tailwind .focus\\:ring-2:focus {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.tina-tailwind .focus\\:ring-blue-500:focus {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));\n}\n';
   function useTina({
     query,
     variables,
@@ -3132,10 +2263,10 @@ This will work when developing locally but NOT when deployed to production.
     return t;
   };
   function Tree2Element(tree) {
-    return tree && tree.map(function(node, i) {
-      return React__default["default"].createElement(node.tag, __assign({
+    return tree && tree.map(function(node2, i) {
+      return React__default["default"].createElement(node2.tag, __assign({
         key: i
-      }, node.attr), Tree2Element(node.child));
+      }, node2.attr), Tree2Element(node2.child));
     });
   }
   function GenIcon(data) {
@@ -3177,41 +2308,37 @@ This will work when developing locally but NOT when deployed to production.
   }
   const useGetCollections = (cms) => {
     const api = new TinaAdminApi(cms);
-    const [info, setInfo] = React.useState({ collections: [], loading: true, error: false });
+    const [collections, setCollections] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(void 0);
     React.useEffect(() => {
       const fetchCollections = async () => {
-        const response = await api.fetchCollections();
-        setInfo({
-          collections: response.getCollections,
-          loading: false,
-          error: false
-        });
+        try {
+          const response = await api.fetchCollections();
+          setCollections(response.getCollections);
+        } catch (error2) {
+          cms.alerts.error(`[${error2.name}] GetCollections failed: ${error2.message}`, 30 * 1e3);
+          console.error(error2);
+          setCollections([]);
+          setError(error2);
+        }
+        setLoading(false);
       };
+      setLoading(true);
       fetchCollections();
     }, [cms]);
-    return info;
-  };
-  const GetCollections = ({ cms, children }) => {
-    const { collections, loading, error } = useGetCollections(cms);
-    if (!collections)
-      return null;
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collections, loading, error));
+    return { collections, loading, error };
   };
   const slugify = (text) => {
     return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
   };
   const Sidebar = ({ cms }) => {
+    const collectionsInfo = useGetCollections(cms);
     const screens = cms.plugins.getType("screen").all();
-    return /* @__PURE__ */ React__default["default"].createElement(GetCollections, {
-      cms
-    }, (collections, loading, error) => /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
+    return /* @__PURE__ */ React__default["default"].createElement(toolkit.Nav, {
       sidebarWidth: 360,
       showCollections: true,
-      collectionsInfo: {
-        collections,
-        loading,
-        error
-      },
+      collectionsInfo,
       screens,
       contentCreators: [],
       RenderNavSite: ({ view }) => /* @__PURE__ */ React__default["default"].createElement(SidebarLink, {
@@ -3224,7 +2351,7 @@ This will work when developing locally but NOT when deployed to production.
         to: `collections/${collection.name}`,
         Icon: ImFilesEmpty
       })
-    }));
+    });
   };
   const SidebarLink = (props) => {
     const { to, label, Icon } = props;
@@ -3281,8 +2408,8 @@ This will work when developing locally but NOT when deployed to production.
       d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
     }), /* @__PURE__ */ React__default["default"].createElement("path", {
       d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
-    })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina Admin"))), message && /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "px-5 py-4 "
+    })), /* @__PURE__ */ React__default["default"].createElement("span", null, "Tina"))), message && /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "px-5 pt-4"
     }, /* @__PURE__ */ React__default["default"].createElement("p", {
       className: "text-base font-sans leading-normal"
     }, message)), /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3292,38 +2419,52 @@ This will work when developing locally but NOT when deployed to production.
   const LoginPage = () => {
     const { setEdit } = sharedctx.useEditState();
     const login = () => setEdit(true);
-    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].createElement("a", {
-      href: "/",
-      className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out"
+    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex w-full flex-1 gap-4 items-center justify-end"
+    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      onClick: () => {
+        window.location.href = "/";
+      },
+      variant: "white",
+      size: "custom",
+      className: "text-base h-12 px-6 flex-shrink-0 flex-grow-0"
     }, /* @__PURE__ */ React__default["default"].createElement(MdOutlineArrowBack, {
       className: "w-6 h-auto mr-1.5 opacity-80"
-    }), " Back to site"), /* @__PURE__ */ React__default["default"].createElement("button", {
-      type: "submit",
+    }), " Back To Site"), /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
       onClick: () => login(),
-      className: "flex-1 justify-center text-center inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
-      style: { background: "#0084FF" }
+      variant: "primary",
+      size: "custom",
+      className: "text-base h-12 px-6 flex-1",
+      type: "submit"
     }, /* @__PURE__ */ React__default["default"].createElement(BiLogIn, {
-      className: "w-6 h-auto mr-1.5 opacity-80"
-    }), " Enter edit-mode"));
+      className: "w-6 h-auto mr-2 opacity-80"
+    }), " Edit With Tina")));
   };
   const logout = () => {
     sharedctx.setEditing(false);
     window.location.href = "/";
   };
   const LogoutPage = () => {
-    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].createElement("a", {
-      href: "/",
-      className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out"
+    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex w-full flex-1 gap-4 items-center justify-end"
+    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      onClick: () => {
+        window.location.href = "/";
+      },
+      variant: "white",
+      size: "custom",
+      className: "text-base h-12 px-6 flex-shrink-0 flex-grow-0"
     }, /* @__PURE__ */ React__default["default"].createElement(MdOutlineArrowBack, {
       className: "w-6 h-auto mr-1.5 opacity-80"
-    }), " Back to site"), /* @__PURE__ */ React__default["default"].createElement("button", {
-      type: "submit",
+    }), " Back To Site"), /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
       onClick: () => logout(),
-      className: "flex-1 justify-center text-center inline-flex items-center px-8 py-3 shadow-sm border border-transparent text-sm leading-4 font-medium rounded-full text-white hover:opacity-80 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out",
-      style: { background: "#0084FF" }
+      type: "submit",
+      variant: "primary",
+      size: "custom",
+      className: "text-base h-12 px-6 flex-1"
     }, /* @__PURE__ */ React__default["default"].createElement(BiLogOut, {
       className: "w-6 h-auto mr-1.5 opacity-80"
-    }), " Log out"));
+    }), " Log Out of Tina")));
   };
   const PageWrapper = ({
     children
@@ -3364,17 +2505,127 @@ This will work when developing locally but NOT when deployed to production.
       }, "Welcome to Tina!")), /* @__PURE__ */ React__default["default"].createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
     });
   };
+  const LoadingPage = () => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: 200,
+      opacity: "0.8",
+      display: "flex",
+      alignItems: "start",
+      justifyContent: "center",
+      padding: "120px 40px 40px 40px"
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: {
+      background: "#FFF",
+      border: "1px solid #EDECF3",
+      boxShadow: "0px 2px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.1)",
+      borderRadius: "8px",
+      padding: "32px 24px",
+      width: "460px",
+      maxWidth: "90%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexDirection: "column"
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement("svg", {
+    style: {
+      width: "64px",
+      color: "#2296fe",
+      marginTop: "-8px",
+      marginBottom: "16px"
+    },
+    version: "1.1",
+    id: "L5",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    x: "0px",
+    y: "0px",
+    viewBox: "0 0 100 64",
+    enableBackground: "new 0 0 0 0",
+    xmlSpace: "preserve"
+  }, /* @__PURE__ */ React__default["default"].createElement("circle", {
+    fill: "currentColor",
+    stroke: "none",
+    cx: 6,
+    cy: 32,
+    r: 6
+  }, /* @__PURE__ */ React__default["default"].createElement("animateTransform", {
+    attributeName: "transform",
+    dur: "1s",
+    type: "translate",
+    values: "0 15 ; 0 -15; 0 15",
+    calcMode: "spline",
+    keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
+    repeatCount: "indefinite",
+    begin: "0.1"
+  })), /* @__PURE__ */ React__default["default"].createElement("circle", {
+    fill: "currentColor",
+    stroke: "none",
+    cx: 30,
+    cy: 32,
+    r: 6
+  }, /* @__PURE__ */ React__default["default"].createElement("animateTransform", {
+    attributeName: "transform",
+    dur: "1s",
+    type: "translate",
+    values: "0 15 ; 0 -10; 0 15",
+    calcMode: "spline",
+    keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
+    repeatCount: "indefinite",
+    begin: "0.2"
+  })), /* @__PURE__ */ React__default["default"].createElement("circle", {
+    fill: "currentColor",
+    stroke: "none",
+    cx: 54,
+    cy: 32,
+    r: 6
+  }, /* @__PURE__ */ React__default["default"].createElement("animateTransform", {
+    attributeName: "transform",
+    dur: "1s",
+    type: "translate",
+    values: "0 15 ; 0 -5; 0 15",
+    calcMode: "spline",
+    keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
+    repeatCount: "indefinite",
+    begin: "0.3"
+  }))), /* @__PURE__ */ React__default["default"].createElement("p", {
+    style: {
+      fontSize: "16px",
+      color: "#716c7f",
+      textAlign: "center",
+      lineHeight: "1.3",
+      fontFamily: "'Inter', sans-serif",
+      fontWeight: "normal"
+    }
+  }, "Please wait, Tina is loading data..."))));
   const useGetCollection = (cms, collectionName, includeDocuments = true) => {
     const api = new TinaAdminApi(cms);
     const [collection, setCollection] = React.useState(void 0);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(void 0);
     React.useEffect(() => {
       const fetchCollection = async () => {
-        const response = await api.fetchCollection(collectionName, includeDocuments);
-        setCollection(response.getCollection);
+        try {
+          const response = await api.fetchCollection(collectionName, includeDocuments);
+          setCollection(response.getCollection);
+        } catch (error2) {
+          cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`, 30 * 1e3);
+          console.error(error2);
+          setCollection(void 0);
+          setError(error2);
+        }
+        setLoading(false);
       };
+      setLoading(true);
       fetchCollection();
     }, [cms, collectionName]);
-    return collection;
+    return { collection, loading, error };
   };
   const GetCollection = ({
     cms,
@@ -3382,11 +2633,16 @@ This will work when developing locally but NOT when deployed to production.
     includeDocuments = true,
     children
   }) => {
-    const collection = useGetCollection(cms, collectionName, includeDocuments);
+    const { collection, loading, error } = useGetCollection(cms, collectionName, includeDocuments);
     if (!collection) {
-      return null;
+      if (loading) {
+        return /* @__PURE__ */ React__default["default"].createElement(LoadingPage, null);
+      }
+      if (error) {
+        return null;
+      }
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, loading));
   };
   const TemplateMenu = ({ templates }) => {
     return /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
@@ -3415,12 +2671,21 @@ This will work when developing locally but NOT when deployed to production.
       className: `w-full text-md px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`
     }, template.label))))))));
   };
+  const handleNavigate = (navigate, cms, collection, document) => {
+    const plugins = cms.plugins.all("tina-admin");
+    const routeMapping = plugins.find(({ name }) => name === "route-mapping");
+    const routeOverride = routeMapping ? routeMapping.mapper(collection, document) : void 0;
+    if (routeOverride) {
+      window.location.href = routeOverride;
+      return null;
+    } else {
+      navigate(document.sys.filename);
+    }
+  };
   const CollectionListPage = () => {
+    const navigate = reactRouterDom.useNavigate();
     const { collectionName } = reactRouterDom.useParams();
-    reactRouterDom.useNavigate();
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
-      const plugins = cms.plugins.all("tina-admin");
-      const routeMapping = plugins.find(({ name }) => name === "route-mapping");
       return /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
         cms,
         collectionName,
@@ -3447,24 +2712,16 @@ This will work when developing locally but NOT when deployed to production.
         }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
           className: "divide-y divide-gray-150"
         }, documents.map((document) => {
-          const overrideRoute = routeMapping ? routeMapping.mapper(collection, document.node) : void 0;
           return /* @__PURE__ */ React__default["default"].createElement("tr", {
             key: `document-${document.node.sys.filename}`,
             className: ""
           }, /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-6 py-2 whitespace-nowrap"
-          }, overrideRoute && /* @__PURE__ */ React__default["default"].createElement("a", {
-            className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
-            href: `${overrideRoute}`
-          }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
-            className: "inline-block h-6 w-auto opacity-70"
-          }), /* @__PURE__ */ React__default["default"].createElement("span", null, /* @__PURE__ */ React__default["default"].createElement("span", {
-            className: "block text-xs text-gray-400 mb-1 uppercase"
-          }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
-            className: "h-5 leading-5 block whitespace-nowrap"
-          }, document.node.sys.filename))), !overrideRoute && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
-            className: "text-blue-600 hover:text-blue-400 flex items-center gap-3",
-            to: `${document.node.sys.filename}`
+          }, /* @__PURE__ */ React__default["default"].createElement("a", {
+            className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer",
+            onClick: () => {
+              handleNavigate(navigate, cms, collection, document.node);
+            }
           }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
             className: "inline-block h-6 w-auto opacity-70"
           }), /* @__PURE__ */ React__default["default"].createElement("span", null, /* @__PURE__ */ React__default["default"].createElement("span", {
@@ -3499,30 +2756,46 @@ This will work when developing locally but NOT when deployed to production.
       fields: void 0,
       mutationInfo: void 0
     });
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(void 0);
     React.useEffect(() => {
       const fetchDocumentFields = async () => {
-        const response = await api.fetchDocumentFields();
-        const documentFields = response.getDocumentFields;
-        const collection = documentFields[collectionName].collection;
-        const mutationInfo = documentFields[collectionName].mutationInfo;
-        let fields = void 0;
-        let template = void 0;
-        if (templateName && documentFields[collectionName].templates && documentFields[collectionName].templates[templateName]) {
-          template = documentFields[collectionName].templates[templateName].template;
-          fields = documentFields[collectionName].templates[templateName].fields;
-        } else {
-          fields = documentFields[collectionName].fields;
+        try {
+          const response = await api.fetchDocumentFields();
+          const documentFields = response.getDocumentFields;
+          const collection = documentFields[collectionName].collection;
+          const mutationInfo = documentFields[collectionName].mutationInfo;
+          let fields = void 0;
+          let template = void 0;
+          if (templateName && documentFields[collectionName].templates && documentFields[collectionName].templates[templateName]) {
+            template = documentFields[collectionName].templates[templateName].template;
+            fields = documentFields[collectionName].templates[templateName].fields;
+          } else {
+            fields = documentFields[collectionName].fields;
+          }
+          setInfo({
+            collection,
+            template,
+            fields,
+            mutationInfo
+          });
+        } catch (error2) {
+          cms.alerts.error(`[${error2.name}] GetDocumentFields failed: ${error2.message}`, 30 * 1e3);
+          console.error(error2);
+          setInfo({
+            collection: void 0,
+            template: void 0,
+            fields: void 0,
+            mutationInfo: void 0
+          });
+          setError(error2);
         }
-        setInfo({
-          collection,
-          template,
-          fields,
-          mutationInfo
-        });
+        setLoading(false);
       };
+      setLoading(true);
       fetchDocumentFields();
     }, [cms, collectionName]);
-    return info;
+    return __spreadProps(__spreadValues({}, info), { loading, error });
   };
   const GetDocumentFields = ({
     cms,
@@ -3530,11 +2803,16 @@ This will work when developing locally but NOT when deployed to production.
     templateName,
     children
   }) => {
-    const { collection, template, fields, mutationInfo } = useGetDocumentFields(cms, collectionName, templateName);
+    const { collection, template, fields, mutationInfo, loading, error } = useGetDocumentFields(cms, collectionName, templateName);
     if (!collection) {
-      return null;
+      if (loading) {
+        return /* @__PURE__ */ React__default["default"].createElement(LoadingPage, null);
+      }
+      if (error) {
+        return null;
+      }
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children({ collection, template, fields, mutationInfo }));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children({ collection, template, fields, mutationInfo, loading }));
   };
   const createDocument = async (cms, collection, template, mutationInfo, values) => {
     const api = new TinaAdminApi(cms);
@@ -3594,8 +2872,14 @@ This will work when developing locally but NOT when deployed to production.
           ...fields
         ],
         onSubmit: async (values) => {
-          await createDocument(cms, collection, template, mutationInfo, values);
-          navigate(`/collections/${collection.name}`);
+          try {
+            await createDocument(cms, collection, template, mutationInfo, values);
+            cms.alerts.success("Document created!");
+            navigate(`/collections/${collection.name}`);
+          } catch (error) {
+            cms.alerts.error(`[${error.name}] CreateDocument failed: ${error.message}`, 30 * 1e3);
+            console.error(error);
+          }
         }
       });
     }, [cms, collection, template, fields, mutationInfo]);
@@ -3624,14 +2908,25 @@ This will work when developing locally but NOT when deployed to production.
   const useGetDocument = (cms, collectionName, relativePath) => {
     const api = new TinaAdminApi(cms);
     const [document, setDocument] = React.useState(void 0);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(void 0);
     React.useEffect(() => {
       const fetchDocument = async () => {
-        const response = await api.fetchDocument(collectionName, relativePath);
-        setDocument(response.getDocument);
+        try {
+          const response = await api.fetchDocument(collectionName, relativePath);
+          setDocument(response.getDocument);
+        } catch (error2) {
+          cms.alerts.error(`[${error2.name}] GetDocument failed: ${error2.message}`, 30 * 1e3);
+          console.error(error2);
+          setDocument(void 0);
+          setError(error2);
+        }
+        setLoading(false);
       };
+      setLoading(true);
       fetchDocument();
     }, [cms, collectionName, relativePath]);
-    return document;
+    return { document, loading, error };
   };
   const GetDocument = ({
     cms,
@@ -3639,11 +2934,16 @@ This will work when developing locally but NOT when deployed to production.
     relativePath,
     children
   }) => {
-    const document = useGetDocument(cms, collectionName, relativePath);
+    const { document, loading, error } = useGetDocument(cms, collectionName, relativePath);
     if (!document) {
-      return null;
+      if (loading) {
+        return /* @__PURE__ */ React__default["default"].createElement(LoadingPage, null);
+      }
+      if (error) {
+        return null;
+      }
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document, loading));
   };
   const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
     const api = new TinaAdminApi(cms);
@@ -3684,7 +2984,7 @@ This will work when developing locally but NOT when deployed to production.
     mutationInfo
   }) => {
     var _a, _b;
-    const navigate = reactRouterDom.useNavigate();
+    reactRouterDom.useNavigate();
     const [formIsPristine, setFormIsPristine] = React.useState(true);
     const form = React.useMemo(() => {
       return new toolkit.Form({
@@ -3693,8 +2993,13 @@ This will work when developing locally but NOT when deployed to production.
         fields: document.form.fields,
         initialValues: document.values,
         onSubmit: async (values) => {
-          await updateDocument(cms, relativePath, collection, mutationInfo, values);
-          navigate(`/collections/${collection.name}`);
+          try {
+            await updateDocument(cms, relativePath, collection, mutationInfo, values);
+            cms.alerts.success("Document updated!");
+          } catch (error) {
+            cms.alerts.error(`[${error.name}] UpdateDocument failed: ${error.message}`, 30 * 1e3);
+            console.error(error);
+          }
         }
       });
     }, [cms, document, relativePath, collection, mutationInfo]);
@@ -3754,16 +3059,14 @@ This will work when developing locally but NOT when deployed to production.
       return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(LoginPage, null));
     }
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
-      const isTinaAdminEnabled = cms.flags.get("tina-admin");
+      const isTinaAdminEnabled = cms.flags.get("tina-admin") === false ? false : true;
       if (isTinaAdminEnabled) {
-        return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, {
-          basename: "/admin"
-        }, /* @__PURE__ */ React__default["default"].createElement("div", {
+        return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.HashRouter, null, /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "flex items-stretch h-screen overflow-hidden"
         }, /* @__PURE__ */ React__default["default"].createElement(Sidebar, {
           cms
         }), /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex-1"
+          className: "flex-1 relative"
         }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "collections/:collectionName/new",
           element: /* @__PURE__ */ React__default["default"].createElement(CollectionCreatePage, null)
@@ -3784,9 +3087,7 @@ This will work when developing locally but NOT when deployed to production.
           element: /* @__PURE__ */ React__default["default"].createElement(DashboardPage, null)
         }))))));
       } else {
-        return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.BrowserRouter, {
-          basename: "/admin"
-        }, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
+        return /* @__PURE__ */ React__default["default"].createElement(Layout, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.HashRouter, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "logout",
           element: /* @__PURE__ */ React__default["default"].createElement(LogoutPage, null)
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
@@ -3803,6 +3104,12 @@ This will work when developing locally but NOT when deployed to production.
       this.mapper = mapper;
     }
   }
+  const defineSchema = (config) => {
+    return config;
+  };
+  const defineConfig = (config) => {
+    return config;
+  };
   exports2.AuthWallInner = AuthWallInner;
   exports2.Client = Client;
   exports2.DEFAULT_LOCAL_TINA_GQL_SERVER_URL = DEFAULT_LOCAL_TINA_GQL_SERVER_URL;
@@ -3817,6 +3124,8 @@ This will work when developing locally but NOT when deployed to production.
   exports2.assertShape = assertShape;
   exports2.createClient = createClient;
   exports2["default"] = TinaCMSProvider2;
+  exports2.defineConfig = defineConfig;
+  exports2.defineSchema = defineSchema;
   exports2.getStaticPropsForTina = getStaticPropsForTina;
   exports2.gql = gql;
   exports2.safeAssertShape = safeAssertShape;