tinacms 0.56.0 → 0.57.0

package/dist/index.es.js

@@ -32,12 +32,14 @@ var __objRest = (source, exclude) => {
 import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType, getIntrospectionQuery, buildClientSchema, print } from "graphql";
 import set from "lodash.set";
 import gql$1 from "graphql-tag";
-import { EventBus, StyleReset, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, TinaCMS, BranchSwitcherPlugin, TinaProvider, useCMS, Form, GlobalFormPlugin } from "@tinacms/toolkit";
+import { EventBus, StyleReset, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, TinaCMS, BranchSwitcherPlugin, TinaProvider, useCMS, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 import React, { useState, useCallback, useEffect } from "react";
 import styled from "styled-components";
 import * as yup from "yup";
 import { getIn, setIn } from "final-form";
+import { useLocation, useParams, Link, useHistory, BrowserRouter, NavLink, Switch, 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;
   const x = window2.top.outerWidth / 2 + window2.top.screenX - w / 2;
@@ -776,7 +778,9 @@ const TinaCloudProvider = (props) => {
     }
     return () => {
       if (!branchingEnabled) {
-        cms.plugins.remove(branchSwitcher);
+        if (branchSwitcher) {
+          cms.plugins.remove(branchSwitcher);
+        }
       }
     };
   }, [branchingEnabled, props.branch]);
@@ -803,6 +807,7 @@ function useGraphqlForms({
   const [pendingReset, setPendingReset] = React.useState(null);
   const [isLoading, setIsLoading] = React.useState(true);
   const [newUpdate, setNewUpdate] = React.useState(null);
+  React.useState([]);
   const updateData = async () => {
     var _a;
     if (newUpdate) {
@@ -979,8 +984,8 @@ function useGraphqlForms({
   }, [queryString, JSON.stringify(variables)]);
   return [data, isLoading];
 }
-const transformDocumentIntoMutationRequestPayload = (document, instructions) => {
-  const _a = document, { _collection, __typename, _template } = _a, rest = __objRest(_a, ["_collection", "__typename", "_template"]);
+const transformDocumentIntoMutationRequestPayload = (document2, instructions) => {
+  const _a = document2, { _collection, __typename, _template } = _a, rest = __objRest(_a, ["_collection", "__typename", "_template"]);
   const params = transformParams(rest);
   const paramsWithTemplate = instructions.includeTemplate ? { [_template]: params } : params;
   return instructions.includeCollection ? { [_collection]: paramsWithTemplate } : paramsWithTemplate;
@@ -998,11 +1003,18 @@ const transformParams = (data) => {
     const nested = transformParams(rest);
     return { [_template]: nested };
   } catch (e) {
-    const accum = {};
-    Object.entries(data).map(([keyName, value]) => {
-      accum[keyName] = transformParams(value);
-    });
-    return accum;
+    if (e.message === "Failed to assertShape - _template is a required field") {
+      const accum = {};
+      Object.entries(data).map(([keyName, value]) => {
+        accum[keyName] = transformParams(value);
+      });
+      return accum;
+    } else {
+      if (!data) {
+        return [];
+      }
+      throw e;
+    }
   }
 };
 const getFieldUpdate = (newUpdate, activeForm, formValues) => {
@@ -1175,9 +1187,9 @@ const useDocumentCreatorPlugin = (args) => {
                 }
                 return true;
               }
-              const isValid = /^[_a-zA-Z][_a-zA-Z0-9]*$/.test(value);
+              const isValid = /^[_a-zA-Z][-,_a-zA-Z0-9]*$/.test(value);
               if (value && !isValid) {
-                return "Must begin with a-z, A-Z, or _ and contain only a-z, A-Z, 0-9, or _";
+                return "Must begin with a-z, A-Z, or _ and contain only a-z, A-Z, 0-9, - or _";
               }
             }
           }
@@ -1310,72 +1322,99 @@ const Loader = (props) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     style: {
       position: "fixed",
-      background: "white",
+      background: "rgba(0, 0, 0, 0.5)",
       inset: 0,
       zIndex: 200,
       opacity: "0.8",
       display: "flex",
       alignItems: "center",
-      justifyContent: "center"
+      justifyContent: "center",
+      padding: "40px"
     }
   }, /* @__PURE__ */ React.createElement("div", {
     style: {
+      background: "#f6f6f9",
+      boxShadow: "0px 2px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.1)",
+      borderRadius: "5px",
+      padding: "40px 32px",
+      width: "460px",
+      maxWidth: "90%",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       flexDirection: "column"
     }
   }, /* @__PURE__ */ React.createElement("svg", {
-    style: { width: "100px" },
+    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 100",
+    viewBox: "0 0 100 64",
     enableBackground: "new 0 0 0 0",
     xmlSpace: "preserve"
   }, /* @__PURE__ */ React.createElement("circle", {
     fill: "currentColor",
     stroke: "none",
     cx: 6,
-    cy: 50,
+    cy: 32,
     r: 6
   }, /* @__PURE__ */ React.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.createElement("circle", {
     fill: "currentColor",
     stroke: "none",
     cx: 30,
-    cy: 50,
+    cy: 32,
     r: 6
   }, /* @__PURE__ */ React.createElement("animateTransform", {
     attributeName: "transform",
     dur: "1s",
     type: "translate",
-    values: "0 10 ; 0 -10; 0 10",
+    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.createElement("circle", {
     fill: "currentColor",
     stroke: "none",
     cx: 54,
-    cy: 50,
+    cy: 32,
     r: 6
   }, /* @__PURE__ */ React.createElement("animateTransform", {
     attributeName: "transform",
     dur: "1s",
     type: "translate",
-    values: "0 5 ; 0 -5; 0 5",
+    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.createElement("p", null, "Wait a bit, Tina is loading data..."))), props.children);
+  }))), /* @__PURE__ */ React.createElement("p", {
+    style: {
+      fontSize: "18px",
+      color: "#252336",
+      textAlign: "center",
+      lineHeight: "1.3",
+      fontFamily: "'Inter', sans-serif",
+      fontWeight: "normal"
+    }
+  }, "Please wait, Tina is loading data..."))), props.children);
 };
 const getStaticPropsForTina = async ({
   query,
@@ -1418,4 +1457,581 @@ This will work when developing locally but NOT when deployed to production.
 function gql(strings) {
   return strings[0];
 }
-export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, assertShape, createClient, TinaCMSProvider2 as default, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = React.createContext && React.createContext(DefaultContext);
+var __assign = function() {
+  __assign = Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p))
+          t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = function(s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+function Tree2Element(tree) {
+  return tree && tree.map(function(node, i) {
+    return React.createElement(node.tag, __assign({
+      key: i
+    }, node.attr), Tree2Element(node.child));
+  });
+}
+function GenIcon(data) {
+  return function(props) {
+    return React.createElement(IconBase, __assign({
+      attr: __assign({}, data.attr)
+    }, props), Tree2Element(data.child));
+  };
+}
+function IconBase(props) {
+  var elem = function(conf) {
+    var attr = props.attr, size = props.size, title = props.title, svgProps = __rest(props, ["attr", "size", "title"]);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className)
+      className = conf.className;
+    if (props.className)
+      className = (className ? className + " " : "") + props.className;
+    return React.createElement("svg", __assign({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className,
+      style: __assign(__assign({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && React.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? React.createElement(IconContext.Consumer, null, function(conf) {
+    return elem(conf);
+  }) : elem(DefaultContext);
+}
+function ImFilesEmpty(props) {
+  return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M14.341 5.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.689 0.561 1.25 1.25 1.25h9.5c0.689 0 1.25-0.561 1.25-1.25v-7.75c0-0.224-0.068-0.615-0.659-1.421zM12.271 4.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-9.5c-0.136 0-0.25-0.114-0.25-0.25v-11.5c0-0.135 0.114-0.25 0.25-0.25 0 0 5.749-0 5.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v7.75z" } }, { "tag": "path", "attr": { "d": "M9.421 0.659c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.604 0.43 1.109 1 1.225v-12.725c0-0.135 0.115-0.25 0.25-0.25h7.607c-0.151-0.124-0.297-0.238-0.437-0.341z" } }] })(props);
+}
+function VscOpenPreview(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M3 1h11l1 1v5.3a3.21 3.21 0 0 0-1-.3V2H9v10.88L7.88 14H3l-1-1V2l1-1zm0 12h5V2H3v11zm10.379-4.998a2.53 2.53 0 0 0-1.19.348h-.03a2.51 2.51 0 0 0-.799 3.53L9 14.23l.71.71 2.35-2.36c.325.22.7.358 1.09.4a2.47 2.47 0 0 0 1.14-.13 2.51 2.51 0 0 0 1-.63 2.46 2.46 0 0 0 .58-1 2.63 2.63 0 0 0 .07-1.15 2.53 2.53 0 0 0-1.35-1.81 2.53 2.53 0 0 0-1.211-.258zm.24 3.992a1.5 1.5 0 0 1-.979-.244 1.55 1.55 0 0 1-.56-.68 1.49 1.49 0 0 1-.08-.86 1.49 1.49 0 0 1 1.18-1.18 1.49 1.49 0 0 1 .86.08c.276.117.512.311.68.56a1.5 1.5 0 0 1-1.1 2.324z" } }] })(props);
+}
+const Layout = ({ children }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    style: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      overflow: "auto",
+      background: "#F6F6F9",
+      zIndex: 9999
+    }
+  }, children);
+};
+const GetCMS = ({ children }) => {
+  try {
+    const cms = useCMS();
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children(cms));
+  } catch (e) {
+    return null;
+  }
+};
+const useGetCollections = (cms) => {
+  const [collections, setCollections] = useState([]);
+  useEffect(() => {
+    const fetchCollections = async () => {
+      const response = await cms.api.tina.request(`query{ getCollections { label, name } }`, {});
+      setCollections(response.getCollections);
+    };
+    fetchCollections();
+  }, [cms]);
+  return collections;
+};
+const GetCollections = ({ cms, children }) => {
+  const collections = useGetCollections(cms);
+  if (!collections)
+    return null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collections));
+};
+function BiEdit(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" } }, { "tag": "path", "attr": { "d": "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" } }] })(props);
+}
+function BiExit(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.002 3h-14c-1.103 0-2 .897-2 2v4h2V5h14v14h-14v-4h-2v4c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.898-2-2-2z" } }, { "tag": "path", "attr": { "d": "m11 16 5-4-5-4v3.001H3v2h8z" } }] })(props);
+}
+function BiLogIn(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
+}
+function MdOutlineArrowBack(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
+}
+const login = () => {
+  setEditing(true);
+  window.location.reload();
+};
+const LoginPage = () => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "h-screen w-full bg-gradient-to-b from-blue-900 to-gray-900 flex items-center justify-center px-4 py-6"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "bg-white rounded-lg overflow-hidden shadow-lg w-full max-w-md"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "px-5 py-4 border-b border-gray-150"
+  }, /* @__PURE__ */ React.createElement("h2", {
+    className: "text-2xl tracking-wide text-gray-700 flex items-center gap-0.5"
+  }, /* @__PURE__ */ React.createElement("svg", {
+    viewBox: "0 0 32 32",
+    fill: "#EC4815",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "w-10 h-auto"
+  }, /* @__PURE__ */ React.createElement("path", {
+    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.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.createElement("span", null, "Tina Admin"))), /* @__PURE__ */ React.createElement("div", {
+    className: "px-5 py-4 "
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "text-base font-sans leading-normal"
+  }, "Please log in to Tina Cloud to access your admin dashboard.")), /* @__PURE__ */ React.createElement("div", {
+    className: "px-5 py-4 flex gap-4 w-full justify-between"
+  }, /* @__PURE__ */ React.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"
+  }, /* @__PURE__ */ React.createElement(MdOutlineArrowBack, {
+    className: "w-6 h-auto mr-1.5 opacity-80"
+  }), " Back to site"), /* @__PURE__ */ React.createElement("button", {
+    type: "submit",
+    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" }
+  }, /* @__PURE__ */ React.createElement(BiLogIn, {
+    className: "w-6 h-auto mr-1.5 opacity-80"
+  }), " Log in"))));
+};
+const DashboardPage = () => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "h-screen overflow-y-auto flex flex-col justify-start items-stretch"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex-0 px-6 pt-16 pb-10 w-full flex justify-center bg-white border-b border-gray-150"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "max-w-screen-md w-full"
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: "text-4xl"
+  }, "Welcome to Tina CMS."))), /* @__PURE__ */ React.createElement("div", {
+    className: "w-full px-6 py-10 flex justify-center"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "max-w-screen-md w-full"
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "text-gray-700 text-lg"
+  }, "This is your dashboard for editing or creating content. Select a collection on the left to begin."))));
+};
+const useGetCollection = (cms, collectionName, includeDocuments = true) => {
+  const [collection, setCollection] = useState(void 0);
+  useEffect(() => {
+    const fetchCollection = async () => {
+      const response = await cms.api.tina.request(`
+          query($collection: String!, $includeDocuments: Boolean!){
+            getCollection(collection: $collection){
+              name
+              label
+              format
+              documents @include(if: $includeDocuments) {
+                totalCount
+                edges {
+                  node {
+                    ... on Document {
+                      sys {
+                        breadcrumbs
+                        path
+                        basename
+                        relativePath
+                        filename
+                        extension
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }`, { variables: { collection: collectionName, includeDocuments } });
+      setCollection(response.getCollection);
+    };
+    fetchCollection();
+  }, [cms, collectionName]);
+  return collection;
+};
+const GetCollection = ({
+  cms,
+  collectionName,
+  includeDocuments = true,
+  children
+}) => {
+  const collection = useGetCollection(cms, collectionName, includeDocuments);
+  if (!collection) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection));
+};
+const CollectionListPage = () => {
+  const location = useLocation();
+  const { collectionName } = useParams();
+  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetCollection, {
+    cms,
+    collectionName,
+    includeDocuments: true
+  }, (collection) => {
+    const totalCount = collection.documents.totalCount;
+    const documents = collection.documents.edges;
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "px-6 py-14 h-screen overflow-y-auto flex justify-center"
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: "max-w-screen-md w-full"
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: "w-full flex justify-between items-end"
+    }, /* @__PURE__ */ React.createElement("h3", {
+      className: "text-3xl"
+    }, collection.label), /* @__PURE__ */ React.createElement(Link, {
+      to: `${location.pathname}/new`,
+      className: "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" }
+    }, "Create New")), totalCount > 0 && /* @__PURE__ */ React.createElement("div", {
+      className: "mt-8 shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
+    }, /* @__PURE__ */ React.createElement("table", {
+      className: "min-w-full"
+    }, /* @__PURE__ */ React.createElement("tbody", {
+      className: "bg-white divide-y divide-gray-150"
+    }, documents.map((document2) => /* @__PURE__ */ React.createElement("tr", {
+      key: document2.node.sys.relativePath
+    }, /* @__PURE__ */ React.createElement("td", {
+      className: "px-6 py-2 whitespace-nowrap"
+    }, /* @__PURE__ */ React.createElement(Link, {
+      to: `${location.pathname}/${document2.node.sys.filename}`,
+      className: "text-blue-600 hover:text-blue-400 flex items-center gap-3"
+    }, /* @__PURE__ */ React.createElement(BiEdit, {
+      className: "inline-block h-6 w-auto opacity-70"
+    }), " ", /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", {
+      className: "block text-xs text-gray-400 mb-1 uppercase"
+    }, "Filename"), /* @__PURE__ */ React.createElement("span", {
+      className: "h-5 leading-5 block whitespace-nowrap"
+    }, document2.node.sys.filename)))), /* @__PURE__ */ React.createElement("td", {
+      className: "px-6 py-4 whitespace-nowrap"
+    }, /* @__PURE__ */ React.createElement("span", {
+      className: "block text-xs text-gray-400 mb-1 uppercase"
+    }, "Extension"), /* @__PURE__ */ React.createElement("span", {
+      className: "h-5 leading-5 block text-sm font-medium text-gray-900"
+    }, document2.node.sys.extension)))))))));
+  }));
+};
+const useGetDocumentFields = (cms, collectionName) => {
+  const [info, setInfo] = useState({
+    collection: void 0,
+    fields: void 0,
+    mutationInfo: void 0
+  });
+  useEffect(() => {
+    const fetchDocumentFields = async () => {
+      const response = await cms.api.tina.request(`query { getDocumentFields }`, {});
+      const documentFields = response.getDocumentFields;
+      const collection = documentFields[collectionName].collection;
+      const fields = documentFields[collectionName].fields;
+      const mutationInfo = documentFields[collectionName].mutationInfo;
+      setInfo({
+        collection,
+        fields,
+        mutationInfo
+      });
+    };
+    fetchDocumentFields();
+  }, [cms, collectionName]);
+  return info;
+};
+const GetDocumentFields = ({
+  cms,
+  collectionName,
+  children
+}) => {
+  const { collection, fields, mutationInfo } = useGetDocumentFields(cms, collectionName);
+  if (!collection || !fields || !mutationInfo) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, fields, mutationInfo));
+};
+const createDocument = async (cms, collection, mutationInfo, values) => {
+  const _a = values, { relativePath } = _a, leftover = __objRest(_a, ["relativePath"]);
+  const { includeCollection, includeTemplate } = mutationInfo;
+  const params = transformDocumentIntoMutationRequestPayload(__spreadValues({
+    _collection: collection.name
+  }, leftover), {
+    includeCollection,
+    includeTemplate
+  });
+  await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+      createDocument(
+        collection: $collection, 
+        relativePath: $relativePath, 
+        params: $params
+      ){__typename}
+    }`, {
+    variables: {
+      collection: collection.name,
+      relativePath,
+      params
+    }
+  });
+};
+const CollectionCreatePage = () => {
+  const { collectionName } = useParams();
+  const history = useHistory();
+  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetDocumentFields, {
+    cms,
+    collectionName
+  }, (collection, fields, mutationInfo) => {
+    const form = new Form({
+      id: "create-form",
+      label: "form",
+      fields: [
+        {
+          name: "relativePath",
+          label: "Relative Path",
+          component: "text",
+          required: true,
+          defaultValue: `${collection.name}${Date.now()}.${collection.format}`
+        },
+        ...fields
+      ],
+      onSubmit: async (values) => {
+        await createDocument(cms, collection, mutationInfo, values);
+        history.push(`/admin/collections/${collection.name}`);
+      }
+    });
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "w-full h-screen"
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: "flex flex-col items-center w-full flex-1"
+    }, /* @__PURE__ */ React.createElement(FullscreenFormBuilder, {
+      label: collection.label + " - Create New",
+      form
+    })));
+  }));
+};
+const useGetDocument = (cms, collectionName, relativePath) => {
+  const [document2, setDocument] = useState(void 0);
+  useEffect(() => {
+    const fetchDocument = async () => {
+      const response = await cms.api.tina.request(`
+        query($collection: String!, $relativePath: String!) {
+          getDocument(collection:$collection, relativePath:$relativePath) {
+            ... on Document {
+              form
+              values
+            }
+          }
+        }`, { variables: { collection: collectionName, relativePath } });
+      setDocument(response.getDocument);
+    };
+    fetchDocument();
+  }, [cms, collectionName, relativePath]);
+  return document2;
+};
+const GetDocument = ({
+  cms,
+  collectionName,
+  relativePath,
+  children
+}) => {
+  const document2 = useGetDocument(cms, collectionName, relativePath);
+  if (!document2) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document2));
+};
+const updateDocument = async (cms, collection, document2, relativePath, values) => {
+  const { includeCollection, includeTemplate } = document2.form.mutationInfo;
+  const params = transformDocumentIntoMutationRequestPayload(values, {
+    includeCollection,
+    includeTemplate
+  });
+  await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+      updateDocument(
+        collection: $collection, 
+        relativePath: $relativePath, 
+        params: $params
+      ){__typename}
+    }`, {
+    variables: {
+      collection: collection.name,
+      relativePath,
+      params
+    }
+  });
+};
+const CollectionUpdatePage = () => {
+  const { collectionName, filename } = useParams();
+  const history = useHistory();
+  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetCollection, {
+    cms,
+    collectionName,
+    includeDocuments: false
+  }, (collection) => {
+    const relativePath = `${filename}.${collection.format}`;
+    return /* @__PURE__ */ React.createElement(GetDocument, {
+      cms,
+      collectionName: collection.name,
+      relativePath
+    }, (document2) => {
+      const form = new Form({
+        id: "update-form",
+        label: "form",
+        fields: document2.form.fields,
+        initialValues: document2.values,
+        onSubmit: async (values) => {
+          await updateDocument(cms, collection, document2, relativePath, values);
+          history.push(`/admin/collections/${collection.name}`);
+        }
+      });
+      return /* @__PURE__ */ React.createElement("div", {
+        className: "w-full h-screen"
+      }, /* @__PURE__ */ React.createElement("div", {
+        className: "flex flex-col items-center w-full flex-1"
+      }, /* @__PURE__ */ React.createElement(FullscreenFormBuilder, {
+        label: collection.label + ` - ` + filename,
+        form
+      })));
+    });
+  }));
+};
+const useEmbedTailwind = () => {
+  useEffect(() => {
+    const isSSR2 = typeof window === "undefined";
+    if (!isSSR2) {
+      const head = document.head;
+      const link = document.createElement("link");
+      link.id = "tina-admin-stylesheet";
+      link.type = "text/css";
+      link.rel = "stylesheet";
+      link.href = "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css";
+      head.appendChild(link);
+    }
+  }, []);
+};
+const logout = () => {
+  setEditing(false);
+  window.location.reload();
+};
+const TinaAdmin = () => {
+  useEmbedTailwind();
+  const isSSR2 = typeof window === "undefined";
+  if (isSSR2) {
+    return null;
+  }
+  const isEdit = isEditing();
+  if (!isEdit) {
+    return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(LoginPage, null));
+  }
+  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetCollections, {
+    cms
+  }, (collections) => /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(BrowserRouter, null, /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-stretch h-screen overflow-hidden"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col w-80 lg:w-96 flex-shrink-0 bg-gradient-to-b from-white to-gray-50 border-r border-gray-200"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "border-b border-gray-200"
+  }, /* @__PURE__ */ React.createElement(Menu, {
+    as: "div",
+    className: "relative block"
+  }, ({ open }) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Menu.Button, {
+    className: `group w-full px-6 py-4 flex justify-between items-center transition-colors duration-150 ease-out ${open ? `bg-gray-50` : `bg-transparent`}`
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "text-left inline-flex items-center text-2xl tracking-wide text-gray-800 flex-1 gap-1 opacity-80 group-hover:opacity-100 transition-opacity duration-150 ease-out"
+  }, /* @__PURE__ */ React.createElement("svg", {
+    viewBox: "0 0 32 32",
+    fill: "#EC4815",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "w-10 h-auto -ml-1"
+  }, /* @__PURE__ */ React.createElement("path", {
+    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.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.createElement("span", null, "Tina Admin")), /* @__PURE__ */ React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: `flex-0 inline-block opacity-50 group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open ? `rotate-90 opacity-100` : `rotate-0`}`
+  }, /* @__PURE__ */ React.createElement("g", {
+    opacity: "0.3"
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M7.91675 13.8086L9.16675 15.0586L14.2253 10L9.16675 4.9414L7.91675 6.1914L11.7253 10L7.91675 13.8086Z",
+    fill: "currentColor"
+  })))), /* @__PURE__ */ React.createElement("div", {
+    className: "transform translate-y-full absolute bottom-3 right-5 w-2/3 z-50"
+  }, /* @__PURE__ */ React.createElement(Transition, {
+    enter: "transition duration-150 ease-out",
+    enterFrom: "transform opacity-0 -translate-y-2",
+    enterTo: "transform opacity-100 translate-y-0",
+    leave: "transition duration-75 ease-in",
+    leaveFrom: "transform opacity-100 translate-y-0",
+    leaveTo: "transform opacity-0 -translate-y-2"
+  }, /* @__PURE__ */ React.createElement(Menu.Items, {
+    className: "w-full py-1 bg-white border border-gray-150 rounded-lg shadow-lg"
+  }, /* @__PURE__ */ React.createElement(Menu.Item, null, ({ active }) => /* @__PURE__ */ React.createElement("a", {
+    className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
+    href: "/"
+  }, /* @__PURE__ */ React.createElement(VscOpenPreview, {
+    className: "w-6 h-auto mr-1.5 text-blue-400"
+  }), " ", "View Website")), /* @__PURE__ */ React.createElement(Menu.Item, null, ({ active }) => /* @__PURE__ */ React.createElement("button", {
+    className: `w-full text-lg px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`,
+    onClick: () => logout()
+  }, /* @__PURE__ */ React.createElement(BiExit, {
+    className: "w-6 h-auto mr-1.5 text-blue-400"
+  }), " ", "Log out")))))))), /* @__PURE__ */ React.createElement("div", {
+    className: "px-6 py-7 flex-1"
+  }, /* @__PURE__ */ React.createElement("h4", {
+    className: "uppercase font-bold text-sm mb-3"
+  }, "Collections"), /* @__PURE__ */ React.createElement("ul", {
+    className: "flex flex-col gap-4"
+  }, collections.map((collection) => {
+    return /* @__PURE__ */ React.createElement("li", {
+      key: `${collection.name}-link`
+    }, /* @__PURE__ */ React.createElement(NavLink, {
+      className: `text-lg tracking-wide hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`,
+      activeClassName: "text-blue-600",
+      to: `/admin/collections/${collection.name}`
+    }, /* @__PURE__ */ React.createElement(ImFilesEmpty, {
+      className: "mr-2 h-6 opacity-80 w-auto"
+    }), " ", collection.label));
+  })))), /* @__PURE__ */ React.createElement("div", {
+    className: "flex-1"
+  }, /* @__PURE__ */ React.createElement(Switch, null, /* @__PURE__ */ React.createElement(Route, {
+    path: `/admin/collections/:collectionName/new`
+  }, /* @__PURE__ */ React.createElement(CollectionCreatePage, null)), /* @__PURE__ */ React.createElement(Route, {
+    path: `/admin/collections/:collectionName/:filename`
+  }, /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)), /* @__PURE__ */ React.createElement(Route, {
+    path: `/admin/collections/:collectionName`
+  }, /* @__PURE__ */ React.createElement(CollectionListPage, null)), /* @__PURE__ */ React.createElement(Route, {
+    path: `/admin`
+  }, /* @__PURE__ */ React.createElement(DashboardPage, null)))))))));
+};
+export { AuthWallInner, Client, DEFAULT_LOCAL_TINA_GQL_SERVER_URL, LocalClient, TinaAdmin, TinaCMSProvider2, TinaCloudAuthWall, TinaCloudProvider, assertShape, createClient, TinaCMSProvider2 as default, getStaticPropsForTina, gql, safeAssertShape, staticRequest, useDocumentCreatorPlugin, useGraphqlForms, useTinaAuthRedirect };