tinacms 0.63.0 → 0.64.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # tinacms
 
+## 0.64.0
+
+### Minor Changes
+
+- 4a3990c7e: Cloudinary media store now serves images over `https` by default. This can now be configured though the handler provided.
+
+  To revert to the old behavior:
+
+  ```ts
+  export default createMediaHandler(
+    {
+      // ...
+    },
+    {
+      useHttps: false,
+    }
+  )
+  ```
+
+  The default for `useHttps` is `true`
+
 ## 0.63.0
 
 ### Minor Changes

package/dist/index.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { EventBus, StyleReset, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
+import { EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, FullscreenFormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType, getIntrospectionQuery, buildClientSchema, print } from "graphql";
 import set from "lodash.set";
@@ -633,11 +633,11 @@ class LocalClient extends Client {
   }
 }
 function ModalBuilder(modalProps) {
-  return /* @__PURE__ */ React.createElement(StyleReset, null, /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, null, modalProps.title), /* @__PURE__ */ React.createElement(ModalBody, {
+  return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, null, modalProps.title), /* @__PURE__ */ React.createElement(ModalBody, {
     padded: true
   }, /* @__PURE__ */ React.createElement("p", null, modalProps.message), modalProps.error && /* @__PURE__ */ React.createElement(ErrorLabel, null, modalProps.error)), /* @__PURE__ */ React.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React.createElement(AsyncButton, __spreadValues({
     key: action.name
-  }, action)))))));
+  }, action))))));
 }
 const ErrorLabel = styled.p`
   color: var(--tina-color-error) !important;
@@ -1018,24 +1018,10 @@ function useGraphqlForms({
             name: "tina-admin-link",
             Component: () => /* @__PURE__ */ React.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.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);
         }
@@ -1163,8 +1149,8 @@ function useGraphqlForms({
   }, [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;
@@ -1391,6 +1377,7 @@ const useDocumentCreatorPlugin = (args) => {
     };
   }, [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",
@@ -1506,7 +1493,8 @@ const TinaCMSProvider2 = (_c) => {
   if (typeof props.query === "string") {
     props.query;
   }
-  if (!props.apiURL && !((props == null ? void 0 : props.clientId) || (props == null ? void 0 : props.isLocalClient))) {
+  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) : {
@@ -1521,7 +1509,7 @@ const TinaCMSProvider2 = (_c) => {
     isLocalClient,
     cmsCallback,
     mediaStore
-  }, props.query ? /* @__PURE__ */ React.createElement(SetupHooks, __spreadProps(__spreadValues({
+  }, /* @__PURE__ */ React.createElement("style", null, styles), props.query ? /* @__PURE__ */ React.createElement(SetupHooks, __spreadProps(__spreadValues({
     key: props.query
   }, props), {
     query: props.query || ""
@@ -1671,7 +1659,8 @@ function gql(strings, ...args) {
   return str;
 }
 const Layout = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, styles), /* @__PURE__ */ React.createElement("div", {
+    className: "tina-tailwind",
     style: {
       position: "fixed",
       top: 0,
@@ -1680,9 +1669,10 @@ const Layout = ({ children }) => {
       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);
@@ -1997,37 +1987,37 @@ const CollectionListPage = () => {
         className: "min-w-full"
       }, /* @__PURE__ */ React.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.createElement("tr", {
-          key: document2.node.sys.relativePath
+          key: document.node.sys.relativePath
         }, /* @__PURE__ */ React.createElement("td", {
           className: "px-5 py-3 whitespace-nowrap"
         }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs mb-0.5 text-gray-400 uppercase"
         }, "Filename"), /* @__PURE__ */ React.createElement(Link, {
-          to: `${location2.pathname}/${document2.node.sys.filename}`,
+          to: `${location2.pathname}/${document.node.sys.filename}`,
           className: "h-5 leading-5 flex max-w-xs"
         }, /* @__PURE__ */ React.createElement("span", {
           className: "flex-shrink-1 leading-5 font-medium text-base overflow-ellipsis overflow-hidden whitespace-nowrap text-gray-700"
-        }, document2.node.sys.filename), /* @__PURE__ */ React.createElement("span", {
+        }, document.node.sys.filename), /* @__PURE__ */ React.createElement("span", {
           className: "flex-shrink-0 leading-5 text-base font-medium text-gray-300"
-        }, document2.node.sys.extension))), /* @__PURE__ */ React.createElement("td", {
+        }, document.node.sys.extension))), /* @__PURE__ */ React.createElement("td", {
           className: "px-5 py-3 whitespace-nowrap"
         }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs mb-0.5 text-gray-400 uppercase"
         }, "Template"), /* @__PURE__ */ React.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.createElement("td", {
+        }, document.node.sys.template)), /* @__PURE__ */ React.createElement("td", {
           className: "px-5 py-3 whitespace-nowrap flex gap-3 items-center justify-end"
         }, livesiteRoute && /* @__PURE__ */ React.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.createElement(BiLinkExternal, {
           className: "inline-block h-5 w-auto opacity-70"
         }), " ", "View"), /* @__PURE__ */ React.createElement(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.createElement(BiEdit, {
           className: "inline-block h-5 w-auto opacity-70"
         }), " ", "Edit")));
@@ -2090,10 +2080,8 @@ const createDocument = async (cms, collection, template, mutationInfo, values) =
   });
   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,
@@ -2140,7 +2128,7 @@ const CollectionCreatePage = () => {
   }));
 };
 const useGetDocument = (cms, collectionName, relativePath) => {
-  const [document2, setDocument] = useState(void 0);
+  const [document, setDocument] = useState(void 0);
   useEffect(() => {
     const fetchDocument = async () => {
       const response = await cms.api.tina.request(`
@@ -2156,7 +2144,7 @@ const useGetDocument = (cms, collectionName, relativePath) => {
     };
     fetchDocument();
   }, [cms, collectionName, relativePath]);
-  return document2;
+  return document;
 };
 const GetDocument = ({
   cms,
@@ -2164,11 +2152,11 @@ const GetDocument = ({
   relativePath,
   children
 }) => {
-  const document2 = useGetDocument(cms, collectionName, relativePath);
-  if (!document2) {
+  const document = useGetDocument(cms, collectionName, relativePath);
+  if (!document) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document2));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document));
 };
 const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
   const { includeCollection, includeTemplate } = mutationInfo;
@@ -2202,12 +2190,12 @@ const CollectionUpdatePage = () => {
       cms,
       collectionName: collection.name,
       relativePath
-    }, (document2) => {
+    }, (document) => {
       const form = new 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}`);
@@ -2224,20 +2212,6 @@ const CollectionUpdatePage = () => {
     });
   }));
 };
-const useEmbedTailwind = () => {
-  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.useEffect(() => {
     if (window) {
@@ -2247,7 +2221,6 @@ const Redirect = () => {
   return null;
 };
 const TinaAdmin = () => {
-  useEmbedTailwind();
   const isSSR = typeof window === "undefined";
   const { edit } = useEditState();
   if (isSSR) {

package/dist/index.js

@@ -653,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;
@@ -1038,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);
           }
@@ -1183,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;
@@ -1411,6 +1397,7 @@ 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",
@@ -1526,7 +1513,8 @@ mutation addPendingDocumentMutation(
     if (typeof props.query === "string") {
       props.query;
     }
-    if (!props.apiURL && !((props == null ? void 0 : props.clientId) || (props == null ? void 0 : props.isLocalClient))) {
+    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) : {
@@ -1541,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 || ""
@@ -1691,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,
@@ -1700,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);
@@ -2017,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}`,
+            to: `${location2.pathname}/${document.node.sys.filename}`,
             className: "h-5 leading-5 flex max-w-xs"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "flex-shrink-1 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", {
+          }, document.node.sys.filename), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "flex-shrink-0 leading-5 text-base font-medium text-gray-300"
-          }, document2.node.sys.extension))), /* @__PURE__ */ React__default["default"].createElement("td", {
+          }, 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")));
@@ -2110,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,
@@ -2160,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(`
@@ -2176,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,
@@ -2184,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;
@@ -2222,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}`);
@@ -2244,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) {
@@ -2267,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) {

package/dist/style.css

@@ -1,7 +1,6 @@
-body {
-  font-family: system-ui, -apple-system,
-    /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto,
-    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+.tina-tailwind {
+
+  /* gray-600 from tailwind config */
 }
 
 /**
@@ -562,8 +561,7 @@ Document
   display: none;
 }
 
-/*! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com
-*/
+/* ! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */
 
 .tina-tailwind *, .tina-tailwind ::before, .tina-tailwind ::after {
   --tw-translate-x: 0;
@@ -610,152 +608,6 @@ Document
   --tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.tina-tailwind [type='text'],.tina-tailwind [type='email'],.tina-tailwind [type='url'],.tina-tailwind [type='password'],.tina-tailwind [type='number'],.tina-tailwind [type='date'],.tina-tailwind [type='datetime-local'],.tina-tailwind [type='month'],.tina-tailwind [type='search'],.tina-tailwind [type='tel'],.tina-tailwind [type='time'],.tina-tailwind [type='week'],.tina-tailwind [multiple],.tina-tailwind textarea,.tina-tailwind select {
-  appearance: none;
-  background-color: #fff;
-  border-color: #716c7f;
-  border-width: 1px;
-  border-radius: 0px;
-  padding-top: 0.5rem;
-  padding-right: 0.75rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  --tw-shadow: 0 0 #0000;
-}
-
-.tina-tailwind [type='text']:focus, .tina-tailwind [type='email']:focus, .tina-tailwind [type='url']:focus, .tina-tailwind [type='password']:focus, .tina-tailwind [type='number']:focus, .tina-tailwind [type='date']:focus, .tina-tailwind [type='datetime-local']:focus, .tina-tailwind [type='month']:focus, .tina-tailwind [type='search']:focus, .tina-tailwind [type='tel']:focus, .tina-tailwind [type='time']:focus, .tina-tailwind [type='week']:focus, .tina-tailwind [multiple]:focus, .tina-tailwind textarea:focus, .tina-tailwind select:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: #0574e4;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  border-color: #0574e4;
-}
-
-.tina-tailwind input::placeholder,.tina-tailwind textarea::placeholder {
-  color: #716c7f;
-  opacity: 1;
-}
-
-.tina-tailwind ::-webkit-datetime-edit-fields-wrapper {
-  padding: 0;
-}
-
-.tina-tailwind ::-webkit-date-and-time-value {
-  min-height: 1.5em;
-}
-
-.tina-tailwind select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23716c7f' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 0.5rem center;
-  background-repeat: no-repeat;
-  background-size: 1.5em 1.5em;
-  padding-right: 2.5rem;
-  color-adjust: exact;
-}
-
-.tina-tailwind [multiple] {
-  background-image: initial;
-  background-position: initial;
-  background-repeat: unset;
-  background-size: initial;
-  padding-right: 0.75rem;
-  color-adjust: unset;
-}
-
-.tina-tailwind [type='checkbox'],.tina-tailwind [type='radio'] {
-  appearance: none;
-  padding: 0;
-  color-adjust: exact;
-  display: inline-block;
-  vertical-align: middle;
-  background-origin: border-box;
-  user-select: none;
-  flex-shrink: 0;
-  height: 1rem;
-  width: 1rem;
-  color: #0574e4;
-  background-color: #fff;
-  border-color: #716c7f;
-  border-width: 1px;
-  --tw-shadow: 0 0 #0000;
-}
-
-.tina-tailwind [type='checkbox'] {
-  border-radius: 0px;
-}
-
-.tina-tailwind [type='radio'] {
-  border-radius: 100%;
-}
-
-.tina-tailwind [type='checkbox']:focus,.tina-tailwind [type='radio']:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
-  --tw-ring-offset-width: 2px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: #0574e4;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-}
-
-.tina-tailwind [type='checkbox']:checked,.tina-tailwind [type='radio']:checked {
-  border-color: transparent;
-  background-color: currentColor;
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.tina-tailwind [type='checkbox']:checked {
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-}
-
-.tina-tailwind [type='radio']:checked {
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-}
-
-.tina-tailwind [type='checkbox']:checked:hover,.tina-tailwind [type='checkbox']:checked:focus,.tina-tailwind [type='radio']:checked:hover,.tina-tailwind [type='radio']:checked:focus {
-  border-color: transparent;
-  background-color: currentColor;
-}
-
-.tina-tailwind [type='checkbox']:indeterminate {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
-  border-color: transparent;
-  background-color: currentColor;
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.tina-tailwind [type='checkbox']:indeterminate:hover,.tina-tailwind [type='checkbox']:indeterminate:focus {
-  border-color: transparent;
-  background-color: currentColor;
-}
-
-.tina-tailwind [type='file'] {
-  background: unset;
-  border-color: inherit;
-  border-width: 0;
-  border-radius: 0;
-  padding: 0;
-  font-size: unset;
-  line-height: inherit;
-}
-
-.tina-tailwind [type='file']:focus {
-  outline: 1px auto -webkit-focus-ring-color;
-}
-
 .tina-tailwind .static {
   position: static !important;
 }
@@ -900,14 +752,18 @@ Document
   min-width: 100% !important;
 }
 
-.tina-tailwind .max-w-md {
-  max-width: 28rem !important;
+.tina-tailwind .max-w-lg {
+  max-width: 32rem !important;
 }
 
 .tina-tailwind .max-w-screen-md {
   max-width: 768px !important;
 }
 
+.tina-tailwind .max-w-xs {
+  max-width: 20rem !important;
+}
+
 .tina-tailwind .flex-1 {
   flex: 1 1 0% !important;
 }
@@ -1433,6 +1289,10 @@ Document
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important;
 }
 
+.tina-tailwind {
+  color: #565165;
+}
+
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1 !important;
   background-color: rgba(246, 246, 249, var(--tw-bg-opacity)) !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "main": "dist/index.js",
   "files": [
     "dist"