tinacms 1.6.4 → 1.6.6

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";
@@ -64,7 +64,7 @@ function useModalContainer() {
   return modalContainer;
 }
 const ModalOverlay = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-modal w-screen h-screen overflow-y-auto" }, children, /* @__PURE__ */ React.createElement("div", { className: "fixed -z-1 inset-0 opacity-80 bg-gradient-to-br from-gray-800 via-gray-900 to-black" }));
+  return /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-modal w-screen h-dvh overflow-y-auto" }, children, /* @__PURE__ */ React.createElement("div", { className: "fixed -z-1 inset-0 opacity-80 bg-gradient-to-br from-gray-800 via-gray-900 to-black" }));
 };
 const Modal = (props) => {
   const { portalNode } = useModalContainer();
@@ -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;
@@ -5878,6 +5884,8 @@ function onClickOutsideHOC(WrappedComponent, config) {
         handlersMap[_this._uid] = function(event) {
           if (_this.componentNode === null)
             return;
+          if (_this.initTimeStamp > event.timeStamp)
+            return;
           if (_this.props.preventDefault) {
             event.preventDefault();
           }
@@ -5914,6 +5922,7 @@ function onClickOutsideHOC(WrappedComponent, config) {
         return _this.instanceRef = ref;
       };
       _this._uid = uid();
+      _this.initTimeStamp = performance.now();
       return _this;
     }
     var _proto = onClickOutside.prototype;
@@ -7696,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;
     };
@@ -7996,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 });
@@ -8082,7 +8095,7 @@ class Flags {
     this.events.dispatch({ type: "flag:set", key, value });
   }
 }
-const _CMS = class {
+const _CMS = class _CMS2 {
   /**
    * @hidden
    */
@@ -8094,11 +8107,11 @@ const _CMS = class {
     this.media = new MediaManager$1(new DummyMediaStore(), this.events);
     this.enable = () => {
       this._enabled = true;
-      this.events.dispatch(_CMS.ENABLED);
+      this.events.dispatch(_CMS2.ENABLED);
     };
     this.disable = () => {
       this._enabled = false;
-      this.events.dispatch(_CMS.DISABLED);
+      this.events.dispatch(_CMS2.DISABLED);
     };
     this.toggle = () => {
       if (this.enabled) {
@@ -8180,9 +8193,9 @@ const _CMS = class {
     return !this._enabled;
   }
 };
+_CMS.ENABLED = { type: "cms:enable" };
+_CMS.DISABLED = { type: "cms:disable" };
 let CMS = _CMS;
-CMS.ENABLED = { type: "cms:enable" };
-CMS.DISABLED = { type: "cms:disable" };
 let Alerts$1 = class Alerts {
   constructor(events, map = {}) {
     this.events = events;
@@ -9096,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;
@@ -9567,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)",
@@ -9639,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",
@@ -9672,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",
@@ -9881,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)
@@ -9975,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 {
@@ -11075,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,
@@ -11346,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,
@@ -11360,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(
@@ -13060,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),
@@ -28030,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") {
@@ -28046,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
         }
@@ -28597,7 +28614,7 @@ const TinaCMSProvider2 = ({
     !schema.config.contentApiUrlOverride
   ) {
     throw new Error(
-      "Invalid setup. See https://tina.io/docs/tina-cloud/connecting-site/ for more information."
+      "Invalid setup. See https://tina.io/docs/tina-cloud/overview for more information."
     );
   }
   if (!schema) {
@@ -28813,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(
@@ -29120,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;
@@ -29642,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;
@@ -29776,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",
@@ -29847,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) => {
@@ -29860,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",
@@ -29879,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",
@@ -29891,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,
@@ -29901,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
@@ -29937,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(
@@ -29964,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,
               {
@@ -30059,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",
@@ -30106,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",
@@ -30117,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" })
@@ -30544,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 });
@@ -30565,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}` : ""}`,
@@ -30775,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 });
@@ -30796,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}`,
@@ -30810,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: () => {
     } })));
   });
 };
@@ -31193,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>;