tinacms 0.61.1 → 0.64.1

package/dist/index.js

@@ -30,8 +30,8 @@ var __objRest = (source, exclude) => {
   return target;
 };
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("graphql-tag"), require("react"), require("styled-components"), require("yup"), require("@tinacms/sharedctx"), require("final-form"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "graphql-tag", "react", "styled-components", "yup", "@tinacms/sharedctx", "final-form", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, toolkit, graphql, set, gql$1, React, styled, yup, sharedctx, finalForm, reactRouterDom, react) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("graphql-tag"), require("react"), require("styled-components"), require("yup"), require("@tinacms/sharedctx"), require("final-form"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "graphql-tag", "react", "styled-components", "yup", "@tinacms/sharedctx", "final-form", "url-pattern", "react-router-dom", "@headlessui/react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, toolkit, graphql, set, gql$1, React, styled, yup, sharedctx, finalForm, UrlPattern, reactRouterDom, react) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -61,6 +61,7 @@ var __objRest = (source, exclude) => {
   var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
   var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
   var yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
+  var UrlPattern__default = /* @__PURE__ */ _interopDefaultLegacy(UrlPattern);
   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;
@@ -394,6 +395,11 @@ var __objRest = (source, exclude) => {
       throw new Error(`Expected an instance of GraphQLUnionType for type ${type.name}`);
     }
   }
+  const captureBranchName = /^refs\/heads\/(.*)/;
+  const parseRefForBranchName = (ref) => {
+    const matches = ref.match(captureBranchName);
+    return matches[1];
+  };
   class Client {
     constructor(_a) {
       var _b = _a, { tokenStorage = "MEMORY" } = _b, options = __objRest(_b, ["tokenStorage"]);
@@ -484,6 +490,9 @@ mutation addPendingDocumentMutation(
           break;
       }
     }
+    get isLocalMode() {
+      return this.contentApiUrl.includes("localhost");
+    }
     setBranch(branchName) {
       var _a, _b, _c;
       const encodedBranch = encodeURIComponent(branchName);
@@ -611,15 +620,15 @@ mutation addPendingDocumentMutation(
       try {
         const res = await this.fetchWithToken(url, {
           method: "POST",
-          body: {
+          body: JSON.stringify({
             baseBranch,
             branchName
-          },
+          }),
           headers: {
             "Content-Type": "application/json"
           }
         });
-        return JSON.stringify(res);
+        return await res.json().then((r) => parseRefForBranchName(r.data.ref));
       } catch (error) {
         console.error("There was an error creating a new branch.", error);
         return null;
@@ -644,11 +653,11 @@ mutation addPendingDocumentMutation(
     }
   }
   function ModalBuilder(modalProps) {
-    return /* @__PURE__ */ React__default["default"].createElement(toolkit.StyleReset, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.Modal, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalPopup, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalHeader, null, modalProps.title), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalBody, {
+    return /* @__PURE__ */ React__default["default"].createElement(toolkit.Modal, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalPopup, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalHeader, null, modalProps.title), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalBody, {
       padded: true
     }, /* @__PURE__ */ React__default["default"].createElement("p", null, modalProps.message), modalProps.error && /* @__PURE__ */ React__default["default"].createElement(ErrorLabel, null, modalProps.error)), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React__default["default"].createElement(AsyncButton, __spreadValues({
       key: action.name
-    }, action)))))));
+    }, action))))));
   }
   const ErrorLabel = styled__default["default"].p`
   color: var(--tina-color-error) !important;
@@ -1029,24 +1038,10 @@ mutation addPendingDocumentMutation(
               name: "tina-admin-link",
               Component: () => /* @__PURE__ */ React__default["default"].createElement("a", {
                 href: `/admin/collections/${result._internalSys.collection.name}/${result._internalSys.filename}`,
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  padding: "10px 20px",
-                  borderTop: "1px solid var(--tina-color-grey-2)",
-                  textTransform: "uppercase",
-                  fontSize: "11px",
-                  fontWeight: 500,
-                  background: "var(--tina-color-grey-0)"
-                }
+                className: "flex items-center px-5 py-2 border-t border-b shadow border-gray-100 uppercase text-xs font-medium bg-white hover:bg-gray-50 hover:text-blue-500 transition-colors duration-100 ease-out"
               }, /* @__PURE__ */ React__default["default"].createElement(BiLinkExternal, {
-                style: {
-                  height: "1.25em",
-                  width: "auto",
-                  opacity: "0.8",
-                  marginRight: "8px"
-                }
-              }), " ", "Edit in Tina Admin")
+                className: "h-4 w-auto opacity-80 mr-2"
+              }), " Edit in Tina Admin")
             });
             cms.plugins.add(TinaAdminLink);
           }
@@ -1174,8 +1169,8 @@ mutation addPendingDocumentMutation(
     }, [queryString, JSON.stringify(variables), currentBranch]);
     return [data, isLoading];
   }
-  const transformDocumentIntoMutationRequestPayload = (document2, instructions) => {
-    const _a = document2, { _collection, __typename, _template } = _a, rest = __objRest(_a, ["_collection", "__typename", "_template"]);
+  const transformDocumentIntoMutationRequestPayload = (document, instructions) => {
+    const _a = document, { _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;
@@ -1390,7 +1385,7 @@ mutation addPendingDocumentMutation(
         }));
       };
       run();
-    }, [cms, values == null ? void 0 : values.collection]);
+    }, [cms]);
     React__default["default"].useEffect(() => {
       if (plugin) {
         cms.plugins.add(plugin);
@@ -1402,6 +1397,19 @@ mutation addPendingDocumentMutation(
       };
     }, [plugin]);
   };
+  var styles = ".tina-tailwind {\n\n  /* gray-600 from tailwind config */\n}\n\n/**\nUse a better box model (opinionated).\n*/\n\n.tina-tailwind *,\n.tina-tailwind ::before,\n.tina-tailwind ::after {\n	box-sizing: border-box;\n}\n\n/**\nUse a more readable tab size (opinionated).\n*/\n\n.tina-tailwind html {\n	-moz-tab-size: 4;\n	tab-size: 4;\n}\n\n/**\n1. Correct the line height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n*/\n\n.tina-tailwind html {\n	line-height: 1.15; /* 1 */\n	-webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/**\nRemove the margin in all browsers.\n*/\n\n.tina-tailwind body {\n	margin: 0;\n}\n\n/**\nImprove consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n*/\n\n.tina-tailwind body {\n	font-family:\n		system-ui,\n		-apple-system, /* Firefox supports this but not yet `system-ui` */\n		'Segoe UI',\n		Roboto,\n		Helvetica,\n		Arial,\n		sans-serif,\n		'Apple Color Emoji',\n		'Segoe UI Emoji';\n}\n\n/**\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n*/\n\n.tina-tailwind hr {\n	height: 0; /* 1 */\n	color: inherit; /* 2 */\n}\n\n/**\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\n.tina-tailwind abbr[title] {\n	text-decoration: underline dotted;\n}\n\n/**\nAdd the correct font weight in Edge and Safari.\n*/\n\n.tina-tailwind b,\n.tina-tailwind strong {\n	font-weight: bolder;\n}\n\n/**\n1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)\n2. Correct the odd 'em' font sizing in all browsers.\n*/\n\n.tina-tailwind code,\n.tina-tailwind kbd,\n.tina-tailwind samp,\n.tina-tailwind pre {\n	font-family:\n		ui-monospace,\n		SFMono-Regular,\n		Consolas,\n		'Liberation Mono',\n		Menlo,\n		monospace; /* 1 */\n	font-size: 1em; /* 2 */\n}\n\n/**\nAdd the correct font size in all browsers.\n*/\n\n.tina-tailwind small {\n	font-size: 80%;\n}\n\n/**\nPrevent 'sub' and 'sup' elements from affecting the line height in all browsers.\n*/\n\n.tina-tailwind sub,\n.tina-tailwind sup {\n	font-size: 75%;\n	line-height: 0;\n	position: relative;\n	vertical-align: baseline;\n}\n\n/*\nText-level semantics\n====================\n*/\n\n.tina-tailwind sub {\n	bottom: -0.25em;\n}\n\n/*\nGrouping content\n================\n*/\n\n.tina-tailwind sup {\n	top: -0.5em;\n}\n\n/**\n1. 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)\n2. 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)\n*/\n\n.tina-tailwind table {\n	text-indent: 0; /* 1 */\n	border-color: inherit; /* 2 */\n}\n\n/**\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n*/\n\n.tina-tailwind button,\n.tina-tailwind input,\n.tina-tailwind optgroup,\n.tina-tailwind select,\n.tina-tailwind textarea {\n	font-family: inherit; /* 1 */\n	font-size: 100%; /* 1 */\n	line-height: 1.15; /* 1 */\n	margin: 0; /* 2 */\n}\n\n/**\nRemove the inheritance of text transform in Edge and Firefox.\n1. Remove the inheritance of text transform in Firefox.\n*/\n\n.tina-tailwind button,\n.tina-tailwind select { /* 1 */\n	text-transform: none;\n}\n\n/**\nCorrect the inability to style clickable types in iOS and Safari.\n*/\n\n.tina-tailwind button,\n.tina-tailwind [type='button'],\n.tina-tailwind [type='reset'],\n.tina-tailwind [type='submit'] {\n	-webkit-appearance: button;\n}\n\n/**\nRemove the inner border and padding in Firefox.\n*/\n\n.tina-tailwind ::-moz-focus-inner {\n	border-style: none;\n	padding: 0;\n}\n\n/**\nRestore the focus styles unset by the previous rule.\n*/\n\n.tina-tailwind :-moz-focusring {\n	outline: 1px dotted ButtonText;\n}\n\n/**\nRemove the additional ':invalid' styles in Firefox.\nSee: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737\n*/\n\n.tina-tailwind :-moz-ui-invalid {\n	box-shadow: none;\n}\n\n/**\nRemove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.\n*/\n\n.tina-tailwind legend {\n	padding: 0;\n}\n\n/**\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\n.tina-tailwind progress {\n	vertical-align: baseline;\n}\n\n/**\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n.tina-tailwind ::-webkit-inner-spin-button,\n.tina-tailwind ::-webkit-outer-spin-button {\n	height: auto;\n}\n\n/**\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n.tina-tailwind [type='search'] {\n	-webkit-appearance: textfield; /* 1 */\n	outline-offset: -2px; /* 2 */\n}\n\n/**\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n.tina-tailwind ::-webkit-search-decoration {\n	-webkit-appearance: none;\n}\n\n/**\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to 'inherit' in Safari.\n*/\n\n.tina-tailwind ::-webkit-file-upload-button {\n	-webkit-appearance: button; /* 1 */\n	font: inherit; /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\n.tina-tailwind summary {\n	display: list-item;\n}\n\n/**\n * Removes the default spacing and border for appropriate elements.\n */\n\n.tina-tailwind blockquote,\n.tina-tailwind dl,\n.tina-tailwind dd,\n.tina-tailwind h1,\n.tina-tailwind h2,\n.tina-tailwind h3,\n.tina-tailwind h4,\n.tina-tailwind h5,\n.tina-tailwind h6,\n.tina-tailwind hr,\n.tina-tailwind figure,\n.tina-tailwind p,\n.tina-tailwind pre {\n  margin: 0;\n}\n\n/**\n * Manually forked from SUIT CSS Base: https://github.com/suitcss/base\n * A thin layer on top of normalize.css that provides a starting point more\n * suitable for web applications.\n */\n\n.tina-tailwind button {\n  background-color: transparent;\n  background-image: none;\n}\n\n/*\nInteractive\n===========\n*/\n\n.tina-tailwind fieldset {\n  margin: 0;\n  padding: 0;\n}\n\n/*\nForms\n=====\n*/\n\n.tina-tailwind ol,\n.tina-tailwind ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/**\n * 1. Use the user's configured `sans` font-family (with Tailwind's default\n *    sans-serif font stack as a fallback) as a sane default.\n * 2. Use Tailwind's default \"normal\" line-height so the user isn't forced\n *    to override it to ensure consistency even when using the default theme.\n */\n\n.tina-tailwind html {\n  font-family: Inter var, 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 */\n  line-height: 1.5; /* 2 */\n}\n\n/**\n * Inherit font-family and line-height from `html` so users can set them as\n * a class directly on the `html` element.\n */\n\n.tina-tailwind body {\n  font-family: inherit;\n  line-height: inherit;\n}\n\n/**\n * 1. Prevent padding and border from affecting element width.\n *\n *    We used to set this in the html element and inherit from\n *    the parent element for everything else. This caused issues\n *    in shadow-dom-enhanced elements like <details> where the content\n *    is wrapped by a div with box-sizing set to `content-box`.\n *\n *    https://github.com/mozdevs/cssremedy/issues/4\n *\n *\n * 2. Allow adding a border to an element by just adding a border-width.\n *\n *    By default, the way the browser specifies that an element should have no\n *    border is by setting it's border-style to `none` in the user-agent\n *    stylesheet.\n *\n *    In order to easily add borders to elements by just setting the `border-width`\n *    property, we change the default border-style for all elements to `solid`, and\n *    use border-width to hide them instead. This way our `border` utilities only\n *    need to set the `border-width` property instead of the entire `border`\n *    shorthand, making our border utilities much more straightforward to compose.\n *\n *    https://github.com/tailwindcss/tailwindcss/pull/116\n */\n\n.tina-tailwind *,\n.tina-tailwind ::before,\n.tina-tailwind ::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n\n/*\n * Ensure horizontal rules are visible by default\n */\n\n.tina-tailwind hr {\n  border-top-width: 1px;\n}\n\n/**\n * Undo the `border-style: none` reset that Normalize applies to images so that\n * our `border-{width}` utilities have the expected effect.\n *\n * The Normalize reset is unnecessary for us since we default the border-width\n * to 0 on all elements.\n *\n * https://github.com/tailwindcss/tailwindcss/issues/362\n */\n\n.tina-tailwind img {\n  border-style: solid;\n}\n\n/**\n * Tailwind custom reset styles\n */\n\n.tina-tailwind textarea {\n  resize: vertical;\n}\n\n/*\nTabular data\n============\n*/\n\n.tina-tailwind input::placeholder,\n.tina-tailwind textarea::placeholder {\n  opacity: 1;\n  color: #918c9e;\n}\n\n/*\nSections\n========\n*/\n\n.tina-tailwind button,\n.tina-tailwind [role=\"button\"] {\n  cursor: pointer;\n}\n\n/**\n * Override legacy focus reset from Normalize with modern Firefox focus styles.\n *\n * This is actually an improvement over the new defaults in Firefox in our testing,\n * as it triggers the better focus styles even for links, which still use a dotted\n * outline in Firefox by default.\n */\n\n.tina-tailwind :-moz-focusring {\n	outline: auto;\n}\n\n/*\nDocument\n========\n*/\n\n.tina-tailwind table {\n  border-collapse: collapse;\n}\n\n/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */\n\n.tina-tailwind h1,\n.tina-tailwind h2,\n.tina-tailwind h3,\n.tina-tailwind h4,\n.tina-tailwind h5,\n.tina-tailwind h6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/**\n * Reset links to optimize for opt-in styling instead of\n * opt-out.\n */\n\n.tina-tailwind a {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/**\n * Reset form element properties that are easy to forget to\n * style explicitly so you don't inadvertently introduce\n * styles that deviate from your design system. These styles\n * supplement a partial reset that is already applied by\n * normalize.css.\n */\n\n.tina-tailwind button,\n.tina-tailwind input,\n.tina-tailwind optgroup,\n.tina-tailwind select,\n.tina-tailwind textarea {\n  padding: 0;\n  line-height: inherit;\n  color: inherit;\n}\n\n/**\n * Use the configured 'mono' font family for elements that\n * are expected to be rendered with a monospace font, falling\n * back to the system monospace stack if there is no configured\n * 'mono' font family.\n */\n\n.tina-tailwind pre,\n.tina-tailwind code,\n.tina-tailwind kbd,\n.tina-tailwind samp {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/**\n * 1. Make replaced elements `display: block` by default as that's\n *    the behavior you want almost all of the time. Inspired by\n *    CSS Remedy, with `svg` added as well.\n *\n *    https://github.com/mozdevs/cssremedy/issues/14\n * \n * 2. Add `vertical-align: middle` to align replaced elements more\n *    sensibly by default when overriding `display` by adding a\n *    utility like `inline`.\n *\n *    This can trigger a poorly considered linting error in some\n *    tools but is included by design.\n * \n *    https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210\n */\n\n.tina-tailwind img,\n.tina-tailwind svg,\n.tina-tailwind video,\n.tina-tailwind canvas,\n.tina-tailwind audio,\n.tina-tailwind iframe,\n.tina-tailwind embed,\n.tina-tailwind object {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/**\n * Constrain images and videos to the parent width and preserve\n * their intrinsic aspect ratio.\n *\n * https://github.com/mozdevs/cssremedy/issues/14\n */\n\n.tina-tailwind img,\n.tina-tailwind video {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Ensure the default browser behavior of the `hidden` attribute.\n */\n\n.tina-tailwind [hidden] {\n  display: none;\n}\n\n/* ! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */\n\n.tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::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-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));\n}\n\n.tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {\n  --tw-border-opacity: 1;\n  border-color: rgba(225, 221, 236, var(--tw-border-opacity));\n}\n\n.tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n}\n\n.tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(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}\n\n.tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {\n  --tw-blur: var(--tw-empty,/*!*/ /*!*/);\n  --tw-brightness: var(--tw-empty,/*!*/ /*!*/);\n  --tw-contrast: var(--tw-empty,/*!*/ /*!*/);\n  --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);\n  --tw-hue-rotate: var(--tw-empty,/*!*/ /*!*/);\n  --tw-invert: var(--tw-empty,/*!*/ /*!*/);\n  --tw-saturate: var(--tw-empty,/*!*/ /*!*/);\n  --tw-sepia: var(--tw-empty,/*!*/ /*!*/);\n  --tw-drop-shadow: var(--tw-empty,/*!*/ /*!*/);\n  --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);\n}\n\n.tina-tailwind .static {\n  position: static !important;\n}\n\n.tina-tailwind .fixed {\n  position: fixed !important;\n}\n\n.tina-tailwind .absolute {\n  position: absolute !important;\n}\n\n.tina-tailwind .relative {\n  position: relative !important;\n}\n\n.tina-tailwind .bottom-3 {\n  bottom: 12px !important;\n}\n\n.tina-tailwind .right-5 {\n  right: 20px !important;\n}\n\n.tina-tailwind .right-0 {\n  right: 0px !important;\n}\n\n.tina-tailwind .z-50 {\n  z-index: 50 !important;\n}\n\n.tina-tailwind .mr-2 {\n  margin-right: 8px !important;\n}\n\n.tina-tailwind .-ml-1 {\n  margin-left: -4px !important;\n}\n\n.tina-tailwind .mr-1\\.5 {\n  margin-right: 6px !important;\n}\n\n.tina-tailwind .mr-1 {\n  margin-right: 4px !important;\n}\n\n.tina-tailwind .mb-3 {\n  margin-bottom: 12px !important;\n}\n\n.tina-tailwind .ml-1 {\n  margin-left: 4px !important;\n}\n\n.tina-tailwind .mt-2 {\n  margin-top: 8px !important;\n}\n\n.tina-tailwind .mt-8 {\n  margin-top: 32px !important;\n}\n\n.tina-tailwind .mb-0\\.5 {\n  margin-bottom: 2px !important;\n}\n\n.tina-tailwind .mb-0 {\n  margin-bottom: 0px !important;\n}\n\n.tina-tailwind .block {\n  display: block !important;\n}\n\n.tina-tailwind .inline-block {\n  display: inline-block !important;\n}\n\n.tina-tailwind .flex {\n  display: flex !important;\n}\n\n.tina-tailwind .inline-flex {\n  display: inline-flex !important;\n}\n\n.tina-tailwind .table {\n  display: table !important;\n}\n\n.tina-tailwind .h-screen {\n  height: 100vh !important;\n}\n\n.tina-tailwind .h-4 {\n  height: 16px !important;\n}\n\n.tina-tailwind .h-auto {\n  height: auto !important;\n}\n\n.tina-tailwind .h-6 {\n  height: 24px !important;\n}\n\n.tina-tailwind .h-5 {\n  height: 20px !important;\n}\n\n.tina-tailwind .w-auto {\n  width: auto !important;\n}\n\n.tina-tailwind .w-full {\n  width: 100% !important;\n}\n\n.tina-tailwind .w-10 {\n  width: 40px !important;\n}\n\n.tina-tailwind .w-80 {\n  width: 320px !important;\n}\n\n.tina-tailwind .w-2\\/3 {\n  width: 66.666667% !important;\n}\n\n.tina-tailwind .w-6 {\n  width: 24px !important;\n}\n\n.tina-tailwind .w-56 {\n  width: 224px !important;\n}\n\n.tina-tailwind .min-w-full {\n  min-width: 100% !important;\n}\n\n.tina-tailwind .max-w-lg {\n  max-width: 32rem !important;\n}\n\n.tina-tailwind .max-w-screen-md {\n  max-width: 768px !important;\n}\n\n.tina-tailwind .max-w-xs {\n  max-width: 20rem !important;\n}\n\n.tina-tailwind .flex-1 {\n  flex: 1 1 0% !important;\n}\n\n.tina-tailwind .flex-shrink-0 {\n  flex-shrink: 0 !important;\n}\n\n.tina-tailwind .origin-top-right {\n  transform-origin: top right !important;\n}\n\n.tina-tailwind .translate-y-full {\n  --tw-translate-y: 100% !important;\n  transform: var(--tw-transform) !important;\n}\n\n.tina-tailwind .-translate-y-2 {\n  --tw-translate-y: -8px !important;\n  transform: var(--tw-transform) !important;\n}\n\n.tina-tailwind .translate-y-0 {\n  --tw-translate-y: 0px !important;\n  transform: var(--tw-transform) !important;\n}\n\n.tina-tailwind .rotate-90 {\n  --tw-rotate: 90deg !important;\n  transform: var(--tw-transform) !important;\n}\n\n.tina-tailwind .rotate-0 {\n  --tw-rotate: 0deg !important;\n  transform: var(--tw-transform) !important;\n}\n\n.tina-tailwind .scale-95 {\n  --tw-scale-x: .95 !important;\n  --tw-scale-y: .95 !important;\n  transform: var(--tw-transform) !important;\n}\n\n.tina-tailwind .scale-100 {\n  --tw-scale-x: 1 !important;\n  --tw-scale-y: 1 !important;\n  transform: var(--tw-transform) !important;\n}\n\n.tina-tailwind .transform {\n  transform: var(--tw-transform) !important;\n}\n\n.tina-tailwind .flex-col {\n  flex-direction: column !important;\n}\n\n.tina-tailwind .items-end {\n  align-items: flex-end !important;\n}\n\n.tina-tailwind .items-center {\n  align-items: center !important;\n}\n\n.tina-tailwind .items-stretch {\n  align-items: stretch !important;\n}\n\n.tina-tailwind .justify-start {\n  justify-content: flex-start !important;\n}\n\n.tina-tailwind .justify-end {\n  justify-content: flex-end !important;\n}\n\n.tina-tailwind .justify-center {\n  justify-content: center !important;\n}\n\n.tina-tailwind .justify-between {\n  justify-content: space-between !important;\n}\n\n.tina-tailwind .gap-0\\.5 {\n  gap: 2px !important;\n}\n\n.tina-tailwind .gap-0 {\n  gap: 0px !important;\n}\n\n.tina-tailwind .gap-4 {\n  gap: 16px !important;\n}\n\n.tina-tailwind .gap-1 {\n  gap: 4px !important;\n}\n\n.tina-tailwind .gap-3 {\n  gap: 12px !important;\n}\n\n.tina-tailwind .gap-1\\.5 {\n  gap: 6px !important;\n}\n\n.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-y-reverse: 0 !important;\n  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;\n  border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) !important;\n}\n\n.tina-tailwind .overflow-hidden {\n  overflow: hidden !important;\n}\n\n.tina-tailwind .overflow-y-auto {\n  overflow-y: auto !important;\n}\n\n.tina-tailwind .overflow-ellipsis {\n  text-overflow: ellipsis !important;\n}\n\n.tina-tailwind .whitespace-nowrap {\n  white-space: nowrap !important;\n}\n\n.tina-tailwind .rounded-lg {\n  border-radius: 8px !important;\n}\n\n.tina-tailwind .rounded-full {\n  border-radius: 9999px !important;\n}\n\n.tina-tailwind .rounded-md {\n  border-radius: 6px !important;\n}\n\n.tina-tailwind .border {\n  border-width: 1px !important;\n}\n\n.tina-tailwind .border-t {\n  border-top-width: 1px !important;\n}\n\n.tina-tailwind .border-b {\n  border-bottom-width: 1px !important;\n}\n\n.tina-tailwind .border-r {\n  border-right-width: 1px !important;\n}\n\n.tina-tailwind .border-gray-100 {\n  --tw-border-opacity: 1 !important;\n  border-color: rgba(237, 236, 243, var(--tw-border-opacity)) !important;\n}\n\n.tina-tailwind .border-gray-200 {\n  --tw-border-opacity: 1 !important;\n  border-color: rgba(225, 221, 236, var(--tw-border-opacity)) !important;\n}\n\n.tina-tailwind .border-transparent {\n  border-color: transparent !important;\n}\n\n.tina-tailwind .bg-white {\n  --tw-bg-opacity: 1 !important;\n  background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;\n}\n\n.tina-tailwind .bg-gray-50 {\n  --tw-bg-opacity: 1 !important;\n  background-color: rgba(246, 246, 249, var(--tw-bg-opacity)) !important;\n}\n\n.tina-tailwind .bg-transparent {\n  background-color: transparent !important;\n}\n\n.tina-tailwind .bg-gradient-to-b {\n  background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;\n}\n\n.tina-tailwind .from-blue-900 {\n  --tw-gradient-from: #1D2C6C !important;\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29, 44, 108, 0)) !important;\n}\n\n.tina-tailwind .from-white {\n  --tw-gradient-from: #fff !important;\n  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)) !important;\n}\n\n.tina-tailwind .to-gray-900 {\n  --tw-gradient-to: #252336 !important;\n}\n\n.tina-tailwind .to-gray-50 {\n  --tw-gradient-to: #F6F6F9 !important;\n}\n\n.tina-tailwind .px-5 {\n  padding-left: 20px !important;\n  padding-right: 20px !important;\n}\n\n.tina-tailwind .py-2 {\n  padding-top: 8px !important;\n  padding-bottom: 8px !important;\n}\n\n.tina-tailwind .px-4 {\n  padding-left: 16px !important;\n  padding-right: 16px !important;\n}\n\n.tina-tailwind .py-6 {\n  padding-top: 24px !important;\n  padding-bottom: 24px !important;\n}\n\n.tina-tailwind .py-4 {\n  padding-top: 16px !important;\n  padding-bottom: 16px !important;\n}\n\n.tina-tailwind .px-6 {\n  padding-left: 24px !important;\n  padding-right: 24px !important;\n}\n\n.tina-tailwind .py-1 {\n  padding-top: 4px !important;\n  padding-bottom: 4px !important;\n}\n\n.tina-tailwind .py-7 {\n  padding-top: 28px !important;\n  padding-bottom: 28px !important;\n}\n\n.tina-tailwind .px-8 {\n  padding-left: 32px !important;\n  padding-right: 32px !important;\n}\n\n.tina-tailwind .py-2\\.5 {\n  padding-top: 10px !important;\n  padding-bottom: 10px !important;\n}\n\n.tina-tailwind .py-14 {\n  padding-top: 56px !important;\n  padding-bottom: 56px !important;\n}\n\n.tina-tailwind .py-3 {\n  padding-top: 12px !important;\n  padding-bottom: 12px !important;\n}\n\n.tina-tailwind .py-1\\.5 {\n  padding-top: 6px !important;\n  padding-bottom: 6px !important;\n}\n\n.tina-tailwind .py-10 {\n  padding-top: 40px !important;\n  padding-bottom: 40px !important;\n}\n\n.tina-tailwind .pt-16 {\n  padding-top: 64px !important;\n}\n\n.tina-tailwind .pb-10 {\n  padding-bottom: 40px !important;\n}\n\n.tina-tailwind .text-left {\n  text-align: left !important;\n}\n\n.tina-tailwind .text-center {\n  text-align: center !important;\n}\n\n.tina-tailwind .font-sans {\n  font-family: Inter var, 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;\n}\n\n.tina-tailwind .text-xs {\n  font-size: 13px !important;\n  line-height: 1.33 !important;\n}\n\n.tina-tailwind .text-2xl {\n  font-size: 24px !important;\n  line-height: 1.33 !important;\n}\n\n.tina-tailwind .text-base {\n  font-size: 16px !important;\n  line-height: 1.5 !important;\n}\n\n.tina-tailwind .text-lg {\n  font-size: 18px !important;\n  line-height: 1.55 !important;\n}\n\n.tina-tailwind .text-sm {\n  font-size: 14px !important;\n  line-height: 1.43 !important;\n}\n\n.tina-tailwind .text-3xl {\n  font-size: 30px !important;\n  line-height: 1.2 !important;\n}\n\n.tina-tailwind .text-4xl {\n  font-size: 36px !important;\n  line-height: 1.1 !important;\n}\n\n.tina-tailwind .font-medium {\n  font-weight: 500 !important;\n}\n\n.tina-tailwind .font-bold {\n  font-weight: 700 !important;\n}\n\n.tina-tailwind .uppercase {\n  text-transform: uppercase !important;\n}\n\n.tina-tailwind .italic {\n  font-style: italic !important;\n}\n\n.tina-tailwind .leading-normal {\n  line-height: 1.5 !important;\n}\n\n.tina-tailwind .leading-4 {\n  line-height: 16px !important;\n}\n\n.tina-tailwind .leading-5 {\n  line-height: 20px !important;\n}\n\n.tina-tailwind .tracking-wide {\n  letter-spacing: 0.025em !important;\n}\n\n.tina-tailwind .text-gray-700 {\n  --tw-text-opacity: 1 !important;\n  color: rgba(67, 62, 82, var(--tw-text-opacity)) !important;\n}\n\n.tina-tailwind .text-gray-800 {\n  --tw-text-opacity: 1 !important;\n  color: rgba(54, 49, 69, var(--tw-text-opacity)) !important;\n}\n\n.tina-tailwind .text-gray-600 {\n  --tw-text-opacity: 1 !important;\n  color: rgba(86, 81, 101, var(--tw-text-opacity)) !important;\n}\n\n.tina-tailwind .text-blue-400 {\n  --tw-text-opacity: 1 !important;\n  color: rgba(34, 150, 254, var(--tw-text-opacity)) !important;\n}\n\n.tina-tailwind .text-blue-600 {\n  --tw-text-opacity: 1 !important;\n  color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;\n}\n\n.tina-tailwind .text-white {\n  --tw-text-opacity: 1 !important;\n  color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;\n}\n\n.tina-tailwind .text-gray-400 {\n  --tw-text-opacity: 1 !important;\n  color: rgba(145, 140, 158, var(--tw-text-opacity)) !important;\n}\n\n.tina-tailwind .text-gray-300 {\n  --tw-text-opacity: 1 !important;\n  color: rgba(178, 173, 190, var(--tw-text-opacity)) !important;\n}\n\n.tina-tailwind .text-gray-500 {\n  --tw-text-opacity: 1 !important;\n  color: rgba(113, 108, 127, var(--tw-text-opacity)) !important;\n}\n\n.tina-tailwind .underline {\n  text-decoration: underline !important;\n}\n\n.tina-tailwind .opacity-80 {\n  opacity: .8 !important;\n}\n\n.tina-tailwind .opacity-50 {\n  opacity: .5 !important;\n}\n\n.tina-tailwind .opacity-100 {\n  opacity: 1 !important;\n}\n\n.tina-tailwind .opacity-0 {\n  opacity: 0 !important;\n}\n\n.tina-tailwind .opacity-90 {\n  opacity: .9 !important;\n}\n\n.tina-tailwind .opacity-70 {\n  opacity: .7 !important;\n}\n\n.tina-tailwind .shadow {\n  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;\n}\n\n.tina-tailwind .shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;\n}\n\n.tina-tailwind .shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;\n}\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) !important;\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;\n  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;\n}\n\n.tina-tailwind .ring-black {\n  --tw-ring-opacity: 1 !important;\n  --tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity)) !important;\n}\n\n.tina-tailwind .ring-opacity-5 {\n  --tw-ring-opacity: .05 !important;\n}\n\n.tina-tailwind .filter {\n  filter: var(--tw-filter) !important;\n}\n\n.tina-tailwind .transition-colors {\n  transition-property: background-color, border-color, color, fill, stroke !important;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;\n  transition-duration: 150ms !important;\n}\n\n.tina-tailwind .transition-opacity {\n  transition-property: opacity !important;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;\n  transition-duration: 150ms !important;\n}\n\n.tina-tailwind .transition-all {\n  transition-property: all !important;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;\n  transition-duration: 150ms !important;\n}\n\n.tina-tailwind .transition {\n  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;\n  transition-duration: 150ms !important;\n}\n\n.tina-tailwind .duration-100 {\n  transition-duration: 100ms !important;\n}\n\n.tina-tailwind .duration-150 {\n  transition-duration: 150ms !important;\n}\n\n.tina-tailwind .duration-300 {\n  transition-duration: 300ms !important;\n}\n\n.tina-tailwind .duration-75 {\n  transition-duration: 75ms !important;\n}\n\n.tina-tailwind .ease-out {\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;\n}\n\n.tina-tailwind .ease-in-out {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;\n}\n\n.tina-tailwind .ease-in {\n  transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;\n}\n\n.tina-tailwind {\n  color: #565165;\n}\n\n.hover\\:bg-gray-50:hover {\n  --tw-bg-opacity: 1 !important;\n  background-color: rgba(246, 246, 249, var(--tw-bg-opacity)) !important;\n}\n\n.hover\\:text-blue-500:hover {\n  --tw-text-opacity: 1 !important;\n  color: rgba(0, 132, 255, var(--tw-text-opacity)) !important;\n}\n\n.hover\\:text-blue-600:hover {\n  --tw-text-opacity: 1 !important;\n  color: rgba(5, 116, 228, var(--tw-text-opacity)) !important;\n}\n\n.hover\\:opacity-100:hover {\n  opacity: 1 !important;\n}\n\n.hover\\:opacity-80:hover {\n  opacity: .8 !important;\n}\n\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent !important;\n  outline-offset: 2px !important;\n}\n\n.group:hover .group-hover\\:opacity-100 {\n  opacity: 1 !important;\n}\n\n.group:hover .group-hover\\:opacity-80 {\n  opacity: .8 !important;\n}\n\n@media (min-width: 640px) {\n\n  .sm\\:rounded-lg {\n    border-radius: 8px !important;\n  }\n}\n\n@media (min-width: 1024px) {\n\n  .lg\\:w-96 {\n    width: 384px !important;\n  }\n}\n";
+  const errorButtonStyles = {
+    background: "#eb6337",
+    padding: "12px 18px",
+    cursor: "pointer",
+    borderRadius: "50px",
+    textTransform: "uppercase",
+    letterSpacing: "2px",
+    fontWeight: "bold",
+    border: "none",
+    color: "white",
+    margin: "1rem 0"
+  };
   const SetupHooks = (props) => {
     const cms = toolkit.useCMS();
     const [payload, isLoading] = useGraphqlForms({
@@ -1431,6 +1439,8 @@ mutation addPendingDocumentMutation(
       return { hasError: true, message: error.message };
     }
     render() {
+      const branchData = window.localStorage.getItem("tinacms-current-branch");
+      const hasBranchData = branchData && branchData.length > 0;
       if (this.state.hasError && !this.state.pageRefresh) {
         return /* @__PURE__ */ React__default["default"].createElement("div", {
           style: {
@@ -1451,25 +1461,21 @@ mutation addPendingDocumentMutation(
           }
         }, /* @__PURE__ */ React__default["default"].createElement("h3", {
           style: { color: "#eb6337" }
-        }, "TinaCMS Render Error"), /* @__PURE__ */ React__default["default"].createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React__default["default"].createElement("pre", null, this.state.message), /* @__PURE__ */ React__default["default"].createElement("br", null), /* @__PURE__ */ React__default["default"].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__default["default"].createElement("div", {
-          style: { padding: "10px 0" }
-        }, /* @__PURE__ */ React__default["default"].createElement("button", {
-          style: {
-            background: "#eb6337",
-            padding: "12px 18px",
-            cursor: "pointer",
-            borderRadius: "50px",
-            textTransform: "uppercase",
-            letterSpacing: "2px",
-            fontWeight: "bold",
-            border: "none",
-            color: "white"
-          },
+        }, "TinaCMS Render Error"), /* @__PURE__ */ React__default["default"].createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React__default["default"].createElement("pre", {
+          style: { marginTop: "1rem", overflowX: "auto" }
+        }, this.state.message), /* @__PURE__ */ React__default["default"].createElement("br", null), /* @__PURE__ */ React__default["default"].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__default["default"].createElement("button", {
+          style: errorButtonStyles,
           onClick: () => {
             this.setState({ pageRefresh: true });
             setTimeout(() => this.setState({ hasError: false, pageRefresh: false }), 3e3);
           }
-        }, "Refresh"))));
+        }, "Refresh"), hasBranchData && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].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__default["default"].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__default["default"].createElement(Loader, null, "Let's try that again.");
@@ -1477,20 +1483,29 @@ mutation addPendingDocumentMutation(
       return this.props.children;
     }
   }
+  const parseURL = (url) => {
+    if (url.includes("localhost")) {
+      return { branch: null, isLocalClient: true, clientId: null };
+    }
+    const tinaHost = "content.tinajs.io";
+    const params = new URL(url);
+    const pattern = new UrlPattern__default["default"]("/content/:clientId/github/:branch");
+    const result = pattern.match(params.pathname);
+    if (params.host !== tinaHost) {
+      throw new Error(`The only supported hosts are ${tinaHost} or localhost, but received ${params.host}.`);
+    }
+    return __spreadProps(__spreadValues({}, result), {
+      isLocalClient: false
+    });
+  };
   const TinaCMSProvider2 = (_c) => {
     var _d = _c, {
       children,
-      branch,
-      clientId,
-      isLocalClient,
       cmsCallback,
       mediaStore,
       tinaioConfig
     } = _d, props = __objRest(_d, [
       "children",
-      "branch",
-      "clientId",
-      "isLocalClient",
       "cmsCallback",
       "mediaStore",
       "tinaioConfig"
@@ -1498,6 +1513,15 @@ mutation addPendingDocumentMutation(
     if (typeof props.query === "string") {
       props.query;
     }
+    const validOldSetup = new Boolean(props == null ? void 0 : props.isLocalClient) || new Boolean(props == null ? void 0 : props.clientId) && new Boolean(props == null ? void 0 : props.branch);
+    if (!props.apiURL && !validOldSetup) {
+      throw new Error(`apiURL is a required field`);
+    }
+    const { branch, clientId, isLocalClient } = props.apiURL ? parseURL(props.apiURL) : {
+      branch: props.branch,
+      clientId: props.clientId,
+      isLocalClient: props.isLocalClient
+    };
     return /* @__PURE__ */ React__default["default"].createElement(TinaCloudProvider, {
       branch,
       clientId,
@@ -1505,7 +1529,7 @@ mutation addPendingDocumentMutation(
       isLocalClient,
       cmsCallback,
       mediaStore
-    }, props.query ? /* @__PURE__ */ React__default["default"].createElement(SetupHooks, __spreadProps(__spreadValues({
+    }, /* @__PURE__ */ React__default["default"].createElement("style", null, styles), props.query ? /* @__PURE__ */ React__default["default"].createElement(SetupHooks, __spreadProps(__spreadValues({
       key: props.query
     }, props), {
       query: props.query || ""
@@ -1639,10 +1663,10 @@ mutation addPendingDocumentMutation(
     if (!is_server()) {
       console.warn(`Whoops! Looks like you are using \`staticRequest\` in the browser to fetch data.
 
-The local server is not available outside of \`getStaticProps\` or \`getStaticPaths\` functions. 
+The local server is not available outside of \`getStaticProps\` or \`getStaticPaths\` functions.
 This function should only be called on the server at build time.
 
-This will work when developing locally but NOT when deployed to production. 
+This will work when developing locally but NOT when deployed to production.
 `);
     }
     return client.request(query, { variables });
@@ -1655,7 +1679,8 @@ This will work when developing locally but NOT when deployed to production.
     return str;
   }
   const Layout = ({ children }) => {
-    return /* @__PURE__ */ React__default["default"].createElement("div", {
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("style", null, styles), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "tina-tailwind",
       style: {
         position: "fixed",
         top: 0,
@@ -1664,9 +1689,10 @@ This will work when developing locally but NOT when deployed to production.
         height: "100%",
         overflow: "auto",
         background: "#F6F6F9",
+        fontFamily: "'Inter', sans-serif",
         zIndex: 9999
       }
-    }, children);
+    }, children));
   };
   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);
@@ -1786,7 +1812,7 @@ This will work when developing locally but NOT when deployed to production.
     return /* @__PURE__ */ React__default["default"].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__default["default"].createElement("div", {
-      className: "bg-white rounded-lg overflow-hidden shadow-lg w-full max-w-md"
+      className: "bg-white rounded-lg overflow-hidden shadow-lg w-full max-w-lg"
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: "px-5 py-4 border-b border-gray-150"
     }, /* @__PURE__ */ React__default["default"].createElement("h2", {
@@ -1811,9 +1837,7 @@ This will work when developing locally but NOT when deployed to production.
   const LoginPage = () => {
     const { setEdit } = sharedctx.useEditState();
     const login = () => setEdit(true);
-    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, {
-      message: "Please log in to Tina Cloud to access your content."
-    }, /* @__PURE__ */ React__default["default"].createElement("a", {
+    return /* @__PURE__ */ React__default["default"].createElement(AuthTemplate, null, /* @__PURE__ */ React__default["default"].createElement("a", {
       href: "/",
       className: "flex-1 text-center inline-flex justify-center items-center px-8 py-3 shadow-sm text-sm leading-4 font-medium rounded-full text-gray-600 border border-gray-150 hover:opacity-80 hover:bg-gray-50 focus:outline-none focus:shadow-outline-blue  transition duration-150 ease-out"
     }, /* @__PURE__ */ React__default["default"].createElement(MdOutlineArrowBack, {
@@ -1825,7 +1849,7 @@ This will work when developing locally but NOT when deployed to production.
       style: { background: "#0084FF" }
     }, /* @__PURE__ */ React__default["default"].createElement(BiLogIn, {
       className: "w-6 h-auto mr-1.5 opacity-80"
-    }), " Log in"));
+    }), " Enter edit-mode"));
   };
   const logout = () => {
     sharedctx.setEditing(false);
@@ -1983,37 +2007,37 @@ This will work when developing locally but NOT when deployed to production.
           className: "min-w-full"
         }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
           className: "bg-white divide-y divide-gray-150"
-        }, documents.map((document2) => {
-          const livesiteRoute = routeMapping ? routeMapping.mapper(collection, document2.node) : void 0;
+        }, documents.map((document) => {
+          const livesiteRoute = routeMapping ? routeMapping.mapper(collection, document.node) : void 0;
           return /* @__PURE__ */ React__default["default"].createElement("tr", {
-            key: document2.node.sys.relativePath
+            key: document.node.sys.relativePath
           }, /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-5 py-3 whitespace-nowrap"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs mb-0.5 text-gray-400 uppercase"
           }, "Filename"), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
-            to: `${location2.pathname}/${document2.node.sys.filename}`,
-            className: "h-5 leading-5 block"
+            to: `${location2.pathname}/${document.node.sys.filename}`,
+            className: "h-5 leading-5 flex max-w-xs"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
-            className: "leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
-          }, document2.node.sys.filename), /* @__PURE__ */ React__default["default"].createElement("span", {
-            className: "leading-5 text-base font-medium text-gray-300"
-          }, document2.node.sys.extension))), /* @__PURE__ */ React__default["default"].createElement("td", {
+            className: "flex-shrink-1 leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
+          }, document.node.sys.filename), /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "flex-shrink-0 leading-5 text-base font-medium text-gray-300"
+          }, document.node.sys.extension))), /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-5 py-3 whitespace-nowrap"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs mb-0.5 text-gray-400 uppercase"
           }, "Template"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 block leading-5 font-regular text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-500"
-          }, document2.node.sys.template)), /* @__PURE__ */ React__default["default"].createElement("td", {
+          }, document.node.sys.template)), /* @__PURE__ */ React__default["default"].createElement("td", {
             className: "px-5 py-3 whitespace-nowrap flex gap-3 items-center justify-end"
           }, livesiteRoute && /* @__PURE__ */ React__default["default"].createElement("a", {
             href: livesiteRoute,
-            className: "flex gap-1.5 items-center px-4 py-1.5 rounded-full transition-all ease-out duration-150 text-gray-500 hover:text-blue-500"
+            className: "flex gap-1.5 items-center text-base px-4 py-1.5 rounded-full transition-all ease-out duration-150 text-gray-500 hover:text-blue-500"
           }, /* @__PURE__ */ React__default["default"].createElement(BiLinkExternal, {
             className: "inline-block h-5 w-auto opacity-70"
           }), " ", "View"), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
-            to: `${location2.pathname}/${document2.node.sys.filename}`,
-            className: "flex gap-1.5 items-center px-4 py-1.5 rounded-full border border-gray-150 transition-all ease-out duration-150 text-gray-700  hover:bg-gray-50 hover:text-blue-500"
+            to: `${location2.pathname}/${document.node.sys.filename}`,
+            className: "flex gap-1.5 items-center text-base px-4 py-1.5 rounded-full border border-gray-150 transition-all ease-out duration-150 text-gray-700  hover:bg-gray-50 hover:text-blue-500"
           }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
             className: "inline-block h-5 w-auto opacity-70"
           }), " ", "Edit")));
@@ -2076,10 +2100,8 @@ This will work when developing locally but NOT when deployed to production.
     });
     await cms.api.tina.request(`mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
       createDocument(
-        collection: $collection, 
-        relativePath: $relativePath, 
-        params: $params
-      ){__typename}
+        collection: $collection,
+        relativePath: $relativePath,
     }`, {
       variables: {
         collection: collection.name,
@@ -2126,7 +2148,7 @@ This will work when developing locally but NOT when deployed to production.
     }));
   };
   const useGetDocument = (cms, collectionName, relativePath) => {
-    const [document2, setDocument] = React.useState(void 0);
+    const [document, setDocument] = React.useState(void 0);
     React.useEffect(() => {
       const fetchDocument = async () => {
         const response = await cms.api.tina.request(`
@@ -2142,7 +2164,7 @@ This will work when developing locally but NOT when deployed to production.
       };
       fetchDocument();
     }, [cms, collectionName, relativePath]);
-    return document2;
+    return document;
   };
   const GetDocument = ({
     cms,
@@ -2150,11 +2172,11 @@ This will work when developing locally but NOT when deployed to production.
     relativePath,
     children
   }) => {
-    const document2 = useGetDocument(cms, collectionName, relativePath);
-    if (!document2) {
+    const document = useGetDocument(cms, collectionName, relativePath);
+    if (!document) {
       return null;
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document2));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(document));
   };
   const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
     const { includeCollection, includeTemplate } = mutationInfo;
@@ -2188,12 +2210,12 @@ This will work when developing locally but NOT when deployed to production.
         cms,
         collectionName: collection.name,
         relativePath
-      }, (document2) => {
+      }, (document) => {
         const form = new toolkit.Form({
           id: "update-form",
           label: "form",
-          fields: document2.form.fields,
-          initialValues: document2.values,
+          fields: document.form.fields,
+          initialValues: document.values,
           onSubmit: async (values) => {
             await updateDocument(cms, relativePath, collection, mutationInfo, values);
             navigate(`/collections/${collection.name}`);
@@ -2210,20 +2232,6 @@ This will work when developing locally but NOT when deployed to production.
       });
     }));
   };
-  const useEmbedTailwind = () => {
-    React.useEffect(() => {
-      const isSSR = typeof window === "undefined";
-      if (!isSSR) {
-        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 Redirect = () => {
     React__default["default"].useEffect(() => {
       if (window) {
@@ -2233,7 +2241,6 @@ This will work when developing locally but NOT when deployed to production.
     return null;
   };
   const TinaAdmin = () => {
-    useEmbedTailwind();
     const isSSR = typeof window === "undefined";
     const { edit } = sharedctx.useEditState();
     if (isSSR) {