tinacms 0.68.5 → 0.68.8

package/dist/index.es.js

@@ -29,21 +29,23 @@ 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 { Menu, Transition } from "@headlessui/react";
+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) {
   const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
   const x = window2.top.outerWidth / 2 + window2.top.screenX - w / 2;
@@ -1660,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,
@@ -1673,7 +1675,7 @@ const useFormify = ({
     formNodes: [],
     documentForms: []
   });
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (query) {
       dispatch({ type: "start", value: { query } });
       formIds.current.forEach((formId) => {
@@ -1684,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;
@@ -1692,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({
@@ -1709,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
@@ -1761,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) {
@@ -1815,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);
@@ -1911,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);
@@ -1924,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) => {
@@ -2376,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))))));
 }
@@ -2397,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 = () => {
@@ -2448,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 {
@@ -2479,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
@@ -2495,7 +2511,6 @@ class TinaAdminApi {
             node {
               ... on Document {
                 _sys {
-                  # TODO: only include title if we need to
                   template
                   breadcrumbs
                   path
@@ -2580,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);
@@ -2605,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,
@@ -2634,12 +2649,14 @@ 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]);
   if (!cms.api.tina) {
-    cms.registerApi("tina", createClient(props));
+    cms.registerApi("tina", createClient(__spreadProps(__spreadValues({}, props), { branch: currentBranch })));
+  } else {
+    cms.api.tina.setBranch(currentBranch);
   }
   if (!cms.api.admin) {
     cms.registerApi("admin", new TinaAdminApi(cms));
@@ -2668,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({
@@ -2691,24 +2708,24 @@ 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 .static {\n      position: static;\n}\n.tina-tailwind .fixed {\n      position: fixed;\n}\n.tina-tailwind .absolute {\n      position: absolute;\n}\n.tina-tailwind .relative {\n      position: relative;\n}\n.tina-tailwind .left-0 {\n      left: 0px;\n}\n.tina-tailwind .right-0 {\n      right: 0px;\n}\n.tina-tailwind .mx-auto {\n      margin-left: auto;\n      margin-right: auto;\n}\n.tina-tailwind .mr-2 {\n      margin-right: 8px;\n}\n.tina-tailwind .mb-2 {\n      margin-bottom: 8px;\n}\n.tina-tailwind .mb-1 {\n      margin-bottom: 4px;\n}\n.tina-tailwind .-mt-0\\.5 {\n      margin-top: -2px;\n}\n.tina-tailwind .-mt-0 {\n      margin-top: -0px;\n}\n.tina-tailwind .ml-1 {\n      margin-left: 4px;\n}\n.tina-tailwind .mt-2 {\n      margin-top: 8px;\n}\n.tina-tailwind .mr-1\\.5 {\n      margin-right: 6px;\n}\n.tina-tailwind .mr-1 {\n      margin-right: 4px;\n}\n.tina-tailwind .block {\n      display: block;\n}\n.tina-tailwind .inline-block {\n      display: inline-block;\n}\n.tina-tailwind .inline {\n      display: inline;\n}\n.tina-tailwind .flex {\n      display: flex;\n}\n.tina-tailwind .inline-flex {\n      display: inline-flex;\n}\n.tina-tailwind .table {\n      display: table;\n}\n.tina-tailwind .h-screen {\n      height: 100vh;\n}\n.tina-tailwind .h-auto {\n      height: auto;\n}\n.tina-tailwind .h-full {\n      height: 100%;\n}\n.tina-tailwind .h-6 {\n      height: 24px;\n}\n.tina-tailwind .h-10 {\n      height: 40px;\n}\n.tina-tailwind .h-5 {\n      height: 20px;\n}\n.tina-tailwind .h-12 {\n      height: 48px;\n}\n.tina-tailwind .w-full {\n      width: 100%;\n}\n.tina-tailwind .w-10 {\n      width: 40px;\n}\n.tina-tailwind .w-auto {\n      width: auto;\n}\n.tina-tailwind .w-5 {\n      width: 20px;\n}\n.tina-tailwind .w-56 {\n      width: 224px;\n}\n.tina-tailwind .w-0 {\n      width: 0px;\n}\n.tina-tailwind .w-6 {\n      width: 24px;\n}\n.tina-tailwind .max-w-lg {\n      max-width: 32rem;\n}\n.tina-tailwind .max-w-screen-xl {\n      max-width: 1280px;\n}\n.tina-tailwind .max-w-form {\n      max-width: 900px;\n}\n.tina-tailwind .max-w-full {\n      max-width: 100%;\n}\n.tina-tailwind .flex-1 {\n      flex: 1 1 0%;\n}\n.tina-tailwind .flex-shrink-0 {\n      flex-shrink: 0;\n}\n.tina-tailwind .flex-grow-0 {\n      flex-grow: 0;\n}\n.tina-tailwind .table-auto {\n      table-layout: auto;\n}\n.tina-tailwind .origin-top-right {\n      transform-origin: top right;\n}\n.tina-tailwind .scale-95 {\n      --tw-scale-x: .95;\n      --tw-scale-y: .95;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .scale-100 {\n      --tw-scale-x: 1;\n      --tw-scale-y: 1;\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .transform {\n      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.tina-tailwind .cursor-pointer {\n      cursor: pointer;\n}\n.tina-tailwind .flex-col {\n      flex-direction: column;\n}\n.tina-tailwind .items-end {\n      align-items: flex-end;\n}\n.tina-tailwind .items-center {\n      align-items: center;\n}\n.tina-tailwind .items-stretch {\n      align-items: stretch;\n}\n.tina-tailwind .justify-end {\n      justify-content: flex-end;\n}\n.tina-tailwind .justify-center {\n      justify-content: center;\n}\n.tina-tailwind .justify-between {\n      justify-content: space-between;\n}\n.tina-tailwind .gap-0\\.5 {\n      gap: 2px;\n}\n.tina-tailwind .gap-0 {\n      gap: 0px;\n}\n.tina-tailwind .gap-4 {\n      gap: 16px;\n}\n.tina-tailwind .gap-3 {\n      gap: 12px;\n}\n.tina-tailwind .divide-y > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-y-reverse: 0;\n      border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n      border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.tina-tailwind .divide-gray-150 > :not([hidden]) ~ :not([hidden]) {\n      --tw-divide-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-divide-opacity));\n}\n.tina-tailwind .overflow-hidden {\n      overflow: hidden;\n}\n.tina-tailwind .overflow-y-auto {\n      overflow-y: auto;\n}\n.tina-tailwind .whitespace-nowrap {\n      white-space: nowrap;\n}\n.tina-tailwind .rounded-lg {\n      border-radius: 8px;\n}\n.tina-tailwind .rounded-full {\n      border-radius: 9999px;\n}\n.tina-tailwind .rounded-md {\n      border-radius: 6px;\n}\n.tina-tailwind .border {\n      border-width: 1px;\n}\n.tina-tailwind .border-b {\n      border-bottom-width: 1px;\n}\n.tina-tailwind .border-gray-150 {\n      --tw-border-opacity: 1;\n      border-color: rgb(230 227 239 / var(--tw-border-opacity));\n}\n.tina-tailwind .border-gray-200 {\n      --tw-border-opacity: 1;\n      border-color: rgb(225 221 236 / var(--tw-border-opacity));\n}\n.tina-tailwind .bg-white {\n      --tw-bg-opacity: 1;\n      background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gray-50 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(246 246 249 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-blue-500 {\n      --tw-bg-opacity: 1;\n      background-color: rgb(0 132 255 / var(--tw-bg-opacity));\n}\n.tina-tailwind .bg-gradient-to-b {\n      background-image: linear-gradient(to bottom, var(--tw-gradient-stops));\n}\n.tina-tailwind .from-blue-900 {\n      --tw-gradient-from: #1D2C6C;\n      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(29 44 108 / 0));\n}\n.tina-tailwind .to-gray-900 {\n      --tw-gradient-to: #252336;\n}\n.tina-tailwind .px-4 {\n      padding-left: 16px;\n      padding-right: 16px;\n}\n.tina-tailwind .py-6 {\n      padding-top: 24px;\n      padding-bottom: 24px;\n}\n.tina-tailwind .px-5 {\n      padding-left: 20px;\n      padding-right: 20px;\n}\n.tina-tailwind .py-4 {\n      padding-top: 16px;\n      padding-bottom: 16px;\n}\n.tina-tailwind .px-12 {\n      padding-left: 48px;\n      padding-right: 48px;\n}\n.tina-tailwind .py-10 {\n      padding-top: 40px;\n      padding-bottom: 40px;\n}\n.tina-tailwind .px-20 {\n      padding-left: 80px;\n      padding-right: 80px;\n}\n.tina-tailwind .px-6 {\n      padding-left: 24px;\n      padding-right: 24px;\n}\n.tina-tailwind .py-1 {\n      padding-top: 4px;\n      padding-bottom: 4px;\n}\n.tina-tailwind .py-2 {\n      padding-top: 8px;\n      padding-bottom: 8px;\n}\n.tina-tailwind .pt-4 {\n      padding-top: 16px;\n}\n.tina-tailwind .pb-4 {\n      padding-bottom: 16px;\n}\n.tina-tailwind .pt-18 {\n      padding-top: 72px;\n}\n.tina-tailwind .text-left {\n      text-align: left;\n}\n.tina-tailwind .text-center {\n      text-align: center;\n}\n.tina-tailwind .font-sans {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n.tina-tailwind .text-2xl {\n      font-size: 24px;\n      line-height: 1.33;\n}\n.tina-tailwind .text-base {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-sm {\n      font-size: 14px;\n      line-height: 1.43;\n}\n.tina-tailwind .text-xl {\n      font-size: 20px;\n      line-height: 1.4;\n}\n.tina-tailwind .text-md {\n      font-size: 16px;\n      line-height: 1.5;\n}\n.tina-tailwind .text-xs {\n      font-size: 13px;\n      line-height: 1.33;\n}\n.tina-tailwind .font-medium {\n      font-weight: 500;\n}\n.tina-tailwind .uppercase {\n      text-transform: uppercase;\n}\n.tina-tailwind .italic {\n      font-style: italic;\n}\n.tina-tailwind .leading-normal {\n      line-height: 1.5;\n}\n.tina-tailwind .leading-tight {\n      line-height: 1.25;\n}\n.tina-tailwind .leading-5 {\n      line-height: 20px;\n}\n.tina-tailwind .tracking-wide {\n      letter-spacing: 0.025em;\n}\n.tina-tailwind .text-gray-600 {\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-700 {\n      --tw-text-opacity: 1;\n      color: rgb(67 62 82 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-blue-600 {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-500 {\n      --tw-text-opacity: 1;\n      color: rgb(113 108 127 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-400 {\n      --tw-text-opacity: 1;\n      color: rgb(145 140 158 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-current {\n      color: currentColor;\n}\n.tina-tailwind .text-white {\n      --tw-text-opacity: 1;\n      color: rgb(255 255 255 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-800 {\n      --tw-text-opacity: 1;\n      color: rgb(54 49 69 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-gray-900 {\n      --tw-text-opacity: 1;\n      color: rgb(37 35 54 / var(--tw-text-opacity));\n}\n.tina-tailwind .text-red-500 {\n      --tw-text-opacity: 1;\n      color: rgb(239 68 68 / var(--tw-text-opacity));\n}\n.tina-tailwind .underline {\n      text-decoration-line: underline;\n}\n.tina-tailwind .opacity-100 {\n      opacity: 1;\n}\n.tina-tailwind .opacity-90 {\n      opacity: .9;\n}\n.tina-tailwind .opacity-80 {\n      opacity: .8;\n}\n.tina-tailwind .opacity-50 {\n      opacity: .5;\n}\n.tina-tailwind .opacity-70 {\n      opacity: .7;\n}\n.tina-tailwind .opacity-0 {\n      opacity: 0;\n}\n.tina-tailwind .shadow-lg {\n      --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow-2xl {\n      --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n      --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .shadow {\n      --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n      --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.tina-tailwind .ring-1 {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n.tina-tailwind .ring-black {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));\n}\n.tina-tailwind .ring-opacity-5 {\n      --tw-ring-opacity: .05;\n}\n.tina-tailwind .filter {\n      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n.tina-tailwind .transition-opacity {\n      transition-property: opacity;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-colors {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition-all {\n      transition-property: all;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .transition {\n      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-300 {\n      transition-duration: 300ms;\n}\n.tina-tailwind .duration-150 {\n      transition-duration: 150ms;\n}\n.tina-tailwind .duration-100 {\n      transition-duration: 100ms;\n}\n.tina-tailwind .duration-75 {\n      transition-duration: 75ms;\n}\n.tina-tailwind .ease-out {\n      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n.tina-tailwind .ease-in {\n      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n}\n.tina-tailwind .icon-parent svg {\n      fill: currentColor;\n    }\n\n.tina-tailwind {\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n      font-size: 16px;\n      line-height: 1.5;\n      --tw-text-opacity: 1;\n      color: rgb(86 81 101 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:bg-blue-600:hover {\n      --tw-bg-opacity: 1;\n      background-color: rgb(5 116 228 / var(--tw-bg-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-600:hover {\n      --tw-text-opacity: 1;\n      color: rgb(5 116 228 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:text-blue-400:hover {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .hover\\:opacity-100:hover {\n      opacity: 1;\n}\n\n.tina-tailwind .focus\\:text-blue-400:focus {\n      --tw-text-opacity: 1;\n      color: rgb(34 150 254 / var(--tw-text-opacity));\n}\n\n.tina-tailwind .focus\\:underline:focus {\n      text-decoration-line: underline;\n}\n\n.tina-tailwind .focus\\:shadow-outline:focus {\n      --tw-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);\n      --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);\n      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.tina-tailwind .focus\\:outline-none:focus {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n}\n\n.tina-tailwind .focus\\:ring-2:focus {\n      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n.tina-tailwind .focus\\:ring-blue-500:focus {\n      --tw-ring-opacity: 1;\n      --tw-ring-color: rgb(0 132 255 / var(--tw-ring-opacity));\n}\n';
+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 .pt-3 {\n      padding-top: 12px;\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';
 class ContentCreatorPlugin {
   constructor(options) {
     this.__type = "content-creator";
@@ -2757,9 +2774,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`
@@ -2860,7 +2877,7 @@ const useDocumentCreatorPlugin = (args) => {
     };
     run();
   }, [cms]);
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (plugin) {
       cms.plugins.add(plugin);
     }
@@ -2881,10 +2898,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(() => {
@@ -2936,7 +2953,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 = {
@@ -2952,7 +2969,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",
@@ -2960,7 +2977,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",
@@ -2969,27 +2986,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");
@@ -2998,7 +3015,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;
   }
@@ -3029,7 +3046,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,
@@ -3037,11 +3054,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,
@@ -3056,7 +3073,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));
 };
@@ -3067,24 +3084,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,
@@ -3108,13 +3125,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)",
@@ -3126,7 +3143,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)",
@@ -3139,7 +3156,7 @@ const Loader = (props) => {
       justifyContent: "center",
       flexDirection: "column"
     }
-  }, /* @__PURE__ */ React.createElement("svg", {
+  }, /* @__PURE__ */ React__default.createElement("svg", {
     style: {
       width: "64px",
       color: "#2296fe",
@@ -3155,13 +3172,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",
@@ -3170,13 +3187,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",
@@ -3185,13 +3202,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",
@@ -3200,7 +3217,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",
@@ -3257,7 +3274,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",
@@ -3279,7 +3296,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++) {
@@ -3306,14 +3323,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));
   };
@@ -3327,7 +3344,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"
@@ -3339,9 +3356,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);
 }
@@ -3373,64 +3390,153 @@ const useGetCollections = (cms) => {
   }, [cms]);
   return { collections, loading, error };
 };
+function IoMdClose(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z" } }] })(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);
+}
+function BiLogOut(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M16 13v-2H7V8l-5 4 5 4v-3z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
+}
+function BiMenu(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" } }] })(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);
+}
 const slugify = (text) => {
   return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
 };
 const Sidebar = ({ cms }) => {
+  var _a, _b;
   const collectionsInfo = useGetCollections(cms);
   const screens = cms.plugins.getType("screen").all();
-  return /* @__PURE__ */ React.createElement(Nav, {
+  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__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__default.createElement(Transition, {
+    show: menuIsOpen
+  }, /* @__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__default.createElement("div", {
+    className: "fixed left-0 top-0 z-overlay h-full transform"
+  }, /* @__PURE__ */ React__default.createElement(Nav, {
+    className: "rounded-r-md",
+    sidebarWidth: 360,
+    showCollections: true,
+    collectionsInfo,
+    screens,
+    contentCreators: [],
+    RenderNavSite: ({ view }) => /* @__PURE__ */ React__default.createElement(SidebarLink, {
+      label: view.name,
+      to: `screens/${slugify(view.name)}`,
+      Icon: view.Icon ? view.Icon : ImFilesEmpty,
+      onClick: () => {
+        setMenuIsOpen(false);
+      }
+    }),
+    RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__default.createElement(SidebarLink, {
+      label: collection.label ? collection.label : collection.name,
+      to: `collections/${collection.name}`,
+      Icon: ImFilesEmpty,
+      onClick: () => {
+        setMenuIsOpen(false);
+      }
+    })
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "absolute top-8 right-0 transform translate-x-full overflow-hidden"
+  }, /* @__PURE__ */ React__default.createElement(Button$1, {
+    rounded: "right",
+    variant: "secondary",
+    onClick: () => {
+      setMenuIsOpen(false);
+    },
+    className: `transition-opacity duration-150 ease-out`
+  }, /* @__PURE__ */ React__default.createElement(IoMdClose, {
+    className: "h-6 w-auto"
+  })))))), /* @__PURE__ */ React__default.createElement(Transition.Child, {
+    as: React__default.Fragment,
+    enter: "ease-out duration-300",
+    enterFrom: "opacity-0",
+    enterTo: "opacity-80",
+    entered: "opacity-80",
+    leave: "ease-in duration-200",
+    leaveFrom: "opacity-80",
+    leaveTo: "opacity-0"
+  }, /* @__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__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__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;
   }
 };
-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 BiLogIn(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m13 16 5-4-5-4v3H4v2h9z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
-}
-function BiLogOut(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M16 13v-2H7V8l-5 4 5 4v-3z" } }, { "tag": "path", "attr": { "d": "M20 3h-9c-1.103 0-2 .897-2 2v4h2V5h9v14h-9v-4H9v4c0 1.103.897 2 2 2h9c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2z" } }] })(props);
-}
-function BiPlus(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" } }] })(props);
-}
-function BiTrash(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z" } }, { "tag": "path", "attr": { "d": "M9 10h2v8H9zm4 0h2v8h-2z" } }] })(props);
-}
 function MdOutlineArrowBack(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" } }] })(props);
 }
@@ -3438,52 +3544,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")));
 };
@@ -3492,67 +3598,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,
@@ -3566,7 +3672,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",
@@ -3580,7 +3686,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",
@@ -3596,13 +3702,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",
@@ -3611,13 +3717,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",
@@ -3626,13 +3732,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",
@@ -3641,7 +3747,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",
@@ -3651,7 +3757,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);
@@ -3661,7 +3767,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);
@@ -3674,7 +3780,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 };
 };
@@ -3682,26 +3788,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__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;
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading, reFetchCollection));
+`;
+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 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",
@@ -3709,13 +3958,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))))))));
@@ -3734,22 +3983,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 {
@@ -3763,114 +4022,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);
@@ -3897,7 +4175,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
@@ -3906,7 +4184,7 @@ const CollectionCreatePage = () => {
       includeCollection: true,
       includeTemplate: !!collection.templates
     };
-    return /* @__PURE__ */ React.createElement(RenderForm$1, {
+    return /* @__PURE__ */ React__default.createElement(RenderForm$1, {
       cms,
       collection,
       templateName,
@@ -3939,7 +4217,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) {
@@ -3968,24 +4246,28 @@ const RenderForm$1 = ({ cms, collection, templateName, mutationInfo }) => {
       }
     });
   }, [cms, collection, mutationInfo]);
-  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", {
-    className: "py-4 px-20 border-b border-gray-200 bg-white"
-  }, /* @__PURE__ */ React.createElement("div", {
+  const navBreakpoint = 1e3;
+  const windowWidth = useWindowWidth();
+  const renderNavToggle = windowWidth < navBreakpoint + 1;
+  const headerPadding = renderNavToggle ? "px-20" : "px-6";
+  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__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
   })));
@@ -4026,9 +4308,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);
@@ -4049,7 +4331,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
@@ -4059,11 +4341,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,
@@ -4112,46 +4394,55 @@ const RenderForm = ({
       }
     });
   }, [cms, document, relativePath, collection, mutationInfo]);
-  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", {
-    className: "py-4 px-20 border-b border-gray-200 bg-white"
-  }, /* @__PURE__ */ React.createElement("div", {
+  const navBreakpoint = 1e3;
+  const windowWidth = useWindowWidth();
+  const renderNavToggle = windowWidth < navBreakpoint + 1;
+  const headerPadding = renderNavToggle ? "px-20" : "px-6";
+  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__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
   })));
 };
 const ScreenPage = () => {
   const { screenName } = useParams();
-  return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
+  const navBreakpoint = 1e3;
+  const windowWidth = useWindowWidth();
+  const renderNavToggle = windowWidth < navBreakpoint + 1;
+  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), /* @__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__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("/");
     }
@@ -4165,43 +4456,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)
       }))));
     }
   });