next-tinacms-cloudinary 4.3.0 → 4.3.1

package/dist/handlers.js

@@ -81,6 +81,7 @@ async function uploadMedia(req, res) {
   res.json(result);
 }
 async function listMedia(req, res, opts) {
+  var _a;
   try {
     const {
       directory = '""',
@@ -98,21 +99,35 @@ async function listMedia(req, res, opts) {
         return import_cloudinary.v2.api.sub_folders(directory2);
       }
     };
-    let { folders } = await import_cloudinary.v2.api.folders(directory);
-    folders = folders.map(function(folder) {
-      "empty-repo/004";
-      return {
-        id: folder.path,
-        type: "dir",
-        filename: import_path.default.basename(folder.path),
-        directory: import_path.default.dirname(folder.path)
-      };
-    });
+    let folders = [];
+    let folderRes = null;
+    try {
+      folderRes = await import_cloudinary.v2.api.folders(directory);
+    } catch (e) {
+      if ((_a = e.error) == null ? void 0 : _a.message.startsWith("Can't find folder with path")) {
+      } else {
+        console.error("Error getting folders");
+        console.error(e);
+        throw e;
+      }
+    }
+    if (folderRes == null ? void 0 : folderRes.folders) {
+      folders = folderRes.folders.map(function(folder) {
+        "empty-repo/004";
+        return {
+          id: folder.path,
+          type: "dir",
+          filename: import_path.default.basename(folder.path),
+          directory: import_path.default.dirname(folder.path)
+        };
+      });
+    }
     res.json({
       items: [...folders, ...files],
       offset: response.next_cursor
     });
   } catch (e) {
+    console.log(e);
     res.status(500);
     const message = findErrorMessage(e);
     res.json({ e: message });

package/dist/index.es.js

@@ -52675,11 +52675,13 @@ const PopupModal = ({ className = "", style = {}, ...props }) => /* @__PURE__ */
 const ERROR_MISSING_CMS = `useCMS could not find an instance of CMS`;
 const CMSContext = react.exports.createContext(null);
 function useCMS$1() {
-  const cms = react.exports.useContext(CMSContext);
+  const { cms, dispatch, state } = react.exports.useContext(CMSContext);
   if (!cms) {
     throw new Error(ERROR_MISSING_CMS);
   }
   const [, setEnabled] = react.exports.useState(cms.enabled);
+  cms.dispatch = dispatch;
+  cms.state = state;
   react.exports.useEffect(() => {
     return cms.events.subscribe("cms", () => {
       setEnabled(cms.enabled);
@@ -52739,7 +52741,8 @@ const Button = ({
   const roundedClasses = {
     full: `rounded-full`,
     left: `rounded-l-full`,
-    right: `rounded-r-full`
+    right: `rounded-r-full`,
+    custom: ""
   };
   const sizeClasses = {
     small: `text-xs h-8 px-3`,
@@ -52888,6 +52891,12 @@ function IconBase(props) {
     return elem(conf);
   }) : elem(DefaultContext);
 }
+function IoMdRefresh(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 388c-72.597 0-132-59.405-132-132 0-72.601 59.403-132 132-132 36.3 0 69.299 15.4 92.406 39.601L278 234h154V80l-51.698 51.702C348.406 99.798 304.406 80 256 80c-96.797 0-176 79.203-176 176s78.094 176 176 176c81.045 0 148.287-54.134 169.401-128H378.85c-18.745 49.561-67.138 84-122.85 84z" } }] })(props);
+}
+function IoMdSync(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 93.09V32l-80 81.454 80 81.456v-61.093c65.996 0 120 54.982 120 122.183 0 20.363-5 39.714-14.004 57.016L391 342.547c15.996-25.457 25-54.988 25-86.547 0-89.599-72.002-162.91-160-162.91zm0 285.094c-66.001 0-120-54.988-120-122.184 0-20.363 5-39.709 13.999-57.02L121 169.454C104.999 193.89 96 224.436 96 256c0 89.599 72.002 162.91 160 162.91V480l80-81.453-80-81.457v61.094z" } }] })(props);
+}
 function BiArrowToBottom(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M6 18h12v2H6zm5-14v8.586L6.707 8.293 5.293 9.707 12 16.414l6.707-6.707-1.414-1.414L13 12.586V4z" } }] })(props);
 }
@@ -52897,6 +52906,9 @@ function BiCloudUpload(props) {
 function BiCopyAlt(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z" } }, { "tag": "path", "attr": { "d": "M6 12h6v2H6zm0 4h6v2H6z" } }] })(props);
 }
+function BiFileBlank(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.937 8.68c-.011-.032-.02-.063-.033-.094a.997.997 0 0 0-.196-.293l-6-6a.997.997 0 0 0-.293-.196c-.03-.014-.062-.022-.094-.033a.991.991 0 0 0-.259-.051C13.04 2.011 13.021 2 13 2H6c-1.103 0-2 .897-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V9c0-.021-.011-.04-.013-.062a.99.99 0 0 0-.05-.258zM16.586 8H14V5.414L16.586 8zM6 20V4h6v5a1 1 0 0 0 1 1h5l.002 10H6z" } }] })(props);
+}
 function BiFile(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.903 8.586a.997.997 0 0 0-.196-.293l-6-6a.997.997 0 0 0-.293-.196c-.03-.014-.062-.022-.094-.033a.991.991 0 0 0-.259-.051C13.04 2.011 13.021 2 13 2H6c-1.103 0-2 .897-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V9c0-.021-.011-.04-.013-.062a.952.952 0 0 0-.051-.259c-.01-.032-.019-.063-.033-.093zM16.586 8H14V5.414L16.586 8zM6 20V4h6v5a1 1 0 0 0 1 1h5l.002 10H6z" } }, { "tag": "path", "attr": { "d": "M8 12h8v2H8zm0 4h8v2H8zm0-8h2v2H8z" } }] })(props);
 }
@@ -52918,9 +52930,6 @@ function BiRightArrowAlt(props) {
 function BiX(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z" } }] })(props);
 }
-function IoMdSync(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 93.09V32l-80 81.454 80 81.456v-61.093c65.996 0 120 54.982 120 122.183 0 20.363-5 39.714-14.004 57.016L391 342.547c15.996-25.457 25-54.988 25-86.547 0-89.599-72.002-162.91-160-162.91zm0 285.094c-66.001 0-120-54.988-120-122.184 0-20.363 5-39.709 13.999-57.02L121 169.454C104.999 193.89 96 224.436 96 256c0 89.599 72.002 162.91 160 162.91V480l80-81.453-80-81.457v61.094z" } }] })(props);
-}
 React__default.createContext({
   rawMode: false,
   setRawMode: () => {
@@ -52945,9 +52954,33 @@ const createHTMLInlinePlugin = createPluginFactory({
   isVoid: true,
   isInline: true
 });
+const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded-md";
+const disabledClasses = "opacity-50 pointer-events-none cursor-not-allowed";
+react.exports.forwardRef(({ className, disabled, ...rest }, ref) => {
+  return /* @__PURE__ */ react.exports.createElement("input", {
+    ref,
+    type: "text",
+    className: `${textFieldClasses} ${disabled ? disabledClasses : ""} ${className}`,
+    ...rest
+  });
+});
+react.exports.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ react.exports.createElement("textarea", {
+    ...props,
+    className: "shadow-inner text-base px-3 py-2 text-gray-600 resize-y focus:shadow-outline focus:border-blue-500 block w-full border border-gray-200 focus:text-gray-900 rounded-md",
+    ref,
+    style: { minHeight: "160px" }
+  });
+});
 function MdOutlinePhotoLibrary(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67l1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z" } }] })(props);
 }
+const Input = ({ ...props }) => {
+  return /* @__PURE__ */ react.exports.createElement("input", {
+    className: textFieldClasses,
+    ...props
+  });
+};
 function useCMS() {
   return useCMS$1();
 }
@@ -52968,13 +53001,79 @@ const dropzoneAcceptFromString = (str) => {
   return Object.assign({}, ...(str || DEFAULT_MEDIA_UPLOAD_TYPES).split(",").map((x2) => ({ [x2]: [] })));
 };
 const isImage = (filename) => {
-  return /\.(gif|jpg|jpeg|tiff|png|svg|webp)(\?.*)?$/i.test(filename);
+  return /\.(gif|jpg|jpeg|tiff|png|svg|webp|avif)(\?.*)?$/i.test(filename);
 };
 const absoluteImgURL = (str) => {
   if (str.startsWith("http"))
     return str;
   return `${window.location.origin}${str}`;
 };
+const StyledImage = ({ src }) => {
+  const isSvg = /\.svg$/.test(src);
+  return /* @__PURE__ */ react.exports.createElement("img", {
+    src,
+    className: `"block max-w-full rounded shadow overflow-hidden max-h-48 h-auto object-contain transition-opacity duration-100 ease-out m-0 bg-gray-200 bg-auto bg-center bg-no-repeat ${isSvg ? "min-w-[12rem]" : ""}`
+  });
+};
+const StyledFile = ({ src }) => {
+  return /* @__PURE__ */ react.exports.createElement("div", {
+    className: "max-w-full w-full overflow-hidden flex-1 flex justify-start items-center gap-3"
+  }, /* @__PURE__ */ react.exports.createElement("div", {
+    className: "w-14 h-14 bg-gray-50 shadow border border-gray-100 rounded flex justify-center flex-none"
+  }, /* @__PURE__ */ react.exports.createElement(BiFileBlank, {
+    className: "w-3/5 h-full fill-gray-300"
+  })), /* @__PURE__ */ react.exports.createElement("span", {
+    className: "text-base text-left flex-1 text-gray-500 w-full break-words truncate"
+  }, src));
+};
+react.exports.forwardRef(({ onDrop, onClear, onClick, value, src, loading }, ref) => {
+  const cms = useCMS();
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: dropzoneAcceptFromString(cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES),
+    onDrop,
+    noClick: !!onClick
+  });
+  return /* @__PURE__ */ react.exports.createElement("div", {
+    className: "w-full max-w-full",
+    ...getRootProps()
+  }, /* @__PURE__ */ react.exports.createElement("input", {
+    ...getInputProps()
+  }), value ? loading ? /* @__PURE__ */ react.exports.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ react.exports.createElement("div", {
+    className: `relative w-full max-w-full flex justify-start gap-3 ${isImage(src) ? `items-start` : `items-center`}`
+  }, /* @__PURE__ */ react.exports.createElement("button", {
+    className: "shadow-inner focus-within:shadow-outline focus-within:border-blue-500 outline-none overflow-visible cursor-pointer border-none hover:opacity-60 transition ease-out duration-100",
+    onClick,
+    ref
+  }, isImage(src) ? /* @__PURE__ */ react.exports.createElement(StyledImage, {
+    src
+  }) : /* @__PURE__ */ react.exports.createElement(StyledFile, {
+    src
+  })), onClear && /* @__PURE__ */ react.exports.createElement(DeleteImageButton, {
+    onClick: (e2) => {
+      e2.stopPropagation();
+      onClear();
+    }
+  })) : /* @__PURE__ */ react.exports.createElement("button", {
+    className: "outline-none relative hover:opacity-60 w-full",
+    onClick
+  }, loading ? /* @__PURE__ */ react.exports.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ react.exports.createElement("div", {
+    className: "text-center rounded-[5px] bg-gray-100 text-gray-300 leading-[1.35] py-3 text-[15px] font-normal transition-all ease-out duration-100 hover:opacity-60"
+  }, "Drag 'n' drop a file here,", /* @__PURE__ */ react.exports.createElement("br", null), "or click to select a file")));
+});
+const DeleteImageButton = ({
+  onClick
+}) => {
+  return /* @__PURE__ */ react.exports.createElement(IconButton, {
+    variant: "white",
+    className: "flex-none",
+    onClick
+  }, /* @__PURE__ */ react.exports.createElement(TrashIcon, {
+    className: "w-7 h-auto"
+  }));
+};
+const ImageLoadingIndicator = () => /* @__PURE__ */ react.exports.createElement("div", {
+  className: "p-4 w-full min-h-[96px] flex flex-col justify-center items-center"
+}, /* @__PURE__ */ react.exports.createElement(LoadingDots, null));
 const onKeyDownSoftBreak = (editor, { options: { rules = [] } }) => (event) => {
   const entry = getBlockAbove(editor);
   if (!entry)
@@ -54354,12 +54453,6 @@ class ClickOutBase extends React__default.Component {
   }
 }
 const ClickableWrapper = onClickOutsideHOC(ClickOutBase);
-react.exports.createContext({
-  currentBranch: null,
-  setCurrentBranch: (branch) => {
-    console.warn("BranchContext not initialized");
-  }
-});
 function CursorPaginator({
   navigateNext,
   navigatePrev,
@@ -54385,9 +54478,9 @@ function CursorPaginator({
 }
 function ListMediaItem({ item, onClick, active: active3 }) {
   const FileIcon = item.type === "dir" ? BiFolder : BiFile;
-  const thumbnail = item.thumbnails["75x75"];
+  const thumbnail = (item.thumbnails || {})["75x75"];
   return /* @__PURE__ */ React__default.createElement("li", {
-    className: `flex shrink-0 gap-3 items-center py-2 pl-2 pr-3 transition duration-150 ease-out cursor-pointer border-b border-gray-150 ${active3 ? "bg-gradient-to-r from-white to-gray-50/50 text-blue-500 hover:bg-gray-50" : "bg-white hover:bg-gray-50/50"}`,
+    className: `relative flex shrink-0 gap-3 items-center py-2 pl-2 pr-3 transition duration-150 ease-out cursor-pointer border-b border-gray-150 ${active3 ? "bg-gradient-to-r from-white to-gray-50/50 text-blue-500 hover:bg-gray-50" : "bg-white hover:bg-gray-50/50"}`,
     onClick: () => {
       if (!active3) {
         onClick(item);
@@ -54395,7 +54488,9 @@ function ListMediaItem({ item, onClick, active: active3 }) {
         onClick(false);
       }
     }
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, item.new && /* @__PURE__ */ React__default.createElement("span", {
+    className: "absolute top-1.5 left-1.5 rounded-full shadow bg-green-100 border border-green-200 text-[10px] tracking-wide	 font-bold text-green-600 px-1.5 py-0.5 z-10"
+  }, "NEW"), /* @__PURE__ */ React__default.createElement("div", {
     className: "w-20 h-20 bg-gray-50 shadow border border-gray-100 rounded overflow-hidden flex justify-center flex-shrink-0"
   }, isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
     className: "object-cover w-full h-full object-center",
@@ -54409,10 +54504,12 @@ function ListMediaItem({ item, onClick, active: active3 }) {
 }
 function GridMediaItem({ item, active: active3, onClick }) {
   const FileIcon = item.type === "dir" ? BiFolder : BiFile;
-  const thumbnail = item.thumbnails["400x400"];
+  const thumbnail = (item.thumbnails || {})["400x400"];
   return /* @__PURE__ */ React__default.createElement("li", {
     className: `relative pb-[100%] h-0 block border border-gray-100 rounded-md overflow-hidden flex justify-center shrink-0 w-full transition duration-150 ease-out ${active3 ? "shadow-outline" : "shadow hover:shadow-md hover:scale-103 hover:border-gray-150"} ${item.type === "dir" ? "cursor-pointer" : ""}`
-  }, /* @__PURE__ */ React__default.createElement("button", {
+  }, item.new && /* @__PURE__ */ React__default.createElement("span", {
+    className: "absolute top-1.5 left-1.5 rounded-full shadow bg-green-100 border border-green-200 text-[10px] tracking-wide	 font-bold text-green-600 px-1.5 py-0.5 z-10"
+  }, "NEW"), /* @__PURE__ */ React__default.createElement("button", {
     className: "absolute w-full h-full flex items-center justify-center bg-white",
     onClick: () => {
       if (!active3) {
@@ -54491,6 +54588,38 @@ const DeleteModal = ({
     }
   }, "Delete"))));
 };
+const NewFolderModal = ({ onSubmit, close }) => {
+  const [folderName, setFolderName] = React__default.useState("");
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, {
+    close
+  }, "New Folder"), /* @__PURE__ */ React__default.createElement(ModalBody, {
+    padded: true
+  }, /* @__PURE__ */ React__default.createElement("p", {
+    className: "text-base text-gray-700 mb-2"
+  }, "Please provide a name for your folder."), /* @__PURE__ */ React__default.createElement("p", {
+    className: "text-sm text-gray-500 mb-4 italic"
+  }, /* @__PURE__ */ React__default.createElement("span", {
+    className: "font-bold"
+  }, "Note"), " \u2013 If you navigate away before uploading a media item, the folder will disappear."), /* @__PURE__ */ React__default.createElement(Input, {
+    value: folderName,
+    placeholder: "Folder Name",
+    required: true,
+    onChange: (e2) => setFolderName(e2.target.value)
+  })), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, {
+    style: { flexGrow: 2 },
+    onClick: close
+  }, "Cancel"), /* @__PURE__ */ React__default.createElement(Button, {
+    disabled: !folderName,
+    style: { flexGrow: 3 },
+    variant: "primary",
+    onClick: () => {
+      if (!folderName)
+        return;
+      onSubmit(folderName);
+      close();
+    }
+  }, "Create New Folder"))));
+};
 const SyncModal = ({ close, syncFunc, folder, branch }) => {
   return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, {
     close
@@ -54587,6 +54716,7 @@ function MediaPicker({
     return "not-configured";
   });
   const [deleteModalOpen, setDeleteModalOpen] = React__default.useState(false);
+  const [newFolderModalOpen, setNewFolderModalOpen] = React__default.useState(false);
   const [listError, setListError] = react.exports.useState(defaultListError);
   const [directory, setDirectory] = react.exports.useState(props.directory);
   const [list2, setList] = react.exports.useState({
@@ -54644,7 +54774,7 @@ function MediaPicker({
     if (!cms.media.isConfigured)
       return;
     loadMedia();
-    return cms.events.subscribe(["media:upload:success", "media:delete:success", "media:pageSize"], loadMedia);
+    return cms.events.subscribe(["media:delete:success", "media:pageSize"], loadMedia);
   }, [offset2, directory, cms.media.isConfigured]);
   const onClickMediaItem = (item) => {
     if (!item) {
@@ -54674,15 +54804,50 @@ function MediaPicker({
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept: dropzoneAcceptFromString(cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES),
     multiple: true,
-    onDrop: async (files) => {
+    onDrop: async (files, fileRejections) => {
       try {
         setUploading(true);
-        await cms.media.persist(files.map((file) => {
+        const mediaItems = await cms.media.persist(files.map((file) => {
           return {
             directory: directory || "/",
             file
           };
         }));
+        const errorCodes = {
+          "file-invalid-type": "Invalid file type",
+          "file-too-large": "File too large",
+          "file-too-small": "File too small",
+          "too-many-files": "Too many files"
+        };
+        const printError = (error) => {
+          const message2 = errorCodes[error.code];
+          if (message2) {
+            return message2;
+          }
+          console.error(error);
+          return "Unknown error";
+        };
+        if (fileRejections.length > 0) {
+          const messages = [];
+          fileRejections.map((fileRejection) => {
+            messages.push(`${fileRejection.file.name}: ${fileRejection.errors.map((error) => printError(error)).join(", ")}`);
+          });
+          cms.alerts.error(() => {
+            return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, "Upload Failed. ", /* @__PURE__ */ React__default.createElement("br", null), messages.join(". "), ".");
+          });
+        }
+        if (mediaItems.length !== 0) {
+          setActiveItem(mediaItems[0]);
+          setList((mediaList) => {
+            return {
+              items: [
+                ...mediaItems.map((x2) => ({ ...x2, new: true })),
+                ...mediaList.items
+              ],
+              nextOffset: mediaList.nextOffset
+            };
+          });
+        }
       } catch {
       }
       setUploading(false);
@@ -54756,28 +54921,47 @@ function MediaPicker({
       }
     },
     close: () => setDeleteModalOpen(false)
+  }), newFolderModalOpen && /* @__PURE__ */ React__default.createElement(NewFolderModal, {
+    onSubmit: (name) => {
+      setDirectory((oldDir) => {
+        if (oldDir) {
+          return join(oldDir, name);
+        } else {
+          return name;
+        }
+      });
+      resetOffset();
+    },
+    close: () => setNewFolderModalOpen(false)
   }), /* @__PURE__ */ React__default.createElement(MediaPickerWrap, null, /* @__PURE__ */ React__default.createElement("div", {
-    className: "flex items-center bg-gray-50 border-b border-gray-150 gap-x-4 py-3 px-5 shadow-sm flex-shrink-0"
+    className: "flex flex-wrap items-center bg-gray-50 border-b border-gray-150 gap-4 py-3 px-5 shadow-sm flex-shrink-0"
   }, /* @__PURE__ */ React__default.createElement("div", {
-    className: `grow-0 flex divide-x divide-gray-150 shadow-inner bg-gray-50 border border-gray-150 justify-between rounded-md`
-  }, /* @__PURE__ */ React__default.createElement("button", {
-    className: `relative whitespace-nowrap flex items-center justify-center flex-1 block font-medium text-base px-2.5 py-1 transition-all ease-out duration-150 rounded-l-md ${viewMode === "grid" ? "bg-white text-blue-500 shadow" : "text-gray-400"}`,
-    onClick: () => {
-      setViewMode("grid");
-    }
-  }, /* @__PURE__ */ React__default.createElement(BiGridAlt, {
-    className: "w-6 h-full opacity-70"
-  })), /* @__PURE__ */ React__default.createElement("button", {
-    className: `relative whitespace-nowrap flex items-center justify-center flex-1 block font-medium text-base px-2 py-1 transition-all ease-out duration-150 rounded-r-md ${viewMode === "list" ? "bg-white text-blue-500 shadow" : "text-gray-400"}`,
-    onClick: () => {
-      setViewMode("list");
-    }
-  }, /* @__PURE__ */ React__default.createElement(BiListUl, {
-    className: "w-8 h-full opacity-70"
-  }))), /* @__PURE__ */ React__default.createElement(Breadcrumb, {
+    className: "flex flex-1 items-center gap-4"
+  }, /* @__PURE__ */ React__default.createElement(ViewModeToggle, {
+    viewMode,
+    setViewMode
+  }), /* @__PURE__ */ React__default.createElement(Breadcrumb, {
     directory,
     setDirectory
-  }), !isLocal2 && hasTinaMedia && /* @__PURE__ */ React__default.createElement(Button, {
+  })), /* @__PURE__ */ React__default.createElement("div", {
+    className: "flex items-center gap-4"
+  }, /* @__PURE__ */ React__default.createElement(Button, {
+    busy: false,
+    variant: "white",
+    onClick: loadMedia,
+    className: "whitespace-nowrap"
+  }, "Refresh", /* @__PURE__ */ React__default.createElement(IoMdRefresh, {
+    className: "w-6 h-full ml-2 opacity-70 text-blue-500"
+  })), /* @__PURE__ */ React__default.createElement(Button, {
+    busy: false,
+    variant: "white",
+    onClick: () => {
+      setNewFolderModalOpen(true);
+    },
+    className: "whitespace-nowrap"
+  }, "New Folder", /* @__PURE__ */ React__default.createElement(BiFolder, {
+    className: "w-6 h-full ml-2 opacity-70 text-blue-500"
+  })), !isLocal2 && hasTinaMedia && /* @__PURE__ */ React__default.createElement(Button, {
     busy: false,
     variant: "white",
     onClick: () => {
@@ -54788,7 +54972,7 @@ function MediaPicker({
   })), /* @__PURE__ */ React__default.createElement(UploadButton, {
     onClick,
     uploading
-  })), /* @__PURE__ */ React__default.createElement("div", {
+  }))), /* @__PURE__ */ React__default.createElement("div", {
     className: "flex h-full overflow-hidden bg-white"
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: "flex w-full flex-col h-full @container"
@@ -54840,7 +55024,7 @@ const ActiveItemPreview = ({
   deleteMediaItem,
   allowDelete
 }) => {
-  const thumbnail = activeItem ? activeItem.thumbnails["1000x1000"] : "";
+  const thumbnail = activeItem ? (activeItem.thumbnails || {})["1000x1000"] : "";
   return /* @__PURE__ */ React__default.createElement("div", {
     className: `shrink-0 h-full flex flex-col items-start gap-3 overflow-y-auto bg-white border-l border-gray-100 bg-white shadow-md transition ease-out duration-150 ${activeItem ? `p-4 opacity-100 w-[35%] max-w-[560px] min-w-[240px]` : `translate-x-8 opacity-0 w-[0px]`}`
   }, activeItem && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
@@ -54933,6 +55117,30 @@ const DocsLink = ({ title, message: message2, docsLink, ...props }) => {
     className: "font-bold text-blue-500 hover:text-blue-600 hover:underline transition-all ease-out duration-150"
   }, "Learn More"));
 };
+const ViewModeToggle = ({ viewMode, setViewMode }) => {
+  const toggleClasses = {
+    base: "relative whitespace-nowrap flex items-center justify-center flex-1 block font-medium text-base py-1 transition-all ease-out duration-150 border",
+    active: "bg-white text-blue-500 shadow-inner border-gray-50 border-t-gray-100",
+    inactive: "bg-gray-50 text-gray-400 shadow border-gray-100 border-t-white"
+  };
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: `grow-0 flex justify-between rounded-md border border-gray-100`
+  }, /* @__PURE__ */ React__default.createElement("button", {
+    className: `${toggleClasses.base} px-2.5 rounded-l-md ${viewMode === "grid" ? toggleClasses.active : toggleClasses.inactive}`,
+    onClick: () => {
+      setViewMode("grid");
+    }
+  }, /* @__PURE__ */ React__default.createElement(BiGridAlt, {
+    className: "w-6 h-full opacity-70"
+  })), /* @__PURE__ */ React__default.createElement("button", {
+    className: `${toggleClasses.base} px-2 rounded-r-md ${viewMode === "list" ? toggleClasses.active : toggleClasses.inactive}`,
+    onClick: () => {
+      setViewMode("list");
+    }
+  }, /* @__PURE__ */ React__default.createElement(BiListUl, {
+    className: "w-8 h-full opacity-70"
+  })));
+};
 createScreen({
   name: "Media Manager",
   Component: MediaPicker,
@@ -54943,6 +55151,12 @@ createScreen({
   }
 });
 react.exports.createContext(-1);
+react.exports.createContext({
+  currentBranch: null,
+  setCurrentBranch: (branch) => {
+    console.warn("BranchContext not initialized");
+  }
+});
 react.exports.createContext(null);
 class MediaListError extends Error {
   constructor(config2) {

package/dist/index.js

@@ -52679,11 +52679,13 @@
   const ERROR_MISSING_CMS = `useCMS could not find an instance of CMS`;
   const CMSContext = react.exports.createContext(null);
   function useCMS$1() {
-    const cms = react.exports.useContext(CMSContext);
+    const { cms, dispatch, state } = react.exports.useContext(CMSContext);
     if (!cms) {
       throw new Error(ERROR_MISSING_CMS);
     }
     const [, setEnabled] = react.exports.useState(cms.enabled);
+    cms.dispatch = dispatch;
+    cms.state = state;
     react.exports.useEffect(() => {
       return cms.events.subscribe("cms", () => {
         setEnabled(cms.enabled);
@@ -52743,7 +52745,8 @@
     const roundedClasses = {
       full: `rounded-full`,
       left: `rounded-l-full`,
-      right: `rounded-r-full`
+      right: `rounded-r-full`,
+      custom: ""
     };
     const sizeClasses = {
       small: `text-xs h-8 px-3`,
@@ -52892,6 +52895,12 @@
       return elem(conf);
     }) : elem(DefaultContext);
   }
+  function IoMdRefresh(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 388c-72.597 0-132-59.405-132-132 0-72.601 59.403-132 132-132 36.3 0 69.299 15.4 92.406 39.601L278 234h154V80l-51.698 51.702C348.406 99.798 304.406 80 256 80c-96.797 0-176 79.203-176 176s78.094 176 176 176c81.045 0 148.287-54.134 169.401-128H378.85c-18.745 49.561-67.138 84-122.85 84z" } }] })(props);
+  }
+  function IoMdSync(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 93.09V32l-80 81.454 80 81.456v-61.093c65.996 0 120 54.982 120 122.183 0 20.363-5 39.714-14.004 57.016L391 342.547c15.996-25.457 25-54.988 25-86.547 0-89.599-72.002-162.91-160-162.91zm0 285.094c-66.001 0-120-54.988-120-122.184 0-20.363 5-39.709 13.999-57.02L121 169.454C104.999 193.89 96 224.436 96 256c0 89.599 72.002 162.91 160 162.91V480l80-81.453-80-81.457v61.094z" } }] })(props);
+  }
   function BiArrowToBottom(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M6 18h12v2H6zm5-14v8.586L6.707 8.293 5.293 9.707 12 16.414l6.707-6.707-1.414-1.414L13 12.586V4z" } }] })(props);
   }
@@ -52901,6 +52910,9 @@
   function BiCopyAlt(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z" } }, { "tag": "path", "attr": { "d": "M6 12h6v2H6zm0 4h6v2H6z" } }] })(props);
   }
+  function BiFileBlank(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.937 8.68c-.011-.032-.02-.063-.033-.094a.997.997 0 0 0-.196-.293l-6-6a.997.997 0 0 0-.293-.196c-.03-.014-.062-.022-.094-.033a.991.991 0 0 0-.259-.051C13.04 2.011 13.021 2 13 2H6c-1.103 0-2 .897-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V9c0-.021-.011-.04-.013-.062a.99.99 0 0 0-.05-.258zM16.586 8H14V5.414L16.586 8zM6 20V4h6v5a1 1 0 0 0 1 1h5l.002 10H6z" } }] })(props);
+  }
   function BiFile(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M19.903 8.586a.997.997 0 0 0-.196-.293l-6-6a.997.997 0 0 0-.293-.196c-.03-.014-.062-.022-.094-.033a.991.991 0 0 0-.259-.051C13.04 2.011 13.021 2 13 2H6c-1.103 0-2 .897-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V9c0-.021-.011-.04-.013-.062a.952.952 0 0 0-.051-.259c-.01-.032-.019-.063-.033-.093zM16.586 8H14V5.414L16.586 8zM6 20V4h6v5a1 1 0 0 0 1 1h5l.002 10H6z" } }, { "tag": "path", "attr": { "d": "M8 12h8v2H8zm0 4h8v2H8zm0-8h2v2H8z" } }] })(props);
   }
@@ -52922,9 +52934,6 @@
   function BiX(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z" } }] })(props);
   }
-  function IoMdSync(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 93.09V32l-80 81.454 80 81.456v-61.093c65.996 0 120 54.982 120 122.183 0 20.363-5 39.714-14.004 57.016L391 342.547c15.996-25.457 25-54.988 25-86.547 0-89.599-72.002-162.91-160-162.91zm0 285.094c-66.001 0-120-54.988-120-122.184 0-20.363 5-39.709 13.999-57.02L121 169.454C104.999 193.89 96 224.436 96 256c0 89.599 72.002 162.91 160 162.91V480l80-81.453-80-81.457v61.094z" } }] })(props);
-  }
   React__default.createContext({
     rawMode: false,
     setRawMode: () => {
@@ -52949,9 +52958,33 @@
     isVoid: true,
     isInline: true
   });
+  const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded-md";
+  const disabledClasses = "opacity-50 pointer-events-none cursor-not-allowed";
+  react.exports.forwardRef(({ className, disabled, ...rest }, ref) => {
+    return /* @__PURE__ */ react.exports.createElement("input", {
+      ref,
+      type: "text",
+      className: `${textFieldClasses} ${disabled ? disabledClasses : ""} ${className}`,
+      ...rest
+    });
+  });
+  react.exports.forwardRef(({ ...props }, ref) => {
+    return /* @__PURE__ */ react.exports.createElement("textarea", {
+      ...props,
+      className: "shadow-inner text-base px-3 py-2 text-gray-600 resize-y focus:shadow-outline focus:border-blue-500 block w-full border border-gray-200 focus:text-gray-900 rounded-md",
+      ref,
+      style: { minHeight: "160px" }
+    });
+  });
   function MdOutlinePhotoLibrary(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67l1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z" } }] })(props);
   }
+  const Input = ({ ...props }) => {
+    return /* @__PURE__ */ react.exports.createElement("input", {
+      className: textFieldClasses,
+      ...props
+    });
+  };
   function useCMS() {
     return useCMS$1();
   }
@@ -52972,13 +53005,79 @@
     return Object.assign({}, ...(str || DEFAULT_MEDIA_UPLOAD_TYPES).split(",").map((x2) => ({ [x2]: [] })));
   };
   const isImage = (filename) => {
-    return /\.(gif|jpg|jpeg|tiff|png|svg|webp)(\?.*)?$/i.test(filename);
+    return /\.(gif|jpg|jpeg|tiff|png|svg|webp|avif)(\?.*)?$/i.test(filename);
   };
   const absoluteImgURL = (str) => {
     if (str.startsWith("http"))
       return str;
     return `${window.location.origin}${str}`;
   };
+  const StyledImage = ({ src }) => {
+    const isSvg = /\.svg$/.test(src);
+    return /* @__PURE__ */ react.exports.createElement("img", {
+      src,
+      className: `"block max-w-full rounded shadow overflow-hidden max-h-48 h-auto object-contain transition-opacity duration-100 ease-out m-0 bg-gray-200 bg-auto bg-center bg-no-repeat ${isSvg ? "min-w-[12rem]" : ""}`
+    });
+  };
+  const StyledFile = ({ src }) => {
+    return /* @__PURE__ */ react.exports.createElement("div", {
+      className: "max-w-full w-full overflow-hidden flex-1 flex justify-start items-center gap-3"
+    }, /* @__PURE__ */ react.exports.createElement("div", {
+      className: "w-14 h-14 bg-gray-50 shadow border border-gray-100 rounded flex justify-center flex-none"
+    }, /* @__PURE__ */ react.exports.createElement(BiFileBlank, {
+      className: "w-3/5 h-full fill-gray-300"
+    })), /* @__PURE__ */ react.exports.createElement("span", {
+      className: "text-base text-left flex-1 text-gray-500 w-full break-words truncate"
+    }, src));
+  };
+  react.exports.forwardRef(({ onDrop, onClear, onClick, value, src, loading }, ref) => {
+    const cms = useCMS();
+    const { getRootProps, getInputProps } = useDropzone({
+      accept: dropzoneAcceptFromString(cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES),
+      onDrop,
+      noClick: !!onClick
+    });
+    return /* @__PURE__ */ react.exports.createElement("div", {
+      className: "w-full max-w-full",
+      ...getRootProps()
+    }, /* @__PURE__ */ react.exports.createElement("input", {
+      ...getInputProps()
+    }), value ? loading ? /* @__PURE__ */ react.exports.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ react.exports.createElement("div", {
+      className: `relative w-full max-w-full flex justify-start gap-3 ${isImage(src) ? `items-start` : `items-center`}`
+    }, /* @__PURE__ */ react.exports.createElement("button", {
+      className: "shadow-inner focus-within:shadow-outline focus-within:border-blue-500 outline-none overflow-visible cursor-pointer border-none hover:opacity-60 transition ease-out duration-100",
+      onClick,
+      ref
+    }, isImage(src) ? /* @__PURE__ */ react.exports.createElement(StyledImage, {
+      src
+    }) : /* @__PURE__ */ react.exports.createElement(StyledFile, {
+      src
+    })), onClear && /* @__PURE__ */ react.exports.createElement(DeleteImageButton, {
+      onClick: (e2) => {
+        e2.stopPropagation();
+        onClear();
+      }
+    })) : /* @__PURE__ */ react.exports.createElement("button", {
+      className: "outline-none relative hover:opacity-60 w-full",
+      onClick
+    }, loading ? /* @__PURE__ */ react.exports.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ react.exports.createElement("div", {
+      className: "text-center rounded-[5px] bg-gray-100 text-gray-300 leading-[1.35] py-3 text-[15px] font-normal transition-all ease-out duration-100 hover:opacity-60"
+    }, "Drag 'n' drop a file here,", /* @__PURE__ */ react.exports.createElement("br", null), "or click to select a file")));
+  });
+  const DeleteImageButton = ({
+    onClick
+  }) => {
+    return /* @__PURE__ */ react.exports.createElement(IconButton, {
+      variant: "white",
+      className: "flex-none",
+      onClick
+    }, /* @__PURE__ */ react.exports.createElement(TrashIcon, {
+      className: "w-7 h-auto"
+    }));
+  };
+  const ImageLoadingIndicator = () => /* @__PURE__ */ react.exports.createElement("div", {
+    className: "p-4 w-full min-h-[96px] flex flex-col justify-center items-center"
+  }, /* @__PURE__ */ react.exports.createElement(LoadingDots, null));
   const onKeyDownSoftBreak = (editor, { options: { rules = [] } }) => (event) => {
     const entry = getBlockAbove(editor);
     if (!entry)
@@ -54358,12 +54457,6 @@
     }
   }
   const ClickableWrapper = onClickOutsideHOC(ClickOutBase);
-  react.exports.createContext({
-    currentBranch: null,
-    setCurrentBranch: (branch) => {
-      console.warn("BranchContext not initialized");
-    }
-  });
   function CursorPaginator({
     navigateNext,
     navigatePrev,
@@ -54389,9 +54482,9 @@
   }
   function ListMediaItem({ item, onClick, active: active2 }) {
     const FileIcon = item.type === "dir" ? BiFolder : BiFile;
-    const thumbnail = item.thumbnails["75x75"];
+    const thumbnail = (item.thumbnails || {})["75x75"];
     return /* @__PURE__ */ React__default.createElement("li", {
-      className: `flex shrink-0 gap-3 items-center py-2 pl-2 pr-3 transition duration-150 ease-out cursor-pointer border-b border-gray-150 ${active2 ? "bg-gradient-to-r from-white to-gray-50/50 text-blue-500 hover:bg-gray-50" : "bg-white hover:bg-gray-50/50"}`,
+      className: `relative flex shrink-0 gap-3 items-center py-2 pl-2 pr-3 transition duration-150 ease-out cursor-pointer border-b border-gray-150 ${active2 ? "bg-gradient-to-r from-white to-gray-50/50 text-blue-500 hover:bg-gray-50" : "bg-white hover:bg-gray-50/50"}`,
       onClick: () => {
         if (!active2) {
           onClick(item);
@@ -54399,7 +54492,9 @@
           onClick(false);
         }
       }
-    }, /* @__PURE__ */ React__default.createElement("div", {
+    }, item.new && /* @__PURE__ */ React__default.createElement("span", {
+      className: "absolute top-1.5 left-1.5 rounded-full shadow bg-green-100 border border-green-200 text-[10px] tracking-wide	 font-bold text-green-600 px-1.5 py-0.5 z-10"
+    }, "NEW"), /* @__PURE__ */ React__default.createElement("div", {
       className: "w-20 h-20 bg-gray-50 shadow border border-gray-100 rounded overflow-hidden flex justify-center flex-shrink-0"
     }, isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
       className: "object-cover w-full h-full object-center",
@@ -54413,10 +54508,12 @@
   }
   function GridMediaItem({ item, active: active2, onClick }) {
     const FileIcon = item.type === "dir" ? BiFolder : BiFile;
-    const thumbnail = item.thumbnails["400x400"];
+    const thumbnail = (item.thumbnails || {})["400x400"];
     return /* @__PURE__ */ React__default.createElement("li", {
       className: `relative pb-[100%] h-0 block border border-gray-100 rounded-md overflow-hidden flex justify-center shrink-0 w-full transition duration-150 ease-out ${active2 ? "shadow-outline" : "shadow hover:shadow-md hover:scale-103 hover:border-gray-150"} ${item.type === "dir" ? "cursor-pointer" : ""}`
-    }, /* @__PURE__ */ React__default.createElement("button", {
+    }, item.new && /* @__PURE__ */ React__default.createElement("span", {
+      className: "absolute top-1.5 left-1.5 rounded-full shadow bg-green-100 border border-green-200 text-[10px] tracking-wide	 font-bold text-green-600 px-1.5 py-0.5 z-10"
+    }, "NEW"), /* @__PURE__ */ React__default.createElement("button", {
       className: "absolute w-full h-full flex items-center justify-center bg-white",
       onClick: () => {
         if (!active2) {
@@ -54495,6 +54592,38 @@
       }
     }, "Delete"))));
   };
+  const NewFolderModal = ({ onSubmit, close }) => {
+    const [folderName, setFolderName] = React__default.useState("");
+    return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, {
+      close
+    }, "New Folder"), /* @__PURE__ */ React__default.createElement(ModalBody, {
+      padded: true
+    }, /* @__PURE__ */ React__default.createElement("p", {
+      className: "text-base text-gray-700 mb-2"
+    }, "Please provide a name for your folder."), /* @__PURE__ */ React__default.createElement("p", {
+      className: "text-sm text-gray-500 mb-4 italic"
+    }, /* @__PURE__ */ React__default.createElement("span", {
+      className: "font-bold"
+    }, "Note"), " \u2013 If you navigate away before uploading a media item, the folder will disappear."), /* @__PURE__ */ React__default.createElement(Input, {
+      value: folderName,
+      placeholder: "Folder Name",
+      required: true,
+      onChange: (e2) => setFolderName(e2.target.value)
+    })), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, {
+      style: { flexGrow: 2 },
+      onClick: close
+    }, "Cancel"), /* @__PURE__ */ React__default.createElement(Button, {
+      disabled: !folderName,
+      style: { flexGrow: 3 },
+      variant: "primary",
+      onClick: () => {
+        if (!folderName)
+          return;
+        onSubmit(folderName);
+        close();
+      }
+    }, "Create New Folder"))));
+  };
   const SyncModal = ({ close, syncFunc, folder, branch }) => {
     return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, {
       close
@@ -54591,6 +54720,7 @@
       return "not-configured";
     });
     const [deleteModalOpen, setDeleteModalOpen] = React__default.useState(false);
+    const [newFolderModalOpen, setNewFolderModalOpen] = React__default.useState(false);
     const [listError, setListError] = react.exports.useState(defaultListError);
     const [directory, setDirectory] = react.exports.useState(props.directory);
     const [list2, setList] = react.exports.useState({
@@ -54648,7 +54778,7 @@
       if (!cms.media.isConfigured)
         return;
       loadMedia();
-      return cms.events.subscribe(["media:upload:success", "media:delete:success", "media:pageSize"], loadMedia);
+      return cms.events.subscribe(["media:delete:success", "media:pageSize"], loadMedia);
     }, [offset2, directory, cms.media.isConfigured]);
     const onClickMediaItem = (item) => {
       if (!item) {
@@ -54678,15 +54808,50 @@
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
       accept: dropzoneAcceptFromString(cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES),
       multiple: true,
-      onDrop: async (files) => {
+      onDrop: async (files, fileRejections) => {
         try {
           setUploading(true);
-          await cms.media.persist(files.map((file) => {
+          const mediaItems = await cms.media.persist(files.map((file) => {
             return {
               directory: directory || "/",
               file
             };
           }));
+          const errorCodes = {
+            "file-invalid-type": "Invalid file type",
+            "file-too-large": "File too large",
+            "file-too-small": "File too small",
+            "too-many-files": "Too many files"
+          };
+          const printError = (error) => {
+            const message2 = errorCodes[error.code];
+            if (message2) {
+              return message2;
+            }
+            console.error(error);
+            return "Unknown error";
+          };
+          if (fileRejections.length > 0) {
+            const messages = [];
+            fileRejections.map((fileRejection) => {
+              messages.push(`${fileRejection.file.name}: ${fileRejection.errors.map((error) => printError(error)).join(", ")}`);
+            });
+            cms.alerts.error(() => {
+              return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, "Upload Failed. ", /* @__PURE__ */ React__default.createElement("br", null), messages.join(". "), ".");
+            });
+          }
+          if (mediaItems.length !== 0) {
+            setActiveItem(mediaItems[0]);
+            setList((mediaList) => {
+              return {
+                items: [
+                  ...mediaItems.map((x2) => ({ ...x2, new: true })),
+                  ...mediaList.items
+                ],
+                nextOffset: mediaList.nextOffset
+              };
+            });
+          }
         } catch {
         }
         setUploading(false);
@@ -54760,28 +54925,47 @@
         }
       },
       close: () => setDeleteModalOpen(false)
+    }), newFolderModalOpen && /* @__PURE__ */ React__default.createElement(NewFolderModal, {
+      onSubmit: (name2) => {
+        setDirectory((oldDir) => {
+          if (oldDir) {
+            return join(oldDir, name2);
+          } else {
+            return name2;
+          }
+        });
+        resetOffset();
+      },
+      close: () => setNewFolderModalOpen(false)
     }), /* @__PURE__ */ React__default.createElement(MediaPickerWrap, null, /* @__PURE__ */ React__default.createElement("div", {
-      className: "flex items-center bg-gray-50 border-b border-gray-150 gap-x-4 py-3 px-5 shadow-sm flex-shrink-0"
+      className: "flex flex-wrap items-center bg-gray-50 border-b border-gray-150 gap-4 py-3 px-5 shadow-sm flex-shrink-0"
     }, /* @__PURE__ */ React__default.createElement("div", {
-      className: `grow-0 flex divide-x divide-gray-150 shadow-inner bg-gray-50 border border-gray-150 justify-between rounded-md`
-    }, /* @__PURE__ */ React__default.createElement("button", {
-      className: `relative whitespace-nowrap flex items-center justify-center flex-1 block font-medium text-base px-2.5 py-1 transition-all ease-out duration-150 rounded-l-md ${viewMode === "grid" ? "bg-white text-blue-500 shadow" : "text-gray-400"}`,
-      onClick: () => {
-        setViewMode("grid");
-      }
-    }, /* @__PURE__ */ React__default.createElement(BiGridAlt, {
-      className: "w-6 h-full opacity-70"
-    })), /* @__PURE__ */ React__default.createElement("button", {
-      className: `relative whitespace-nowrap flex items-center justify-center flex-1 block font-medium text-base px-2 py-1 transition-all ease-out duration-150 rounded-r-md ${viewMode === "list" ? "bg-white text-blue-500 shadow" : "text-gray-400"}`,
-      onClick: () => {
-        setViewMode("list");
-      }
-    }, /* @__PURE__ */ React__default.createElement(BiListUl, {
-      className: "w-8 h-full opacity-70"
-    }))), /* @__PURE__ */ React__default.createElement(Breadcrumb, {
+      className: "flex flex-1 items-center gap-4"
+    }, /* @__PURE__ */ React__default.createElement(ViewModeToggle, {
+      viewMode,
+      setViewMode
+    }), /* @__PURE__ */ React__default.createElement(Breadcrumb, {
       directory,
       setDirectory
-    }), !isLocal2 && hasTinaMedia && /* @__PURE__ */ React__default.createElement(Button, {
+    })), /* @__PURE__ */ React__default.createElement("div", {
+      className: "flex items-center gap-4"
+    }, /* @__PURE__ */ React__default.createElement(Button, {
+      busy: false,
+      variant: "white",
+      onClick: loadMedia,
+      className: "whitespace-nowrap"
+    }, "Refresh", /* @__PURE__ */ React__default.createElement(IoMdRefresh, {
+      className: "w-6 h-full ml-2 opacity-70 text-blue-500"
+    })), /* @__PURE__ */ React__default.createElement(Button, {
+      busy: false,
+      variant: "white",
+      onClick: () => {
+        setNewFolderModalOpen(true);
+      },
+      className: "whitespace-nowrap"
+    }, "New Folder", /* @__PURE__ */ React__default.createElement(BiFolder, {
+      className: "w-6 h-full ml-2 opacity-70 text-blue-500"
+    })), !isLocal2 && hasTinaMedia && /* @__PURE__ */ React__default.createElement(Button, {
       busy: false,
       variant: "white",
       onClick: () => {
@@ -54792,7 +54976,7 @@
     })), /* @__PURE__ */ React__default.createElement(UploadButton, {
       onClick,
       uploading
-    })), /* @__PURE__ */ React__default.createElement("div", {
+    }))), /* @__PURE__ */ React__default.createElement("div", {
       className: "flex h-full overflow-hidden bg-white"
     }, /* @__PURE__ */ React__default.createElement("div", {
       className: "flex w-full flex-col h-full @container"
@@ -54844,7 +55028,7 @@
     deleteMediaItem,
     allowDelete
   }) => {
-    const thumbnail = activeItem ? activeItem.thumbnails["1000x1000"] : "";
+    const thumbnail = activeItem ? (activeItem.thumbnails || {})["1000x1000"] : "";
     return /* @__PURE__ */ React__default.createElement("div", {
       className: `shrink-0 h-full flex flex-col items-start gap-3 overflow-y-auto bg-white border-l border-gray-100 bg-white shadow-md transition ease-out duration-150 ${activeItem ? `p-4 opacity-100 w-[35%] max-w-[560px] min-w-[240px]` : `translate-x-8 opacity-0 w-[0px]`}`
     }, activeItem && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
@@ -54937,6 +55121,30 @@
       className: "font-bold text-blue-500 hover:text-blue-600 hover:underline transition-all ease-out duration-150"
     }, "Learn More"));
   };
+  const ViewModeToggle = ({ viewMode, setViewMode }) => {
+    const toggleClasses = {
+      base: "relative whitespace-nowrap flex items-center justify-center flex-1 block font-medium text-base py-1 transition-all ease-out duration-150 border",
+      active: "bg-white text-blue-500 shadow-inner border-gray-50 border-t-gray-100",
+      inactive: "bg-gray-50 text-gray-400 shadow border-gray-100 border-t-white"
+    };
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: `grow-0 flex justify-between rounded-md border border-gray-100`
+    }, /* @__PURE__ */ React__default.createElement("button", {
+      className: `${toggleClasses.base} px-2.5 rounded-l-md ${viewMode === "grid" ? toggleClasses.active : toggleClasses.inactive}`,
+      onClick: () => {
+        setViewMode("grid");
+      }
+    }, /* @__PURE__ */ React__default.createElement(BiGridAlt, {
+      className: "w-6 h-full opacity-70"
+    })), /* @__PURE__ */ React__default.createElement("button", {
+      className: `${toggleClasses.base} px-2 rounded-r-md ${viewMode === "list" ? toggleClasses.active : toggleClasses.inactive}`,
+      onClick: () => {
+        setViewMode("list");
+      }
+    }, /* @__PURE__ */ React__default.createElement(BiListUl, {
+      className: "w-8 h-full opacity-70"
+    })));
+  };
   createScreen({
     name: "Media Manager",
     Component: MediaPicker,
@@ -54947,6 +55155,12 @@
     }
   });
   react.exports.createContext(-1);
+  react.exports.createContext({
+    currentBranch: null,
+    setCurrentBranch: (branch) => {
+      console.warn("BranchContext not initialized");
+    }
+  });
   react.exports.createContext(null);
   class MediaListError extends Error {
     constructor(config2) {

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "next-tinacms-cloudinary",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "main": "dist/index.js",
+  "module": "dist/index.es.js",
   "files": [
     "dist"
   ],
@@ -21,13 +22,13 @@
     "multer": "1.4.5-lts.1"
   },
   "devDependencies": {
-    "@tinacms/toolkit": "1.5.0",
-    "@tinacms/scripts": "1.0.4",
+    "@tinacms/toolkit": "1.7.2",
+    "@tinacms/scripts": "1.1.0",
     "@types/crypto-js": "^3.1.47",
     "@types/js-cookie": "^2.2.6",
     "@types/node": "^13.13.1",
     "next": "12.2.4",
-    "tinacms": "1.3.1",
+    "tinacms": "1.5.6",
     "typescript": "4.3.5"
   },
   "peerDependencies": {},