tinacms 0.66.5 → 0.66.6

package/dist/index.es.js

@@ -31,16 +31,17 @@ var __objRest = (source, exclude) => {
 };
 import { EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, Nav, LocalWarning, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
-import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType, getIntrospectionQuery, buildClientSchema, print } from "graphql";
+import * as G from "graphql";
+import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType, getIntrospectionQuery, buildClientSchema, print, parse } from "graphql";
 import set from "lodash.set";
-import gql$1 from "graphql-tag";
 import React, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
+import gql$1 from "graphql-tag";
 import styled from "styled-components";
 import * as yup from "yup";
 import { setEditing, TinaDataContext, useEditState } from "@tinacms/sharedctx";
 import { getIn, setIn } from "final-form";
 import UrlPattern from "url-pattern";
-import { NavLink, useNavigate, useParams, Link, BrowserRouter, Routes, Route } from "react-router-dom";
+import { NavLink, useNavigate, useParams, Link, HashRouter, Routes, Route } from "react-router-dom";
 import { Menu, Transition } from "@headlessui/react";
 function popupWindow(url, title, window2, w, h) {
   const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
@@ -68,11 +69,11 @@ const authenticate = (clientId, frontendUrl) => {
     authTab = popupWindow(`${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`, "_blank", window, 1e3, 700);
   });
 };
-const formify = (query, schema) => {
+const formify$1 = (query, schema) => {
   const typeInfo = new 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 = getNamedType(type);
@@ -375,6 +376,435 @@ function assertIsUnionType(type) {
     throw new Error(`Expected an instance of GraphQLUnionType for type ${type.name}`);
   }
 }
+const isNodeField = (type) => {
+  if (G.isUnionType(type)) {
+    return type.getTypes().every((type2) => {
+      return type2.getInterfaces().find((intfc) => intfc.name === "Node");
+    });
+  } else if (G.isObjectType(type)) {
+    return !!type.getInterfaces().find((intfc) => intfc.name === "Node");
+  } else if (G.isInterfaceType(type)) {
+    if (type.name === "Node") {
+      return true;
+    }
+  } else {
+    throw new Error(`Expected GraphQLObjectType or GraphQLUnionType for isNodeField check`);
+  }
+};
+const isConnectionField = (type) => {
+  if (G.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.isUnionType(type)) {
+    throw new Error(`Expected type to be GraphQLUnionType`);
+  }
+}
+function ensureObjectType(type) {
+  if (!G.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.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.parse(query);
+  const visitor2 = {
+    OperationDefinition: (node2) => {
+      if (!node2.name) {
+        return __spreadProps(__spreadValues({}, node2), {
+          name: {
+            kind: "Name",
+            value: `QueryOperation`
+          }
+        });
+      }
+      return node2;
+    }
+  };
+  const documentNodeWithName = visit(documentNode, visitor2);
+  const optimizedQuery = await getOptimizedQuery(documentNodeWithName);
+  const typeInfo = new G.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.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.getNamedType(parentType);
+    const formifiedNode = __spreadProps(__spreadValues({}, fieldOrInlineFragmentNode), {
+      selectionSet: {
+        kind: "SelectionSet",
+        selections: [
+          ...fieldOrInlineFragmentNode.selectionSet.selections.map((selectionNode) => {
+            switch (selectionNode.kind) {
+              case "InlineFragment":
+                if (G.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.isObjectType(namedParentType)) {
+                    const field = getObjectField(namedParentType, selectionNode);
+                    const namedType = G.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.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.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.getNamedType(field.type);
+    if (G.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.isScalarType(G.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.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.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.getNamedType(parentType);
+                ensureObjectType(namedParentType);
+                const field = getObjectField(namedParentType, selectionNode);
+                const namedFieldType = G.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.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);
@@ -422,6 +852,14 @@ mutation addPendingDocumentMutation(
       }
       return this.schema;
     };
+    this.getOptimizedQuery = async (documentNode) => {
+      const data = await this.request(`query GetOptimizedQuery($queryString: String!) {
+        getOptimizedQuery(queryString: $queryString)
+      }`, {
+        variables: { queryString: print(documentNode) }
+      });
+      return parse(data.getOptimizedQuery);
+    };
     this.options = options;
     this.setBranch(options.branch);
     this.events.subscribe("branch:change", ({ branchName }) => {
@@ -481,9 +919,22 @@ 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$1), schema);
+    let formifiedQuery;
+    if (useUnstableFormify) {
+      const res = await formify({
+        schema,
+        query: print(query(gql$1)),
+        getOptimizedQuery: this.getOptimizedQuery
+      });
+      formifiedQuery = res.formifiedQuery;
+    } else {
+      formifiedQuery = formify$1(query(gql$1), schema);
+    }
     return this.request(print(formifiedQuery), { variables });
   }
   async request(query, { variables }) {
@@ -1012,7 +1463,8 @@ function useGraphqlForms({
     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 FormMetaPlugin({ name: "tina-admin-link" }));
       setData(payload);
@@ -1383,1420 +1835,104 @@ const useDocumentCreatorPlugin = (args) => {
     };
   }, [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;
+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,
+  data
+}) {
+  const {
+    setRequest,
+    state,
+    isDummyContainer,
+    isLoading: contextLoading
+  } = React.useContext(TinaDataContext);
+  const [waitForContextRerender, setWaitForContextRerender] = useState(!isDummyContainer);
+  const isLoading = contextLoading || waitForContextRerender;
+  React.useEffect(() => {
+    setRequest({ query, variables });
+  }, [JSON.stringify(variables), query]);
+  useEffect(() => {
+    if (!isDummyContainer) {
+      setTimeout(() => setWaitForContextRerender(false), 0);
+    }
+    return () => {
+      setRequest(void 0);
+    };
+  }, [isDummyContainer]);
+  return {
+    data: isDummyContainer || isLoading ? data : state.payload,
+    isLoading
+  };
 }
-
-/**
-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 .h-12 {
-	height: 48px !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 .flex-shrink-0 {
-	flex-shrink: 0 !important;
-}
-
-.tina-tailwind .flex-grow-0 {
-	flex-grow: 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 .cursor-pointer {
-	cursor: pointer !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-end {
-	justify-content: flex-end !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 .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 .pt-4 {
-	padding-top: 16px !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 .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 .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\\: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;
-}
-
-.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;
-}
-`;
-function useTina({
-  query,
-  variables,
-  data
-}) {
-  const {
-    setRequest,
-    state,
-    isDummyContainer,
-    isLoading: contextLoading
-  } = React.useContext(TinaDataContext);
-  const [waitForContextRerender, setWaitForContextRerender] = useState(!isDummyContainer);
-  const isLoading = contextLoading || waitForContextRerender;
-  React.useEffect(() => {
-    setRequest({ query, variables });
-  }, [JSON.stringify(variables), query]);
-  useEffect(() => {
-    if (!isDummyContainer) {
-      setTimeout(() => setWaitForContextRerender(false), 0);
-    }
-    return () => {
-      setRequest(void 0);
-    };
-  }, [isDummyContainer]);
-  return {
-    data: isDummyContainer || isLoading ? data : state.payload,
-    isLoading
-  };
-}
-const errorButtonStyles = {
-  background: "#eb6337",
-  padding: "12px 18px",
-  cursor: "pointer",
-  borderRadius: "50px",
-  textTransform: "uppercase",
-  letterSpacing: "2px",
-  fontWeight: "bold",
-  border: "none",
-  color: "white",
-  margin: "1rem 0"
-};
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasError: props.hasError,
-      message: "",
-      pageRefresh: false
-    };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true, message: error.message };
-  }
-  render() {
-    const branchData = window.localStorage && window.localStorage.getItem("tinacms-current-branch");
-    const hasBranchData = branchData && branchData.length > 0;
-    if (this.state.hasError && !this.state.pageRefresh) {
-      return /* @__PURE__ */ React.createElement("div", {
-        style: {
-          background: "#efefef",
-          height: "100vh",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        }
-      }, /* @__PURE__ */ React.createElement("style", null, "            body {              margin: 0;            }          "), /* @__PURE__ */ React.createElement("div", {
-        style: {
-          background: "#fff",
-          maxWidth: "400px",
-          padding: "20px",
-          fontFamily: "'Inter', sans-serif",
-          borderRadius: "5px",
-          boxShadow: "0 6px 24px rgb(0 37 91 / 5%), 0 2px 4px rgb(0 37 91 / 3%)"
-        }
-      }, /* @__PURE__ */ React.createElement("h3", {
-        style: { color: "#eb6337" }
-      }, "TinaCMS Render Error"), /* @__PURE__ */ React.createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React.createElement("pre", {
-        style: { marginTop: "1rem", overflowX: "auto" }
-      }, this.state.message), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React.createElement("button", {
-        style: errorButtonStyles,
-        onClick: () => {
-          this.setState({ pageRefresh: true });
-          setTimeout(() => this.setState({ hasError: false, pageRefresh: false }), 3e3);
-        }
-      }, "Refresh"), hasBranchData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React.createElement("button", {
-        style: errorButtonStyles,
-        onClick: () => {
-          window.localStorage.removeItem("tinacms-current-branch");
-          window.location.reload();
-        }
-      }, "Switch to default branch"))));
-    }
-    if (this.state.pageRefresh) {
-      return /* @__PURE__ */ React.createElement(Loader, null, "Let's try that again.");
-    }
-    return this.props.children;
-  }
+const errorButtonStyles = {
+  background: "#eb6337",
+  padding: "12px 18px",
+  cursor: "pointer",
+  borderRadius: "50px",
+  textTransform: "uppercase",
+  letterSpacing: "2px",
+  fontWeight: "bold",
+  border: "none",
+  color: "white",
+  margin: "1rem 0"
+};
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: props.hasError,
+      message: "",
+      pageRefresh: false
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, message: error.message };
+  }
+  render() {
+    const branchData = window.localStorage && window.localStorage.getItem("tinacms-current-branch");
+    const hasBranchData = branchData && branchData.length > 0;
+    if (this.state.hasError && !this.state.pageRefresh) {
+      return /* @__PURE__ */ React.createElement("div", {
+        style: {
+          background: "#efefef",
+          height: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      }, /* @__PURE__ */ React.createElement("style", null, "            body {              margin: 0;            }          "), /* @__PURE__ */ React.createElement("div", {
+        style: {
+          background: "#fff",
+          maxWidth: "400px",
+          padding: "20px",
+          fontFamily: "'Inter', sans-serif",
+          borderRadius: "5px",
+          boxShadow: "0 6px 24px rgb(0 37 91 / 5%), 0 2px 4px rgb(0 37 91 / 3%)"
+        }
+      }, /* @__PURE__ */ React.createElement("h3", {
+        style: { color: "#eb6337" }
+      }, "TinaCMS Render Error"), /* @__PURE__ */ React.createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React.createElement("pre", {
+        style: { marginTop: "1rem", overflowX: "auto" }
+      }, this.state.message), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React.createElement("button", {
+        style: errorButtonStyles,
+        onClick: () => {
+          this.setState({ pageRefresh: true });
+          setTimeout(() => this.setState({ hasError: false, pageRefresh: false }), 3e3);
+        }
+      }, "Refresh"), hasBranchData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React.createElement("button", {
+        style: errorButtonStyles,
+        onClick: () => {
+          window.localStorage.removeItem("tinacms-current-branch");
+          window.location.reload();
+        }
+      }, "Switch to default branch"))));
+    }
+    if (this.state.pageRefresh) {
+      return /* @__PURE__ */ React.createElement(Loader, null, "Let's try that again.");
+    }
+    return this.props.children;
+  }
 }
 const parseURL = (url) => {
   if (url.includes("localhost")) {
@@ -3107,10 +2243,10 @@ var __rest = function(s, e) {
   return t;
 };
 function Tree2Element(tree) {
-  return tree && tree.map(function(node, i) {
-    return React.createElement(node.tag, __assign({
+  return tree && tree.map(function(node2, i) {
+    return React.createElement(node2.tag, __assign({
       key: i
-    }, node.attr), Tree2Element(node.child));
+    }, node2.attr), Tree2Element(node2.child));
   });
 }
 function GenIcon(data) {
@@ -3154,16 +2290,24 @@ const useGetCollections = (cms) => {
   const api = new TinaAdminApi(cms);
   const [collections, setCollections] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(void 0);
   useEffect(() => {
     const fetchCollections = async () => {
-      const response = await api.fetchCollections();
-      setCollections(response.getCollections);
+      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 { collections, loading };
+  return { collections, loading, error };
 };
 const slugify = (text) => {
   return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
@@ -3444,16 +2588,24 @@ const useGetCollection = (cms, collectionName, includeDocuments = true) => {
   const api = new TinaAdminApi(cms);
   const [collection, setCollection] = useState(void 0);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(void 0);
   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, loading };
+  return { collection, loading, error };
 };
 const GetCollection = ({
   cms,
@@ -3461,9 +2613,14 @@ const GetCollection = ({
   includeDocuments = true,
   children
 }) => {
-  const { collection, loading } = useGetCollection(cms, collectionName, includeDocuments);
-  if (!collection || loading === true) {
-    return /* @__PURE__ */ React.createElement(LoadingPage, null);
+  const { collection, loading, error } = useGetCollection(cms, collectionName, includeDocuments);
+  if (!collection) {
+    if (loading) {
+      return /* @__PURE__ */ React.createElement(LoadingPage, null);
+    }
+    if (error) {
+      return null;
+    }
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading));
 };
@@ -3580,32 +2737,45 @@ const useGetDocumentFields = (cms, collectionName, templateName) => {
     mutationInfo: void 0
   });
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(void 0);
   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 __spreadProps(__spreadValues({}, info), { loading });
+  return __spreadProps(__spreadValues({}, info), { loading, error });
 };
 const GetDocumentFields = ({
   cms,
@@ -3613,9 +2783,14 @@ const GetDocumentFields = ({
   templateName,
   children
 }) => {
-  const { collection, template, fields, mutationInfo, loading } = useGetDocumentFields(cms, collectionName, templateName);
-  if (!collection || loading) {
-    return /* @__PURE__ */ React.createElement(LoadingPage, null);
+  const { collection, template, fields, mutationInfo, loading, error } = useGetDocumentFields(cms, collectionName, templateName);
+  if (!collection) {
+    if (loading) {
+      return /* @__PURE__ */ React.createElement(LoadingPage, null);
+    }
+    if (error) {
+      return null;
+    }
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ collection, template, fields, mutationInfo, loading }));
 };
@@ -3677,8 +2852,13 @@ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
         ...fields
       ],
       onSubmit: async (values) => {
-        await createDocument(cms, collection, template, mutationInfo, values);
-        navigate(`/collections/${collection.name}`);
+        try {
+          await createDocument(cms, collection, template, mutationInfo, values);
+          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]);
@@ -3708,16 +2888,24 @@ const useGetDocument = (cms, collectionName, relativePath) => {
   const api = new TinaAdminApi(cms);
   const [document, setDocument] = useState(void 0);
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(void 0);
   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, loading };
+  return { document, loading, error };
 };
 const GetDocument = ({
   cms,
@@ -3725,9 +2913,14 @@ const GetDocument = ({
   relativePath,
   children
 }) => {
-  const { document, loading } = useGetDocument(cms, collectionName, relativePath);
-  if (!document || loading) {
-    return /* @__PURE__ */ React.createElement(LoadingPage, null);
+  const { document, loading, error } = useGetDocument(cms, collectionName, relativePath);
+  if (!document) {
+    if (loading) {
+      return /* @__PURE__ */ React.createElement(LoadingPage, null);
+    }
+    if (error) {
+      return null;
+    }
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document, loading));
 };
@@ -3779,8 +2972,13 @@ const RenderForm = ({
       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);
+          navigate(`/collections/${collection.name}`);
+        } catch (error) {
+          cms.alerts.error(`[${error.name}] UpdateDocument failed: ${error.message}`, 30 * 1e3);
+          console.error(error);
+        }
       }
     });
   }, [cms, document, relativePath, collection, mutationInfo]);
@@ -3840,11 +3038,9 @@ const TinaAdmin = () => {
     return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(LoginPage, null));
   }
   return /* @__PURE__ */ React.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.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, {
-        basename: "/admin"
-      }, /* @__PURE__ */ React.createElement("div", {
+      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement("div", {
         className: "flex items-stretch h-screen overflow-hidden"
       }, /* @__PURE__ */ React.createElement(Sidebar, {
         cms
@@ -3870,9 +3066,7 @@ const TinaAdmin = () => {
         element: /* @__PURE__ */ React.createElement(DashboardPage, null)
       }))))));
     } else {
-      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, {
-        basename: "/admin"
-      }, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
+      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
         path: "logout",
         element: /* @__PURE__ */ React.createElement(LogoutPage, null)
       }), /* @__PURE__ */ React.createElement(Route, {
@@ -3889,4 +3083,10 @@ class RouteMappingPlugin {
     this.mapper = mapper;
   }
 }
-export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, TinaDataProvider, assertShape, createClient, TinaCMSProvider2 as default, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };
+const defineSchema = (config) => {
+  return config;
+};
+const defineConfig = (config) => {
+  return config;
+};
+export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, RouteMappingPlugin, TinaAdmin, TinaAdminApi, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, TinaDataProvider, assertShape, createClient, TinaCMSProvider2 as default, defineConfig, defineSchema, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };