tinacms 0.68.6 → 0.68.9

package/dist/index.es.js

@@ -29,20 +29,21 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { useCMS, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, Nav, LocalWarning, OverflowMenu, FormStatus, FormBuilder } from "@tinacms/toolkit";
+import { useCMS, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button as Button$1, 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 * as React from "react";
+import React__default, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
 import { getIn, setIn } from "final-form";
 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";
+import styled, { css, createGlobalStyle } from "styled-components";
 import { setEditing, TinaDataContext, useEditState } from "@tinacms/sharedctx";
 import UrlPattern from "url-pattern";
-import { NavLink, useNavigate, useParams, Link, HashRouter, Routes, Route } from "react-router-dom";
+import { NavLink, useNavigate, useParams, useLocation, Link, HashRouter, Routes, Route } from "react-router-dom";
 import { Transition, Menu } from "@headlessui/react";
 import { useWindowWidth } from "@react-hook/window-size";
 function popupWindow(url, title, window2, w, h) {
@@ -1661,8 +1662,8 @@ const useFormify = ({
   formify: formifyFunc,
   eventList
 }) => {
-  const formIds = React.useRef([]);
-  const [state, dispatch] = React.useReducer(reducer, {
+  const formIds = React__default.useRef([]);
+  const [state, dispatch] = React__default.useReducer(reducer, {
     status: "idle",
     schema: void 0,
     query: query ? G.parse(query) : null,
@@ -1674,7 +1675,7 @@ const useFormify = ({
     formNodes: [],
     documentForms: []
   });
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (query) {
       dispatch({ type: "start", value: { query } });
       formIds.current.forEach((formId) => {
@@ -1685,7 +1686,7 @@ const useFormify = ({
       });
     }
   }, [query, JSON.stringify(variables)]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (state.status === "initialized") {
       cms.api.tina.request(query, { variables }).then((res) => {
         delete res.paths;
@@ -1693,7 +1694,7 @@ const useFormify = ({
       });
     }
   }, [state.status]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     const run = async () => {
       const schema = await cms.api.tina.getSchema();
       const result = await formify({
@@ -1710,7 +1711,7 @@ const useFormify = ({
       run();
     }
   }, [state.status]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     const run = async () => {
       const result = await cms.api.tina.request(G.print(state.query), {
         variables
@@ -1762,7 +1763,7 @@ const useFormify = ({
       run();
     }
   }, [state.status]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (state.status === "ready") {
       cms.events.subscribe(`forms:reset`, (event) => {
         if (eventList) {
@@ -1816,7 +1817,7 @@ const useFormify = ({
       dispatch({ type: "done" });
     }
   }, [state.status]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     state.changeSets.forEach((changeSet) => {
       if (changeSet.mutationType.type === "reset") {
         const form = cms.forms.find(changeSet.formId);
@@ -1912,10 +1913,10 @@ const useFormify = ({
       }
     });
   }, [state.changeSets.length]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     formIds.current = state.documentForms.map((df) => df.id);
   }, [state.documentForms.length]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     return () => {
       formIds.current.forEach((formId) => {
         const form = cms.forms.find(formId);
@@ -1925,7 +1926,7 @@ const useFormify = ({
       });
     };
   }, []);
-  const resolveSubFields = React.useCallback(async (args) => {
+  const resolveSubFields = React__default.useCallback(async (args) => {
     const { form, formNode, prefix, loc } = args;
     const data = {};
     await sequential(form.fields, async (field) => {
@@ -2377,9 +2378,9 @@ class LocalClient extends Client {
   }
 }
 function ModalBuilder(modalProps) {
-  return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, null, modalProps.title), /* @__PURE__ */ React.createElement(ModalBody, {
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(ModalPopup, null, /* @__PURE__ */ React__default.createElement(ModalHeader, null, modalProps.title), /* @__PURE__ */ React__default.createElement(ModalBody, {
     padded: true
-  }, /* @__PURE__ */ React.createElement("p", null, modalProps.message), modalProps.error && /* @__PURE__ */ React.createElement(ErrorLabel, null, modalProps.error)), /* @__PURE__ */ React.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React.createElement(AsyncButton, __spreadValues({
+  }, /* @__PURE__ */ React__default.createElement("p", null, modalProps.message), modalProps.error && /* @__PURE__ */ React__default.createElement(ErrorLabel, null, modalProps.error)), /* @__PURE__ */ React__default.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React__default.createElement(AsyncButton, __spreadValues({
     key: action.name
   }, action))))));
 }
@@ -2398,12 +2399,12 @@ const AsyncButton = ({ name, primary, action }) => {
       throw e;
     }
   }, [action, setSubmitting]);
-  return /* @__PURE__ */ React.createElement(Button, {
+  return /* @__PURE__ */ React__default.createElement(Button$1, {
     variant: primary ? "primary" : "secondary",
     onClick,
     busy: submitting,
     disabled: submitting
-  }, submitting && /* @__PURE__ */ React.createElement(LoadingDots, null), !submitting && name);
+  }, submitting && /* @__PURE__ */ React__default.createElement(LoadingDots, null), !submitting && name);
 };
 const TINA_AUTH_CONFIG = "tina_auth_config";
 const useTinaAuthRedirect = () => {
@@ -2449,19 +2450,25 @@ class TinaAdminApi {
   }
 }`, { variables: { collection, relativePath } });
   }
-  async fetchCollection(collectionName, includeDocuments) {
+  async fetchCollection(collectionName, includeDocuments, after) {
     if (includeDocuments === true) {
       if (this.useDataLayer) {
         const sort = this.schema.getIsTitleFieldName(collectionName);
         const response = await this.api.request(`#graphql
-      query($collection: String!, $includeDocuments: Boolean!, $sort: String){
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String){
         collection(collection: $collection){
           name
           label
           format
           templates
-          documents(sort: $sort) @include(if: $includeDocuments) {
+          documents(sort: $sort, after: $after, first: $limit) @include(if: $includeDocuments) {
             totalCount
+            pageInfo {
+              hasPreviousPage
+              hasNextPage
+              startCursor
+              endCursor
+            }
             edges {
               node {
                 ... on Document {
@@ -2480,7 +2487,15 @@ class TinaAdminApi {
             }
           }
         }
-      }`, { variables: { collection: collectionName, includeDocuments, sort } });
+      }`, {
+          variables: {
+            collection: collectionName,
+            includeDocuments,
+            sort,
+            limit: 10,
+            after
+          }
+        });
         return response.collection;
       } else {
         const response = await this.api.request(`#graphql
@@ -2496,7 +2511,6 @@ class TinaAdminApi {
             node {
               ... on Document {
                 _sys {
-                  # TODO: only include title if we need to
                   template
                   breadcrumbs
                   path
@@ -2581,7 +2595,7 @@ const AuthWallInner = ({
   const client = cms.api.tina;
   const [activeModal, setActiveModal] = useState(null);
   const [showChildren, setShowChildren] = useState(false);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     client.isAuthenticated().then((isAuthenticated) => {
       if (isAuthenticated) {
         setShowChildren(true);
@@ -2606,7 +2620,7 @@ const AuthWallInner = ({
       setActiveModal(null);
     }
   }) : [];
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, activeModal === "authenticate" && /* @__PURE__ */ React.createElement(ModalBuilder, {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, activeModal === "authenticate" && /* @__PURE__ */ React__default.createElement(ModalBuilder, {
     title: "Tina Cloud Authorization",
     message: "To save edits, Tina Cloud authorization is required. On save, changes will get commited using your account.",
     close,
@@ -2635,7 +2649,7 @@ const TinaCloudProvider = (props) => {
   const baseBranch = props.branch || "main";
   const [currentBranch, setCurrentBranch] = useLocalStorage("tinacms-current-branch", baseBranch);
   useTinaAuthRedirect();
-  const cms = React.useMemo(() => props.cms || new TinaCMS({
+  const cms = React__default.useMemo(() => props.cms || new TinaCMS({
     enabled: true,
     sidebar: true
   }), [props.cms]);
@@ -2671,15 +2685,15 @@ const TinaCloudProvider = (props) => {
     return newBranch;
   };
   setupMedia();
-  const [branchingEnabled, setBranchingEnabled] = React.useState(() => cms.flags.get("branch-switcher"));
-  React.useEffect(() => {
+  const [branchingEnabled, setBranchingEnabled] = React__default.useState(() => cms.flags.get("branch-switcher"));
+  React__default.useEffect(() => {
     cms.events.subscribe("flag:set", ({ key, value }) => {
       if (key === "branch-switcher") {
         setBranchingEnabled(value);
       }
     });
   }, [cms.events]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     let branchSwitcher;
     if (branchingEnabled) {
       branchSwitcher = new BranchSwitcherPlugin({
@@ -2694,24 +2708,902 @@ const TinaCloudProvider = (props) => {
       }
     };
   }, [branchingEnabled, props.branch]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (props.cmsCallback) {
       props.cmsCallback(cms);
     }
   }, []);
-  return /* @__PURE__ */ React.createElement(BranchDataProvider, {
+  return /* @__PURE__ */ React__default.createElement(BranchDataProvider, {
     currentBranch,
     setCurrentBranch: (b) => {
       setCurrentBranch(b);
     }
-  }, /* @__PURE__ */ React.createElement(TinaProvider, {
+  }, /* @__PURE__ */ React__default.createElement(TinaProvider, {
     cms
-  }, /* @__PURE__ */ React.createElement(AuthWallInner, __spreadProps(__spreadValues({}, props), {
+  }, /* @__PURE__ */ React__default.createElement(AuthWallInner, __spreadProps(__spreadValues({}, props), {
     cms
   }))));
 };
 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 .pointer-events-auto {\n      pointer-events: auto;\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 .inset-0 {\n      top: 0px;\n      right: 0px;\n      bottom: 0px;\n      left: 0px;\n}\n.tina-tailwind .left-0 {\n      left: 0px;\n}\n.tina-tailwind .top-0 {\n      top: 0px;\n}\n.tina-tailwind .top-8 {\n      top: 32px;\n}\n.tina-tailwind .right-0 {\n      right: 0px;\n}\n.tina-tailwind .top-10 {\n      top: 40px;\n}\n.tina-tailwind .top-4 {\n      top: 16px;\n}\n.tina-tailwind .z-overlay {\n      z-index: 10600;\n}\n.tina-tailwind .z-menu {\n      z-index: 9800;\n}\n.tina-tailwind .z-50 {\n      z-index: 50;\n}\n.tina-tailwind .mx-auto {\n      margin-left: auto;\n      margin-right: auto;\n}\n.tina-tailwind .-ml-px {\n      margin-left: -1px;\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-7 {\n      height: 28px;\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 .-translate-x-full {\n      --tw-translate-x: -100%;\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 .translate-x-0 {\n      --tw-translate-x: 0px;\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 .translate-x-full {\n      --tw-translate-x: 100%;\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-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 {\n      border-radius: 4px;\n}\n.tina-tailwind .rounded-full {\n      border-radius: 9999px;\n}\n.tina-tailwind .rounded-md {\n      border-radius: 6px;\n}\n.tina-tailwind .rounded-r-md {\n      border-top-right-radius: 6px;\n      border-bottom-right-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 .bg-gradient-to-br {\n      background-image: linear-gradient(to bottom right, 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 .from-gray-800 {\n      --tw-gradient-from: #363145;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(54 49 69 / 0));\n}\n.tina-tailwind .via-gray-900 {\n      --tw-gradient-stops: var(--tw-gradient-from), #252336, var(--tw-gradient-to, rgb(37 35 54 / 0));\n}\n.tina-tailwind .to-gray-900 {\n      --tw-gradient-to: #252336;\n}\n.tina-tailwind .to-black {\n      --tw-gradient-to: #000;\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 .py-5 {\n      padding-top: 20px;\n      padding-bottom: 20px;\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 .pl-18 {\n      padding-left: 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-0 {\n      opacity: 0;\n}\n.tina-tailwind .opacity-80 {\n      opacity: .8;\n}\n.tina-tailwind .opacity-90 {\n      opacity: .9;\n}\n.tina-tailwind .opacity-50 {\n      opacity: .5;\n}\n.tina-tailwind .opacity-70 {\n      opacity: .7;\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-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-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 {\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-200 {\n      transition-duration: 200ms;\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';
+var styles = `.tina-tailwind {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+  .tina-tailwind *,
+  .tina-tailwind ::before,
+  .tina-tailwind ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: transparent;
+  }
+
+  .tina-tailwind ::before,
+  .tina-tailwind ::after {
+    --tw-content: '';
+  }
+
+  .tina-tailwind hr {
+    height: 0; /* 1 */
+    color: inherit; /* 2 */
+    border-top-width: 1px; /* 3 */
+  }
+
+  .tina-tailwind abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+
+  .tina-tailwind h1,
+  .tina-tailwind h2,
+  .tina-tailwind h3,
+  .tina-tailwind h4,
+  .tina-tailwind h5,
+  .tina-tailwind h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  .tina-tailwind a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  .tina-tailwind b,
+  .tina-tailwind strong {
+    font-weight: bolder;
+  }
+
+  .tina-tailwind code,
+  .tina-tailwind kbd,
+  .tina-tailwind samp,
+  .tina-tailwind pre {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  .tina-tailwind small {
+    font-size: 80%;
+  }
+
+  .tina-tailwind sub,
+  .tina-tailwind sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  .tina-tailwind sub {
+    bottom: -0.25em;
+  }
+
+  .tina-tailwind sup {
+    top: -0.5em;
+  }
+
+  .tina-tailwind table {
+    text-indent: 0; /* 1 */
+    border-color: inherit; /* 2 */
+    border-collapse: collapse; /* 3 */
+  }
+
+  .tina-tailwind button,
+  .tina-tailwind input,
+  .tina-tailwind optgroup,
+  .tina-tailwind select,
+  .tina-tailwind textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: inherit; /* 1 */
+    color: inherit; /* 1 */
+    margin: 0; /* 2 */
+    padding: 0; /* 3 */
+  }
+
+  .tina-tailwind button,
+  .tina-tailwind select {
+    text-transform: none;
+  }
+
+  .tina-tailwind button,
+  .tina-tailwind [type='button'],
+  .tina-tailwind [type='reset'],
+  .tina-tailwind [type='submit'] {
+    -webkit-appearance: button; /* 1 */
+    background-color: transparent; /* 2 */
+    background-image: none; /* 2 */
+  }
+
+  .tina-tailwind :-moz-focusring {
+    outline: auto;
+  }
+
+  .tina-tailwind :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  .tina-tailwind progress {
+    vertical-align: baseline;
+  }
+
+  .tina-tailwind ::-webkit-inner-spin-button,
+  .tina-tailwind ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  .tina-tailwind [type='search'] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  .tina-tailwind ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  .tina-tailwind ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  .tina-tailwind summary {
+    display: list-item;
+  }
+
+  .tina-tailwind blockquote,
+  .tina-tailwind dl,
+  .tina-tailwind dd,
+  .tina-tailwind h1,
+  .tina-tailwind h2,
+  .tina-tailwind h3,
+  .tina-tailwind h4,
+  .tina-tailwind h5,
+  .tina-tailwind h6,
+  .tina-tailwind hr,
+  .tina-tailwind figure,
+  .tina-tailwind p,
+  .tina-tailwind pre {
+    margin: 0;
+  }
+
+  .tina-tailwind fieldset {
+    margin: 0;
+    padding: 0;
+  }
+
+  .tina-tailwind legend {
+    padding: 0;
+  }
+
+  .tina-tailwind ol,
+  .tina-tailwind ul,
+  .tina-tailwind menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .tina-tailwind li:before {
+    display: none;
+  }
+
+  .tina-tailwind textarea {
+    resize: vertical;
+  }
+
+  .tina-tailwind input::placeholder,
+  .tina-tailwind textarea::placeholder {
+    opacity: 1; /* 1 */
+    color: #918c9e; /* 2 */
+  }
+
+  .tina-tailwind button,
+  .tina-tailwind [role='button'] {
+    cursor: pointer;
+  }
+
+  .tina-tailwind :disabled {
+    cursor: default;
+  }
+
+  .tina-tailwind img,
+  .tina-tailwind svg,
+  .tina-tailwind video,
+  .tina-tailwind canvas,
+  .tina-tailwind audio,
+  .tina-tailwind iframe,
+  .tina-tailwind embed,
+  .tina-tailwind object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
+  }
+
+  .tina-tailwind img,
+  .tina-tailwind video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .tina-tailwind [hidden] {
+    display: none;
+  }
+*, ::before, ::after {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(0 132 255 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+.tina-tailwind .pointer-events-auto {
+  pointer-events: auto;
+}
+.tina-tailwind .static {
+  position: static;
+}
+.tina-tailwind .fixed {
+  position: fixed;
+}
+.tina-tailwind .absolute {
+  position: absolute;
+}
+.tina-tailwind .relative {
+  position: relative;
+}
+.tina-tailwind .inset-0 {
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+.tina-tailwind .left-0 {
+  left: 0px;
+}
+.tina-tailwind .top-0 {
+  top: 0px;
+}
+.tina-tailwind .top-8 {
+  top: 32px;
+}
+.tina-tailwind .right-0 {
+  right: 0px;
+}
+.tina-tailwind .top-10 {
+  top: 40px;
+}
+.tina-tailwind .top-4 {
+  top: 16px;
+}
+.tina-tailwind .z-overlay {
+  z-index: 10600;
+}
+.tina-tailwind .z-menu {
+  z-index: 9800;
+}
+.tina-tailwind .z-50 {
+  z-index: 50;
+}
+.tina-tailwind .mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.tina-tailwind .-ml-px {
+  margin-left: -1px;
+}
+.tina-tailwind .mr-2 {
+  margin-right: 8px;
+}
+.tina-tailwind .mb-2 {
+  margin-bottom: 8px;
+}
+.tina-tailwind .mb-1 {
+  margin-bottom: 4px;
+}
+.tina-tailwind .-mt-0\\.5 {
+  margin-top: -2px;
+}
+.tina-tailwind .-mt-0 {
+  margin-top: -0px;
+}
+.tina-tailwind .ml-1 {
+  margin-left: 4px;
+}
+.tina-tailwind .mt-2 {
+  margin-top: 8px;
+}
+.tina-tailwind .mr-1\\.5 {
+  margin-right: 6px;
+}
+.tina-tailwind .mr-1 {
+  margin-right: 4px;
+}
+.tina-tailwind .block {
+  display: block;
+}
+.tina-tailwind .inline-block {
+  display: inline-block;
+}
+.tina-tailwind .inline {
+  display: inline;
+}
+.tina-tailwind .flex {
+  display: flex;
+}
+.tina-tailwind .inline-flex {
+  display: inline-flex;
+}
+.tina-tailwind .table {
+  display: table;
+}
+.tina-tailwind .h-screen {
+  height: 100vh;
+}
+.tina-tailwind .h-auto {
+  height: auto;
+}
+.tina-tailwind .h-full {
+  height: 100%;
+}
+.tina-tailwind .h-6 {
+  height: 24px;
+}
+.tina-tailwind .h-7 {
+  height: 28px;
+}
+.tina-tailwind .h-10 {
+  height: 40px;
+}
+.tina-tailwind .h-5 {
+  height: 20px;
+}
+.tina-tailwind .h-12 {
+  height: 48px;
+}
+.tina-tailwind .w-full {
+  width: 100%;
+}
+.tina-tailwind .w-10 {
+  width: 40px;
+}
+.tina-tailwind .w-auto {
+  width: auto;
+}
+.tina-tailwind .w-5 {
+  width: 20px;
+}
+.tina-tailwind .w-56 {
+  width: 224px;
+}
+.tina-tailwind .w-0 {
+  width: 0px;
+}
+.tina-tailwind .w-6 {
+  width: 24px;
+}
+.tina-tailwind .max-w-lg {
+  max-width: 32rem;
+}
+.tina-tailwind .max-w-screen-xl {
+  max-width: 1280px;
+}
+.tina-tailwind .max-w-form {
+  max-width: 900px;
+}
+.tina-tailwind .max-w-full {
+  max-width: 100%;
+}
+.tina-tailwind .flex-1 {
+  flex: 1 1 0%;
+}
+.tina-tailwind .flex-shrink-0 {
+  flex-shrink: 0;
+}
+.tina-tailwind .flex-grow-0 {
+  flex-grow: 0;
+}
+.tina-tailwind .table-auto {
+  table-layout: auto;
+}
+.tina-tailwind .origin-top-right {
+  transform-origin: top right;
+}
+.tina-tailwind .-translate-x-full {
+  --tw-translate-x: -100%;
+  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));
+}
+.tina-tailwind .translate-x-0 {
+  --tw-translate-x: 0px;
+  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));
+}
+.tina-tailwind .translate-x-full {
+  --tw-translate-x: 100%;
+  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));
+}
+.tina-tailwind .scale-95 {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  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));
+}
+.tina-tailwind .scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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));
+}
+.tina-tailwind .transform {
+  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));
+}
+.tina-tailwind .cursor-pointer {
+  cursor: pointer;
+}
+.tina-tailwind .flex-col {
+  flex-direction: column;
+}
+.tina-tailwind .items-end {
+  align-items: flex-end;
+}
+.tina-tailwind .items-center {
+  align-items: center;
+}
+.tina-tailwind .items-stretch {
+  align-items: stretch;
+}
+.tina-tailwind .justify-end {
+  justify-content: flex-end;
+}
+.tina-tailwind .justify-center {
+  justify-content: center;
+}
+.tina-tailwind .justify-between {
+  justify-content: space-between;
+}
+.tina-tailwind .gap-0\\.5 {
+  gap: 2px;
+}
+.tina-tailwind .gap-0 {
+  gap: 0px;
+}
+.tina-tailwind .gap-4 {
+  gap: 16px;
+}
+.tina-tailwind .gap-3 {
+  gap: 12px;
+}
+.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+.tina-tailwind .divide-gray-150 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(230 227 239 / var(--tw-divide-opacity));
+}
+.tina-tailwind .overflow-hidden {
+  overflow: hidden;
+}
+.tina-tailwind .overflow-y-auto {
+  overflow-y: auto;
+}
+.tina-tailwind .whitespace-nowrap {
+  white-space: nowrap;
+}
+.tina-tailwind .rounded-lg {
+  border-radius: 8px;
+}
+.tina-tailwind .rounded {
+  border-radius: 4px;
+}
+.tina-tailwind .rounded-full {
+  border-radius: 9999px;
+}
+.tina-tailwind .rounded-md {
+  border-radius: 6px;
+}
+.tina-tailwind .rounded-r-md {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+.tina-tailwind .border {
+  border-width: 1px;
+}
+.tina-tailwind .border-b {
+  border-bottom-width: 1px;
+}
+.tina-tailwind .border-gray-150 {
+  --tw-border-opacity: 1;
+  border-color: rgb(230 227 239 / var(--tw-border-opacity));
+}
+.tina-tailwind .border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(225 221 236 / var(--tw-border-opacity));
+}
+.tina-tailwind .bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+.tina-tailwind .bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(246 246 249 / var(--tw-bg-opacity));
+}
+.tina-tailwind .bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 132 255 / var(--tw-bg-opacity));
+}
+.tina-tailwind .bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+.tina-tailwind .bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+.tina-tailwind .from-blue-900 {
+  --tw-gradient-from: #1D2C6C;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));
+}
+.tina-tailwind .from-gray-800 {
+  --tw-gradient-from: #363145;
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(54 49 69 / 0));
+}
+.tina-tailwind .via-gray-900 {
+  --tw-gradient-stops: var(--tw-gradient-from), #252336, var(--tw-gradient-to, rgb(37 35 54 / 0));
+}
+.tina-tailwind .to-gray-900 {
+  --tw-gradient-to: #252336;
+}
+.tina-tailwind .to-black {
+  --tw-gradient-to: #000;
+}
+.tina-tailwind .px-4 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.tina-tailwind .py-6 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+.tina-tailwind .px-5 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.tina-tailwind .py-4 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.tina-tailwind .px-12 {
+  padding-left: 48px;
+  padding-right: 48px;
+}
+.tina-tailwind .py-10 {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+.tina-tailwind .px-20 {
+  padding-left: 80px;
+  padding-right: 80px;
+}
+.tina-tailwind .px-6 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.tina-tailwind .py-1 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.tina-tailwind .py-2 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.tina-tailwind .py-5 {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.tina-tailwind .pt-4 {
+  padding-top: 16px;
+}
+.tina-tailwind .pb-4 {
+  padding-bottom: 16px;
+}
+.tina-tailwind .pt-18 {
+  padding-top: 72px;
+}
+.tina-tailwind .pt-3 {
+  padding-top: 12px;
+}
+.tina-tailwind .pl-18 {
+  padding-left: 72px;
+}
+.tina-tailwind .text-left {
+  text-align: left;
+}
+.tina-tailwind .text-center {
+  text-align: center;
+}
+.tina-tailwind .font-sans {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+.tina-tailwind .text-2xl {
+  font-size: 24px;
+  line-height: 1.33;
+}
+.tina-tailwind .text-base {
+  font-size: 16px;
+  line-height: 1.5;
+}
+.tina-tailwind .text-sm {
+  font-size: 14px;
+  line-height: 1.43;
+}
+.tina-tailwind .text-xl {
+  font-size: 20px;
+  line-height: 1.4;
+}
+.tina-tailwind .text-md {
+  font-size: 16px;
+  line-height: 1.5;
+}
+.tina-tailwind .text-xs {
+  font-size: 13px;
+  line-height: 1.33;
+}
+.tina-tailwind .font-medium {
+  font-weight: 500;
+}
+.tina-tailwind .uppercase {
+  text-transform: uppercase;
+}
+.tina-tailwind .italic {
+  font-style: italic;
+}
+.tina-tailwind .leading-normal {
+  line-height: 1.5;
+}
+.tina-tailwind .leading-tight {
+  line-height: 1.25;
+}
+.tina-tailwind .leading-5 {
+  line-height: 20px;
+}
+.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));
+}
+.tina-tailwind .text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(5 116 228 / var(--tw-text-opacity));
+}
+.tina-tailwind .text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(113 108 127 / var(--tw-text-opacity));
+}
+.tina-tailwind .text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(145 140 158 / var(--tw-text-opacity));
+}
+.tina-tailwind .text-current {
+  color: currentColor;
+}
+.tina-tailwind .text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.tina-tailwind .text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(54 49 69 / var(--tw-text-opacity));
+}
+.tina-tailwind .text-gray-900 {
+  --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;
+}
+.tina-tailwind .opacity-100 {
+  opacity: 1;
+}
+.tina-tailwind .opacity-0 {
+  opacity: 0;
+}
+.tina-tailwind .opacity-80 {
+  opacity: .8;
+}
+.tina-tailwind .opacity-90 {
+  opacity: .9;
+}
+.tina-tailwind .opacity-50 {
+  opacity: .5;
+}
+.tina-tailwind .opacity-70 {
+  opacity: .7;
+}
+.tina-tailwind .shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.tina-tailwind .shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.tina-tailwind .shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.tina-tailwind .ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.tina-tailwind .ring-black {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
+}
+.tina-tailwind .ring-opacity-5 {
+  --tw-ring-opacity: .05;
+}
+.tina-tailwind .filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+.tina-tailwind .transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.tina-tailwind .transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.tina-tailwind .transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.tina-tailwind .transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.tina-tailwind .duration-300 {
+  transition-duration: 300ms;
+}
+.tina-tailwind .duration-200 {
+  transition-duration: 200ms;
+}
+.tina-tailwind .duration-150 {
+  transition-duration: 150ms;
+}
+.tina-tailwind .duration-100 {
+  transition-duration: 100ms;
+}
+.tina-tailwind .duration-75 {
+  transition-duration: 75ms;
+}
+.tina-tailwind .ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+.tina-tailwind .ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+.tina-tailwind .icon-parent svg {
+      fill: currentColor;
+    }
+.tina-tailwind {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 16px;
+  line-height: 1.5;
+  --tw-text-opacity: 1;
+  color: rgb(86 81 101 / var(--tw-text-opacity));
+}
+.tina-tailwind .hover\\:bg-blue-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(5 116 228 / var(--tw-bg-opacity));
+}
+.tina-tailwind .hover\\:text-blue-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(5 116 228 / var(--tw-text-opacity));
+}
+.tina-tailwind .hover\\:text-blue-400:hover {
+  --tw-text-opacity: 1;
+  color: rgb(34 150 254 / var(--tw-text-opacity));
+}
+.tina-tailwind .hover\\:opacity-100:hover {
+  opacity: 1;
+}
+.tina-tailwind .focus\\:text-blue-400:focus {
+  --tw-text-opacity: 1;
+  color: rgb(34 150 254 / var(--tw-text-opacity));
+}
+.tina-tailwind .focus\\:underline:focus {
+  text-decoration-line: underline;
+}
+.tina-tailwind .focus\\:shadow-outline:focus {
+  --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.tina-tailwind .focus\\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.tina-tailwind .focus\\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.tina-tailwind .focus\\:ring-blue-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));
+}
+`;
 class ContentCreatorPlugin {
   constructor(options) {
     this.__type = "content-creator";
@@ -2760,9 +3652,9 @@ class ContentCreatorPlugin {
 }
 const useDocumentCreatorPlugin = (args) => {
   const cms = useCMS();
-  const [values, setValues] = React.useState({});
-  const [plugin, setPlugin] = React.useState(null);
-  React.useEffect(() => {
+  const [values, setValues] = React__default.useState({});
+  const [plugin, setPlugin] = React__default.useState(null);
+  React__default.useEffect(() => {
     const run = async () => {
       var _a;
       const res = await cms.api.tina.request((gql2) => gql2`
@@ -2863,7 +3755,7 @@ const useDocumentCreatorPlugin = (args) => {
     };
     run();
   }, [cms]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (plugin) {
       cms.plugins.add(plugin);
     }
@@ -2884,10 +3776,10 @@ function useTina({
     state,
     isDummyContainer,
     isLoading: contextLoading
-  } = React.useContext(TinaDataContext);
+  } = React__default.useContext(TinaDataContext);
   const [waitForContextRerender, setWaitForContextRerender] = useState(!isDummyContainer);
   const isLoading = contextLoading || waitForContextRerender;
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     setRequest({ query, variables });
   }, [JSON.stringify(variables), query]);
   useEffect(() => {
@@ -2939,7 +3831,7 @@ const errorButtonStyles = {
   color: "white",
   margin: "1rem 0"
 };
-class ErrorBoundary extends React.Component {
+class ErrorBoundary extends React__default.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -2955,7 +3847,7 @@ class ErrorBoundary extends React.Component {
     const branchData = window.localStorage && window.localStorage.getItem("tinacms-current-branch");
     const hasBranchData = branchData && branchData.length > 0;
     if (this.state.hasError && !this.state.pageRefresh) {
-      return /* @__PURE__ */ React.createElement("div", {
+      return /* @__PURE__ */ React__default.createElement("div", {
         style: {
           background: "#efefef",
           height: "100vh",
@@ -2963,7 +3855,7 @@ class ErrorBoundary extends React.Component {
           alignItems: "center",
           justifyContent: "center"
         }
-      }, /* @__PURE__ */ React.createElement("style", null, "            body {              margin: 0;            }          "), /* @__PURE__ */ React.createElement("div", {
+      }, /* @__PURE__ */ React__default.createElement("style", null, "            body {              margin: 0;            }          "), /* @__PURE__ */ React__default.createElement("div", {
         style: {
           background: "#fff",
           maxWidth: "400px",
@@ -2972,27 +3864,27 @@ class ErrorBoundary extends React.Component {
           borderRadius: "5px",
           boxShadow: "0 6px 24px rgb(0 37 91 / 5%), 0 2px 4px rgb(0 37 91 / 3%)"
         }
-      }, /* @__PURE__ */ React.createElement("h3", {
+      }, /* @__PURE__ */ React__default.createElement("h3", {
         style: { color: "#eb6337" }
-      }, "TinaCMS Render Error"), /* @__PURE__ */ React.createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React.createElement("pre", {
+      }, "TinaCMS Render Error"), /* @__PURE__ */ React__default.createElement("p", null, "Tina caught an error while updating the page:"), /* @__PURE__ */ React__default.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("p", null, "See our", " ", /* @__PURE__ */ React.createElement("a", {
+      }, this.state.message), /* @__PURE__ */ React__default.createElement("br", null), /* @__PURE__ */ React__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.createElement("p", null, "See our", " ", /* @__PURE__ */ React__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.createElement("button", {
+      }, " ", "Error FAQ", " "), " ", "for more information."), /* @__PURE__ */ React__default.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("p", null, "See our", " ", /* @__PURE__ */ React.createElement("a", {
+      }, "Refresh"), hasBranchData && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__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.createElement("p", null, "See our", " ", /* @__PURE__ */ React__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.createElement("button", {
+      }, " ", "Error FAQ", " "), " ", "for more information."), /* @__PURE__ */ React__default.createElement("button", {
         style: errorButtonStyles,
         onClick: () => {
           window.localStorage.removeItem("tinacms-current-branch");
@@ -3001,7 +3893,7 @@ class ErrorBoundary extends React.Component {
       }, "Switch to default branch"))));
     }
     if (this.state.pageRefresh) {
-      return /* @__PURE__ */ React.createElement(Loader, null, "Let's try that again.");
+      return /* @__PURE__ */ React__default.createElement(Loader, null, "Let's try that again.");
     }
     return this.props.children;
   }
@@ -3032,7 +3924,7 @@ const TinaCMSProvider2 = (_c) => {
   if (!schema) {
     throw new Error("`schema` is required to be passed as a property to `TinaProvider`.  You can learn more about this change here: https://github.com/tinacms/tinacms/pull/2823");
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TinaCloudProvider, {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TinaCloudProvider, {
     branch,
     clientId,
     tinaioConfig: props.tinaioConfig,
@@ -3040,11 +3932,11 @@ const TinaCMSProvider2 = (_c) => {
     cmsCallback: props.cmsCallback,
     mediaStore: props.mediaStore,
     schema
-  }, /* @__PURE__ */ React.createElement("style", null, styles), /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(DocumentCreator, {
+  }, /* @__PURE__ */ React__default.createElement("style", null, styles), /* @__PURE__ */ React__default.createElement(ErrorBoundary, null, /* @__PURE__ */ React__default.createElement(DocumentCreator, {
     documentCreatorCallback
-  }), /* @__PURE__ */ React.createElement(TinaDataProvider, {
+  }), /* @__PURE__ */ React__default.createElement(TinaDataProvider, {
     formifyCallback
-  }, typeof props.children == "function" ? /* @__PURE__ */ React.createElement(TinaQuery, __spreadProps(__spreadValues({}, props), {
+  }, typeof props.children == "function" ? /* @__PURE__ */ React__default.createElement(TinaQuery, __spreadProps(__spreadValues({}, props), {
     variables: props.variables,
     data: props.data,
     query,
@@ -3059,7 +3951,7 @@ const DocumentCreator = ({
   return null;
 };
 const TinaQuery = (props) => {
-  return /* @__PURE__ */ React.createElement(TinaQueryInner, __spreadValues({
+  return /* @__PURE__ */ React__default.createElement(TinaQueryInner, __spreadValues({
     key: `rootQuery-${props.query}`
   }, props));
 };
@@ -3070,24 +3962,24 @@ const TinaQueryInner = (_e) => {
     variables: props.variables,
     data: props.data
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(isLoading || !props.query ? props : __spreadProps(__spreadValues({}, props), { data: liveData })));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children(isLoading || !props.query ? props : __spreadProps(__spreadValues({}, props), { data: liveData })));
 };
 const TinaDataProvider = ({
   children,
   formifyCallback
 }) => {
   const [request, setRequest] = useState();
-  const [state, setState] = React.useState({
+  const [state, setState] = React__default.useState({
     payload: void 0,
     isLoading: true
   });
-  return /* @__PURE__ */ React.createElement(TinaDataContext.Provider, {
+  return /* @__PURE__ */ React__default.createElement(TinaDataContext.Provider, {
     value: {
       setRequest,
       isLoading: state.isLoading,
       state: { payload: state.payload }
     }
-  }, /* @__PURE__ */ React.createElement(FormRegistrar, {
+  }, /* @__PURE__ */ React__default.createElement(FormRegistrar, {
     key: request == null ? void 0 : request.query,
     request,
     formifyCallback,
@@ -3111,13 +4003,13 @@ const FormRegistrar = ({
       }
     }
   });
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     onPayloadStateChange({ payload, isLoading });
   }, [JSON.stringify(payload), isLoading]);
-  return isLoading ? /* @__PURE__ */ React.createElement(Loader, null, /* @__PURE__ */ React.createElement(React.Fragment, null)) : null;
+  return isLoading ? /* @__PURE__ */ React__default.createElement(Loader, null, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)) : null;
 };
 const Loader = (props) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
     style: {
       position: "fixed",
       background: "rgba(0, 0, 0, 0.5)",
@@ -3129,7 +4021,7 @@ const Loader = (props) => {
       justifyContent: "center",
       padding: "40px"
     }
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     style: {
       background: "#f6f6f9",
       boxShadow: "0px 2px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.1)",
@@ -3142,7 +4034,7 @@ const Loader = (props) => {
       justifyContent: "center",
       flexDirection: "column"
     }
-  }, /* @__PURE__ */ React.createElement("svg", {
+  }, /* @__PURE__ */ React__default.createElement("svg", {
     style: {
       width: "64px",
       color: "#2296fe",
@@ -3158,13 +4050,13 @@ const Loader = (props) => {
     viewBox: "0 0 100 64",
     enableBackground: "new 0 0 0 0",
     xmlSpace: "preserve"
-  }, /* @__PURE__ */ React.createElement("circle", {
+  }, /* @__PURE__ */ React__default.createElement("circle", {
     fill: "currentColor",
     stroke: "none",
     cx: 6,
     cy: 32,
     r: 6
-  }, /* @__PURE__ */ React.createElement("animateTransform", {
+  }, /* @__PURE__ */ React__default.createElement("animateTransform", {
     attributeName: "transform",
     dur: "1s",
     type: "translate",
@@ -3173,13 +4065,13 @@ const Loader = (props) => {
     keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
     repeatCount: "indefinite",
     begin: "0.1"
-  })), /* @__PURE__ */ React.createElement("circle", {
+  })), /* @__PURE__ */ React__default.createElement("circle", {
     fill: "currentColor",
     stroke: "none",
     cx: 30,
     cy: 32,
     r: 6
-  }, /* @__PURE__ */ React.createElement("animateTransform", {
+  }, /* @__PURE__ */ React__default.createElement("animateTransform", {
     attributeName: "transform",
     dur: "1s",
     type: "translate",
@@ -3188,13 +4080,13 @@ const Loader = (props) => {
     keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
     repeatCount: "indefinite",
     begin: "0.2"
-  })), /* @__PURE__ */ React.createElement("circle", {
+  })), /* @__PURE__ */ React__default.createElement("circle", {
     fill: "currentColor",
     stroke: "none",
     cx: 54,
     cy: 32,
     r: 6
-  }, /* @__PURE__ */ React.createElement("animateTransform", {
+  }, /* @__PURE__ */ React__default.createElement("animateTransform", {
     attributeName: "transform",
     dur: "1s",
     type: "translate",
@@ -3203,7 +4095,7 @@ const Loader = (props) => {
     keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
     repeatCount: "indefinite",
     begin: "0.3"
-  }))), /* @__PURE__ */ React.createElement("p", {
+  }))), /* @__PURE__ */ React__default.createElement("p", {
     style: {
       fontSize: "18px",
       color: "#252336",
@@ -3260,7 +4152,7 @@ function gql(strings, ...args) {
   return str;
 }
 const Layout = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, styles), /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("style", null, styles), /* @__PURE__ */ React__default.createElement("div", {
     className: "tina-tailwind",
     style: {
       position: "fixed",
@@ -3282,7 +4174,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = React.createContext && React.createContext(DefaultContext);
+var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
 var __assign = function() {
   __assign = Object.assign || function(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -3309,14 +4201,14 @@ var __rest = function(s, e) {
 };
 function Tree2Element(tree) {
   return tree && tree.map(function(node2, i) {
-    return React.createElement(node2.tag, __assign({
+    return React__default.createElement(node2.tag, __assign({
       key: i
     }, node2.attr), Tree2Element(node2.child));
   });
 }
 function GenIcon(data) {
   return function(props) {
-    return React.createElement(IconBase, __assign({
+    return React__default.createElement(IconBase, __assign({
       attr: __assign({}, data.attr)
     }, props), Tree2Element(data.child));
   };
@@ -3330,7 +4222,7 @@ function IconBase(props) {
       className = conf.className;
     if (props.className)
       className = (className ? className + " " : "") + props.className;
-    return React.createElement("svg", __assign({
+    return React__default.createElement("svg", __assign({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -3342,9 +4234,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && React.createElement("title", null, title), props.children);
+    }), title && React__default.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? React.createElement(IconContext.Consumer, null, function(conf) {
+  return IconContext !== void 0 ? React__default.createElement(IconContext.Consumer, null, function(conf) {
     return elem(conf);
   }) : elem(DefaultContext);
 }
@@ -3382,6 +4274,9 @@ function IoMdClose(props) {
 function BiEdit(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m7 17.013 4.413-.015 9.632-9.54c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.756-.756-2.075-.752-2.825-.003L7 12.583v4.43zM18.045 4.458l1.589 1.583-1.597 1.582-1.586-1.585 1.594-1.58zM9 13.417l6.03-5.973 1.586 1.586-6.029 5.971L9 15.006v-1.589z" } }, { "tag": "path", "attr": { "d": "M5 21h14c1.103 0 2-.897 2-2v-8.668l-2 2V19H8.158c-.026 0-.053.01-.079.01-.033 0-.066-.009-.1-.01H5V5h6.847l2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2z" } }] })(props);
 }
+function BiLeftArrowAlt(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z" } }] })(props);
+}
 function BiLogIn(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
 }
@@ -3394,6 +4289,9 @@ function BiMenu(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 BiRightArrowAlt(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" } }] })(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);
 }
@@ -3404,47 +4302,47 @@ const Sidebar = ({ cms }) => {
   var _a, _b;
   const collectionsInfo = useGetCollections(cms);
   const screens = cms.plugins.getType("screen").all();
-  const [menuIsOpen, setMenuIsOpen] = React.useState(false);
+  const [menuIsOpen, setMenuIsOpen] = React__default.useState(false);
   const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
   const navBreakpoint = 1e3;
   const windowWidth = useWindowWidth();
   const renderDesktopNav = windowWidth > navBreakpoint;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, renderDesktopNav && /* @__PURE__ */ React.createElement(Nav, {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, renderDesktopNav && /* @__PURE__ */ React__default.createElement(Nav, {
     sidebarWidth: 360,
     showCollections: true,
     collectionsInfo,
     screens,
     contentCreators: [],
-    RenderNavSite: ({ view }) => /* @__PURE__ */ React.createElement(SidebarLink, {
+    RenderNavSite: ({ view }) => /* @__PURE__ */ React__default.createElement(SidebarLink, {
       label: view.name,
       to: `screens/${slugify(view.name)}`,
       Icon: view.Icon ? view.Icon : ImFilesEmpty
     }),
-    RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(SidebarLink, {
+    RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default.createElement(SidebarLink, {
       label: collection.label ? collection.label : collection.name,
       to: `collections/${collection.name}`,
       Icon: ImFilesEmpty
     })
-  }), !renderDesktopNav && /* @__PURE__ */ React.createElement(Transition, {
+  }), !renderDesktopNav && /* @__PURE__ */ React__default.createElement(Transition, {
     show: menuIsOpen
-  }, /* @__PURE__ */ React.createElement(Transition.Child, {
-    as: React.Fragment,
+  }, /* @__PURE__ */ React__default.createElement(Transition.Child, {
+    as: React__default.Fragment,
     enter: "transform transition-all ease-out duration-300",
     enterFrom: "opacity-0 -translate-x-full",
     enterTo: "opacity-100 translate-x-0",
     leave: "transform transition-all ease-in duration-200",
     leaveFrom: "opacity-100 translate-x-0",
     leaveTo: "opacity-0 -translate-x-full"
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     className: "fixed left-0 top-0 z-overlay h-full transform"
-  }, /* @__PURE__ */ React.createElement(Nav, {
+  }, /* @__PURE__ */ React__default.createElement(Nav, {
     className: "rounded-r-md",
     sidebarWidth: 360,
     showCollections: true,
     collectionsInfo,
     screens,
     contentCreators: [],
-    RenderNavSite: ({ view }) => /* @__PURE__ */ React.createElement(SidebarLink, {
+    RenderNavSite: ({ view }) => /* @__PURE__ */ React__default.createElement(SidebarLink, {
       label: view.name,
       to: `screens/${slugify(view.name)}`,
       Icon: view.Icon ? view.Icon : ImFilesEmpty,
@@ -3452,7 +4350,7 @@ const Sidebar = ({ cms }) => {
         setMenuIsOpen(false);
       }
     }),
-    RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(SidebarLink, {
+    RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default.createElement(SidebarLink, {
       label: collection.label ? collection.label : collection.name,
       to: `collections/${collection.name}`,
       Icon: ImFilesEmpty,
@@ -3460,19 +4358,19 @@ const Sidebar = ({ cms }) => {
         setMenuIsOpen(false);
       }
     })
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     className: "absolute top-8 right-0 transform translate-x-full overflow-hidden"
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React__default.createElement(Button$1, {
     rounded: "right",
     variant: "secondary",
     onClick: () => {
       setMenuIsOpen(false);
     },
     className: `transition-opacity duration-150 ease-out`
-  }, /* @__PURE__ */ React.createElement(IoMdClose, {
+  }, /* @__PURE__ */ React__default.createElement(IoMdClose, {
     className: "h-6 w-auto"
-  })))))), /* @__PURE__ */ React.createElement(Transition.Child, {
-    as: React.Fragment,
+  })))))), /* @__PURE__ */ React__default.createElement(Transition.Child, {
+    as: React__default.Fragment,
     enter: "ease-out duration-300",
     enterFrom: "opacity-0",
     enterTo: "opacity-80",
@@ -3480,39 +4378,39 @@ const Sidebar = ({ cms }) => {
     leave: "ease-in duration-200",
     leaveFrom: "opacity-80",
     leaveTo: "opacity-0"
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     onClick: () => {
       setMenuIsOpen(false);
     },
     className: "fixed z-menu inset-0 bg-gradient-to-br from-gray-800 via-gray-900 to-black"
-  }))), !renderDesktopNav && /* @__PURE__ */ React.createElement(Button, {
+  }))), !renderDesktopNav && /* @__PURE__ */ React__default.createElement(Button$1, {
     rounded: "right",
     variant: "secondary",
     onClick: () => {
       setMenuIsOpen(true);
     },
     className: `pointer-events-auto -ml-px absolute left-0 z-50 ${isLocalMode ? `top-10` : `top-4`}`
-  }, /* @__PURE__ */ React.createElement(BiMenu, {
+  }, /* @__PURE__ */ React__default.createElement(BiMenu, {
     className: "h-7 w-auto"
   })));
 };
 const SidebarLink = (props) => {
   const { to, label, Icon } = props;
-  return /* @__PURE__ */ React.createElement(NavLink, {
+  return /* @__PURE__ */ React__default.createElement(NavLink, {
     className: ({ isActive }) => {
       return `text-base tracking-wide ${isActive ? "text-blue-600" : "text-gray-500"} hover:text-blue-600 flex items-center opacity-90 hover:opacity-100`;
     },
     onClick: props.onClick ? props.onClick : () => {
     },
     to
-  }, /* @__PURE__ */ React.createElement(Icon, {
+  }, /* @__PURE__ */ React__default.createElement(Icon, {
     className: "mr-2 h-6 opacity-80 w-auto"
   }), " ", label);
 };
 const GetCMS = ({ children }) => {
   try {
     const cms = useCMS();
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, children(cms));
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children(cms));
   } catch (e) {
     return null;
   }
@@ -3524,52 +4422,52 @@ const AuthTemplate = ({
   message,
   children
 }) => {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement("div", {
     className: "h-screen w-full bg-gradient-to-b from-blue-900 to-gray-900 flex items-center justify-center px-4 py-6"
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     className: "bg-white rounded-lg overflow-hidden shadow-lg w-full max-w-lg"
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     className: "px-5 py-4 border-b border-gray-150"
-  }, /* @__PURE__ */ React.createElement("h2", {
-    className: "text-2xl tracking-wide text-gray-700 flex items-center gap-0.5"
-  }, /* @__PURE__ */ React.createElement("svg", {
+  }, /* @__PURE__ */ React__default.createElement("h2", {
+    className: "text-2xl font-sans tracking-wide text-gray-700 flex items-center gap-0.5"
+  }, /* @__PURE__ */ React__default.createElement("svg", {
     viewBox: "0 0 32 32",
     fill: "#EC4815",
     xmlns: "http://www.w3.org/2000/svg",
     className: "w-10 h-auto"
-  }, /* @__PURE__ */ React.createElement("path", {
+  }, /* @__PURE__ */ React__default.createElement("path", {
     d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z"
-  }), /* @__PURE__ */ React.createElement("path", {
+  }), /* @__PURE__ */ React__default.createElement("path", {
     d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z"
-  })), /* @__PURE__ */ React.createElement("span", null, "Tina"))), message && /* @__PURE__ */ React.createElement("div", {
+  })), /* @__PURE__ */ React__default.createElement("span", null, "Tina"))), message && /* @__PURE__ */ React__default.createElement("div", {
     className: "px-5 pt-4"
-  }, /* @__PURE__ */ React.createElement("p", {
+  }, /* @__PURE__ */ React__default.createElement("p", {
     className: "text-base font-sans leading-normal"
-  }, message)), /* @__PURE__ */ React.createElement("div", {
+  }, message)), /* @__PURE__ */ React__default.createElement("div", {
     className: "px-5 py-4 flex gap-4 w-full justify-between"
   }, children)));
 };
 const LoginPage = () => {
   const { setEdit } = useEditState();
   const login = () => setEdit(true);
-  return /* @__PURE__ */ React.createElement(AuthTemplate, null, /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement(AuthTemplate, null, /* @__PURE__ */ React__default.createElement("div", {
     className: "flex w-full flex-1 gap-4 items-center justify-end"
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React__default.createElement(Button$1, {
     onClick: () => {
       window.location.href = "/";
     },
     variant: "white",
     size: "custom",
     className: "text-base h-12 px-6 flex-shrink-0 flex-grow-0"
-  }, /* @__PURE__ */ React.createElement(MdOutlineArrowBack, {
+  }, /* @__PURE__ */ React__default.createElement(MdOutlineArrowBack, {
     className: "w-6 h-auto mr-1.5 opacity-80"
-  }), " Back To Site"), /* @__PURE__ */ React.createElement(Button, {
+  }), " Back To Site"), /* @__PURE__ */ React__default.createElement(Button$1, {
     onClick: () => login(),
     variant: "primary",
     size: "custom",
     className: "text-base h-12 px-6 flex-1",
     type: "submit"
-  }, /* @__PURE__ */ React.createElement(BiLogIn, {
+  }, /* @__PURE__ */ React__default.createElement(BiLogIn, {
     className: "w-6 h-auto mr-2 opacity-80"
   }), " Edit With Tina")));
 };
@@ -3578,67 +4476,67 @@ const logout = () => {
   window.location.href = "/";
 };
 const LogoutPage = () => {
-  return /* @__PURE__ */ React.createElement(AuthTemplate, null, /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement(AuthTemplate, null, /* @__PURE__ */ React__default.createElement("div", {
     className: "flex w-full flex-1 gap-4 items-center justify-end"
-  }, /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React__default.createElement(Button$1, {
     onClick: () => {
       window.location.href = "/";
     },
     variant: "white",
     size: "custom",
     className: "text-base h-12 px-6 flex-shrink-0 flex-grow-0"
-  }, /* @__PURE__ */ React.createElement(MdOutlineArrowBack, {
+  }, /* @__PURE__ */ React__default.createElement(MdOutlineArrowBack, {
     className: "w-6 h-auto mr-1.5 opacity-80"
-  }), " Back To Site"), /* @__PURE__ */ React.createElement(Button, {
+  }), " Back To Site"), /* @__PURE__ */ React__default.createElement(Button$1, {
     onClick: () => logout(),
     type: "submit",
     variant: "primary",
     size: "custom",
     className: "text-base h-12 px-6 flex-1"
-  }, /* @__PURE__ */ React.createElement(BiLogOut, {
+  }, /* @__PURE__ */ React__default.createElement(BiLogOut, {
     className: "w-6 h-auto mr-1.5 opacity-80"
   }), " Log Out of Tina")));
 };
 const PageWrapper = ({
   children
 }) => {
-  return /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement("div", {
     className: "relative left-0 w-full h-full bg-gray-50 shadow-2xl overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100"
   }, children);
 };
 const PageHeader = ({
   isLocalMode,
   children
-}) => /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
+}) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isLocalMode && /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement("div", {
   className: "bg-white pb-4 pt-18 border-b border-gray-200 px-12"
-}, /* @__PURE__ */ React.createElement("div", {
+}, /* @__PURE__ */ React__default.createElement("div", {
   className: "w-full mx-auto max-w-screen-xl"
-}, /* @__PURE__ */ React.createElement("div", {
+}, /* @__PURE__ */ React__default.createElement("div", {
   className: "w-full flex justify-between items-end"
 }, children))));
 const PageBody = ({
   children
-}) => /* @__PURE__ */ React.createElement("div", {
+}) => /* @__PURE__ */ React__default.createElement("div", {
   className: "py-10 px-12"
 }, children);
 const PageBodyNarrow = ({
   children
-}) => /* @__PURE__ */ React.createElement("div", {
+}) => /* @__PURE__ */ React__default.createElement("div", {
   className: "py-10 px-12"
-}, /* @__PURE__ */ React.createElement("div", {
+}, /* @__PURE__ */ React__default.createElement("div", {
   className: "w-full mx-auto max-w-screen-xl"
 }, children));
 const DashboardPage = () => {
-  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
+  return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => {
     var _a, _b;
-    return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PageHeader, {
+    return /* @__PURE__ */ React__default.createElement(PageWrapper, null, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(PageHeader, {
       isLocalMode: (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
-    }, /* @__PURE__ */ React.createElement("h3", {
-      className: "text-2xl text-gray-700"
-    }, "Welcome to Tina!")), /* @__PURE__ */ React.createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
+    }, /* @__PURE__ */ React__default.createElement("h3", {
+      className: "text-2xl font-sans text-gray-700"
+    }, "Welcome to Tina!")), /* @__PURE__ */ React__default.createElement(PageBodyNarrow, null, "This is your dashboard for editing or creating content. Select a collection on the left to begin.")));
   });
 };
-const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+const LoadingPage = () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
   style: {
     position: "absolute",
     top: 0,
@@ -3652,7 +4550,7 @@ const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, nu
     justifyContent: "center",
     padding: "120px 40px 40px 40px"
   }
-}, /* @__PURE__ */ React.createElement("div", {
+}, /* @__PURE__ */ React__default.createElement("div", {
   style: {
     background: "#FFF",
     border: "1px solid #EDECF3",
@@ -3666,7 +4564,7 @@ const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, nu
     justifyContent: "center",
     flexDirection: "column"
   }
-}, /* @__PURE__ */ React.createElement("svg", {
+}, /* @__PURE__ */ React__default.createElement("svg", {
   style: {
     width: "64px",
     color: "#2296fe",
@@ -3682,13 +4580,13 @@ const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, nu
   viewBox: "0 0 100 64",
   enableBackground: "new 0 0 0 0",
   xmlSpace: "preserve"
-}, /* @__PURE__ */ React.createElement("circle", {
+}, /* @__PURE__ */ React__default.createElement("circle", {
   fill: "currentColor",
   stroke: "none",
   cx: 6,
   cy: 32,
   r: 6
-}, /* @__PURE__ */ React.createElement("animateTransform", {
+}, /* @__PURE__ */ React__default.createElement("animateTransform", {
   attributeName: "transform",
   dur: "1s",
   type: "translate",
@@ -3697,13 +4595,13 @@ const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, nu
   keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
   repeatCount: "indefinite",
   begin: "0.1"
-})), /* @__PURE__ */ React.createElement("circle", {
+})), /* @__PURE__ */ React__default.createElement("circle", {
   fill: "currentColor",
   stroke: "none",
   cx: 30,
   cy: 32,
   r: 6
-}, /* @__PURE__ */ React.createElement("animateTransform", {
+}, /* @__PURE__ */ React__default.createElement("animateTransform", {
   attributeName: "transform",
   dur: "1s",
   type: "translate",
@@ -3712,13 +4610,13 @@ const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, nu
   keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
   repeatCount: "indefinite",
   begin: "0.2"
-})), /* @__PURE__ */ React.createElement("circle", {
+})), /* @__PURE__ */ React__default.createElement("circle", {
   fill: "currentColor",
   stroke: "none",
   cx: 54,
   cy: 32,
   r: 6
-}, /* @__PURE__ */ React.createElement("animateTransform", {
+}, /* @__PURE__ */ React__default.createElement("animateTransform", {
   attributeName: "transform",
   dur: "1s",
   type: "translate",
@@ -3727,7 +4625,7 @@ const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, nu
   keySplines: "0.8 0 0.4 1; 0.4 0 0.2 1",
   repeatCount: "indefinite",
   begin: "0.3"
-}))), /* @__PURE__ */ React.createElement("p", {
+}))), /* @__PURE__ */ React__default.createElement("p", {
   style: {
     fontSize: "16px",
     color: "#716c7f",
@@ -3737,7 +4635,7 @@ const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, nu
     fontWeight: "normal"
   }
 }, "Please wait, Tina is loading data..."))));
-const useGetCollection = (cms, collectionName, includeDocuments = true) => {
+const useGetCollection = (cms, collectionName, includeDocuments = true, after = "") => {
   const api = new TinaAdminApi(cms);
   const [collection, setCollection] = useState(void 0);
   const [loading, setLoading] = useState(true);
@@ -3747,7 +4645,7 @@ const useGetCollection = (cms, collectionName, includeDocuments = true) => {
     const fetchCollection = async () => {
       if (await api.isAuthenticated()) {
         try {
-          const collection2 = await api.fetchCollection(collectionName, includeDocuments);
+          const collection2 = await api.fetchCollection(collectionName, includeDocuments, after);
           setCollection(collection2);
         } catch (error2) {
           cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`, 30 * 1e3);
@@ -3760,7 +4658,7 @@ const useGetCollection = (cms, collectionName, includeDocuments = true) => {
     };
     setLoading(true);
     fetchCollection();
-  }, [cms, collectionName, resetState]);
+  }, [cms, collectionName, resetState, after]);
   const reFetchCollection = () => setResetSate((x) => x + 1);
   return { collection, loading, error, reFetchCollection };
 };
@@ -3768,26 +4666,169 @@ const GetCollection = ({
   cms,
   collectionName,
   includeDocuments = true,
+  startCursor,
   children
 }) => {
-  const { collection, loading, error, reFetchCollection } = useGetCollection(cms, collectionName, includeDocuments);
+  const { collection, loading, error, reFetchCollection } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "");
   if (error) {
     return null;
   }
   if (loading) {
-    return /* @__PURE__ */ React.createElement(LoadingPage, null);
+    return /* @__PURE__ */ React__default.createElement(LoadingPage, null);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading, reFetchCollection));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children(collection, loading, reFetchCollection));
 };
+const theme = css`
+  :root {
+    --tina-color-primary-light: #2296fe;
+    --tina-color-primary: #0084ff;
+    --tina-color-primary-dark: #0574e4;
+    --tina-color-error-light: #eb6337;
+    --tina-color-error: #ec4815;
+    --tina-color-error-dark: #dc4419;
+    --tina-color-warning-light: #f5e06e;
+    --tina-color-warning: #e9d050;
+    --tina-color-warning-dark: #d3ba38;
+    --tina-color-success-light: #57c355;
+    --tina-color-success: #3cad3a;
+    --tina-color-success-dark: #249a21;
+    --tina-color-grey-0: #ffffff;
+    --tina-color-grey-1: #f6f6f9;
+    --tina-color-grey-2: #edecf3;
+    --tina-color-grey-3: #e1ddec;
+    --tina-color-grey-4: #b2adbe;
+    --tina-color-grey-5: #918c9e;
+    --tina-color-grey-6: #716c7f;
+    --tina-color-grey-7: #565165;
+    --tina-color-grey-8: #433e52;
+    --tina-color-grey-9: #363145;
+    --tina-color-grey-10: #252336;
+    --tina-color-indicator: var(--tina-color-primary);
+
+    --tina-radius-small: 5px;
+    --tina-radius-big: 24px;
+
+    --tina-padding-small: 12px;
+    --tina-padding-big: 20px;
+
+    --tina-font-size-0: 12px;
+    --tina-font-size-1: 13px;
+    --tina-font-size-2: 15px;
+    --tina-font-size-3: 16px;
+    --tina-font-size-4: 18px;
+    --tina-font-size-5: 20px;
+    --tina-font-size-6: 22px;
+    --tina-font-size-7: 26px;
+    --tina-font-size-8: 32px;
+
+    --tina-font-family: 'Inter', sans-serif;
+
+    --tina-font-weight-regular: 400;
+    --tina-font-weight-bold: 600;
+
+    --tina-shadow-big: 0px 2px 3px rgba(0, 0, 0, 0.05),
+      0 4px 12px rgba(0, 0, 0, 0.1);
+    --tina-shadow-small: 0px 2px 3px rgba(0, 0, 0, 0.12);
+
+    --tina-timing-short: 85ms;
+    --tina-timing-medium: 150ms;
+    --tina-timing-long: 250ms;
+
+    --tina-z-index-0: 0;
+    --tina-z-index-1: 10;
+    --tina-z-index-2: 20;
+    --tina-z-index-3: 30;
+    --tina-z-index-4: 40;
+    --tina-z-index-5: 50;
+
+    --tina-sidebar-width: 340px;
+    --tina-sidebar-header-height: 60px;
+    --tina-toolbar-height: 62px;
+  }
+`;
+createGlobalStyle`
+  ${theme};
+`;
+const Button = (_g) => {
+  var _h = _g, {
+    variant = "secondary",
+    as: Tag = "button",
+    size = "medium",
+    busy,
+    disabled,
+    rounded = "full",
+    children,
+    className
+  } = _h, props = __objRest(_h, [
+    "variant",
+    "as",
+    "size",
+    "busy",
+    "disabled",
+    "rounded",
+    "children",
+    "className"
+  ]);
+  const baseClasses = "icon-parent border-0 inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out ";
+  const variantClasses = {
+    primary: `shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500`,
+    secondary: `shadow text-gray-500 hover:text-blue-500 bg-gray-50 hover:bg-white border border-gray-200`,
+    white: `shadow text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-200`,
+    ghost: `text-gray-500 hover:text-blue-500 hover:shadow border border-transparent hover:border-gray-200 bg-transparent`,
+    danger: `shadow text-white bg-red-500 hover:bg-red-600 focus:ring-red-500`
+  };
+  const state = busy ? `busy` : disabled ? `disabled` : `default`;
+  const stateClasses = {
+    disabled: `pointer-events-none	opacity-30 cursor-not-allowed`,
+    busy: `pointer-events-none opacity-70 cursor-wait`,
+    default: ``
+  };
+  const roundedClasses = {
+    full: `rounded-full`,
+    left: `rounded-l-full`,
+    right: `rounded-r-full`
+  };
+  const sizeClasses = {
+    small: `text-xs h-8 px-3`,
+    medium: `text-sm h-10 px-4`,
+    custom: ``
+  };
+  return /* @__PURE__ */ React.createElement(Tag, __spreadValues({
+    className: `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${stateClasses[state]} ${roundedClasses[rounded]} ${className}`
+  }, props), children);
+};
+function CursorPaginator({
+  navigateNext,
+  navigatePrev,
+  hasNext,
+  hasPrev,
+  variant = "secondary"
+}) {
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: "w-full flex flex-shrink-0 justify-end gap-2 items-center"
+  }, /* @__PURE__ */ React__default.createElement(Button, {
+    variant,
+    disabled: !hasPrev,
+    onClick: navigatePrev
+  }, /* @__PURE__ */ React__default.createElement(BiLeftArrowAlt, {
+    className: "w-6 h-full mr-2 opacity-70"
+  }), " Previous"), /* @__PURE__ */ React__default.createElement(Button, {
+    variant,
+    disabled: !hasNext,
+    onClick: navigateNext
+  }, "Next ", /* @__PURE__ */ React__default.createElement(BiRightArrowAlt, {
+    className: "w-6 h-full ml-2 opacity-70"
+  })));
+}
 const TemplateMenu = ({ templates }) => {
-  return /* @__PURE__ */ React.createElement(Menu, {
+  return /* @__PURE__ */ React__default.createElement(Menu, {
     as: "div",
     className: "relative inline-block text-left"
-  }, () => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Menu.Button, {
+  }, () => /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Menu.Button, {
     className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
-  }, "Create New ", /* @__PURE__ */ React.createElement(BiPlus, {
+  }, "Create New ", /* @__PURE__ */ React__default.createElement(BiPlus, {
     className: "w-5 h-full ml-1 opacity-70"
-  }))), /* @__PURE__ */ React.createElement(Transition, {
+  }))), /* @__PURE__ */ React__default.createElement(Transition, {
     as: Fragment,
     enter: "transition ease-out duration-100",
     enterFrom: "transform opacity-0 scale-95",
@@ -3795,13 +4836,13 @@ const TemplateMenu = ({ templates }) => {
     leave: "transition ease-in duration-75",
     leaveFrom: "transform opacity-100 scale-100",
     leaveTo: "transform opacity-0 scale-95"
-  }, /* @__PURE__ */ React.createElement(Menu.Items, {
+  }, /* @__PURE__ */ React__default.createElement(Menu.Items, {
     className: "origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     className: "py-1"
-  }, templates.map((template) => /* @__PURE__ */ React.createElement(Menu.Item, {
+  }, templates.map((template) => /* @__PURE__ */ React__default.createElement(Menu.Item, {
     key: `${template.label}-${template.name}`
-  }, ({ active }) => /* @__PURE__ */ React.createElement(Link, {
+  }, ({ active }) => /* @__PURE__ */ React__default.createElement(Link, {
     to: `${template.name}/new`,
     className: `w-full text-md px-4 py-2 tracking-wide flex items-center opacity-80 text-gray-600 ${active && "text-gray-800 opacity-100"}`
   }, template.label))))))));
@@ -3820,22 +4861,32 @@ 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({
+  const [open, setOpen] = React__default.useState(false);
+  const [vars, setVars] = React__default.useState({
     collection: collectionName,
     relativePath: ""
   });
-  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
-    return /* @__PURE__ */ React.createElement(GetCollection, {
+  const [endCursor, setEndCursor] = useState("");
+  const [prevCursors, setPrevCursors] = useState([]);
+  const loc = useLocation();
+  useEffect(() => {
+    setEndCursor("");
+    setPrevCursors([]);
+  }, [loc]);
+  return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => {
+    return /* @__PURE__ */ React__default.createElement(GetCollection, {
       cms,
       collectionName,
-      includeDocuments: true
+      includeDocuments: true,
+      startCursor: endCursor
     }, (collection, _loading, reFetchCollection) => {
       var _a, _b;
       const totalCount = collection.documents.totalCount;
       const documents = collection.documents.edges;
       const admin = cms.api.admin;
-      return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, open && /* @__PURE__ */ React.createElement(DeleteModal, {
+      const pageInfo = collection.documents.pageInfo;
+      const useDataFlag = cms.flags.get("experimentalData");
+      return /* @__PURE__ */ React__default.createElement(PageWrapper, null, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, open && /* @__PURE__ */ React__default.createElement(DeleteModal, {
         filename: vars.relativePath,
         deleteFunc: async () => {
           try {
@@ -3849,114 +4900,133 @@ const CollectionListPage = () => {
           }
         },
         close: () => setOpen(false)
-      }), /* @__PURE__ */ React.createElement(PageHeader, {
+      }), /* @__PURE__ */ React__default.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"
-      }, collection.label ? collection.label : collection.name), !collection.templates && /* @__PURE__ */ React.createElement(Link, {
+      }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("h3", {
+        className: "font-sans text-2xl text-gray-700"
+      }, collection.label ? collection.label : collection.name), !collection.templates && /* @__PURE__ */ React__default.createElement(Link, {
         to: `new`,
         className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
-      }, "Create New", " ", /* @__PURE__ */ React.createElement(BiPlus, {
+      }, "Create New", " ", /* @__PURE__ */ React__default.createElement(BiPlus, {
         className: "w-5 h-full ml-1 opacity-70"
-      })), collection.templates && /* @__PURE__ */ React.createElement(TemplateMenu, {
+      })), collection.templates && /* @__PURE__ */ React__default.createElement(TemplateMenu, {
         templates: collection.templates
-      }))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", {
+      }))), /* @__PURE__ */ React__default.createElement(PageBody, null, /* @__PURE__ */ React__default.createElement("div", {
         className: "w-full mx-auto max-w-screen-xl"
-      }, totalCount > 0 && /* @__PURE__ */ React.createElement("table", {
+      }, totalCount > 0 && /* @__PURE__ */ React__default.createElement("table", {
         className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
-      }, /* @__PURE__ */ React.createElement("tbody", {
+      }, /* @__PURE__ */ React__default.createElement("tbody", {
         className: "divide-y divide-gray-150"
       }, documents.map((document) => {
         var _a2;
         const hasTitle = Boolean(document.node._sys.title);
         const subfolders = document.node._sys.breadcrumbs.slice(0, -1).join("/");
-        return /* @__PURE__ */ React.createElement("tr", {
+        return /* @__PURE__ */ React__default.createElement("tr", {
           key: `document-${document.node._sys.relativePath}`,
           className: ""
-        }, /* @__PURE__ */ React.createElement("td", {
+        }, /* @__PURE__ */ React__default.createElement("td", {
           className: "px-6 py-2 whitespace-nowrap"
-        }, /* @__PURE__ */ React.createElement("a", {
+        }, /* @__PURE__ */ React__default.createElement("a", {
           className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer",
           onClick: () => {
             handleNavigate(navigate, cms, collection, document.node);
           }
-        }, /* @__PURE__ */ React.createElement(BiEdit, {
+        }, /* @__PURE__ */ React__default.createElement(BiEdit, {
           className: "inline-block h-6 w-auto opacity-70"
-        }), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", {
+        }), /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
-        }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React.createElement("span", {
+        }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React__default.createElement("span", {
           className: "h-5 leading-5 block whitespace-nowrap"
-        }, subfolders && /* @__PURE__ */ React.createElement("span", {
+        }, subfolders && /* @__PURE__ */ React__default.createElement("span", {
           className: "text-xs text-gray-400"
-        }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, hasTitle ? (_a2 = document.node._sys) == null ? void 0 : _a2.title : document.node._sys.filename))))), hasTitle && /* @__PURE__ */ React.createElement("td", {
+        }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, hasTitle ? (_a2 = document.node._sys) == null ? void 0 : _a2.title : document.node._sys.filename))))), hasTitle && /* @__PURE__ */ React__default.createElement("td", {
           className: "px-6 py-4 whitespace-nowrap"
-        }, /* @__PURE__ */ React.createElement("span", {
+        }, /* @__PURE__ */ React__default.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
-        }, "Filename"), /* @__PURE__ */ React.createElement("span", {
+        }, "Filename"), /* @__PURE__ */ React__default.createElement("span", {
           className: "h-5 leading-5 block text-sm font-medium text-gray-900"
-        }, document.node._sys.filename)), /* @__PURE__ */ React.createElement("td", {
+        }, document.node._sys.filename)), /* @__PURE__ */ React__default.createElement("td", {
           className: "px-6 py-4 whitespace-nowrap"
-        }, /* @__PURE__ */ React.createElement("span", {
+        }, /* @__PURE__ */ React__default.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
-        }, "Extension"), /* @__PURE__ */ React.createElement("span", {
+        }, "Extension"), /* @__PURE__ */ React__default.createElement("span", {
           className: "h-5 leading-5 block text-sm font-medium text-gray-900"
-        }, document.node._sys.extension)), /* @__PURE__ */ React.createElement("td", {
+        }, document.node._sys.extension)), /* @__PURE__ */ React__default.createElement("td", {
           className: "px-6 py-4 whitespace-nowrap"
-        }, /* @__PURE__ */ React.createElement("span", {
+        }, /* @__PURE__ */ React__default.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
-        }, "Template"), /* @__PURE__ */ React.createElement("span", {
+        }, "Template"), /* @__PURE__ */ React__default.createElement("span", {
           className: "h-5 leading-5 block text-sm font-medium text-gray-900"
-        }, document.node._sys.template)), /* @__PURE__ */ React.createElement("td", {
+        }, document.node._sys.template)), /* @__PURE__ */ React__default.createElement("td", {
           className: "w-0"
-        }, /* @__PURE__ */ React.createElement(OverflowMenu, {
+        }, /* @__PURE__ */ React__default.createElement(OverflowMenu, {
           toolbarItems: [
             {
               name: "edit",
               label: "Edit in Admin",
-              Icon: /* @__PURE__ */ React.createElement(BiEdit, {
+              Icon: /* @__PURE__ */ React__default.createElement(BiEdit, {
                 size: "1.3rem"
               }),
               onMouseDown: () => {
-                navigate(`${document.node._sys.filename}`, { replace: true });
+                navigate(`${document.node._sys.breadcrumbs.join("/")}`, { replace: true });
               }
             },
             {
               name: "delete",
               label: "Delete",
-              Icon: /* @__PURE__ */ React.createElement(BiTrash, {
+              Icon: /* @__PURE__ */ React__default.createElement(BiTrash, {
                 size: "1.3rem",
                 className: "text-red-500"
               }),
               onMouseDown: () => {
                 setVars({
                   collection: collectionName,
-                  relativePath: document.node._sys.filename + document.node._sys.extension
+                  relativePath: document.node._sys.breadcrumbs.join("/") + document.node._sys.extension
                 });
                 setOpen(true);
               }
             }
           ]
         })));
-      })))))));
+      }))), useDataFlag && /* @__PURE__ */ React__default.createElement("div", {
+        className: "pt-3"
+      }, /* @__PURE__ */ React__default.createElement(CursorPaginator, {
+        variant: "white",
+        hasNext: pageInfo == null ? void 0 : pageInfo.hasNextPage,
+        navigateNext: () => {
+          const newState = [...prevCursors, endCursor];
+          setPrevCursors(newState);
+          setEndCursor(pageInfo == null ? void 0 : pageInfo.endCursor);
+        },
+        hasPrev: prevCursors.length > 0,
+        navigatePrev: () => {
+          const prev = prevCursors[prevCursors.length - 1];
+          if (typeof prev === "string") {
+            const newState = prevCursors.slice(0, -1);
+            setPrevCursors(newState);
+            setEndCursor(prev);
+          }
+        }
+      }))))));
     });
   });
 };
 const DeleteModal = ({ close: close2, deleteFunc, filename }) => {
-  return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, {
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, {
     close: close2
-  }, "Delete ", filename), /* @__PURE__ */ React.createElement(ModalBody, {
+  }, "Delete ", filename), /* @__PURE__ */ React__default.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, {
+  }, /* @__PURE__ */ React__default.createElement("p", null, `Are you sure you want to delete ${filename}?`)), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button$1, {
     style: { flexGrow: 2 },
     onClick: close2
-  }, "Cancel"), /* @__PURE__ */ React.createElement(Button, {
+  }, "Cancel"), /* @__PURE__ */ React__default.createElement(Button$1, {
     style: { flexGrow: 3 },
     variant: "danger",
     onClick: async () => {
       await deleteFunc();
       close2();
     }
-  }, "Delete"))));
+  }, "Delete")));
 };
 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);
@@ -3983,7 +5053,7 @@ const createDocument = async (cms, collection, template, mutationInfo, values) =
 };
 const CollectionCreatePage = () => {
   const { collectionName, templateName } = useParams();
-  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetCollection, {
+  return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default.createElement(GetCollection, {
     cms,
     collectionName,
     includeDocuments: false
@@ -3992,7 +5062,7 @@ const CollectionCreatePage = () => {
       includeCollection: true,
       includeTemplate: !!collection.templates
     };
-    return /* @__PURE__ */ React.createElement(RenderForm$1, {
+    return /* @__PURE__ */ React__default.createElement(RenderForm$1, {
       cms,
       collection,
       templateName,
@@ -4025,7 +5095,7 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
           name: "filename",
           label: "Filename",
           component: "text",
-          description: /* @__PURE__ */ React.createElement("span", null, "A unique filename for the content.", /* @__PURE__ */ React.createElement("br", null), "Examples: ", /* @__PURE__ */ React.createElement("code", null, "My_Document"), ", ", /* @__PURE__ */ React.createElement("code", null, "My_Document.en"), ",", " ", /* @__PURE__ */ React.createElement("code", null, "sub-folder/My_Document")),
+          description: /* @__PURE__ */ React__default.createElement("span", null, "A unique filename for the content.", /* @__PURE__ */ React__default.createElement("br", null), "Examples: ", /* @__PURE__ */ React__default.createElement("code", null, "My_Document"), ", ", /* @__PURE__ */ React__default.createElement("code", null, "My_Document.en"), ",", " ", /* @__PURE__ */ React__default.createElement("code", null, "sub-folder/My_Document")),
           placeholder: `My_Document`,
           validate: (value, allValues, meta) => {
             if (!value) {
@@ -4058,24 +5128,24 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
   const windowWidth = useWindowWidth();
   const renderNavToggle = windowWidth < navBreakpoint + 1;
   const headerPadding = renderNavToggle ? "px-20" : "px-6";
-  return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement(PageWrapper, null, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement("div", {
     className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     className: "max-w-form mx-auto"
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     className: "mb-2"
-  }, /* @__PURE__ */ React.createElement("span", {
+  }, /* @__PURE__ */ React__default.createElement("span", {
     className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
-  }, /* @__PURE__ */ React.createElement(Link, {
+  }, /* @__PURE__ */ React__default.createElement(Link, {
     to: `/collections/${collection.name}`,
     className: "inline-block text-current hover:text-blue-400 focus:underline focus:outline-none focus:text-blue-400 font-medium transition-colors duration-150 ease-out"
-  }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement(HiChevronRight, {
+  }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default.createElement(HiChevronRight, {
     className: "inline-block -mt-0.5 opacity-50"
-  })), /* @__PURE__ */ React.createElement("span", {
+  })), /* @__PURE__ */ React__default.createElement("span", {
     className: "text-xl text-gray-700 font-medium leading-tight"
-  }, "Create New")), /* @__PURE__ */ React.createElement(FormStatus, {
+  }, "Create New")), /* @__PURE__ */ React__default.createElement(FormStatus, {
     pristine: formIsPristine
-  }))), /* @__PURE__ */ React.createElement(FormBuilder, {
+  }))), /* @__PURE__ */ React__default.createElement(FormBuilder, {
     form,
     onPristineChange: setFormIsPristine
   })));
@@ -4116,9 +5186,9 @@ const GetDocument = ({
     return null;
   }
   if (loading) {
-    return /* @__PURE__ */ React.createElement(LoadingPage, null);
+    return /* @__PURE__ */ React__default.createElement(LoadingPage, null);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(document, loading));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children(document, loading));
 };
 const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
   const api = new TinaAdminApi(cms);
@@ -4139,7 +5209,7 @@ const updateDocument = async (cms, relativePath, collection, mutationInfo, value
 const CollectionUpdatePage = () => {
   const _a = useParams(), { collectionName } = _a, rest = __objRest(_a, ["collectionName"]);
   const { "*": filename } = rest;
-  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React.createElement(GetCollection, {
+  return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => /* @__PURE__ */ React__default.createElement(GetCollection, {
     cms,
     collectionName,
     includeDocuments: false
@@ -4149,11 +5219,11 @@ const CollectionUpdatePage = () => {
       includeCollection: true,
       includeTemplate: !!collection.templates
     };
-    return /* @__PURE__ */ React.createElement(GetDocument, {
+    return /* @__PURE__ */ React__default.createElement(GetDocument, {
       cms,
       collectionName: collection.name,
       relativePath
-    }, (document) => /* @__PURE__ */ React.createElement(RenderForm, {
+    }, (document) => /* @__PURE__ */ React__default.createElement(RenderForm, {
       cms,
       document,
       filename,
@@ -4206,24 +5276,24 @@ const RenderForm = ({
   const windowWidth = useWindowWidth();
   const renderNavToggle = windowWidth < navBreakpoint + 1;
   const headerPadding = renderNavToggle ? "px-20" : "px-6";
-  return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
+  return /* @__PURE__ */ React__default.createElement(PageWrapper, null, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement("div", {
     className: `py-4 border-b border-gray-200 bg-white ${headerPadding}`
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     className: "max-w-form mx-auto"
-  }, /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React__default.createElement("div", {
     className: "mb-2"
-  }, /* @__PURE__ */ React.createElement("span", {
+  }, /* @__PURE__ */ React__default.createElement("span", {
     className: "block text-sm leading-tight uppercase text-gray-400 mb-1"
-  }, /* @__PURE__ */ React.createElement(Link, {
+  }, /* @__PURE__ */ React__default.createElement(Link, {
     to: `/collections/${collection.name}`,
     className: "inline-block text-current hover:text-blue-400 focus:underline focus:outline-none focus:text-blue-400 font-medium transition-colors duration-150 ease-out"
-  }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement(HiChevronRight, {
+  }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default.createElement(HiChevronRight, {
     className: "inline-block -mt-0.5 opacity-50"
-  })), /* @__PURE__ */ React.createElement("span", {
+  })), /* @__PURE__ */ React__default.createElement("span", {
     className: "text-xl text-gray-700 font-medium leading-tight"
-  }, "Edit ", `${filename}.${collection.format}`)), /* @__PURE__ */ React.createElement(FormStatus, {
+  }, "Edit ", `${filename}.${collection.format}`)), /* @__PURE__ */ React__default.createElement(FormStatus, {
     pristine: formIsPristine
-  }))), /* @__PURE__ */ React.createElement(FormBuilder, {
+  }))), /* @__PURE__ */ React__default.createElement(FormBuilder, {
     form,
     onPristineChange: setFormIsPristine
   })));
@@ -4233,24 +5303,24 @@ const ScreenPage = () => {
   const navBreakpoint = 1e3;
   const windowWidth = useWindowWidth();
   const renderNavToggle = windowWidth < navBreakpoint + 1;
-  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
+  return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => {
     var _a, _b;
     const screens = cms.plugins.getType("screen").all();
     const selectedScreen = screens.find(({ name }) => slugify(name) === screenName);
-    return /* @__PURE__ */ React.createElement("div", {
+    return /* @__PURE__ */ React__default.createElement("div", {
       className: "relative w-full h-full flex flex-col items-stretch justify-between"
-    }, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React.createElement(LocalWarning, null), renderNavToggle && /* @__PURE__ */ React.createElement("div", {
+    }, ((_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode) && /* @__PURE__ */ React__default.createElement(LocalWarning, null), renderNavToggle && /* @__PURE__ */ React__default.createElement("div", {
       className: `py-5 border-b border-gray-200 bg-white pl-18`
-    }, selectedScreen.name), /* @__PURE__ */ React.createElement("div", {
+    }, selectedScreen.name), /* @__PURE__ */ React__default.createElement("div", {
       className: "flex-1 overflow-y-auto relative flex flex-col items-stretch justify-between"
-    }, /* @__PURE__ */ React.createElement(selectedScreen.Component, {
+    }, /* @__PURE__ */ React__default.createElement(selectedScreen.Component, {
       close: () => {
       }
     })));
   });
 };
 const Redirect = () => {
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (window) {
       window.location.assign("/");
     }
@@ -4264,43 +5334,43 @@ const TinaAdmin = () => {
     return null;
   }
   if (!edit) {
-    return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(LoginPage, null));
+    return /* @__PURE__ */ React__default.createElement(Layout, null, /* @__PURE__ */ React__default.createElement(LoginPage, null));
   }
-  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
+  return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => {
     const isTinaAdminEnabled = cms.flags.get("tina-admin") === false ? false : true;
     if (isTinaAdminEnabled) {
-      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement("div", {
+      return /* @__PURE__ */ React__default.createElement(Layout, null, /* @__PURE__ */ React__default.createElement(HashRouter, null, /* @__PURE__ */ React__default.createElement("div", {
         className: "flex items-stretch h-screen overflow-hidden"
-      }, /* @__PURE__ */ React.createElement(Sidebar, {
+      }, /* @__PURE__ */ React__default.createElement(Sidebar, {
         cms
-      }), /* @__PURE__ */ React.createElement("div", {
+      }), /* @__PURE__ */ React__default.createElement("div", {
         className: "flex-1 relative"
-      }, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
+      }, /* @__PURE__ */ React__default.createElement(Routes, null, /* @__PURE__ */ React__default.createElement(Route, {
         path: "collections/:collectionName/new",
-        element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
-      }), /* @__PURE__ */ React.createElement(Route, {
+        element: /* @__PURE__ */ React__default.createElement(CollectionCreatePage, null)
+      }), /* @__PURE__ */ React__default.createElement(Route, {
         path: "collections/:collectionName/:templateName/new",
-        element: /* @__PURE__ */ React.createElement(CollectionCreatePage, null)
-      }), /* @__PURE__ */ React.createElement(Route, {
+        element: /* @__PURE__ */ React__default.createElement(CollectionCreatePage, null)
+      }), /* @__PURE__ */ React__default.createElement(Route, {
         path: "collections/:collectionName/*",
-        element: /* @__PURE__ */ React.createElement(CollectionUpdatePage, null)
-      }), /* @__PURE__ */ React.createElement(Route, {
+        element: /* @__PURE__ */ React__default.createElement(CollectionUpdatePage, null)
+      }), /* @__PURE__ */ React__default.createElement(Route, {
         path: "collections/:collectionName",
-        element: /* @__PURE__ */ React.createElement(CollectionListPage, null)
-      }), /* @__PURE__ */ React.createElement(Route, {
+        element: /* @__PURE__ */ React__default.createElement(CollectionListPage, null)
+      }), /* @__PURE__ */ React__default.createElement(Route, {
         path: "screens/:screenName",
-        element: /* @__PURE__ */ React.createElement(ScreenPage, null)
-      }), /* @__PURE__ */ React.createElement(Route, {
+        element: /* @__PURE__ */ React__default.createElement(ScreenPage, null)
+      }), /* @__PURE__ */ React__default.createElement(Route, {
         path: "/",
-        element: /* @__PURE__ */ React.createElement(DashboardPage, null)
+        element: /* @__PURE__ */ React__default.createElement(DashboardPage, null)
       }))))));
     } else {
-      return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement(HashRouter, null, /* @__PURE__ */ React.createElement(Routes, null, /* @__PURE__ */ React.createElement(Route, {
+      return /* @__PURE__ */ React__default.createElement(Layout, null, /* @__PURE__ */ React__default.createElement(HashRouter, null, /* @__PURE__ */ React__default.createElement(Routes, null, /* @__PURE__ */ React__default.createElement(Route, {
         path: "logout",
-        element: /* @__PURE__ */ React.createElement(LogoutPage, null)
-      }), /* @__PURE__ */ React.createElement(Route, {
+        element: /* @__PURE__ */ React__default.createElement(LogoutPage, null)
+      }), /* @__PURE__ */ React__default.createElement(Route, {
         path: "/",
-        element: /* @__PURE__ */ React.createElement(Redirect, null)
+        element: /* @__PURE__ */ React__default.createElement(Redirect, null)
       }))));
     }
   });