tinacms 1.6.5 → 1.6.7

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/plate-headless"), require("@monaco-editor/react"), require("slate-react"), require("@headlessui/react"), require("slate"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("@radix-ui/react-popover"), require("react-color"), require("color-string"), require("react-dropzone"), require("@tinacms/sharedctx"), require("lodash.get"), require("moment"), require("date-fns"), require("@react-hook/window-size"), require("is-hotkey"), require("@floating-ui/dom"), require("graphql"), require("graphql-tag"), require("@tinacms/schema-tools"), require("yup"), require("@graphql-inspector/core"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/plate-headless", "@monaco-editor/react", "slate-react", "@headlessui/react", "slate", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "@radix-ui/react-popover", "react-color", "color-string", "react-dropzone", "@tinacms/sharedctx", "lodash.get", "moment", "date-fns", "@react-hook/window-size", "is-hotkey", "@floating-ui/dom", "graphql", "graphql-tag", "@tinacms/schema-tools", "yup", "@graphql-inspector/core", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, zod, React, reactDom, plateHeadless, MonacoEditor, slateReact, react, slate, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, Popover$1, pkg$1, pkg, dropzone, sharedctx, get, moment, dateFns, windowSize, isHotkey, dom, graphql, gql$1, schemaTools, yup, core, reactRouterDom, mdx) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/plate-headless"), require("@monaco-editor/react"), require("slate-react"), require("@headlessui/react"), require("slate"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("@radix-ui/react-popover"), require("react-color"), require("color-string"), require("react-dropzone"), require("@tinacms/sharedctx"), require("lodash.get"), require("moment"), require("date-fns"), require("is-hotkey"), require("@floating-ui/dom"), require("@react-hook/window-size"), require("graphql"), require("graphql-tag"), require("@tinacms/schema-tools"), require("yup"), require("@graphql-inspector/core"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/plate-headless", "@monaco-editor/react", "slate-react", "@headlessui/react", "slate", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "@radix-ui/react-popover", "react-color", "color-string", "react-dropzone", "@tinacms/sharedctx", "lodash.get", "moment", "date-fns", "is-hotkey", "@floating-ui/dom", "@react-hook/window-size", "graphql", "graphql-tag", "@tinacms/schema-tools", "yup", "@graphql-inspector/core", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, zod, React, reactDom, plateHeadless, MonacoEditor, slateReact, react, slate, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, Popover$1, pkg$1, pkg, dropzone, sharedctx, get, moment, dateFns, isHotkey, dom, windowSize, graphql, gql$1, schemaTools, yup, core, reactRouterDom, mdx) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -2803,6 +2803,9 @@ var __publicField = (obj, key, value) => {
   function BiMenu(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" }, "child": [] }] })(props);
   }
+  function BiMovie(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M20 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm.001 6c-.001 0-.001 0 0 0h-.466l-2.667-4H20l.001 4zM9.535 9 6.868 5h2.597l2.667 4H9.535zm5 0-2.667-4h2.597l2.667 4h-2.597zM4 5h.465l2.667 4H4V5zm0 14v-8h16l.002 8H4z" }, "child": [] }] })(props);
+  }
   function BiPencil(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 21a1 1 0 0 0 .24 0l4-1a1 1 0 0 0 .47-.26L21 7.41a2 2 0 0 0 0-2.82L19.42 3a2 2 0 0 0-2.83 0L4.3 15.29a1.06 1.06 0 0 0-.27.47l-1 4A1 1 0 0 0 3.76 21 1 1 0 0 0 4 21zM18 4.41 19.59 6 18 7.59 16.42 6zM5.91 16.51 15 7.41 16.59 9l-9.1 9.1-2.11.52z" }, "child": [] }] })(props);
   }
@@ -2887,13 +2890,13 @@ var __publicField = (obj, key, value) => {
       {
         className: `rounded-lg border shadow-sm ${sizeClasses[size]} ${containerClasses[type]} ${className}`
       },
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
         MessageIcon,
         {
           type,
           className: `${size === "small" ? "w-5" : "w-6"} h-auto flex-shrink-0 ${iconClasses[type]}`
         }
-      ), /* @__PURE__ */ React.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children), link && /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children)), link && /* @__PURE__ */ React.createElement(
         "a",
         {
           href: link,
@@ -3513,7 +3516,7 @@ var __publicField = (obj, key, value) => {
         ref.current.focus();
       }
     }, [field == null ? void 0 : field.experimental_focusIntent, ref]);
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group" }, /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group w-full md:w-auto" }, /* @__PURE__ */ React__namespace.createElement(
       "select",
       {
         id: input.name,
@@ -3715,6 +3718,9 @@ var __publicField = (obj, key, value) => {
   const isImage = (filename) => {
     return /\.(gif|jpg|jpeg|tiff|png|svg|webp|avif)(\?.*)?$/i.test(filename);
   };
+  const isVideo = (filename) => {
+    return /\.(mp4|webm|ogg|m4v|mov|avi|flv|mkv)(\?.*)?$/i.test(filename);
+  };
   const absoluteImgURL = (str) => {
     if (str.startsWith("http"))
       return str;
@@ -7691,6 +7697,7 @@ var __publicField = (obj, key, value) => {
         return fetch(input, init);
       };
       this.accept = DEFAULT_MEDIA_UPLOAD_TYPES;
+      this.maxSize = 100 * 1024 * 1024;
       this.parse = (img) => {
         return img.src;
       };
@@ -7991,6 +7998,9 @@ var __publicField = (obj, key, value) => {
     get accept() {
       return this.store.accept;
     }
+    get maxSize() {
+      return this.store.maxSize || void 0;
+    }
     async persist(files) {
       try {
         this.events.dispatch({ type: "media:upload:start", uploaded: files });
@@ -9091,7 +9101,7 @@ var __publicField = (obj, key, value) => {
   const SidebarContext = React__namespace.createContext(null);
   const minPreviewWidth = 440;
   const minSidebarWidth = 360;
-  const navBreakpoint = 1e3;
+  const navBreakpoint = 1279;
   const LOCALSTATEKEY = "tina.sidebarState";
   const LOCALWIDTHKEY = "tina.sidebarWidth";
   const defaultSidebarWidth = 440;
@@ -9562,12 +9572,12 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ React__namespace.createElement(
       "div",
       {
-        className: `fixed top-0 left-0 h-screen z-base ${displayState === "closed" ? `pointer-events-none` : ``}`
+        className: `fixed top-0 left-0 h-dvh z-base ${displayState === "closed" ? `pointer-events-none` : ``}`
       },
       /* @__PURE__ */ React__namespace.createElement(
         "div",
         {
-          className: `relative h-screen transform flex ${displayState !== "closed" ? `` : `-translate-x-full`} ${resizingSidebar ? `transition-none` : displayState === "closed" ? `transition-all duration-300 ease-in` : displayState === "fullscreen" ? `transition-all duration-150 ease-out` : `transition-all duration-300 ease-out`}`,
+          className: `relative h-dvh transform flex ${displayState !== "closed" ? `` : `-translate-x-full`} ${resizingSidebar ? `transition-none` : displayState === "closed" ? `transition-all duration-300 ease-in` : displayState === "fullscreen" ? `transition-all duration-150 ease-out` : `transition-all duration-300 ease-out`}`,
           style: {
             width: displayState === "fullscreen" ? "100vw" : sidebarWidth + "px",
             maxWidth: displayState === "fullscreen" ? "100vw" : "calc(100vw - 8px)",
@@ -9634,7 +9644,12 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ React.createElement("div", { className: "w-full flex flex-shrink-0 justify-end gap-2 items-center" }, /* @__PURE__ */ React.createElement(Button, { variant, disabled: !hasPrev, onClick: navigatePrev }, /* @__PURE__ */ React.createElement(BiLeftArrowAlt, { className: "w-6 h-full mr-2 opacity-70" }), " Previous"), /* @__PURE__ */ React.createElement(Button, { variant, disabled: !hasNext, onClick: navigateNext }, "Next ", /* @__PURE__ */ React.createElement(BiRightArrowAlt, { className: "w-6 h-full ml-2 opacity-70" })));
   }
   function ListMediaItem({ item, onClick, active }) {
-    const FileIcon = item.type === "dir" ? BiFolder : BiFile;
+    let FileIcon = BiFile;
+    if (item.type === "dir") {
+      FileIcon = BiFolder;
+    } else if (isVideo(item.src)) {
+      FileIcon = BiMovie;
+    }
     const thumbnail = (item.thumbnails || {})["75x75"];
     return /* @__PURE__ */ React.createElement(
       "li",
@@ -9667,7 +9682,12 @@ var __publicField = (obj, key, value) => {
     );
   }
   function GridMediaItem({ item, active, onClick }) {
-    const FileIcon = item.type === "dir" ? BiFolder : BiFile;
+    let FileIcon = BiFile;
+    if (item.type === "dir") {
+      FileIcon = BiFolder;
+    } else if (isVideo(item.src)) {
+      FileIcon = BiMovie;
+    }
     const thumbnail = (item.thumbnails || {})["400x400"];
     return /* @__PURE__ */ React.createElement(
       "li",
@@ -9876,6 +9896,7 @@ var __publicField = (obj, key, value) => {
     close: close2,
     ...props
   }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const cms = useCMS();
     const [listState, setListState] = React.useState(() => {
       if (cms.media.isConfigured)
@@ -9970,10 +9991,14 @@ var __publicField = (obj, key, value) => {
       };
     }
     const [uploading, setUploading] = React.useState(false);
+    const accept = Array.isArray(
+      (_c = (_b = (_a = cms.api.tina.schema.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.media) == null ? void 0 : _c.accept
+    ) ? (_f = (_e = (_d = cms.api.tina.schema.schema) == null ? void 0 : _d.config) == null ? void 0 : _e.media) == null ? void 0 : _f.accept.join(",") : (_i = (_h = (_g = cms.api.tina.schema.schema) == null ? void 0 : _g.config) == null ? void 0 : _h.media) == null ? void 0 : _i.accept;
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
       accept: dropzoneAcceptFromString(
-        cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES
+        accept || cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES
       ),
+      maxSize: cms.media.maxSize,
       multiple: true,
       onDrop: async (files, fileRejections) => {
         try {
@@ -11070,16 +11095,13 @@ var __publicField = (obj, key, value) => {
     const openModal = () => setOpen(true);
     const { currentBranch } = useBranchData();
     const isProtected = cms.api.tina.usingProtectedBranch();
-    const navBreakpoint2 = 1e3;
-    const windowWidth = windowSize.useWindowWidth();
-    const renderNavToggle = windowWidth < navBreakpoint2 + 1;
     const previewFunction = (_d = (_c = (_b = (_a = cms.api.tina.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.config) == null ? void 0 : _c.ui) == null ? void 0 : _d.previewUrl;
     const branch = decodeURIComponent(cms.api.tina.branch);
     const previewUrl = previewFunction ? (_e = previewFunction({ branch })) == null ? void 0 : _e.url : null;
     return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
       "div",
       {
-        className: `w-full bg-white flex items-center gap-2 -mb-px border-b border-gray-100 py-3 pr-4 ${renderNavToggle ? "pl-20" : "pl-4"}`
+        className: `w-full bg-white flex items-center gap-2 -mb-px border-b border-gray-100 py-3 pr-4 pl-20 xl:pl-4`
       },
       /* @__PURE__ */ React__namespace.createElement(
         Button,
@@ -11341,7 +11363,7 @@ var __publicField = (obj, key, value) => {
     );
   };
   const FormStatus = ({ pristine }) => {
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-0 items-center" }, !pristine && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-yellow-300 border border-yellow-400 mr-2" }), " ", /* @__PURE__ */ React__namespace.createElement("p", { className: "text-gray-500 text-xs leading-tight whitespace-nowrap" }, "Unsaved Changes")), pristine && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-green-300 border border-green-400 mr-2" }), " ", /* @__PURE__ */ React__namespace.createElement("p", { className: "text-gray-500 text-xs leading-tight whitespace-nowrap" }, "No Changes")));
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-0 items-center" }, !pristine && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("p", { className: "text-gray-500 text-xs leading-tight whitespace-nowrap mr-2" }, "Unsaved Changes"), /* @__PURE__ */ React__namespace.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-red-300 border border-red-400" }), " "), pristine && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-green-300 border border-green-400" }), " "));
   };
   const FormWrapper = ({
     header,
@@ -11355,7 +11377,7 @@ var __publicField = (obj, key, value) => {
         className: "h-full overflow-y-auto max-h-full bg-gray-50"
       },
       header,
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "py-5 px-6" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full flex justify-center" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full max-w-form" }, children)))
+      /* @__PURE__ */ React__namespace.createElement("div", { className: "py-5 px-6 xl:px-12" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full flex justify-center" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full" }, children)))
     );
   };
   const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
@@ -13055,7 +13077,7 @@ var __publicField = (obj, key, value) => {
   function ErrorMessage({ error }) {
     const message = buildErrorMessage(error);
     const { setRawMode } = useEditorContext();
-    return /* @__PURE__ */ React.createElement("div", { contentEditable: false, className: "bg-red-50 sm:rounded-lg" }, /* @__PURE__ */ React.createElement("div", { className: "px-4 py-5 sm:p-6" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg leading-6 font-medium text-red-800" }, "Error parsing markdown"), /* @__PURE__ */ React.createElement("div", { className: "mt-2 max-w-xl text-sm text-red-800 space-y-4" }, /* @__PURE__ */ React.createElement("p", null, message), /* @__PURE__ */ React.createElement("p", null, "To fix these errors, edit the content in raw-mode."), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { contentEditable: false, className: "bg-red-50 sm:rounded-lg" }, /* @__PURE__ */ React.createElement("div", { className: "px-4 py-5 sm:p-6" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg leading-6 font-medium text-red-800" }, "❌ Error parsing markdown"), /* @__PURE__ */ React.createElement("div", { className: "mt-2 max-w-xl text-sm text-red-800 space-y-4" }, /* @__PURE__ */ React.createElement("p", null, message), /* @__PURE__ */ React.createElement("p", null, "To fix these errors, edit the content in raw-mode."), /* @__PURE__ */ React.createElement(
       "button",
       {
         onClick: () => setRawMode(true),
@@ -28025,7 +28047,7 @@ mutation addPendingDocumentMutation(
         });
       }
     };
-    let modalTitle = "Tina Cloud Authorization";
+    let modalTitle = "Tina Cloud";
     if (activeModal === "authenticate" && loginStrategy === "Redirect" && !isTinaCloud) {
       modalTitle = "Enter into edit mode";
     } else if (activeModal === "authenticate" && loginStrategy === "UsernamePassword") {
@@ -28041,20 +28063,12 @@ mutation addPendingDocumentMutation(
       ModalBuilder,
       {
         title: modalTitle,
-        message: isTinaCloud ? "To save edits, Tina Cloud authorization is required. On save, changes will get committed using your account." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
+        message: isTinaCloud ? "Your site uses Tina Cloud to track changes. To make edits, you must log in." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
         close,
         actions: [
           ...otherModalActions,
           {
-            action: async () => {
-              sharedctx.setEditing(false);
-              window.location.reload();
-            },
-            name: "Close",
-            primary: false
-          },
-          {
-            name: isTinaCloud ? "Continue to Tina Cloud" : "Enter Edit Mode",
+            name: isTinaCloud ? "Log in" : "Enter Edit Mode",
             action: handleAuthenticate,
             primary: true
           }
@@ -28808,7 +28822,7 @@ This will work when developing locally but NOT when deployed to production.
     const cloudConfigs = cms.plugins.getType("cloud-config").all();
     const [menuIsOpen, setMenuIsOpen] = React.useState(false);
     const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
-    const navBreakpoint2 = 1e3;
+    const navBreakpoint2 = 1279;
     const windowWidth = windowSize.useWindowWidth();
     const renderDesktopNav = windowWidth > navBreakpoint2;
     const activeScreens = screens.filter(
@@ -29115,14 +29129,14 @@ This will work when developing locally but NOT when deployed to production.
     isLocalMode,
     children
   }) => {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "pt-12 px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between items-end" }, children))));
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "pt-16 xl:pt-12 px-6 xl:px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between items-end" }, children))));
   };
   const PageBody = ({
     children
-  }) => /* @__PURE__ */ React.createElement("div", { className: "py-8 px-12" }, children);
+  }) => /* @__PURE__ */ React.createElement("div", { className: "py-8 px-6 xl:px-12" }, children);
   const PageBodyNarrow = ({
     children
-  }) => /* @__PURE__ */ React.createElement("div", { className: "py-10 px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, children));
+  }) => /* @__PURE__ */ React.createElement("div", { className: "py-10 px-6 xl:px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, children));
   const DashboardPage = () => {
     return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
       var _a, _b;
@@ -29637,7 +29651,6 @@ This will work when developing locally but NOT when deployed to production.
         },
         (collection, _loading, reFetchCollection, collectionExtra) => {
           var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-          collection.documents.totalCount;
           const documents = collection.documents.edges;
           const admin = cms.api.admin;
           const pageInfo = collection.documents.pageInfo;
@@ -29771,7 +29784,7 @@ This will work when developing locally but NOT when deployed to production.
               },
               close: () => setFolderModalOpen(false)
             }
-          ), /* @__PURE__ */ React.createElement(PageHeader, { isLocalMode: (_l = (_k = cms == null ? void 0 : cms.api) == null ? void 0 : _k.tina) == null ? void 0 : _l.isLocalMode }, /* @__PURE__ */ React.createElement("div", { className: "w-full grid grid-flow-col items-end gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement("h3", { className: "font-sans text-2xl text-gray-700" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", { className: "flex gap-4 items-start flex-wrap" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, !search && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 items-start" }, /* @__PURE__ */ React.createElement(
+          ), /* @__PURE__ */ React.createElement(PageHeader, { isLocalMode: (_l = (_k = cms == null ? void 0 : cms.api) == null ? void 0 : _k.tina) == null ? void 0 : _l.isLocalMode }, /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement("h3", { className: "font-sans text-2xl text-gray-700" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4 items-start" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, !search && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
             "label",
             {
               htmlFor: "sort",
@@ -29842,7 +29855,7 @@ This will work when developing locally but NOT when deployed to production.
               size: "small"
             },
             "Search not configured."
-          ))))), /* @__PURE__ */ React.createElement("div", { className: "flex self-end	justify-self-end" }, !collection.templates && allowCreate && /* @__PURE__ */ React.createElement(React.Fragment, null, allowCreateNestedFolder && /* @__PURE__ */ React.createElement(
+          )))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-end gap-2 md:gap-0 pt-4 lg:pt-0" }, !collection.templates && allowCreate && /* @__PURE__ */ React.createElement(React.Fragment, null, allowCreateNestedFolder && /* @__PURE__ */ React.createElement(
             reactRouterDom.Link,
             {
               onMouseDown: (evt) => {
@@ -29855,7 +29868,7 @@ This will work when developing locally but NOT when deployed to production.
                 evt.stopPropagation();
               },
               to: "/collections/new-folder",
-              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 whitespace-nowrap shadow text-blue-500 bg-white hover:bg-[#f1f5f9] focus:ring-white focus:ring-blue-500 text-sm h-10 px-6 mr-4"
+              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 whitespace-nowrap shadow text-blue-500 bg-white hover:bg-[#f1f5f9] focus:ring-white focus:ring-blue-500 w-full md:w-auto text-sm h-10 px-6 mr-4"
             },
             /* @__PURE__ */ React.createElement(FaFolder, { className: "mr-2" }),
             "Add Folder",
@@ -29874,7 +29887,7 @@ This will work when developing locally but NOT when deployed to production.
                 "new",
                 collectionName
               ].join("/")}`,
-              className: "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 whitespace-nowrap shadow text-white bg-blue-500 hover:bg-blue-600 text-sm h-10 px-6"
+              className: "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 whitespace-nowrap shadow text-white bg-blue-500 hover:bg-blue-600 w-full md:w-auto text-sm h-10 px-6"
             },
             /* @__PURE__ */ React.createElement(FaFile, { className: "mr-2" }),
             "Add Files",
@@ -29886,7 +29899,7 @@ This will work when developing locally but NOT when deployed to production.
               templates: collection.templates,
               folder
             }
-          )))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React.createElement("table", { className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg" }, /* @__PURE__ */ React.createElement("tbody", { className: "divide-y divide-gray-150" }, folder.name && !search ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React.createElement(
+          ))))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), /* @__PURE__ */ React.createElement("div", { className: "w-full overflow-x-auto" }, (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React.createElement("table", { className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg" }, /* @__PURE__ */ React.createElement("tbody", { className: "divide-y divide-gray-150" }, folder.name && !search ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React.createElement(
             Breadcrumb,
             {
               folder,
@@ -29896,34 +29909,33 @@ This will work when developing locally but NOT when deployed to production.
           ))) : null, documents.length > 0 && documents.map((document2) => {
             var _a2;
             if (document2.node.__typename === "Folder") {
-              return /* @__PURE__ */ React.createElement("tr", { key: `folder-${document2.node.path}` }, /* @__PURE__ */ React.createElement("td", { className: "pl-5 pr-3 py-3 truncate max-w-0" }, /* @__PURE__ */ React.createElement(
-                "a",
-                {
-                  className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
-                  onClick: () => {
-                    navigate(
-                      `/${[
-                        "collections",
-                        collectionName,
-                        document2.node.path
-                      ].join("/")}`,
-                      { replace: true }
-                    );
-                  }
-                },
-                /* @__PURE__ */ React.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
-                /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Name"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block truncate" }, /* @__PURE__ */ React.createElement("span", null, document2.node.name)))
-              )), /* @__PURE__ */ React.createElement(
-                "td",
+              return /* @__PURE__ */ React.createElement(
+                "tr",
                 {
-                  className: "px-3 py-3 truncate max-w-0",
-                  colSpan: 4
+                  key: `folder-${document2.node.path}`
                 },
-                /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Path"),
-                /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, document2.node.path.substring(2).split("/").map((node) => {
+                /* @__PURE__ */ React.createElement("td", { className: "pl-5 pr-3 py-3" }, /* @__PURE__ */ React.createElement(
+                  "a",
+                  {
+                    className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
+                    onClick: () => {
+                      navigate(
+                        `/${[
+                          "collections",
+                          collectionName,
+                          document2.node.path
+                        ].join("/")}`,
+                        { replace: true }
+                      );
+                    }
+                  },
+                  /* @__PURE__ */ React.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
+                  /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Name"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block truncate" }, /* @__PURE__ */ React.createElement("span", null, document2.node.name)))
+                )),
+                /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3", colSpan: 4 }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Path"), /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, document2.node.path.substring(2).split("/").map((node) => {
                   return /* @__PURE__ */ React.createElement("span", { key: node }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-300 pr-0.5" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "pr-0.5" }, node));
-                }))
-              ));
+                })))
+              );
             }
             const hasTitle = Boolean(
               document2.node._sys.title
@@ -29932,13 +29944,12 @@ This will work when developing locally but NOT when deployed to production.
             return /* @__PURE__ */ React.createElement(
               "tr",
               {
-                key: `document-${document2.node._sys.relativePath}`,
-                className: ""
+                key: `document-${document2.node._sys.relativePath}`
               },
               /* @__PURE__ */ React.createElement(
                 "td",
                 {
-                  className: "pl-5 pr-3 py-3 truncate max-w-0",
+                  className: "pl-5 pr-3 py-3",
                   colSpan: hasTitle ? 1 : 2
                 },
                 /* @__PURE__ */ React.createElement(
@@ -29959,9 +29970,9 @@ This will work when developing locally but NOT when deployed to production.
                   /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block truncate" }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, hasTitle ? (_a2 = document2.node._sys) == null ? void 0 : _a2.title : document2.node._sys.filename)))
                 )
               ),
-              hasTitle && /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3 truncate max-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Filename"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document2.node._sys.filename))),
-              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3 truncate w-[15%]" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Extension"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
-              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3 truncate w-[15%]" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Template"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
+              hasTitle && /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Filename"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document2.node._sys.filename))),
+              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Extension"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
+              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Template"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
               /* @__PURE__ */ React.createElement("td", { className: "w-0" }, /* @__PURE__ */ React.createElement(
                 OverflowMenu$1,
                 {
@@ -30054,7 +30065,7 @@ This will work when developing locally but NOT when deployed to production.
                 }
               ))
             );
-          }))), documents.length === 0 && /* @__PURE__ */ React.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React.createElement(
+          })))), documents.length === 0 && /* @__PURE__ */ React.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React.createElement(
             CursorPaginator,
             {
               variant: "white",
@@ -30101,7 +30112,7 @@ This will work when developing locally but NOT when deployed to production.
         className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
       },
       "Search"
-    ), /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-[200px]" }, /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-center w-full md:w-auto gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-[200px] w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
       Input,
       {
         type: "text",
@@ -30112,14 +30123,15 @@ This will work when developing locally but NOT when deployed to production.
           setSearchInput(e.target.value);
         }
       }
-    )), /* @__PURE__ */ React.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React.createElement(
+    )), /* @__PURE__ */ React.createElement("div", { className: "flex w-full md:w-auto gap-3" }, /* @__PURE__ */ React.createElement(
       Button,
       {
         onClick: () => {
           setSearch(searchInput);
           setSearchLoaded(false);
         },
-        variant: "primary"
+        variant: "primary",
+        className: "w-full md:w-auto"
       },
       "Search ",
       /* @__PURE__ */ React.createElement(BiSearch, { className: "w-5 h-full ml-1.5 opacity-70" })
@@ -30539,10 +30551,6 @@ This will work when developing locally but NOT when deployed to production.
         }
       });
     }, [cms, collection, mutationInfo]);
-    const navBreakpoint2 = 1e3;
-    const windowWidth = windowSize.useWindowWidth();
-    const renderNavToggle = windowWidth < navBreakpoint2 + 1;
-    const headerPadding = renderNavToggle ? "px-20" : "px-6";
     React.useEffect(() => {
       cms.dispatch({ type: "forms:add", value: form });
       cms.dispatch({ type: "forms:set-active-form-id", value: form.id });
@@ -30560,9 +30568,9 @@ This will work when developing locally but NOT when deployed to production.
     return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.isLocalMode) ? /* @__PURE__ */ React.createElement(LocalWarning, null) : /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `pt-3 pb-4 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center ${headerPadding}`
+        className: `pt-10 xl:pt-3 pb-10 xl:pb-4 px-20 xl:px-12 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center`
       },
-      /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-form flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: "w-full flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React.createElement(
         reactRouterDom.Link,
         {
           to: `/collections/${collection.name}${folder.fullyQualifiedName ? `/${folder.fullyQualifiedName}` : ""}`,
@@ -30770,10 +30778,6 @@ This will work when developing locally but NOT when deployed to production.
         }
       });
     }, [cms, document2, relativePath2, collection, mutationInfo]);
-    const navBreakpoint2 = 1e3;
-    const windowWidth = windowSize.useWindowWidth();
-    const renderNavToggle = windowWidth < navBreakpoint2 + 1;
-    const headerPadding = renderNavToggle ? "px-20" : "px-6";
     React.useEffect(() => {
       cms.dispatch({ type: "forms:add", value: form });
       cms.dispatch({ type: "forms:set-active-form-id", value: form.id });
@@ -30791,9 +30795,9 @@ This will work when developing locally but NOT when deployed to production.
     return /* @__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(BillingWarning, null), /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `pt-3 pb-4 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center ${headerPadding}`
+        className: `pt-10 xl:pt-3 pb-10 xl:pb-4 px-20 xl:px-12 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center`
       },
-      /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-form flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: "w-full flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React.createElement(
         reactRouterDom.Link,
         {
           to: `/collections/${collection.name}/~${parentFolder2}`,
@@ -30805,16 +30809,19 @@ This will work when developing locally but NOT when deployed to production.
   };
   const ScreenPage = () => {
     const { screenName } = reactRouterDom.useParams();
-    const navBreakpoint2 = 1e3;
-    const windowWidth = windowSize.useWindowWidth();
-    const renderNavToggle = windowWidth < navBreakpoint2 + 1;
     return /* @__PURE__ */ React.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", { 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(BillingWarning, null), renderNavToggle && /* @__PURE__ */ React.createElement("div", { className: `py-5 border-b border-gray-200 bg-white pl-18` }, selectedScreen.name), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-y-auto relative flex flex-col items-stretch justify-between" }, /* @__PURE__ */ React.createElement(selectedScreen.Component, { close: () => {
+      return /* @__PURE__ */ React.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(BillingWarning, null), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `xl:hidden py-5 border-b border-gray-200 bg-white pl-18`
+        },
+        selectedScreen.name
+      ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 overflow-y-auto relative flex flex-col items-stretch justify-between" }, /* @__PURE__ */ React.createElement(selectedScreen.Component, { close: () => {
       } })));
     });
   };
@@ -31188,7 +31195,7 @@ This will work when developing locally but NOT when deployed to production.
     cms,
     children
   }) => {
-    return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch h-screen overflow-hidden" }, /* @__PURE__ */ React.createElement(Sidebar, { cms }), /* @__PURE__ */ React.createElement("div", { className: "w-full relative" }, children)));
+    return /* @__PURE__ */ React.createElement(Layout, null, /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch h-dvh overflow-hidden" }, /* @__PURE__ */ React.createElement(Sidebar, { cms }), /* @__PURE__ */ React.createElement("div", { className: "w-full relative" }, children)));
   };
   const PlainLayout = ({ children }) => {
     return /* @__PURE__ */ React.createElement(

package/dist/index.mjs

@@ -27,9 +27,9 @@ import { EditContext, useEditState, setEditing } from "@tinacms/sharedctx";
 import get from "lodash.get";
 import moment from "moment";
 import { formatDistanceToNow } from "date-fns";
-import { useWindowWidth } from "@react-hook/window-size";
 import { isHotkey } from "is-hotkey";
 import { computePosition, flip, shift } from "@floating-ui/dom";
+import { useWindowWidth } from "@react-hook/window-size";
 import { getIntrospectionQuery, buildClientSchema, print, parse as parse$3, buildSchema } from "graphql";
 import gql$1 from "graphql-tag";
 import { TinaSchema, addNamespaceToSchema, parseURL, resolveForm, normalizePath, validateSchema } from "@tinacms/schema-tools";
@@ -2811,6 +2811,9 @@ function BiLogOut(props) {
 function BiMenu(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z" }, "child": [] }] })(props);
 }
+function BiMovie(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M20 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm.001 6c-.001 0-.001 0 0 0h-.466l-2.667-4H20l.001 4zM9.535 9 6.868 5h2.597l2.667 4H9.535zm5 0-2.667-4h2.597l2.667 4h-2.597zM4 5h.465l2.667 4H4V5zm0 14v-8h16l.002 8H4z" }, "child": [] }] })(props);
+}
 function BiPencil(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4 21a1 1 0 0 0 .24 0l4-1a1 1 0 0 0 .47-.26L21 7.41a2 2 0 0 0 0-2.82L19.42 3a2 2 0 0 0-2.83 0L4.3 15.29a1.06 1.06 0 0 0-.27.47l-1 4A1 1 0 0 0 3.76 21 1 1 0 0 0 4 21zM18 4.41 19.59 6 18 7.59 16.42 6zM5.91 16.51 15 7.41 16.59 9l-9.1 9.1-2.11.52z" }, "child": [] }] })(props);
 }
@@ -2895,13 +2898,13 @@ const Message = ({
     {
       className: `rounded-lg border shadow-sm ${sizeClasses[size]} ${containerClasses[type]} ${className}`
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement(
       MessageIcon,
       {
         type,
         className: `${size === "small" ? "w-5" : "w-6"} h-auto flex-shrink-0 ${iconClasses[type]}`
       }
-    ), /* @__PURE__ */ React__default.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children), link && /* @__PURE__ */ React__default.createElement(
+    ), /* @__PURE__ */ React__default.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children)), link && /* @__PURE__ */ React__default.createElement(
       "a",
       {
         href: link,
@@ -3521,7 +3524,7 @@ const Select = ({
       ref.current.focus();
     }
   }, [field == null ? void 0 : field.experimental_focusIntent, ref]);
-  return /* @__PURE__ */ React.createElement("div", { className: "relative group" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "relative group w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
     "select",
     {
       id: input.name,
@@ -3723,6 +3726,9 @@ const dropzoneAcceptFromString = (str) => {
 const isImage = (filename) => {
   return /\.(gif|jpg|jpeg|tiff|png|svg|webp|avif)(\?.*)?$/i.test(filename);
 };
+const isVideo = (filename) => {
+  return /\.(mp4|webm|ogg|m4v|mov|avi|flv|mkv)(\?.*)?$/i.test(filename);
+};
 const absoluteImgURL = (str) => {
   if (str.startsWith("http"))
     return str;
@@ -7699,6 +7705,7 @@ class TinaMediaStore {
       return fetch(input, init);
     };
     this.accept = DEFAULT_MEDIA_UPLOAD_TYPES;
+    this.maxSize = 100 * 1024 * 1024;
     this.parse = (img) => {
       return img.src;
     };
@@ -7999,6 +8006,9 @@ let MediaManager$1 = class MediaManager {
   get accept() {
     return this.store.accept;
   }
+  get maxSize() {
+    return this.store.maxSize || void 0;
+  }
   async persist(files) {
     try {
       this.events.dispatch({ type: "media:upload:start", uploaded: files });
@@ -9099,7 +9109,7 @@ const ResizeHandle = () => {
 const SidebarContext = React.createContext(null);
 const minPreviewWidth = 440;
 const minSidebarWidth = 360;
-const navBreakpoint = 1e3;
+const navBreakpoint = 1279;
 const LOCALSTATEKEY = "tina.sidebarState";
 const LOCALWIDTHKEY = "tina.sidebarWidth";
 const defaultSidebarWidth = 440;
@@ -9570,12 +9580,12 @@ const SidebarWrapper = ({ children }) => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: `fixed top-0 left-0 h-screen z-base ${displayState === "closed" ? `pointer-events-none` : ``}`
+      className: `fixed top-0 left-0 h-dvh z-base ${displayState === "closed" ? `pointer-events-none` : ``}`
     },
     /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `relative h-screen transform flex ${displayState !== "closed" ? `` : `-translate-x-full`} ${resizingSidebar ? `transition-none` : displayState === "closed" ? `transition-all duration-300 ease-in` : displayState === "fullscreen" ? `transition-all duration-150 ease-out` : `transition-all duration-300 ease-out`}`,
+        className: `relative h-dvh transform flex ${displayState !== "closed" ? `` : `-translate-x-full`} ${resizingSidebar ? `transition-none` : displayState === "closed" ? `transition-all duration-300 ease-in` : displayState === "fullscreen" ? `transition-all duration-150 ease-out` : `transition-all duration-300 ease-out`}`,
         style: {
           width: displayState === "fullscreen" ? "100vw" : sidebarWidth + "px",
           maxWidth: displayState === "fullscreen" ? "100vw" : "calc(100vw - 8px)",
@@ -9642,7 +9652,12 @@ function CursorPaginator({
   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" })));
 }
 function ListMediaItem({ item, onClick, active }) {
-  const FileIcon = item.type === "dir" ? BiFolder : BiFile;
+  let FileIcon = BiFile;
+  if (item.type === "dir") {
+    FileIcon = BiFolder;
+  } else if (isVideo(item.src)) {
+    FileIcon = BiMovie;
+  }
   const thumbnail = (item.thumbnails || {})["75x75"];
   return /* @__PURE__ */ React__default.createElement(
     "li",
@@ -9675,7 +9690,12 @@ function ListMediaItem({ item, onClick, active }) {
   );
 }
 function GridMediaItem({ item, active, onClick }) {
-  const FileIcon = item.type === "dir" ? BiFolder : BiFile;
+  let FileIcon = BiFile;
+  if (item.type === "dir") {
+    FileIcon = BiFolder;
+  } else if (isVideo(item.src)) {
+    FileIcon = BiMovie;
+  }
   const thumbnail = (item.thumbnails || {})["400x400"];
   return /* @__PURE__ */ React__default.createElement(
     "li",
@@ -9884,6 +9904,7 @@ function MediaPicker({
   close: close2,
   ...props
 }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const cms = useCMS();
   const [listState, setListState] = useState(() => {
     if (cms.media.isConfigured)
@@ -9978,10 +9999,14 @@ function MediaPicker({
     };
   }
   const [uploading, setUploading] = useState(false);
+  const accept = Array.isArray(
+    (_c = (_b = (_a = cms.api.tina.schema.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.media) == null ? void 0 : _c.accept
+  ) ? (_f = (_e = (_d = cms.api.tina.schema.schema) == null ? void 0 : _d.config) == null ? void 0 : _e.media) == null ? void 0 : _f.accept.join(",") : (_i = (_h = (_g = cms.api.tina.schema.schema) == null ? void 0 : _g.config) == null ? void 0 : _h.media) == null ? void 0 : _i.accept;
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: dropzoneAcceptFromString(
-      cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES
+      accept || cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES
     ),
+    maxSize: cms.media.maxSize,
     multiple: true,
     onDrop: async (files, fileRejections) => {
       try {
@@ -11078,16 +11103,13 @@ const BranchBanner = () => {
   const openModal = () => setOpen(true);
   const { currentBranch } = useBranchData();
   const isProtected = cms.api.tina.usingProtectedBranch();
-  const navBreakpoint2 = 1e3;
-  const windowWidth = useWindowWidth();
-  const renderNavToggle = windowWidth < navBreakpoint2 + 1;
   const previewFunction = (_d = (_c = (_b = (_a = cms.api.tina.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.config) == null ? void 0 : _c.ui) == null ? void 0 : _d.previewUrl;
   const branch = decodeURIComponent(cms.api.tina.branch);
   const previewUrl = previewFunction ? (_e = previewFunction({ branch })) == null ? void 0 : _e.url : null;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: `w-full bg-white flex items-center gap-2 -mb-px border-b border-gray-100 py-3 pr-4 ${renderNavToggle ? "pl-20" : "pl-4"}`
+      className: `w-full bg-white flex items-center gap-2 -mb-px border-b border-gray-100 py-3 pr-4 pl-20 xl:pl-4`
     },
     /* @__PURE__ */ React.createElement(
       Button,
@@ -11349,7 +11371,7 @@ const FormBuilder = ({
   );
 };
 const FormStatus = ({ pristine }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-0 items-center" }, !pristine && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-yellow-300 border border-yellow-400 mr-2" }), " ", /* @__PURE__ */ React.createElement("p", { className: "text-gray-500 text-xs leading-tight whitespace-nowrap" }, "Unsaved Changes")), pristine && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-green-300 border border-green-400 mr-2" }), " ", /* @__PURE__ */ React.createElement("p", { className: "text-gray-500 text-xs leading-tight whitespace-nowrap" }, "No Changes")));
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-0 items-center" }, !pristine && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", { className: "text-gray-500 text-xs leading-tight whitespace-nowrap mr-2" }, "Unsaved Changes"), /* @__PURE__ */ React.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-red-300 border border-red-400" }), " "), pristine && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "w-3 h-3 flex-0 rounded-full bg-green-300 border border-green-400" }), " "));
 };
 const FormWrapper = ({
   header,
@@ -11363,7 +11385,7 @@ const FormWrapper = ({
       className: "h-full overflow-y-auto max-h-full bg-gray-50"
     },
     header,
-    /* @__PURE__ */ React.createElement("div", { className: "py-5 px-6" }, /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-form" }, children)))
+    /* @__PURE__ */ React.createElement("div", { className: "py-5 px-6 xl:px-12" }, /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "w-full" }, children)))
   );
 };
 const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
@@ -13063,7 +13085,7 @@ const createInvalidMarkdownPlugin = createPluginFactory({
 function ErrorMessage({ error }) {
   const message = buildErrorMessage(error);
   const { setRawMode } = useEditorContext();
-  return /* @__PURE__ */ React__default.createElement("div", { contentEditable: false, className: "bg-red-50 sm:rounded-lg" }, /* @__PURE__ */ React__default.createElement("div", { className: "px-4 py-5 sm:p-6" }, /* @__PURE__ */ React__default.createElement("h3", { className: "text-lg leading-6 font-medium text-red-800" }, "Error parsing markdown"), /* @__PURE__ */ React__default.createElement("div", { className: "mt-2 max-w-xl text-sm text-red-800 space-y-4" }, /* @__PURE__ */ React__default.createElement("p", null, message), /* @__PURE__ */ React__default.createElement("p", null, "To fix these errors, edit the content in raw-mode."), /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { contentEditable: false, className: "bg-red-50 sm:rounded-lg" }, /* @__PURE__ */ React__default.createElement("div", { className: "px-4 py-5 sm:p-6" }, /* @__PURE__ */ React__default.createElement("h3", { className: "text-lg leading-6 font-medium text-red-800" }, "❌ Error parsing markdown"), /* @__PURE__ */ React__default.createElement("div", { className: "mt-2 max-w-xl text-sm text-red-800 space-y-4" }, /* @__PURE__ */ React__default.createElement("p", null, message), /* @__PURE__ */ React__default.createElement("p", null, "To fix these errors, edit the content in raw-mode."), /* @__PURE__ */ React__default.createElement(
     "button",
     {
       onClick: () => setRawMode(true),
@@ -28033,7 +28055,7 @@ const AuthWallInner = ({
       });
     }
   };
-  let modalTitle = "Tina Cloud Authorization";
+  let modalTitle = "Tina Cloud";
   if (activeModal === "authenticate" && loginStrategy === "Redirect" && !isTinaCloud) {
     modalTitle = "Enter into edit mode";
   } else if (activeModal === "authenticate" && loginStrategy === "UsernamePassword") {
@@ -28049,20 +28071,12 @@ const AuthWallInner = ({
     ModalBuilder,
     {
       title: modalTitle,
-      message: isTinaCloud ? "To save edits, Tina Cloud authorization is required. On save, changes will get committed using your account." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
+      message: isTinaCloud ? "Your site uses Tina Cloud to track changes. To make edits, you must log in." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
       close,
       actions: [
         ...otherModalActions,
         {
-          action: async () => {
-            setEditing(false);
-            window.location.reload();
-          },
-          name: "Close",
-          primary: false
-        },
-        {
-          name: isTinaCloud ? "Continue to Tina Cloud" : "Enter Edit Mode",
+          name: isTinaCloud ? "Log in" : "Enter Edit Mode",
           action: handleAuthenticate,
           primary: true
         }
@@ -28816,7 +28830,7 @@ const Sidebar = ({ cms }) => {
   const cloudConfigs = cms.plugins.getType("cloud-config").all();
   const [menuIsOpen, setMenuIsOpen] = React__default.useState(false);
   const isLocalMode = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode;
-  const navBreakpoint2 = 1e3;
+  const navBreakpoint2 = 1279;
   const windowWidth = useWindowWidth();
   const renderDesktopNav = windowWidth > navBreakpoint2;
   const activeScreens = screens.filter(
@@ -29123,14 +29137,14 @@ const PageHeader = ({
   isLocalMode,
   children
 }) => {
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isLocalMode && /* @__PURE__ */ React__default.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "pt-12 px-12" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex justify-between items-end" }, children))));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isLocalMode && /* @__PURE__ */ React__default.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "pt-16 xl:pt-12 px-6 xl:px-12" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex justify-between items-end" }, children))));
 };
 const PageBody = ({
   children
-}) => /* @__PURE__ */ React__default.createElement("div", { className: "py-8 px-12" }, children);
+}) => /* @__PURE__ */ React__default.createElement("div", { className: "py-8 px-6 xl:px-12" }, children);
 const PageBodyNarrow = ({
   children
-}) => /* @__PURE__ */ React__default.createElement("div", { className: "py-10 px-12" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, children));
+}) => /* @__PURE__ */ React__default.createElement("div", { className: "py-10 px-6 xl:px-12" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, children));
 const DashboardPage = () => {
   return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => {
     var _a, _b;
@@ -29645,7 +29659,6 @@ const CollectionListPage = () => {
       },
       (collection, _loading, reFetchCollection, collectionExtra) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-        collection.documents.totalCount;
         const documents = collection.documents.edges;
         const admin = cms.api.admin;
         const pageInfo = collection.documents.pageInfo;
@@ -29779,7 +29792,7 @@ const CollectionListPage = () => {
             },
             close: () => setFolderModalOpen(false)
           }
-        ), /* @__PURE__ */ React__default.createElement(PageHeader, { isLocalMode: (_l = (_k = cms == null ? void 0 : cms.api) == null ? void 0 : _k.tina) == null ? void 0 : _l.isLocalMode }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full grid grid-flow-col items-end gap-4" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React__default.createElement("h3", { className: "font-sans text-2xl text-gray-700" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-4 items-start flex-wrap" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !search && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2 items-start" }, /* @__PURE__ */ React__default.createElement(
+        ), /* @__PURE__ */ React__default.createElement(PageHeader, { isLocalMode: (_l = (_k = cms == null ? void 0 : cms.api) == null ? void 0 : _k.tina) == null ? void 0 : _l.isLocalMode }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full" }, /* @__PURE__ */ React__default.createElement("h3", { className: "font-sans text-2xl text-gray-700" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4 items-start" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !search && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React__default.createElement(
           "label",
           {
             htmlFor: "sort",
@@ -29850,7 +29863,7 @@ const CollectionListPage = () => {
             size: "small"
           },
           "Search not configured."
-        ))))), /* @__PURE__ */ React__default.createElement("div", { className: "flex self-end	justify-self-end" }, !collection.templates && allowCreate && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, allowCreateNestedFolder && /* @__PURE__ */ React__default.createElement(
+        )))), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-end gap-2 md:gap-0 pt-4 lg:pt-0" }, !collection.templates && allowCreate && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, allowCreateNestedFolder && /* @__PURE__ */ React__default.createElement(
           Link,
           {
             onMouseDown: (evt) => {
@@ -29863,7 +29876,7 @@ const CollectionListPage = () => {
               evt.stopPropagation();
             },
             to: "/collections/new-folder",
-            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 whitespace-nowrap shadow text-blue-500 bg-white hover:bg-[#f1f5f9] focus:ring-white focus:ring-blue-500 text-sm h-10 px-6 mr-4"
+            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 whitespace-nowrap shadow text-blue-500 bg-white hover:bg-[#f1f5f9] focus:ring-white focus:ring-blue-500 w-full md:w-auto text-sm h-10 px-6 mr-4"
           },
           /* @__PURE__ */ React__default.createElement(FaFolder, { className: "mr-2" }),
           "Add Folder",
@@ -29882,7 +29895,7 @@ const CollectionListPage = () => {
               "new",
               collectionName
             ].join("/")}`,
-            className: "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 whitespace-nowrap shadow text-white bg-blue-500 hover:bg-blue-600 text-sm h-10 px-6"
+            className: "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 whitespace-nowrap shadow text-white bg-blue-500 hover:bg-blue-600 w-full md:w-auto text-sm h-10 px-6"
           },
           /* @__PURE__ */ React__default.createElement(FaFile, { className: "mr-2" }),
           "Add Files",
@@ -29894,7 +29907,7 @@ const CollectionListPage = () => {
             templates: collection.templates,
             folder
           }
-        )))), /* @__PURE__ */ React__default.createElement(PageBody, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React__default.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React__default.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), (folder.name && !search || documents.length > 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__default.createElement("tbody", { className: "divide-y divide-gray-150" }, folder.name && !search ? /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React__default.createElement(
+        ))))), /* @__PURE__ */ React__default.createElement(PageBody, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React__default.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React__default.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), /* @__PURE__ */ React__default.createElement("div", { className: "w-full overflow-x-auto" }, (folder.name && !search || documents.length > 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__default.createElement("tbody", { className: "divide-y divide-gray-150" }, folder.name && !search ? /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React__default.createElement(
           Breadcrumb,
           {
             folder,
@@ -29904,34 +29917,33 @@ const CollectionListPage = () => {
         ))) : null, documents.length > 0 && documents.map((document2) => {
           var _a2;
           if (document2.node.__typename === "Folder") {
-            return /* @__PURE__ */ React__default.createElement("tr", { key: `folder-${document2.node.path}` }, /* @__PURE__ */ React__default.createElement("td", { className: "pl-5 pr-3 py-3 truncate max-w-0" }, /* @__PURE__ */ React__default.createElement(
-              "a",
-              {
-                className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
-                onClick: () => {
-                  navigate(
-                    `/${[
-                      "collections",
-                      collectionName,
-                      document2.node.path
-                    ].join("/")}`,
-                    { replace: true }
-                  );
-                }
-              },
-              /* @__PURE__ */ React__default.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
-              /* @__PURE__ */ React__default.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Name"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block truncate" }, /* @__PURE__ */ React__default.createElement("span", null, document2.node.name)))
-            )), /* @__PURE__ */ React__default.createElement(
-              "td",
+            return /* @__PURE__ */ React__default.createElement(
+              "tr",
               {
-                className: "px-3 py-3 truncate max-w-0",
-                colSpan: 4
+                key: `folder-${document2.node.path}`
               },
-              /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Path"),
-              /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, document2.node.path.substring(2).split("/").map((node) => {
+              /* @__PURE__ */ React__default.createElement("td", { className: "pl-5 pr-3 py-3" }, /* @__PURE__ */ React__default.createElement(
+                "a",
+                {
+                  className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
+                  onClick: () => {
+                    navigate(
+                      `/${[
+                        "collections",
+                        collectionName,
+                        document2.node.path
+                      ].join("/")}`,
+                      { replace: true }
+                    );
+                  }
+                },
+                /* @__PURE__ */ React__default.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
+                /* @__PURE__ */ React__default.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Name"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block truncate" }, /* @__PURE__ */ React__default.createElement("span", null, document2.node.name)))
+              )),
+              /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3", colSpan: 4 }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Path"), /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, document2.node.path.substring(2).split("/").map((node) => {
                 return /* @__PURE__ */ React__default.createElement("span", { key: node }, /* @__PURE__ */ React__default.createElement("span", { className: "text-gray-300 pr-0.5" }, "/"), /* @__PURE__ */ React__default.createElement("span", { className: "pr-0.5" }, node));
-              }))
-            ));
+              })))
+            );
           }
           const hasTitle = Boolean(
             document2.node._sys.title
@@ -29940,13 +29952,12 @@ const CollectionListPage = () => {
           return /* @__PURE__ */ React__default.createElement(
             "tr",
             {
-              key: `document-${document2.node._sys.relativePath}`,
-              className: ""
+              key: `document-${document2.node._sys.relativePath}`
             },
             /* @__PURE__ */ React__default.createElement(
               "td",
               {
-                className: "pl-5 pr-3 py-3 truncate max-w-0",
+                className: "pl-5 pr-3 py-3",
                 colSpan: hasTitle ? 1 : 2
               },
               /* @__PURE__ */ React__default.createElement(
@@ -29967,9 +29978,9 @@ const CollectionListPage = () => {
                 /* @__PURE__ */ React__default.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block truncate" }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, hasTitle ? (_a2 = document2.node._sys) == null ? void 0 : _a2.title : document2.node._sys.filename)))
               )
             ),
-            hasTitle && /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3 truncate max-w-0" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Filename"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, document2.node._sys.filename))),
-            /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3 truncate w-[15%]" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Extension"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
-            /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3 truncate w-[15%]" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Template"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
+            hasTitle && /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Filename"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, document2.node._sys.filename))),
+            /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Extension"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
+            /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Template"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
             /* @__PURE__ */ React__default.createElement("td", { className: "w-0" }, /* @__PURE__ */ React__default.createElement(
               OverflowMenu$1,
               {
@@ -30062,7 +30073,7 @@ const CollectionListPage = () => {
               }
             ))
           );
-        }))), documents.length === 0 && /* @__PURE__ */ React__default.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React__default.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React__default.createElement(
+        })))), documents.length === 0 && /* @__PURE__ */ React__default.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React__default.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React__default.createElement(
           CursorPaginator,
           {
             variant: "white",
@@ -30109,7 +30120,7 @@ const SearchInput = ({
       className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
     },
     "Search"
-  ), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-wrap items-center gap-3" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1 min-w-[200px]" }, /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-center w-full md:w-auto gap-3" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1 min-w-[200px] w-full md:w-auto" }, /* @__PURE__ */ React__default.createElement(
     Input,
     {
       type: "text",
@@ -30120,14 +30131,15 @@ const SearchInput = ({
         setSearchInput(e.target.value);
       }
     }
-  )), /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-3" }, /* @__PURE__ */ React__default.createElement(
+  )), /* @__PURE__ */ React__default.createElement("div", { className: "flex w-full md:w-auto gap-3" }, /* @__PURE__ */ React__default.createElement(
     Button,
     {
       onClick: () => {
         setSearch(searchInput);
         setSearchLoaded(false);
       },
-      variant: "primary"
+      variant: "primary",
+      className: "w-full md:w-auto"
     },
     "Search ",
     /* @__PURE__ */ React__default.createElement(BiSearch, { className: "w-5 h-full ml-1.5 opacity-70" })
@@ -30547,10 +30559,6 @@ const RenderForm$1 = ({
       }
     });
   }, [cms, collection, mutationInfo]);
-  const navBreakpoint2 = 1e3;
-  const windowWidth = useWindowWidth();
-  const renderNavToggle = windowWidth < navBreakpoint2 + 1;
-  const headerPadding = renderNavToggle ? "px-20" : "px-6";
   React__default.useEffect(() => {
     cms.dispatch({ type: "forms:add", value: form });
     cms.dispatch({ type: "forms:set-active-form-id", value: form.id });
@@ -30568,9 +30576,9 @@ const RenderForm$1 = ({
   return /* @__PURE__ */ React__default.createElement(PageWrapper, null, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.isLocalMode) ? /* @__PURE__ */ React__default.createElement(LocalWarning, null) : /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: `pt-3 pb-4 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center ${headerPadding}`
+      className: `pt-10 xl:pt-3 pb-10 xl:pb-4 px-20 xl:px-12 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center`
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "w-full max-w-form flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React__default.createElement(
       Link,
       {
         to: `/collections/${collection.name}${folder.fullyQualifiedName ? `/${folder.fullyQualifiedName}` : ""}`,
@@ -30778,10 +30786,6 @@ const RenderForm = ({
       }
     });
   }, [cms, document2, relativePath2, collection, mutationInfo]);
-  const navBreakpoint2 = 1e3;
-  const windowWidth = useWindowWidth();
-  const renderNavToggle = windowWidth < navBreakpoint2 + 1;
-  const headerPadding = renderNavToggle ? "px-20" : "px-6";
   React__default.useEffect(() => {
     cms.dispatch({ type: "forms:add", value: form });
     cms.dispatch({ type: "forms:set-active-form-id", value: form.id });
@@ -30799,9 +30803,9 @@ const RenderForm = ({
   return /* @__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(BillingWarning, null), /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: `pt-3 pb-4 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center ${headerPadding}`
+      className: `pt-10 xl:pt-3 pb-10 xl:pb-4 px-20 xl:px-12 border-b border-gray-200 bg-white w-full grow-0 shrink basis-0 flex justify-center`
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "w-full max-w-form flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex gap-1.5 justify-between items-center" }, /* @__PURE__ */ React__default.createElement(
       Link,
       {
         to: `/collections/${collection.name}/~${parentFolder2}`,
@@ -30813,16 +30817,19 @@ const RenderForm = ({
 };
 const ScreenPage = () => {
   const { screenName } = useParams();
-  const navBreakpoint2 = 1e3;
-  const windowWidth = useWindowWidth();
-  const renderNavToggle = windowWidth < navBreakpoint2 + 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__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__default.createElement(LocalWarning, null) : /* @__PURE__ */ React__default.createElement(BillingWarning, 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__default.createElement(selectedScreen.Component, { close: () => {
+    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__default.createElement(LocalWarning, null) : /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: `xl:hidden 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__default.createElement(selectedScreen.Component, { close: () => {
     } })));
   });
 };
@@ -31196,7 +31203,7 @@ const DefaultWrapper = ({
   cms,
   children
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Layout, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-stretch h-screen overflow-hidden" }, /* @__PURE__ */ React__default.createElement(Sidebar, { cms }), /* @__PURE__ */ React__default.createElement("div", { className: "w-full relative" }, children)));
+  return /* @__PURE__ */ React__default.createElement(Layout, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-stretch h-dvh overflow-hidden" }, /* @__PURE__ */ React__default.createElement(Sidebar, { cms }), /* @__PURE__ */ React__default.createElement("div", { className: "w-full relative" }, children)));
 };
 const PlainLayout = ({ children }) => {
   return /* @__PURE__ */ React__default.createElement(

package/dist/toolkit/components/media/utils.d.ts

@@ -1,4 +1,5 @@
 export declare const DEFAULT_MEDIA_UPLOAD_TYPES: string;
 export declare const dropzoneAcceptFromString: (str: string) => any;
 export declare const isImage: (filename: string) => boolean;
+export declare const isVideo: (filename: string) => boolean;
 export declare const absoluteImgURL: (str: string) => string;

package/dist/toolkit/core/media-store.default.d.ts

@@ -34,6 +34,7 @@ export declare class TinaMediaStore implements MediaStore {
     setup(): void;
     isAuthenticated(): Promise<boolean>;
     accept: string;
+    maxSize: number;
     private persist_cloud;
     private persist_local;
     persist(media: MediaUploadOptions[]): Promise<Media[]>;

package/dist/toolkit/core/media.d.ts

@@ -47,6 +47,10 @@ export interface MediaStore {
      * that describes what kind of files the Media Store will accept.
      */
     accept: string;
+    /**
+     * The maximum size of a file that can be uploaded.
+     */
+    maxSize?: number;
     /**
      * Uploads a set of files to the Media Store and
      * returns a Promise containing the Media objects
@@ -112,6 +116,7 @@ export declare class MediaManager implements MediaStore {
     set pageSize(pageSize: number);
     open(options?: SelectMediaOptions): void;
     get accept(): string;
+    get maxSize(): number;
     persist(files: MediaUploadOptions[]): Promise<Media[]>;
     delete(media: Media): Promise<void>;
     list(options: MediaListOptions): Promise<MediaList>;

package/dist/toolkit/react-sidebar/components/sidebar.d.ts

@@ -8,7 +8,7 @@ import { SidebarState, SidebarStateOptions } from '../sidebar';
 export declare const SidebarContext: React.Context<any>;
 export declare const minPreviewWidth = 440;
 export declare const minSidebarWidth = 360;
-export declare const navBreakpoint = 1000;
+export declare const navBreakpoint = 1279;
 export interface SidebarProviderProps {
     sidebar: SidebarState;
     resizingSidebar: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "main": "dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {
@@ -97,9 +97,9 @@
     "webfontloader": "1.6.28",
     "yup": "^0.32.0",
     "zod": "^3.14.3",
-    "@tinacms/mdx": "1.3.26",
-    "@tinacms/schema-tools": "1.4.17",
-    "@tinacms/search": "1.0.21",
+    "@tinacms/mdx": "1.3.27",
+    "@tinacms/schema-tools": "1.4.18",
+    "@tinacms/search": "1.0.22",
     "@tinacms/sharedctx": "1.0.3"
   },
   "devDependencies": {