tinacms 0.66.10 → 0.67.2

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # tinacms
 
+## 0.67.2
+
+### Patch Changes
+
+- 40afac061: updated @headlessui/react
+- Updated dependencies [40afac061]
+  - @tinacms/toolkit@0.56.20
+
+## 0.67.1
+
+### Patch Changes
+
+- 921709a7e: Adds validation to the schema instead of only using typescript types
+- 3e2d9e43a: Adds new GraphQL `deleteDocument` mutation and logic
+- Updated dependencies [921709a7e]
+  - @tinacms/schema-tools@0.0.3
+
+## 0.67.0
+
+### Minor Changes
+
+- 86651039b: Updates to the way forms are generated in contextual editing. This lays the groundwork for
+  future updates but doesn't offer new behavior yet. It does come with a small breaking change:
+
+  [BREAKING]: The `id` of forms is now the actual document `path`. Previously this was the name of the GraphQL query node (eg. `getPostDocument`).
+  If you're using the [`formifyCallback`](https://tina.io/docs/advanced/customizing-forms/#customizing-a-form) prop to create global forms, you'll probably need to update the callback to check for the appropriate id.
+
+  Eg. `formConfig.id === 'getSiteNavsDocument'` should be something like `formConfig.id === 'content/navs/mynav.md'`
+
+  If you're experiencing any issues with contextual editing, you can disable this flag for now by specifying `cms.flags.set('use-unstable-formify', false)`.
+
 ## 0.66.10
 
 ### Patch Changes

package/dist/admin/api.d.ts

@@ -24,6 +24,10 @@ export declare class TinaAdminApi {
     fetchCollections(): Promise<{
         getCollections: Collection[];
     }>;
+    deleteDocument({ collection, relativePath, }: {
+        collection: string;
+        relativePath: string;
+    }): Promise<void>;
     fetchCollection(collectionName: string, includeDocuments: boolean): Promise<{
         getCollection: Collection;
     }>;

package/dist/admin/components/GetCollection.d.ts

@@ -16,6 +16,7 @@ export declare const useGetCollection: (cms: TinaCMS, collectionName: string, in
     collection: Collection;
     loading: boolean;
     error: Error;
+    reFetchCollection: () => void;
 };
 declare const GetCollection: ({ cms, collectionName, includeDocuments, children, }: {
     cms: TinaCMS;

package/dist/admin/components/GetCollections.d.ts

@@ -10,8 +10,8 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import type { TinaCMS } from '@tinacms/toolkit';
 import type { Collection } from '../types';
+import type { TinaCMS } from '@tinacms/toolkit';
 export declare const useGetCollections: (cms: TinaCMS) => {
     collections: Collection[];
     loading: boolean;

package/dist/hooks/use-graphql-forms.d.ts

@@ -10,7 +10,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { Form, AnyField } from '@tinacms/toolkit';
+import { AnyField, Form } from '@tinacms/toolkit';
 import type { FormOptions, TinaCMS } from '@tinacms/toolkit';
 export declare function useGraphqlFormsUnstable<T extends object>({ variables, onSubmit, query, formify, eventList, }: {
     query: string;

package/dist/index.es.js

@@ -29,14 +29,14 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, Nav, LocalWarning, FormStatus, FormBuilder } from "@tinacms/toolkit";
+import { useCMS, useBranchData, FormMetaPlugin, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, Nav, LocalWarning, OverflowMenu, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 import * as G from "graphql";
 import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType as isScalarType$1, getIntrospectionQuery, buildClientSchema, print, parse } from "graphql";
 import set from "lodash.set";
 import React, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
 import { getIn, setIn } from "final-form";
-import { resolveForm, TinaSchema, addNamespaceToSchema } from "@tinacms/schema-tools";
+import { resolveForm, TinaSchema, addNamespaceToSchema, validateSchema } from "@tinacms/schema-tools";
 import gql$1 from "graphql-tag";
 import * as yup from "yup";
 import styled from "styled-components";
@@ -417,9 +417,6 @@ function useGraphqlFormsUnstable({
   eventList
 }) {
   const cms = useCMS();
-  React.useEffect(() => {
-    console.log("NOTE: using unstable formify");
-  }, []);
   const state = useFormify({
     query,
     cms,
@@ -495,11 +492,12 @@ function useGraphqlForms({
       setIsLoading(false);
       return;
     }
+    const useUnstableFormify = (cms == null ? void 0 : cms.flags.get("use-unstable-formify")) === false ? false : true;
     const formIds = [];
     setIsLoading(true);
     cms.api.tina.requestWithForm((gql2) => gql2(query), {
       variables,
-      useUnstableFormify: cms.flags.get("use-unstable-formify")
+      useUnstableFormify
     }).then((payload) => {
       cms.plugins.remove(new FormMetaPlugin({ name: "tina-admin-link" }));
       setData(payload);
@@ -648,10 +646,8 @@ function useGraphqlForms({
         }, { values: true });
       });
     }).catch((e) => {
-      cms.alerts.error("There was a problem setting up forms for your query");
-      console.error("There was a problem setting up forms for your query");
-      console.error(e);
       setIsLoading(false);
+      throw new Error(`There was a problem setting up forms for your query: ${e.message}`);
     });
     return () => {
       formIds.forEach((name) => {
@@ -2710,6 +2706,17 @@ class TinaAdminApi {
       }`, { variables: {} });
     return response;
   }
+  async deleteDocument({
+    collection,
+    relativePath
+  }) {
+    await this.api.request(`#graphql
+      mutation DeleteDocument($collection: String!, $relativePath: String!  ){
+  deleteDocument(collection: $collection, relativePath: $relativePath){
+    __typename
+  }
+}`, { variables: { collection, relativePath } });
+  }
   async fetchCollection(collectionName, includeDocuments) {
     const response = await this.api.request(`#graphql
       query($collection: String!, $includeDocuments: Boolean!){
@@ -2934,6 +2941,7 @@ const TinaCloudProvider = (props) => {
   }))));
 };
 const TinaCloudAuthWall = TinaCloudProvider;
+var styles = '*, ::before, ::after {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-rotate: 0;\n      --tw-skew-x: 0;\n      --tw-skew-y: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-pan-x:  ;\n      --tw-pan-y:  ;\n      --tw-pinch-zoom:  ;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-ordinal:  ;\n      --tw-slashed-zero:  ;\n      --tw-numeric-figure:  ;\n      --tw-numeric-spacing:  ;\n      --tw-numeric-fraction:  ;\n      --tw-ring-inset:  ;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-color: rgb(0 132 255 / 0.5);\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-colored: 0 0 #0000;\n      --tw-blur:  ;\n      --tw-brightness:  ;\n      --tw-contrast:  ;\n      --tw-grayscale:  ;\n      --tw-hue-rotate:  ;\n      --tw-invert:  ;\n      --tw-saturate:  ;\n      --tw-sepia:  ;\n      --tw-drop-shadow:  ;\n      --tw-backdrop-blur:  ;\n      --tw-backdrop-brightness:  ;\n      --tw-backdrop-contrast:  ;\n      --tw-backdrop-grayscale:  ;\n      --tw-backdrop-hue-rotate:  ;\n      --tw-backdrop-invert:  ;\n      --tw-backdrop-opacity:  ;\n      --tw-backdrop-saturate:  ;\n      --tw-backdrop-sepia:  ;\n}\n.tina-tailwind .static {\n      position: static;\n}\n.tina-tailwind .fixed {\n      position: fixed;\n}\n.tina-tailwind .absolute {\n      position: absolute;\n}\n.tina-tailwind .relative {\n      position: relative;\n}\n.tina-tailwind .left-0 {\n      left: 0px;\n}\n.tina-tailwind .right-0 {\n      right: 0px;\n}\n.tina-tailwind .mx-auto {\n      margin-left: auto;\n      margin-right: auto;\n}\n.tina-tailwind .mr-2 {\n      margin-right: 8px;\n}\n.tina-tailwind .mb-2 {\n      margin-bottom: 8px;\n}\n.tina-tailwind .mb-1 {\n      margin-bottom: 4px;\n}\n.tina-tailwind .-mt-0\\.5 {\n      margin-top: -2px;\n}\n.tina-tailwind .-mt-0 {\n      margin-top: -0px;\n}\n.tina-tailwind .ml-1 {\n      margin-left: 4px;\n}\n.tina-tailwind .mt-2 {\n      margin-top: 8px;\n}\n.tina-tailwind .mr-1\\.5 {\n      margin-right: 6px;\n}\n.tina-tailwind .mr-1 {\n      margin-right: 4px;\n}\n.tina-tailwind .block {\n      display: block;\n}\n.tina-tailwind .inline-block {\n      display: inline-block;\n}\n.tina-tailwind .inline {\n      display: inline;\n}\n.tina-tailwind .flex {\n      display: flex;\n}\n.tina-tailwind .inline-flex {\n      display: inline-flex;\n}\n.tina-tailwind .table {\n      display: table;\n}\n.tina-tailwind .h-screen {\n      height: 100vh;\n}\n.tina-tailwind .h-auto {\n      height: auto;\n}\n.tina-tailwind .h-full {\n      height: 100%;\n}\n.tina-tailwind .h-6 {\n      height: 24px;\n}\n.tina-tailwind .h-10 {\n      height: 40px;\n}\n.tina-tailwind .h-5 {\n      height: 20px;\n}\n.tina-tailwind .h-12 {\n      height: 48px;\n}\n.tina-tailwind .w-full {\n      width: 100%;\n}\n.tina-tailwind .w-10 {\n      width: 40px;\n}\n.tina-tailwind .w-auto {\n      width: auto;\n}\n.tina-tailwind .w-5 {\n      width: 20px;\n}\n.tina-tailwind .w-56 {\n      width: 224px;\n}\n.tina-tailwind .w-0 {\n      width: 0px;\n}\n.tina-tailwind .w-6 {\n      width: 24px;\n}\n.tina-tailwind .max-w-lg {\n      max-width: 32rem;\n}\n.tina-tailwind .max-w-screen-xl {\n      max-width: 1280px;\n}\n.tina-tailwind .max-w-form {\n      max-width: 900px;\n}\n.tina-tailwind .max-w-full {\n      max-width: 100%;\n}\n.tina-tailwind .flex-1 {\n      flex: 1 1 0%;\n}\n.tina-tailwind .flex-shrink-0 {\n      flex-shrink: 0;\n}\n.tina-tailwind .flex-grow-0 {\n      flex-grow: 0;\n}\n.tina-tailwind .table-auto {\n      table-layout: auto;\n}\n.tina-tailwind .origin-top-right {\n      transform-origin: top right;\n}\n.tina-tailwind .scale-95 {\n      --tw-scale-x: .95;\n      --tw-scale-y: .95;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .scale-100 {\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .transform {\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .cursor-pointer {\n      cursor: pointer;\n}\n.tina-tailwind .flex-col {\n      flex-direction: column;\n}\n.tina-tailwind .items-end {\n      align-items: flex-end;\n}\n.tina-tailwind .items-center {\n      align-items: center;\n}\n.tina-tailwind .items-stretch {\n      align-items: stretch;\n}\n.tina-tailwind .justify-end {\n      justify-content: flex-end;\n}\n.tina-tailwind .justify-center {\n      justify-content: center;\n}\n.tina-tailwind .justify-between {\n      justify-content: space-between;\n}\n.tina-tailwind .gap-0\\.5 {\n      gap: 2px;\n}\n.tina-tailwind .gap-0 {\n      gap: 0px;\n}\n.tina-tailwind .gap-4 {\n      gap: 16px;\n}\n.tina-tailwind .gap-3 {\n      gap: 12px;\n}\n.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-y-reverse: 0;\n      border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n      border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.tina-tailwind .divide-gray-150 > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-divide-opacity));\n}\n.tina-tailwind .overflow-hidden {\n      overflow: hidden;\n}\n.tina-tailwind .overflow-y-auto {\n      overflow-y: auto;\n}\n.tina-tailwind .whitespace-nowrap {\n      white-space: nowrap;\n}\n.tina-tailwind .rounded-lg {\n      border-radius: 8px;\n}\n.tina-tailwind .rounded-full {\n      border-radius: 9999px;\n}\n.tina-tailwind .rounded-md {\n      border-radius: 6px;\n}\n.tina-tailwind .border {\n      border-width: 1px;\n}\n.tina-tailwind .border-b {\n      border-bottom-width: 1px;\n}\n.tina-tailwind .border-gray-150 {\n      --tw-border-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-border-opacity));\n}\n.tina-tailwind .border-gray-200 {\n      --tw-border-opacity: 1;\n      border-color: rgb(225 221 236 / var(--tw-border-opacity));\n}\n.tina-tailwind .bg-white {\n      --tw-bg-opacity: 1;\n      background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gray-50 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(246 246 249 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-blue-500 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(0 132 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gradient-to-b {\n      background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.tina-tailwind .from-blue-900 {\n      --tw-gradient-from: #1D2C6C;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));\n}\n.tina-tailwind .to-gray-900 {\n      --tw-gradient-to: #252336;\n}\n.tina-tailwind .px-4 {\n      padding-left: 16px;\n      padding-right: 16px;\n}\n.tina-tailwind .py-6 {\n      padding-top: 24px;\n      padding-bottom: 24px;\n}\n.tina-tailwind .px-5 {\n      padding-left: 20px;\n      padding-right: 20px;\n}\n.tina-tailwind .py-4 {\n      padding-top: 16px;\n      padding-bottom: 16px;\n}\n.tina-tailwind .px-12 {\n      padding-left: 48px;\n      padding-right: 48px;\n}\n.tina-tailwind .py-10 {\n      padding-top: 40px;\n      padding-bottom: 40px;\n}\n.tina-tailwind .px-20 {\n      padding-left: 80px;\n      padding-right: 80px;\n}\n.tina-tailwind .px-6 {\n      padding-left: 24px;\n      padding-right: 24px;\n}\n.tina-tailwind .py-1 {\n      padding-top: 4px;\n      padding-bottom: 4px;\n}\n.tina-tailwind .py-2 {\n      padding-top: 8px;\n      padding-bottom: 8px;\n}\n.tina-tailwind .pt-4 {\n      padding-top: 16px;\n}\n.tina-tailwind .pb-4 {\n      padding-bottom: 16px;\n}\n.tina-tailwind .pt-18 {\n      padding-top: 72px;\n}\n.tina-tailwind .text-left {\n      text-align: left;\n}\n.tina-tailwind .text-center {\n      text-align: center;\n}\n.tina-tailwind .font-sans {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n.tina-tailwind .text-2xl {\n      font-size: 24px;\n      line-height: 1.33;\n}\n.tina-tailwind .text-base {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-sm {\n      font-size: 14px;\n      line-height: 1.43;\n}\n.tina-tailwind .text-xl {\n      font-size: 20px;\n      line-height: 1.4;\n}\n.tina-tailwind .text-md {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-xs {\n      font-size: 13px;\n      line-height: 1.33;\n}\n.tina-tailwind .font-medium {\n      font-weight: 500;\n}\n.tina-tailwind .uppercase {\n      text-transform: uppercase;\n}\n.tina-tailwind .italic {\n      font-style: italic;\n}\n.tina-tailwind .leading-normal {\n      line-height: 1.5;\n}\n.tina-tailwind .leading-tight {\n      line-height: 1.25;\n}\n.tina-tailwind .leading-5 {\n      line-height: 20px;\n}\n.tina-tailwind .tracking-wide {\n      letter-spacing: 0.025em;\n}\n.tina-tailwind .text-gray-600 {\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-700 {\n      --tw-text-opacity: 1;\n      color: rgb(67 62 82 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-blue-600 {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-500 {\n      --tw-text-opacity: 1;\n      color: rgb(113 108 127 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-400 {\n      --tw-text-opacity: 1;\n      color: rgb(145 140 158 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-current {\n      color: currentColor;\n}\n.tina-tailwind .text-white {\n      --tw-text-opacity: 1;\n      color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-800 {\n      --tw-text-opacity: 1;\n      color: rgb(54 49 69 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-900 {\n      --tw-text-opacity: 1;\n      color: rgb(37 35 54 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-red-500 {\n      --tw-text-opacity: 1;\n      color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n.tina-tailwind .underline {\n      text-decoration-line: underline;\n}\n.tina-tailwind .opacity-100 {\n      opacity: 1;\n}\n.tina-tailwind .opacity-90 {\n      opacity: .9;\n}\n.tina-tailwind .opacity-80 {\n      opacity: .8;\n}\n.tina-tailwind .opacity-50 {\n      opacity: .5;\n}\n.tina-tailwind .opacity-70 {\n      opacity: .7;\n}\n.tina-tailwind .opacity-0 {\n      opacity: 0;\n}\n.tina-tailwind .shadow-lg {\n      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow-2xl {\n      --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n      --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow {\n      --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .ring-1 {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.tina-tailwind .ring-black {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.tina-tailwind .ring-opacity-5 {\n      --tw-ring-opacity: .05;\n}\n.tina-tailwind .filter {\n      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.tina-tailwind .transition-opacity {\n      transition-property: opacity;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-colors {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-all {\n      transition-property: all;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-300 {\n      transition-duration: 300ms;\n}\n.tina-tailwind .duration-150 {\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-100 {\n      transition-duration: 100ms;\n}\n.tina-tailwind .duration-75 {\n      transition-duration: 75ms;\n}\n.tina-tailwind .ease-out {\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.tina-tailwind .ease-in {\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.tina-tailwind .icon-parent svg {\n      fill: currentColor;\n    }\n\n.tina-tailwind {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n      font-size: 16px;\n      line-height: 1.5;\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:bg-blue-600:hover {\n      --tw-bg-opacity: 1;\n      background-color: rgb(5 116 228 / var(--tw-bg-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-600:hover {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-400:hover {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:opacity-100:hover {\n      opacity: 1;\n}\n\n.tina-tailwind .focus\\:text-blue-400:focus {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .focus\\:underline:focus {\n      text-decoration-line: underline;\n}\n\n.tina-tailwind .focus\\:shadow-outline:focus {\n      --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n      --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.tina-tailwind .focus\\:outline-none:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n}\n\n.tina-tailwind .focus\\:ring-2:focus {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.tina-tailwind .focus\\:ring-blue-500:focus {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));\n}\n';
 class ContentCreatorPlugin {
   constructor(options) {
     this.__type = "content-creator";
@@ -3096,7 +3104,6 @@ const useDocumentCreatorPlugin = (args) => {
     };
   }, [plugin]);
 };
-var styles = '*, ::before, ::after {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-rotate: 0;\n      --tw-skew-x: 0;\n      --tw-skew-y: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-pan-x:  ;\n      --tw-pan-y:  ;\n      --tw-pinch-zoom:  ;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-ordinal:  ;\n      --tw-slashed-zero:  ;\n      --tw-numeric-figure:  ;\n      --tw-numeric-spacing:  ;\n      --tw-numeric-fraction:  ;\n      --tw-ring-inset:  ;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-color: rgb(0 132 255 / 0.5);\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-colored: 0 0 #0000;\n      --tw-blur:  ;\n      --tw-brightness:  ;\n      --tw-contrast:  ;\n      --tw-grayscale:  ;\n      --tw-hue-rotate:  ;\n      --tw-invert:  ;\n      --tw-saturate:  ;\n      --tw-sepia:  ;\n      --tw-drop-shadow:  ;\n      --tw-backdrop-blur:  ;\n      --tw-backdrop-brightness:  ;\n      --tw-backdrop-contrast:  ;\n      --tw-backdrop-grayscale:  ;\n      --tw-backdrop-hue-rotate:  ;\n      --tw-backdrop-invert:  ;\n      --tw-backdrop-opacity:  ;\n      --tw-backdrop-saturate:  ;\n      --tw-backdrop-sepia:  ;\n}\n.tina-tailwind .static {\n      position: static;\n}\n.tina-tailwind .fixed {\n      position: fixed;\n}\n.tina-tailwind .absolute {\n      position: absolute;\n}\n.tina-tailwind .relative {\n      position: relative;\n}\n.tina-tailwind .left-0 {\n      left: 0px;\n}\n.tina-tailwind .right-0 {\n      right: 0px;\n}\n.tina-tailwind .mx-auto {\n      margin-left: auto;\n      margin-right: auto;\n}\n.tina-tailwind .mr-2 {\n      margin-right: 8px;\n}\n.tina-tailwind .mb-2 {\n      margin-bottom: 8px;\n}\n.tina-tailwind .mb-1 {\n      margin-bottom: 4px;\n}\n.tina-tailwind .-mt-0\\.5 {\n      margin-top: -2px;\n}\n.tina-tailwind .-mt-0 {\n      margin-top: -0px;\n}\n.tina-tailwind .ml-1 {\n      margin-left: 4px;\n}\n.tina-tailwind .mt-2 {\n      margin-top: 8px;\n}\n.tina-tailwind .mr-1\\.5 {\n      margin-right: 6px;\n}\n.tina-tailwind .mr-1 {\n      margin-right: 4px;\n}\n.tina-tailwind .block {\n      display: block;\n}\n.tina-tailwind .inline-block {\n      display: inline-block;\n}\n.tina-tailwind .inline {\n      display: inline;\n}\n.tina-tailwind .flex {\n      display: flex;\n}\n.tina-tailwind .inline-flex {\n      display: inline-flex;\n}\n.tina-tailwind .table {\n      display: table;\n}\n.tina-tailwind .h-screen {\n      height: 100vh;\n}\n.tina-tailwind .h-auto {\n      height: auto;\n}\n.tina-tailwind .h-full {\n      height: 100%;\n}\n.tina-tailwind .h-6 {\n      height: 24px;\n}\n.tina-tailwind .h-10 {\n      height: 40px;\n}\n.tina-tailwind .h-5 {\n      height: 20px;\n}\n.tina-tailwind .h-12 {\n      height: 48px;\n}\n.tina-tailwind .w-full {\n      width: 100%;\n}\n.tina-tailwind .w-10 {\n      width: 40px;\n}\n.tina-tailwind .w-auto {\n      width: auto;\n}\n.tina-tailwind .w-5 {\n      width: 20px;\n}\n.tina-tailwind .w-56 {\n      width: 224px;\n}\n.tina-tailwind .w-6 {\n      width: 24px;\n}\n.tina-tailwind .max-w-lg {\n      max-width: 32rem;\n}\n.tina-tailwind .max-w-screen-xl {\n      max-width: 1280px;\n}\n.tina-tailwind .max-w-form {\n      max-width: 900px;\n}\n.tina-tailwind .max-w-full {\n      max-width: 100%;\n}\n.tina-tailwind .flex-1 {\n      flex: 1 1 0%;\n}\n.tina-tailwind .flex-shrink-0 {\n      flex-shrink: 0;\n}\n.tina-tailwind .flex-grow-0 {\n      flex-grow: 0;\n}\n.tina-tailwind .table-auto {\n      table-layout: auto;\n}\n.tina-tailwind .origin-top-right {\n      transform-origin: top right;\n}\n.tina-tailwind .scale-95 {\n      --tw-scale-x: .95;\n      --tw-scale-y: .95;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .scale-100 {\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .transform {\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .cursor-pointer {\n      cursor: pointer;\n}\n.tina-tailwind .flex-col {\n      flex-direction: column;\n}\n.tina-tailwind .items-end {\n      align-items: flex-end;\n}\n.tina-tailwind .items-center {\n      align-items: center;\n}\n.tina-tailwind .items-stretch {\n      align-items: stretch;\n}\n.tina-tailwind .justify-end {\n      justify-content: flex-end;\n}\n.tina-tailwind .justify-center {\n      justify-content: center;\n}\n.tina-tailwind .justify-between {\n      justify-content: space-between;\n}\n.tina-tailwind .gap-0\\.5 {\n      gap: 2px;\n}\n.tina-tailwind .gap-0 {\n      gap: 0px;\n}\n.tina-tailwind .gap-4 {\n      gap: 16px;\n}\n.tina-tailwind .gap-3 {\n      gap: 12px;\n}\n.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-y-reverse: 0;\n      border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n      border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.tina-tailwind .divide-gray-150 > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-divide-opacity));\n}\n.tina-tailwind .overflow-hidden {\n      overflow: hidden;\n}\n.tina-tailwind .overflow-y-auto {\n      overflow-y: auto;\n}\n.tina-tailwind .whitespace-nowrap {\n      white-space: nowrap;\n}\n.tina-tailwind .rounded-lg {\n      border-radius: 8px;\n}\n.tina-tailwind .rounded-full {\n      border-radius: 9999px;\n}\n.tina-tailwind .rounded-md {\n      border-radius: 6px;\n}\n.tina-tailwind .border {\n      border-width: 1px;\n}\n.tina-tailwind .border-b {\n      border-bottom-width: 1px;\n}\n.tina-tailwind .border-gray-150 {\n      --tw-border-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-border-opacity));\n}\n.tina-tailwind .border-gray-200 {\n      --tw-border-opacity: 1;\n      border-color: rgb(225 221 236 / var(--tw-border-opacity));\n}\n.tina-tailwind .bg-white {\n      --tw-bg-opacity: 1;\n      background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gray-50 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(246 246 249 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-blue-500 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(0 132 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gradient-to-b {\n      background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.tina-tailwind .from-blue-900 {\n      --tw-gradient-from: #1D2C6C;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));\n}\n.tina-tailwind .to-gray-900 {\n      --tw-gradient-to: #252336;\n}\n.tina-tailwind .px-4 {\n      padding-left: 16px;\n      padding-right: 16px;\n}\n.tina-tailwind .py-6 {\n      padding-top: 24px;\n      padding-bottom: 24px;\n}\n.tina-tailwind .px-5 {\n      padding-left: 20px;\n      padding-right: 20px;\n}\n.tina-tailwind .py-4 {\n      padding-top: 16px;\n      padding-bottom: 16px;\n}\n.tina-tailwind .px-12 {\n      padding-left: 48px;\n      padding-right: 48px;\n}\n.tina-tailwind .py-10 {\n      padding-top: 40px;\n      padding-bottom: 40px;\n}\n.tina-tailwind .px-20 {\n      padding-left: 80px;\n      padding-right: 80px;\n}\n.tina-tailwind .px-6 {\n      padding-left: 24px;\n      padding-right: 24px;\n}\n.tina-tailwind .py-1 {\n      padding-top: 4px;\n      padding-bottom: 4px;\n}\n.tina-tailwind .py-2 {\n      padding-top: 8px;\n      padding-bottom: 8px;\n}\n.tina-tailwind .pt-4 {\n      padding-top: 16px;\n}\n.tina-tailwind .pb-4 {\n      padding-bottom: 16px;\n}\n.tina-tailwind .pt-18 {\n      padding-top: 72px;\n}\n.tina-tailwind .text-left {\n      text-align: left;\n}\n.tina-tailwind .text-center {\n      text-align: center;\n}\n.tina-tailwind .font-sans {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n.tina-tailwind .text-2xl {\n      font-size: 24px;\n      line-height: 1.33;\n}\n.tina-tailwind .text-base {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-sm {\n      font-size: 14px;\n      line-height: 1.43;\n}\n.tina-tailwind .text-xl {\n      font-size: 20px;\n      line-height: 1.4;\n}\n.tina-tailwind .text-md {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-xs {\n      font-size: 13px;\n      line-height: 1.33;\n}\n.tina-tailwind .font-medium {\n      font-weight: 500;\n}\n.tina-tailwind .uppercase {\n      text-transform: uppercase;\n}\n.tina-tailwind .italic {\n      font-style: italic;\n}\n.tina-tailwind .leading-normal {\n      line-height: 1.5;\n}\n.tina-tailwind .leading-tight {\n      line-height: 1.25;\n}\n.tina-tailwind .leading-5 {\n      line-height: 20px;\n}\n.tina-tailwind .tracking-wide {\n      letter-spacing: 0.025em;\n}\n.tina-tailwind .text-gray-700 {\n      --tw-text-opacity: 1;\n      color: rgb(67 62 82 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-blue-600 {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-500 {\n      --tw-text-opacity: 1;\n      color: rgb(113 108 127 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-400 {\n      --tw-text-opacity: 1;\n      color: rgb(145 140 158 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-current {\n      color: currentColor;\n}\n.tina-tailwind .text-white {\n      --tw-text-opacity: 1;\n      color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-600 {\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-800 {\n      --tw-text-opacity: 1;\n      color: rgb(54 49 69 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-900 {\n      --tw-text-opacity: 1;\n      color: rgb(37 35 54 / var(--tw-text-opacity));\n}\n.tina-tailwind .underline {\n      text-decoration-line: underline;\n}\n.tina-tailwind .opacity-100 {\n      opacity: 1;\n}\n.tina-tailwind .opacity-90 {\n      opacity: .9;\n}\n.tina-tailwind .opacity-80 {\n      opacity: .8;\n}\n.tina-tailwind .opacity-50 {\n      opacity: .5;\n}\n.tina-tailwind .opacity-70 {\n      opacity: .7;\n}\n.tina-tailwind .opacity-0 {\n      opacity: 0;\n}\n.tina-tailwind .shadow-lg {\n      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow-2xl {\n      --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n      --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow {\n      --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .ring-1 {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.tina-tailwind .ring-black {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.tina-tailwind .ring-opacity-5 {\n      --tw-ring-opacity: .05;\n}\n.tina-tailwind .filter {\n      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.tina-tailwind .transition-opacity {\n      transition-property: opacity;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-colors {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-all {\n      transition-property: all;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-300 {\n      transition-duration: 300ms;\n}\n.tina-tailwind .duration-150 {\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-100 {\n      transition-duration: 100ms;\n}\n.tina-tailwind .duration-75 {\n      transition-duration: 75ms;\n}\n.tina-tailwind .ease-out {\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.tina-tailwind .ease-in {\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.tina-tailwind .icon-parent svg {\n      fill: currentColor;\n    }\n\n.tina-tailwind {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n      font-size: 16px;\n      line-height: 1.5;\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:bg-blue-600:hover {\n      --tw-bg-opacity: 1;\n      background-color: rgb(5 116 228 / var(--tw-bg-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-600:hover {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-400:hover {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:opacity-100:hover {\n      opacity: 1;\n}\n\n.tina-tailwind .focus\\:text-blue-400:focus {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .focus\\:underline:focus {\n      text-decoration-line: underline;\n}\n\n.tina-tailwind .focus\\:shadow-outline:focus {\n      --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n      --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.tina-tailwind .focus\\:outline-none:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n}\n\n.tina-tailwind .focus\\:ring-2:focus {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.tina-tailwind .focus\\:ring-blue-500:focus {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));\n}\n';
 function useTina({
   query,
   variables,
@@ -3175,13 +3182,23 @@ class ErrorBoundary extends React.Component {
         style: { color: "#eb6337" }
       }, "TinaCMS Render Error"), /* @__PURE__ */ React.createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React.createElement("pre", {
         style: { marginTop: "1rem", overflowX: "auto" }
-      }, this.state.message), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React.createElement("button", {
+      }, this.state.message), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React.createElement("p", null, "See our", " ", /* @__PURE__ */ React.createElement("a", {
+        className: "text-gray-600",
+        style: { textDecoration: "underline" },
+        href: "https://tina.io/docs/errors/faq/",
+        target: "_blank"
+      }, " ", "Error FAQ", " "), " ", "for more information."), /* @__PURE__ */ React.createElement("button", {
         style: errorButtonStyles,
         onClick: () => {
           this.setState({ pageRefresh: true });
           setTimeout(() => this.setState({ hasError: false, pageRefresh: false }), 3e3);
         }
-      }, "Refresh"), hasBranchData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React.createElement("button", {
+      }, "Refresh"), hasBranchData && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React.createElement("p", null, "See our", " ", /* @__PURE__ */ React.createElement("a", {
+        className: "text-gray-600",
+        style: { textDecoration: "underline" },
+        href: "https://tina.io/docs/errors/faq/",
+        target: "_blank"
+      }, " ", "Error FAQ", " "), " ", "for more information."), /* @__PURE__ */ React.createElement("button", {
         style: errorButtonStyles,
         onClick: () => {
           window.localStorage.removeItem("tinacms-current-branch");
@@ -3282,10 +3299,10 @@ const TinaDataProvider = ({
   });
   const cms = useCMS();
   const useUnstableFormify = React.useMemo(() => {
-    if (cms == null ? void 0 : cms.flags.get("use-unstable-formify")) {
-      return true;
+    if ((cms == null ? void 0 : cms.flags.get("use-unstable-formify")) === false) {
+      return false;
     }
-    return false;
+    return true;
   }, [cms == null ? void 0 : cms.flags]);
   return /* @__PURE__ */ React.createElement(TinaDataContext.Provider, {
     value: {
@@ -3603,10 +3620,10 @@ const useGetCollections = (cms) => {
           const response = await api.fetchCollections();
           setCollections(response.getCollections);
         } catch (error2) {
-          cms.alerts.error(`[${error2.name}] GetCollections failed: ${error2.message}`, 30 * 1e3);
           console.error(error2);
           setCollections([]);
           setError(error2);
+          throw new Error(`[${error2.name}] GetCollections failed: ${error2.message}`);
         }
         setLoading(false);
       }
@@ -3671,6 +3688,9 @@ function BiLogOut(props) {
 function BiPlus(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
 }
+function BiTrash(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z" } }, { "tag": "path", "attr": { "d": "M9 10h2v8H9zm4 0h2v8h-2z" } }] })(props);
+}
 function MdOutlineArrowBack(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
 }
@@ -3896,6 +3916,7 @@ const useGetCollection = (cms, collectionName, includeDocuments = true) => {
   const [collection, setCollection] = useState(void 0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(void 0);
+  const [resetState, setResetSate] = useState(0);
   useEffect(() => {
     const fetchCollection = async () => {
       if (await api.isAuthenticated()) {
@@ -3913,8 +3934,9 @@ const useGetCollection = (cms, collectionName, includeDocuments = true) => {
     };
     setLoading(true);
     fetchCollection();
-  }, [cms, collectionName]);
-  return { collection, loading, error };
+  }, [cms, collectionName, resetState]);
+  const reFetchCollection = () => setResetSate((x) => x + 1);
+  return { collection, loading, error, reFetchCollection };
 };
 const GetCollection = ({
   cms,
@@ -3922,14 +3944,14 @@ const GetCollection = ({
   includeDocuments = true,
   children
 }) => {
-  const { collection, loading, error } = useGetCollection(cms, collectionName, includeDocuments);
+  const { collection, loading, error, reFetchCollection } = useGetCollection(cms, collectionName, includeDocuments);
   if (error) {
     return null;
   }
   if (loading) {
     return /* @__PURE__ */ React.createElement(LoadingPage, null);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading, reFetchCollection));
 };
 const TemplateMenu = ({ templates }) => {
   return /* @__PURE__ */ React.createElement(Menu, {
@@ -3972,16 +3994,36 @@ const handleNavigate = (navigate, cms, collection, document) => {
 const CollectionListPage = () => {
   const navigate = useNavigate();
   const { collectionName } = useParams();
+  const [open, setOpen] = React.useState(false);
+  const [vars, setVars] = React.useState({
+    collection: collectionName,
+    relativePath: ""
+  });
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
     return /* @__PURE__ */ React.createElement(GetCollection, {
       cms,
       collectionName,
       includeDocuments: true
-    }, (collection) => {
+    }, (collection, _loading, reFetchCollection) => {
       var _a, _b;
       const totalCount = collection.documents.totalCount;
       const documents = collection.documents.edges;
-      return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PageHeader, {
+      const admin = cms.api.admin;
+      return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, open && /* @__PURE__ */ React.createElement(DeleteModal, {
+        filename: vars.relativePath,
+        deleteFunc: async () => {
+          try {
+            await admin.deleteDocument(vars);
+            cms.alerts.info("Document was successfully deleted");
+            reFetchCollection();
+          } catch (error) {
+            cms.alerts.warn("Document was not deleted, ask a developer for help or check the console for an error message");
+            console.error(error);
+            throw error;
+          }
+        },
+        close: () => setOpen(false)
+      }), /* @__PURE__ */ React.createElement(PageHeader, {
         isLocalMode: (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
       }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", {
         className: "text-2xl text-gray-700"
@@ -4030,14 +4072,59 @@ const CollectionListPage = () => {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Template"), /* @__PURE__ */ React.createElement("span", {
           className: "h-5 leading-5 block text-sm font-medium text-gray-900"
-        }, document.node.sys.template)));
+        }, document.node.sys.template)), /* @__PURE__ */ React.createElement("td", {
+          className: "w-0"
+        }, /* @__PURE__ */ React.createElement(OverflowMenu, {
+          showEmbed: true,
+          toolbarItems: [
+            {
+              name: "edit",
+              label: "Edit in Admin",
+              Icon: /* @__PURE__ */ React.createElement(BiEdit, {
+                size: "1.3rem"
+              }),
+              onMouseDown: () => {
+                navigate(`${document.node.sys.filename}`, { replace: true });
+              }
+            },
+            {
+              name: "delete",
+              label: "Delete",
+              Icon: /* @__PURE__ */ React.createElement(BiTrash, {
+                size: "1.3rem",
+                className: "text-red-500"
+              }),
+              onMouseDown: () => {
+                setVars({
+                  collection: collectionName,
+                  relativePath: document.node.sys.filename + document.node.sys.extension
+                });
+                setOpen(true);
+              }
+            }
+          ]
+        })));
       })))))));
     });
   });
 };
-function HiChevronRight(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
-}
+const DeleteModal = ({ close: close2, deleteFunc, filename }) => {
+  return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, {
+    close: close2
+  }, "Reset"), /* @__PURE__ */ React.createElement(ModalBody, {
+    padded: true
+  }, /* @__PURE__ */ React.createElement("p", null, `Are you sure you want to delete ${filename}?`)), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button, {
+    style: { flexGrow: 2 },
+    onClick: close2
+  }, "Cancel"), /* @__PURE__ */ React.createElement(Button, {
+    style: { flexGrow: 3 },
+    variant: "danger",
+    onClick: async () => {
+      await deleteFunc();
+      close2();
+    }
+  }, "Delete"))));
+};
 const useGetDocumentFields = (cms, collectionName, templateName) => {
   const api = new TinaAdminApi(cms);
   const [info, setInfo] = useState({
@@ -4104,6 +4191,9 @@ const GetDocumentFields = ({
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, children({ collection, template, fields, mutationInfo, loading }));
 };
+function HiChevronRight(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
+}
 const createDocument = async (cms, collection, template, mutationInfo, values) => {
   const api = new TinaAdminApi(cms);
   const _a = values, { filename } = _a, leftover = __objRest(_a, ["filename"]);
@@ -4190,8 +4280,8 @@ const RenderForm$1 = ({ cms, collection, template, fields, mutationInfo }) => {
           cms.alerts.success("Document created!");
           navigate(`/collections/${collection.name}`);
         } catch (error) {
-          cms.alerts.error(`[${error.name}] CreateDocument failed: ${error.message}`, 30 * 1e3);
           console.error(error);
+          throw new Error(`[${error.name}] CreateDocument failed: ${error.message}`);
         }
       }
     });
@@ -4333,8 +4423,8 @@ const RenderForm = ({
           await updateDocument(cms, relativePath, collection, mutationInfo, values);
           cms.alerts.success("Document updated!");
         } catch (error) {
-          cms.alerts.error(`[${error.name}] UpdateDocument failed: ${error.message}`, 30 * 1e3);
           console.error(error);
+          throw new Error(`[${error.name}] UpdateDocument failed: ${error.message}`);
         }
       }
     });
@@ -4441,6 +4531,7 @@ class RouteMappingPlugin {
   }
 }
 const defineSchema = (config) => {
+  validateSchema({ config });
   return config;
 };
 const defineConfig = (config) => {

package/dist/index.js

@@ -436,9 +436,6 @@ var __objRest = (source, exclude) => {
     eventList
   }) {
     const cms = toolkit.useCMS();
-    React__default["default"].useEffect(() => {
-      console.log("NOTE: using unstable formify");
-    }, []);
     const state = useFormify({
       query,
       cms,
@@ -514,11 +511,12 @@ var __objRest = (source, exclude) => {
         setIsLoading(false);
         return;
       }
+      const useUnstableFormify = (cms == null ? void 0 : cms.flags.get("use-unstable-formify")) === false ? false : true;
       const formIds = [];
       setIsLoading(true);
       cms.api.tina.requestWithForm((gql2) => gql2(query), {
         variables,
-        useUnstableFormify: cms.flags.get("use-unstable-formify")
+        useUnstableFormify
       }).then((payload) => {
         cms.plugins.remove(new toolkit.FormMetaPlugin({ name: "tina-admin-link" }));
         setData(payload);
@@ -667,10 +665,8 @@ var __objRest = (source, exclude) => {
           }, { values: true });
         });
       }).catch((e) => {
-        cms.alerts.error("There was a problem setting up forms for your query");
-        console.error("There was a problem setting up forms for your query");
-        console.error(e);
         setIsLoading(false);
+        throw new Error(`There was a problem setting up forms for your query: ${e.message}`);
       });
       return () => {
         formIds.forEach((name) => {
@@ -2729,6 +2725,17 @@ mutation addPendingDocumentMutation(
       }`, { variables: {} });
       return response;
     }
+    async deleteDocument({
+      collection,
+      relativePath
+    }) {
+      await this.api.request(`#graphql
+      mutation DeleteDocument($collection: String!, $relativePath: String!  ){
+  deleteDocument(collection: $collection, relativePath: $relativePath){
+    __typename
+  }
+}`, { variables: { collection, relativePath } });
+    }
     async fetchCollection(collectionName, includeDocuments) {
       const response = await this.api.request(`#graphql
       query($collection: String!, $includeDocuments: Boolean!){
@@ -2953,6 +2960,7 @@ mutation addPendingDocumentMutation(
     }))));
   };
   const TinaCloudAuthWall = TinaCloudProvider;
+  var styles = '*, ::before, ::after {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-rotate: 0;\n      --tw-skew-x: 0;\n      --tw-skew-y: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-pan-x:  ;\n      --tw-pan-y:  ;\n      --tw-pinch-zoom:  ;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-ordinal:  ;\n      --tw-slashed-zero:  ;\n      --tw-numeric-figure:  ;\n      --tw-numeric-spacing:  ;\n      --tw-numeric-fraction:  ;\n      --tw-ring-inset:  ;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-color: rgb(0 132 255 / 0.5);\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-colored: 0 0 #0000;\n      --tw-blur:  ;\n      --tw-brightness:  ;\n      --tw-contrast:  ;\n      --tw-grayscale:  ;\n      --tw-hue-rotate:  ;\n      --tw-invert:  ;\n      --tw-saturate:  ;\n      --tw-sepia:  ;\n      --tw-drop-shadow:  ;\n      --tw-backdrop-blur:  ;\n      --tw-backdrop-brightness:  ;\n      --tw-backdrop-contrast:  ;\n      --tw-backdrop-grayscale:  ;\n      --tw-backdrop-hue-rotate:  ;\n      --tw-backdrop-invert:  ;\n      --tw-backdrop-opacity:  ;\n      --tw-backdrop-saturate:  ;\n      --tw-backdrop-sepia:  ;\n}\n.tina-tailwind .static {\n      position: static;\n}\n.tina-tailwind .fixed {\n      position: fixed;\n}\n.tina-tailwind .absolute {\n      position: absolute;\n}\n.tina-tailwind .relative {\n      position: relative;\n}\n.tina-tailwind .left-0 {\n      left: 0px;\n}\n.tina-tailwind .right-0 {\n      right: 0px;\n}\n.tina-tailwind .mx-auto {\n      margin-left: auto;\n      margin-right: auto;\n}\n.tina-tailwind .mr-2 {\n      margin-right: 8px;\n}\n.tina-tailwind .mb-2 {\n      margin-bottom: 8px;\n}\n.tina-tailwind .mb-1 {\n      margin-bottom: 4px;\n}\n.tina-tailwind .-mt-0\\.5 {\n      margin-top: -2px;\n}\n.tina-tailwind .-mt-0 {\n      margin-top: -0px;\n}\n.tina-tailwind .ml-1 {\n      margin-left: 4px;\n}\n.tina-tailwind .mt-2 {\n      margin-top: 8px;\n}\n.tina-tailwind .mr-1\\.5 {\n      margin-right: 6px;\n}\n.tina-tailwind .mr-1 {\n      margin-right: 4px;\n}\n.tina-tailwind .block {\n      display: block;\n}\n.tina-tailwind .inline-block {\n      display: inline-block;\n}\n.tina-tailwind .inline {\n      display: inline;\n}\n.tina-tailwind .flex {\n      display: flex;\n}\n.tina-tailwind .inline-flex {\n      display: inline-flex;\n}\n.tina-tailwind .table {\n      display: table;\n}\n.tina-tailwind .h-screen {\n      height: 100vh;\n}\n.tina-tailwind .h-auto {\n      height: auto;\n}\n.tina-tailwind .h-full {\n      height: 100%;\n}\n.tina-tailwind .h-6 {\n      height: 24px;\n}\n.tina-tailwind .h-10 {\n      height: 40px;\n}\n.tina-tailwind .h-5 {\n      height: 20px;\n}\n.tina-tailwind .h-12 {\n      height: 48px;\n}\n.tina-tailwind .w-full {\n      width: 100%;\n}\n.tina-tailwind .w-10 {\n      width: 40px;\n}\n.tina-tailwind .w-auto {\n      width: auto;\n}\n.tina-tailwind .w-5 {\n      width: 20px;\n}\n.tina-tailwind .w-56 {\n      width: 224px;\n}\n.tina-tailwind .w-0 {\n      width: 0px;\n}\n.tina-tailwind .w-6 {\n      width: 24px;\n}\n.tina-tailwind .max-w-lg {\n      max-width: 32rem;\n}\n.tina-tailwind .max-w-screen-xl {\n      max-width: 1280px;\n}\n.tina-tailwind .max-w-form {\n      max-width: 900px;\n}\n.tina-tailwind .max-w-full {\n      max-width: 100%;\n}\n.tina-tailwind .flex-1 {\n      flex: 1 1 0%;\n}\n.tina-tailwind .flex-shrink-0 {\n      flex-shrink: 0;\n}\n.tina-tailwind .flex-grow-0 {\n      flex-grow: 0;\n}\n.tina-tailwind .table-auto {\n      table-layout: auto;\n}\n.tina-tailwind .origin-top-right {\n      transform-origin: top right;\n}\n.tina-tailwind .scale-95 {\n      --tw-scale-x: .95;\n      --tw-scale-y: .95;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .scale-100 {\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .transform {\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .cursor-pointer {\n      cursor: pointer;\n}\n.tina-tailwind .flex-col {\n      flex-direction: column;\n}\n.tina-tailwind .items-end {\n      align-items: flex-end;\n}\n.tina-tailwind .items-center {\n      align-items: center;\n}\n.tina-tailwind .items-stretch {\n      align-items: stretch;\n}\n.tina-tailwind .justify-end {\n      justify-content: flex-end;\n}\n.tina-tailwind .justify-center {\n      justify-content: center;\n}\n.tina-tailwind .justify-between {\n      justify-content: space-between;\n}\n.tina-tailwind .gap-0\\.5 {\n      gap: 2px;\n}\n.tina-tailwind .gap-0 {\n      gap: 0px;\n}\n.tina-tailwind .gap-4 {\n      gap: 16px;\n}\n.tina-tailwind .gap-3 {\n      gap: 12px;\n}\n.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-y-reverse: 0;\n      border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n      border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.tina-tailwind .divide-gray-150 > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-divide-opacity));\n}\n.tina-tailwind .overflow-hidden {\n      overflow: hidden;\n}\n.tina-tailwind .overflow-y-auto {\n      overflow-y: auto;\n}\n.tina-tailwind .whitespace-nowrap {\n      white-space: nowrap;\n}\n.tina-tailwind .rounded-lg {\n      border-radius: 8px;\n}\n.tina-tailwind .rounded-full {\n      border-radius: 9999px;\n}\n.tina-tailwind .rounded-md {\n      border-radius: 6px;\n}\n.tina-tailwind .border {\n      border-width: 1px;\n}\n.tina-tailwind .border-b {\n      border-bottom-width: 1px;\n}\n.tina-tailwind .border-gray-150 {\n      --tw-border-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-border-opacity));\n}\n.tina-tailwind .border-gray-200 {\n      --tw-border-opacity: 1;\n      border-color: rgb(225 221 236 / var(--tw-border-opacity));\n}\n.tina-tailwind .bg-white {\n      --tw-bg-opacity: 1;\n      background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gray-50 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(246 246 249 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-blue-500 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(0 132 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gradient-to-b {\n      background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.tina-tailwind .from-blue-900 {\n      --tw-gradient-from: #1D2C6C;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));\n}\n.tina-tailwind .to-gray-900 {\n      --tw-gradient-to: #252336;\n}\n.tina-tailwind .px-4 {\n      padding-left: 16px;\n      padding-right: 16px;\n}\n.tina-tailwind .py-6 {\n      padding-top: 24px;\n      padding-bottom: 24px;\n}\n.tina-tailwind .px-5 {\n      padding-left: 20px;\n      padding-right: 20px;\n}\n.tina-tailwind .py-4 {\n      padding-top: 16px;\n      padding-bottom: 16px;\n}\n.tina-tailwind .px-12 {\n      padding-left: 48px;\n      padding-right: 48px;\n}\n.tina-tailwind .py-10 {\n      padding-top: 40px;\n      padding-bottom: 40px;\n}\n.tina-tailwind .px-20 {\n      padding-left: 80px;\n      padding-right: 80px;\n}\n.tina-tailwind .px-6 {\n      padding-left: 24px;\n      padding-right: 24px;\n}\n.tina-tailwind .py-1 {\n      padding-top: 4px;\n      padding-bottom: 4px;\n}\n.tina-tailwind .py-2 {\n      padding-top: 8px;\n      padding-bottom: 8px;\n}\n.tina-tailwind .pt-4 {\n      padding-top: 16px;\n}\n.tina-tailwind .pb-4 {\n      padding-bottom: 16px;\n}\n.tina-tailwind .pt-18 {\n      padding-top: 72px;\n}\n.tina-tailwind .text-left {\n      text-align: left;\n}\n.tina-tailwind .text-center {\n      text-align: center;\n}\n.tina-tailwind .font-sans {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n.tina-tailwind .text-2xl {\n      font-size: 24px;\n      line-height: 1.33;\n}\n.tina-tailwind .text-base {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-sm {\n      font-size: 14px;\n      line-height: 1.43;\n}\n.tina-tailwind .text-xl {\n      font-size: 20px;\n      line-height: 1.4;\n}\n.tina-tailwind .text-md {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-xs {\n      font-size: 13px;\n      line-height: 1.33;\n}\n.tina-tailwind .font-medium {\n      font-weight: 500;\n}\n.tina-tailwind .uppercase {\n      text-transform: uppercase;\n}\n.tina-tailwind .italic {\n      font-style: italic;\n}\n.tina-tailwind .leading-normal {\n      line-height: 1.5;\n}\n.tina-tailwind .leading-tight {\n      line-height: 1.25;\n}\n.tina-tailwind .leading-5 {\n      line-height: 20px;\n}\n.tina-tailwind .tracking-wide {\n      letter-spacing: 0.025em;\n}\n.tina-tailwind .text-gray-600 {\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-700 {\n      --tw-text-opacity: 1;\n      color: rgb(67 62 82 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-blue-600 {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-500 {\n      --tw-text-opacity: 1;\n      color: rgb(113 108 127 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-400 {\n      --tw-text-opacity: 1;\n      color: rgb(145 140 158 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-current {\n      color: currentColor;\n}\n.tina-tailwind .text-white {\n      --tw-text-opacity: 1;\n      color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-800 {\n      --tw-text-opacity: 1;\n      color: rgb(54 49 69 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-900 {\n      --tw-text-opacity: 1;\n      color: rgb(37 35 54 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-red-500 {\n      --tw-text-opacity: 1;\n      color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n.tina-tailwind .underline {\n      text-decoration-line: underline;\n}\n.tina-tailwind .opacity-100 {\n      opacity: 1;\n}\n.tina-tailwind .opacity-90 {\n      opacity: .9;\n}\n.tina-tailwind .opacity-80 {\n      opacity: .8;\n}\n.tina-tailwind .opacity-50 {\n      opacity: .5;\n}\n.tina-tailwind .opacity-70 {\n      opacity: .7;\n}\n.tina-tailwind .opacity-0 {\n      opacity: 0;\n}\n.tina-tailwind .shadow-lg {\n      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow-2xl {\n      --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n      --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow {\n      --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .ring-1 {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.tina-tailwind .ring-black {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.tina-tailwind .ring-opacity-5 {\n      --tw-ring-opacity: .05;\n}\n.tina-tailwind .filter {\n      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.tina-tailwind .transition-opacity {\n      transition-property: opacity;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-colors {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-all {\n      transition-property: all;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-300 {\n      transition-duration: 300ms;\n}\n.tina-tailwind .duration-150 {\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-100 {\n      transition-duration: 100ms;\n}\n.tina-tailwind .duration-75 {\n      transition-duration: 75ms;\n}\n.tina-tailwind .ease-out {\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.tina-tailwind .ease-in {\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.tina-tailwind .icon-parent svg {\n      fill: currentColor;\n    }\n\n.tina-tailwind {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n      font-size: 16px;\n      line-height: 1.5;\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:bg-blue-600:hover {\n      --tw-bg-opacity: 1;\n      background-color: rgb(5 116 228 / var(--tw-bg-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-600:hover {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-400:hover {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:opacity-100:hover {\n      opacity: 1;\n}\n\n.tina-tailwind .focus\\:text-blue-400:focus {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .focus\\:underline:focus {\n      text-decoration-line: underline;\n}\n\n.tina-tailwind .focus\\:shadow-outline:focus {\n      --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n      --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.tina-tailwind .focus\\:outline-none:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n}\n\n.tina-tailwind .focus\\:ring-2:focus {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.tina-tailwind .focus\\:ring-blue-500:focus {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));\n}\n';
   class ContentCreatorPlugin {
     constructor(options) {
       this.__type = "content-creator";
@@ -3115,7 +3123,6 @@ mutation addPendingDocumentMutation(
       };
     }, [plugin]);
   };
-  var styles = '*, ::before, ::after {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-rotate: 0;\n      --tw-skew-x: 0;\n      --tw-skew-y: 0;\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      --tw-pan-x:  ;\n      --tw-pan-y:  ;\n      --tw-pinch-zoom:  ;\n      --tw-scroll-snap-strictness: proximity;\n      --tw-ordinal:  ;\n      --tw-slashed-zero:  ;\n      --tw-numeric-figure:  ;\n      --tw-numeric-spacing:  ;\n      --tw-numeric-fraction:  ;\n      --tw-ring-inset:  ;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-color: rgb(0 132 255 / 0.5);\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-colored: 0 0 #0000;\n      --tw-blur:  ;\n      --tw-brightness:  ;\n      --tw-contrast:  ;\n      --tw-grayscale:  ;\n      --tw-hue-rotate:  ;\n      --tw-invert:  ;\n      --tw-saturate:  ;\n      --tw-sepia:  ;\n      --tw-drop-shadow:  ;\n      --tw-backdrop-blur:  ;\n      --tw-backdrop-brightness:  ;\n      --tw-backdrop-contrast:  ;\n      --tw-backdrop-grayscale:  ;\n      --tw-backdrop-hue-rotate:  ;\n      --tw-backdrop-invert:  ;\n      --tw-backdrop-opacity:  ;\n      --tw-backdrop-saturate:  ;\n      --tw-backdrop-sepia:  ;\n}\n.tina-tailwind .static {\n      position: static;\n}\n.tina-tailwind .fixed {\n      position: fixed;\n}\n.tina-tailwind .absolute {\n      position: absolute;\n}\n.tina-tailwind .relative {\n      position: relative;\n}\n.tina-tailwind .left-0 {\n      left: 0px;\n}\n.tina-tailwind .right-0 {\n      right: 0px;\n}\n.tina-tailwind .mx-auto {\n      margin-left: auto;\n      margin-right: auto;\n}\n.tina-tailwind .mr-2 {\n      margin-right: 8px;\n}\n.tina-tailwind .mb-2 {\n      margin-bottom: 8px;\n}\n.tina-tailwind .mb-1 {\n      margin-bottom: 4px;\n}\n.tina-tailwind .-mt-0\\.5 {\n      margin-top: -2px;\n}\n.tina-tailwind .-mt-0 {\n      margin-top: -0px;\n}\n.tina-tailwind .ml-1 {\n      margin-left: 4px;\n}\n.tina-tailwind .mt-2 {\n      margin-top: 8px;\n}\n.tina-tailwind .mr-1\\.5 {\n      margin-right: 6px;\n}\n.tina-tailwind .mr-1 {\n      margin-right: 4px;\n}\n.tina-tailwind .block {\n      display: block;\n}\n.tina-tailwind .inline-block {\n      display: inline-block;\n}\n.tina-tailwind .inline {\n      display: inline;\n}\n.tina-tailwind .flex {\n      display: flex;\n}\n.tina-tailwind .inline-flex {\n      display: inline-flex;\n}\n.tina-tailwind .table {\n      display: table;\n}\n.tina-tailwind .h-screen {\n      height: 100vh;\n}\n.tina-tailwind .h-auto {\n      height: auto;\n}\n.tina-tailwind .h-full {\n      height: 100%;\n}\n.tina-tailwind .h-6 {\n      height: 24px;\n}\n.tina-tailwind .h-10 {\n      height: 40px;\n}\n.tina-tailwind .h-5 {\n      height: 20px;\n}\n.tina-tailwind .h-12 {\n      height: 48px;\n}\n.tina-tailwind .w-full {\n      width: 100%;\n}\n.tina-tailwind .w-10 {\n      width: 40px;\n}\n.tina-tailwind .w-auto {\n      width: auto;\n}\n.tina-tailwind .w-5 {\n      width: 20px;\n}\n.tina-tailwind .w-56 {\n      width: 224px;\n}\n.tina-tailwind .w-6 {\n      width: 24px;\n}\n.tina-tailwind .max-w-lg {\n      max-width: 32rem;\n}\n.tina-tailwind .max-w-screen-xl {\n      max-width: 1280px;\n}\n.tina-tailwind .max-w-form {\n      max-width: 900px;\n}\n.tina-tailwind .max-w-full {\n      max-width: 100%;\n}\n.tina-tailwind .flex-1 {\n      flex: 1 1 0%;\n}\n.tina-tailwind .flex-shrink-0 {\n      flex-shrink: 0;\n}\n.tina-tailwind .flex-grow-0 {\n      flex-grow: 0;\n}\n.tina-tailwind .table-auto {\n      table-layout: auto;\n}\n.tina-tailwind .origin-top-right {\n      transform-origin: top right;\n}\n.tina-tailwind .scale-95 {\n      --tw-scale-x: .95;\n      --tw-scale-y: .95;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .scale-100 {\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .transform {\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .cursor-pointer {\n      cursor: pointer;\n}\n.tina-tailwind .flex-col {\n      flex-direction: column;\n}\n.tina-tailwind .items-end {\n      align-items: flex-end;\n}\n.tina-tailwind .items-center {\n      align-items: center;\n}\n.tina-tailwind .items-stretch {\n      align-items: stretch;\n}\n.tina-tailwind .justify-end {\n      justify-content: flex-end;\n}\n.tina-tailwind .justify-center {\n      justify-content: center;\n}\n.tina-tailwind .justify-between {\n      justify-content: space-between;\n}\n.tina-tailwind .gap-0\\.5 {\n      gap: 2px;\n}\n.tina-tailwind .gap-0 {\n      gap: 0px;\n}\n.tina-tailwind .gap-4 {\n      gap: 16px;\n}\n.tina-tailwind .gap-3 {\n      gap: 12px;\n}\n.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-y-reverse: 0;\n      border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n      border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.tina-tailwind .divide-gray-150 > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-divide-opacity));\n}\n.tina-tailwind .overflow-hidden {\n      overflow: hidden;\n}\n.tina-tailwind .overflow-y-auto {\n      overflow-y: auto;\n}\n.tina-tailwind .whitespace-nowrap {\n      white-space: nowrap;\n}\n.tina-tailwind .rounded-lg {\n      border-radius: 8px;\n}\n.tina-tailwind .rounded-full {\n      border-radius: 9999px;\n}\n.tina-tailwind .rounded-md {\n      border-radius: 6px;\n}\n.tina-tailwind .border {\n      border-width: 1px;\n}\n.tina-tailwind .border-b {\n      border-bottom-width: 1px;\n}\n.tina-tailwind .border-gray-150 {\n      --tw-border-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-border-opacity));\n}\n.tina-tailwind .border-gray-200 {\n      --tw-border-opacity: 1;\n      border-color: rgb(225 221 236 / var(--tw-border-opacity));\n}\n.tina-tailwind .bg-white {\n      --tw-bg-opacity: 1;\n      background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gray-50 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(246 246 249 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-blue-500 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(0 132 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gradient-to-b {\n      background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.tina-tailwind .from-blue-900 {\n      --tw-gradient-from: #1D2C6C;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));\n}\n.tina-tailwind .to-gray-900 {\n      --tw-gradient-to: #252336;\n}\n.tina-tailwind .px-4 {\n      padding-left: 16px;\n      padding-right: 16px;\n}\n.tina-tailwind .py-6 {\n      padding-top: 24px;\n      padding-bottom: 24px;\n}\n.tina-tailwind .px-5 {\n      padding-left: 20px;\n      padding-right: 20px;\n}\n.tina-tailwind .py-4 {\n      padding-top: 16px;\n      padding-bottom: 16px;\n}\n.tina-tailwind .px-12 {\n      padding-left: 48px;\n      padding-right: 48px;\n}\n.tina-tailwind .py-10 {\n      padding-top: 40px;\n      padding-bottom: 40px;\n}\n.tina-tailwind .px-20 {\n      padding-left: 80px;\n      padding-right: 80px;\n}\n.tina-tailwind .px-6 {\n      padding-left: 24px;\n      padding-right: 24px;\n}\n.tina-tailwind .py-1 {\n      padding-top: 4px;\n      padding-bottom: 4px;\n}\n.tina-tailwind .py-2 {\n      padding-top: 8px;\n      padding-bottom: 8px;\n}\n.tina-tailwind .pt-4 {\n      padding-top: 16px;\n}\n.tina-tailwind .pb-4 {\n      padding-bottom: 16px;\n}\n.tina-tailwind .pt-18 {\n      padding-top: 72px;\n}\n.tina-tailwind .text-left {\n      text-align: left;\n}\n.tina-tailwind .text-center {\n      text-align: center;\n}\n.tina-tailwind .font-sans {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n.tina-tailwind .text-2xl {\n      font-size: 24px;\n      line-height: 1.33;\n}\n.tina-tailwind .text-base {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-sm {\n      font-size: 14px;\n      line-height: 1.43;\n}\n.tina-tailwind .text-xl {\n      font-size: 20px;\n      line-height: 1.4;\n}\n.tina-tailwind .text-md {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-xs {\n      font-size: 13px;\n      line-height: 1.33;\n}\n.tina-tailwind .font-medium {\n      font-weight: 500;\n}\n.tina-tailwind .uppercase {\n      text-transform: uppercase;\n}\n.tina-tailwind .italic {\n      font-style: italic;\n}\n.tina-tailwind .leading-normal {\n      line-height: 1.5;\n}\n.tina-tailwind .leading-tight {\n      line-height: 1.25;\n}\n.tina-tailwind .leading-5 {\n      line-height: 20px;\n}\n.tina-tailwind .tracking-wide {\n      letter-spacing: 0.025em;\n}\n.tina-tailwind .text-gray-700 {\n      --tw-text-opacity: 1;\n      color: rgb(67 62 82 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-blue-600 {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-500 {\n      --tw-text-opacity: 1;\n      color: rgb(113 108 127 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-400 {\n      --tw-text-opacity: 1;\n      color: rgb(145 140 158 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-current {\n      color: currentColor;\n}\n.tina-tailwind .text-white {\n      --tw-text-opacity: 1;\n      color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-600 {\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-800 {\n      --tw-text-opacity: 1;\n      color: rgb(54 49 69 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-900 {\n      --tw-text-opacity: 1;\n      color: rgb(37 35 54 / var(--tw-text-opacity));\n}\n.tina-tailwind .underline {\n      text-decoration-line: underline;\n}\n.tina-tailwind .opacity-100 {\n      opacity: 1;\n}\n.tina-tailwind .opacity-90 {\n      opacity: .9;\n}\n.tina-tailwind .opacity-80 {\n      opacity: .8;\n}\n.tina-tailwind .opacity-50 {\n      opacity: .5;\n}\n.tina-tailwind .opacity-70 {\n      opacity: .7;\n}\n.tina-tailwind .opacity-0 {\n      opacity: 0;\n}\n.tina-tailwind .shadow-lg {\n      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow-2xl {\n      --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n      --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow {\n      --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .ring-1 {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.tina-tailwind .ring-black {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.tina-tailwind .ring-opacity-5 {\n      --tw-ring-opacity: .05;\n}\n.tina-tailwind .filter {\n      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.tina-tailwind .transition-opacity {\n      transition-property: opacity;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-colors {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-all {\n      transition-property: all;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-300 {\n      transition-duration: 300ms;\n}\n.tina-tailwind .duration-150 {\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-100 {\n      transition-duration: 100ms;\n}\n.tina-tailwind .duration-75 {\n      transition-duration: 75ms;\n}\n.tina-tailwind .ease-out {\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.tina-tailwind .ease-in {\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.tina-tailwind .icon-parent svg {\n      fill: currentColor;\n    }\n\n.tina-tailwind {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n      font-size: 16px;\n      line-height: 1.5;\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:bg-blue-600:hover {\n      --tw-bg-opacity: 1;\n      background-color: rgb(5 116 228 / var(--tw-bg-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-600:hover {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-400:hover {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:opacity-100:hover {\n      opacity: 1;\n}\n\n.tina-tailwind .focus\\:text-blue-400:focus {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .focus\\:underline:focus {\n      text-decoration-line: underline;\n}\n\n.tina-tailwind .focus\\:shadow-outline:focus {\n      --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n      --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.tina-tailwind .focus\\:outline-none:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n}\n\n.tina-tailwind .focus\\:ring-2:focus {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.tina-tailwind .focus\\:ring-blue-500:focus {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));\n}\n';
   function useTina({
     query,
     variables,
@@ -3194,13 +3201,23 @@ mutation addPendingDocumentMutation(
           style: { color: "#eb6337" }
         }, "TinaCMS Render Error"), /* @__PURE__ */ React__default["default"].createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React__default["default"].createElement("pre", {
           style: { marginTop: "1rem", overflowX: "auto" }
-        }, this.state.message), /* @__PURE__ */ React__default["default"].createElement("br", null), /* @__PURE__ */ React__default["default"].createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React__default["default"].createElement("button", {
+        }, this.state.message), /* @__PURE__ */ React__default["default"].createElement("br", null), /* @__PURE__ */ React__default["default"].createElement("p", null, `If you've just updated the form, undo your most recent changes and click "refresh". If after a few refreshes, you're still encountering this error. There is a bigger issue with the site. Please reach out to your site admin.`), /* @__PURE__ */ React__default["default"].createElement("p", null, "See our", " ", /* @__PURE__ */ React__default["default"].createElement("a", {
+          className: "text-gray-600",
+          style: { textDecoration: "underline" },
+          href: "https://tina.io/docs/errors/faq/",
+          target: "_blank"
+        }, " ", "Error FAQ", " "), " ", "for more information."), /* @__PURE__ */ React__default["default"].createElement("button", {
           style: errorButtonStyles,
           onClick: () => {
             this.setState({ pageRefresh: true });
             setTimeout(() => this.setState({ hasError: false, pageRefresh: false }), 3e3);
           }
-        }, "Refresh"), hasBranchData && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React__default["default"].createElement("button", {
+        }, "Refresh"), hasBranchData && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("p", null, `If you're using the branch switcher, you may currently be on a "stale" branch that has been deleted or whose content is not compatible with the latest version of the site's layout. Click the button below to switch back to the default branch for this deployment.`), /* @__PURE__ */ React__default["default"].createElement("p", null, "See our", " ", /* @__PURE__ */ React__default["default"].createElement("a", {
+          className: "text-gray-600",
+          style: { textDecoration: "underline" },
+          href: "https://tina.io/docs/errors/faq/",
+          target: "_blank"
+        }, " ", "Error FAQ", " "), " ", "for more information."), /* @__PURE__ */ React__default["default"].createElement("button", {
           style: errorButtonStyles,
           onClick: () => {
             window.localStorage.removeItem("tinacms-current-branch");
@@ -3301,10 +3318,10 @@ mutation addPendingDocumentMutation(
     });
     const cms = toolkit.useCMS();
     const useUnstableFormify = React__default["default"].useMemo(() => {
-      if (cms == null ? void 0 : cms.flags.get("use-unstable-formify")) {
-        return true;
+      if ((cms == null ? void 0 : cms.flags.get("use-unstable-formify")) === false) {
+        return false;
       }
-      return false;
+      return true;
     }, [cms == null ? void 0 : cms.flags]);
     return /* @__PURE__ */ React__default["default"].createElement(sharedctx.TinaDataContext.Provider, {
       value: {
@@ -3622,10 +3639,10 @@ This will work when developing locally but NOT when deployed to production.
             const response = await api.fetchCollections();
             setCollections(response.getCollections);
           } catch (error2) {
-            cms.alerts.error(`[${error2.name}] GetCollections failed: ${error2.message}`, 30 * 1e3);
             console.error(error2);
             setCollections([]);
             setError(error2);
+            throw new Error(`[${error2.name}] GetCollections failed: ${error2.message}`);
           }
           setLoading(false);
         }
@@ -3690,6 +3707,9 @@ This will work when developing locally but NOT when deployed to production.
   function BiPlus(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
   }
+  function BiTrash(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z" } }, { "tag": "path", "attr": { "d": "M9 10h2v8H9zm4 0h2v8h-2z" } }] })(props);
+  }
   function MdOutlineArrowBack(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
   }
@@ -3915,6 +3935,7 @@ This will work when developing locally but NOT when deployed to production.
     const [collection, setCollection] = React.useState(void 0);
     const [loading, setLoading] = React.useState(true);
     const [error, setError] = React.useState(void 0);
+    const [resetState, setResetSate] = React.useState(0);
     React.useEffect(() => {
       const fetchCollection = async () => {
         if (await api.isAuthenticated()) {
@@ -3932,8 +3953,9 @@ This will work when developing locally but NOT when deployed to production.
       };
       setLoading(true);
       fetchCollection();
-    }, [cms, collectionName]);
-    return { collection, loading, error };
+    }, [cms, collectionName, resetState]);
+    const reFetchCollection = () => setResetSate((x) => x + 1);
+    return { collection, loading, error, reFetchCollection };
   };
   const GetCollection = ({
     cms,
@@ -3941,14 +3963,14 @@ This will work when developing locally but NOT when deployed to production.
     includeDocuments = true,
     children
   }) => {
-    const { collection, loading, error } = useGetCollection(cms, collectionName, includeDocuments);
+    const { collection, loading, error, reFetchCollection } = useGetCollection(cms, collectionName, includeDocuments);
     if (error) {
       return null;
     }
     if (loading) {
       return /* @__PURE__ */ React__default["default"].createElement(LoadingPage, null);
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, loading));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, loading, reFetchCollection));
   };
   const TemplateMenu = ({ templates }) => {
     return /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
@@ -3991,16 +4013,36 @@ This will work when developing locally but NOT when deployed to production.
   const CollectionListPage = () => {
     const navigate = reactRouterDom.useNavigate();
     const { collectionName } = reactRouterDom.useParams();
+    const [open, setOpen] = React__default["default"].useState(false);
+    const [vars, setVars] = React__default["default"].useState({
+      collection: collectionName,
+      relativePath: ""
+    });
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
       return /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
         cms,
         collectionName,
         includeDocuments: true
-      }, (collection) => {
+      }, (collection, _loading, reFetchCollection) => {
         var _a, _b;
         const totalCount = collection.documents.totalCount;
         const documents = collection.documents.edges;
-        return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
+        const admin = cms.api.admin;
+        return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, open && /* @__PURE__ */ React__default["default"].createElement(DeleteModal, {
+          filename: vars.relativePath,
+          deleteFunc: async () => {
+            try {
+              await admin.deleteDocument(vars);
+              cms.alerts.info("Document was successfully deleted");
+              reFetchCollection();
+            } catch (error) {
+              cms.alerts.warn("Document was not deleted, ask a developer for help or check the console for an error message");
+              console.error(error);
+              throw error;
+            }
+          },
+          close: () => setOpen(false)
+        }), /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
           isLocalMode: (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
         }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("h3", {
           className: "text-2xl text-gray-700"
@@ -4049,14 +4091,59 @@ This will work when developing locally but NOT when deployed to production.
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, "Template"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 leading-5 block text-sm font-medium text-gray-900"
-          }, document.node.sys.template)));
+          }, document.node.sys.template)), /* @__PURE__ */ React__default["default"].createElement("td", {
+            className: "w-0"
+          }, /* @__PURE__ */ React__default["default"].createElement(toolkit.OverflowMenu, {
+            showEmbed: true,
+            toolbarItems: [
+              {
+                name: "edit",
+                label: "Edit in Admin",
+                Icon: /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
+                  size: "1.3rem"
+                }),
+                onMouseDown: () => {
+                  navigate(`${document.node.sys.filename}`, { replace: true });
+                }
+              },
+              {
+                name: "delete",
+                label: "Delete",
+                Icon: /* @__PURE__ */ React__default["default"].createElement(BiTrash, {
+                  size: "1.3rem",
+                  className: "text-red-500"
+                }),
+                onMouseDown: () => {
+                  setVars({
+                    collection: collectionName,
+                    relativePath: document.node.sys.filename + document.node.sys.extension
+                  });
+                  setOpen(true);
+                }
+              }
+            ]
+          })));
         })))))));
       });
     });
   };
-  function HiChevronRight(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
-  }
+  const DeleteModal = ({ close: close2, deleteFunc, filename }) => {
+    return /* @__PURE__ */ React__default["default"].createElement(toolkit.Modal, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalPopup, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalHeader, {
+      close: close2
+    }, "Reset"), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalBody, {
+      padded: true
+    }, /* @__PURE__ */ React__default["default"].createElement("p", null, `Are you sure you want to delete ${filename}?`)), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalActions, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      style: { flexGrow: 2 },
+      onClick: close2
+    }, "Cancel"), /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      style: { flexGrow: 3 },
+      variant: "danger",
+      onClick: async () => {
+        await deleteFunc();
+        close2();
+      }
+    }, "Delete"))));
+  };
   const useGetDocumentFields = (cms, collectionName, templateName) => {
     const api = new TinaAdminApi(cms);
     const [info, setInfo] = React.useState({
@@ -4123,6 +4210,9 @@ This will work when developing locally but NOT when deployed to production.
     }
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children({ collection, template, fields, mutationInfo, loading }));
   };
+  function HiChevronRight(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
+  }
   const createDocument = async (cms, collection, template, mutationInfo, values) => {
     const api = new TinaAdminApi(cms);
     const _a = values, { filename } = _a, leftover = __objRest(_a, ["filename"]);
@@ -4209,8 +4299,8 @@ This will work when developing locally but NOT when deployed to production.
             cms.alerts.success("Document created!");
             navigate(`/collections/${collection.name}`);
           } catch (error) {
-            cms.alerts.error(`[${error.name}] CreateDocument failed: ${error.message}`, 30 * 1e3);
             console.error(error);
+            throw new Error(`[${error.name}] CreateDocument failed: ${error.message}`);
           }
         }
       });
@@ -4352,8 +4442,8 @@ This will work when developing locally but NOT when deployed to production.
             await updateDocument(cms, relativePath, collection, mutationInfo, values);
             cms.alerts.success("Document updated!");
           } catch (error) {
-            cms.alerts.error(`[${error.name}] UpdateDocument failed: ${error.message}`, 30 * 1e3);
             console.error(error);
+            throw new Error(`[${error.name}] UpdateDocument failed: ${error.message}`);
           }
         }
       });
@@ -4460,6 +4550,7 @@ This will work when developing locally but NOT when deployed to production.
     }
   }
   const defineSchema = (config) => {
+    schemaTools.validateSchema({ config });
     return config;
   };
   const defineConfig = (config) => {

package/dist/style.css

@@ -145,6 +145,9 @@
 .tina-tailwind .w-56 {
       width: 224px;
 }
+.tina-tailwind .w-0 {
+      width: 0px;
+}
 .tina-tailwind .w-6 {
       width: 24px;
 }
@@ -390,6 +393,10 @@
 .tina-tailwind .tracking-wide {
       letter-spacing: 0.025em;
 }
+.tina-tailwind .text-gray-600 {
+      --tw-text-opacity: 1;
+      color: rgb(86 81 101 / var(--tw-text-opacity));
+}
 .tina-tailwind .text-gray-700 {
       --tw-text-opacity: 1;
       color: rgb(67 62 82 / var(--tw-text-opacity));
@@ -413,10 +420,6 @@
       --tw-text-opacity: 1;
       color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.tina-tailwind .text-gray-600 {
-      --tw-text-opacity: 1;
-      color: rgb(86 81 101 / var(--tw-text-opacity));
-}
 .tina-tailwind .text-gray-800 {
       --tw-text-opacity: 1;
       color: rgb(54 49 69 / var(--tw-text-opacity));
@@ -425,6 +428,10 @@
       --tw-text-opacity: 1;
       color: rgb(37 35 54 / var(--tw-text-opacity));
 }
+.tina-tailwind .text-red-500 {
+      --tw-text-opacity: 1;
+      color: rgb(239 68 68 / var(--tw-text-opacity));
+}
 .tina-tailwind .underline {
       text-decoration-line: underline;
 }

package/dist/tina-cms.d.ts

@@ -11,12 +11,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
-import { useDocumentCreatorPlugin } from './hooks/use-content-creator';
 import { TinaCloudMediaStoreClass } from './auth';
-import type { TinaIOConfig } from './client/index';
 import type { TinaCMS } from '@tinacms/toolkit';
-import type { formifyCallback } from './hooks/use-graphql-forms';
 import type { TinaCloudSchema } from '@tinacms/schema-tools';
+import type { TinaIOConfig } from './client/index';
+import type { formifyCallback } from './hooks/use-graphql-forms';
+import { useDocumentCreatorPlugin } from './hooks/use-content-creator';
 declare type APIProviderProps = {
     /**
      * Content API URL

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.66.10",
+  "version": "0.67.2",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -22,11 +22,11 @@
   },
   "dependencies": {
     "@graphql-tools/relay-operation-optimizer": "^6.4.1",
-    "@headlessui/react": "^1.4.1",
+    "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
-    "@tinacms/schema-tools": "0.0.2",
+    "@tinacms/schema-tools": "0.0.3",
     "@tinacms/sharedctx": "0.1.1",
-    "@tinacms/toolkit": "0.56.19",
+    "@tinacms/toolkit": "0.56.20",
     "crypto-js": "^4.0.0",
     "final-form": "4.20.1",
     "graphql": "^15.1.0",