next-tinacms-cloudinary 4.2.0 → 4.3.1

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,12 +52895,24 @@
       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);
   }
   function BiCloudUpload(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M13 19v-4h3l-4-5-4 5h3v4z" } }, { "tag": "path", "attr": { "d": "M7 19h2v-2H7c-1.654 0-3-1.346-3-3 0-1.404 1.199-2.756 2.673-3.015l.581-.102.192-.558C8.149 8.274 9.895 7 12 7c2.757 0 5 2.243 5 5v1h1c1.103 0 2 .897 2 2s-.897 2-2 2h-3v2h3c2.206 0 4-1.794 4-4a4.01 4.01 0 0 0-3.056-3.888C18.507 7.67 15.56 5 12 5 9.244 5 6.85 6.611 5.757 9.15 3.609 9.792 2 11.82 2 14c0 2.757 2.243 5 5 5z" } }] })(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);
   }
@@ -52916,8 +52931,8 @@
   function BiRightArrowAlt(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" } }] })(props);
   }
-  function 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 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);
   }
   React__default.createContext({
     rawMode: false,
@@ -52943,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();
   }
@@ -52966,8 +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)
@@ -54347,12 +54457,6 @@
     }
   }
   const ClickableWrapper = onClickOutsideHOC(ClickOutBase);
-  react.exports.createContext({
-    currentBranch: null,
-    setCurrentBranch: (branch) => {
-      console.warn("BranchContext not initialized");
-    }
-  });
   function CursorPaginator({
     navigateNext,
     navigatePrev,
@@ -54376,50 +54480,41 @@
       className: "w-6 h-full ml-2 opacity-70"
     })));
   }
-  function ListMediaItem({
-    item,
-    onClick,
-    onSelect,
-    onDelete
-  }) {
+  function ListMediaItem({ item, onClick, active: active2 }) {
     const FileIcon = item.type === "dir" ? BiFolder : BiFile;
+    const thumbnail = (item.thumbnails || {})["75x75"];
     return /* @__PURE__ */ React__default.createElement("li", {
-      className: "flex gap-3 items-center py-2 pl-2 pr-3 bg-white transition duration-150 ease-out hover:bg-white/50 " + (item.type === "dir" ? "cursor-pointer" : ""),
-      onClick: () => onClick(item)
-    }, /* @__PURE__ */ React__default.createElement("div", {
+      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);
+        } else {
+          onClick(false);
+        }
+      }
+    }, 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(item.thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
+    }, isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
       className: "object-cover w-full h-full object-center",
-      src: item.thumbnail,
+      src: thumbnail,
       alt: item.filename
     }) : /* @__PURE__ */ React__default.createElement(FileIcon, {
       className: "w-3/5 h-full fill-gray-300"
-    })), /* @__PURE__ */ React__default.createElement(Filename, null, item.filename), /* @__PURE__ */ React__default.createElement("div", {
-      className: "flex justify-end gap-3 items-center group transition duration-150 ease-out opacity-70 hover:opacity-100"
-    }, onSelect && item.type === "file" && /* @__PURE__ */ React__default.createElement(Button, {
-      size: "medium",
-      variant: "white",
-      onClick: () => onSelect(item)
-    }, "Insert", " ", /* @__PURE__ */ React__default.createElement(BiArrowToBottom, {
-      className: "ml-1 -mr-0.5 w-6 h-auto text-blue-500 opacity-70"
-    })), onDelete && item.type === "file" && /* @__PURE__ */ React__default.createElement(IconButton, {
-      variant: "ghost",
-      size: "medium",
-      onClick: () => onDelete(item)
-    }, /* @__PURE__ */ React__default.createElement(TrashIcon, {
-      className: "w-6 h-auto"
-    }))));
+    })), /* @__PURE__ */ React__default.createElement("span", {
+      className: "text-base flex-grow w-full break-words truncate"
+    }, item.filename));
   }
-  const Filename = ({ className = "", ...props }) => /* @__PURE__ */ React__default.createElement("span", {
-    className: "text-base flex-grow w-full break-words truncate " + className,
-    ...props
-  });
   function GridMediaItem({ item, active: active2, onClick }) {
     const FileIcon = item.type === "dir" ? BiFolder : BiFile;
+    const thumbnail = (item.thumbnails || {})["400x400"];
     return /* @__PURE__ */ React__default.createElement("li", {
-      className: `relative pb-[100%] h-0 block shadow border border-gray-100 rounded-md overflow-hidden flex justify-center shrink-0 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", {
-      className: "absolute w-full h-full flex items-center justify-center bg-gray-50",
+      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" : ""}`
+    }, 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) {
           onClick(item);
@@ -54427,9 +54522,9 @@
           onClick(false);
         }
       }
-    }, isImage(item.thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
+    }, isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
       className: "object-cover w-full h-full object-center",
-      src: item.thumbnail,
+      src: thumbnail,
       alt: item.filename
     }) : /* @__PURE__ */ React__default.createElement("div", {
       className: "p-4 w-full flex flex-col gap-4 items-center justify-center"
@@ -54476,6 +54571,106 @@
       }, part);
     }));
   }
+  const DeleteModal = ({
+    close,
+    deleteFunc,
+    filename
+  }) => {
+    return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, {
+      close
+    }, "Delete ", filename), /* @__PURE__ */ React__default.createElement(ModalBody, {
+      padded: true
+    }, /* @__PURE__ */ React__default.createElement("p", null, "Are you sure you want to delete ", /* @__PURE__ */ React__default.createElement("strong", null, filename), "?")), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, {
+      style: { flexGrow: 2 },
+      onClick: close
+    }, "Cancel"), /* @__PURE__ */ React__default.createElement(Button, {
+      style: { flexGrow: 3 },
+      variant: "danger",
+      onClick: () => {
+        deleteFunc();
+        close();
+      }
+    }, "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
+    }, "Sync Media"), /* @__PURE__ */ React__default.createElement(ModalBody, {
+      padded: true
+    }, /* @__PURE__ */ React__default.createElement("p", null, `This will copy media assets from the \`${folder}\` folder on branch \`${branch}\` in your git repository to Tina Cloud's asset service. This will allow you to use these assets in your site with Tina Cloud`)), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, {
+      style: { flexGrow: 2 },
+      onClick: close
+    }, "Cancel"), /* @__PURE__ */ React__default.createElement(Button, {
+      style: { flexGrow: 3 },
+      variant: "primary",
+      onClick: async () => {
+        await syncFunc();
+        close();
+      }
+    }, "Sync Media"))));
+  };
+  const CopyField = ({ label, description, value }) => {
+    const [copied, setCopied] = React__default.useState(false);
+    const [fadeOut, setFadeOut] = React__default.useState(false);
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: "w-full"
+    }, label && /* @__PURE__ */ React__default.createElement("label", {
+      className: "w-full mb-1 block flex-1  text-sm font-bold leading-5 text-gray-700"
+    }, label), /* @__PURE__ */ React__default.createElement("span", {
+      onClick: () => {
+        if (copied === true)
+          return;
+        setCopied(true);
+        setTimeout(() => {
+          setFadeOut(true);
+        }, 2500);
+        setTimeout(() => {
+          setCopied(false);
+          setFadeOut(false);
+        }, 3e3);
+        navigator.clipboard.writeText(value);
+      },
+      className: `shadow-inner text-base leading-5 whitespace-normal break-all px-3 py-2 text-gray-600 w-full bg-gray-50 border border-gray-200 transition-all ease-out duration-150 rounded-md relative overflow-hidden appearance-none flex items-center w-full cursor-pointer hover:bg-white hover:text-blue-500  ${copied ? `pointer-events-none` : ``}`
+    }, /* @__PURE__ */ React__default.createElement(BiCopyAlt, {
+      className: "relative text-blue-500 shrink-0 w-5 h-auto mr-1.5 -ml-0.5 z-20"
+    }), " ", value, " ", copied && /* @__PURE__ */ React__default.createElement("span", {
+      className: `${fadeOut ? `opacity-0` : `opacity-100`} text-blue-500 transition-opacity	duration-500 absolute right-0 w-full h-full px-3 py-2 bg-white bg-opacity-90 flex items-center justify-center text-center tracking-wide font-medium z-10`
+    }, /* @__PURE__ */ React__default.createElement("span", null, "Copied to clipboard!"))), description && /* @__PURE__ */ React__default.createElement("p", {
+      className: "mt-2 text-sm text-gray-500"
+    }, description));
+  };
   async function poll(fn2, timeout, interval) {
     const endTime = Number(new Date()) + (timeout || 2e3);
     interval = interval || 100;
@@ -54524,6 +54719,8 @@
         return "loading";
       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({
@@ -54533,6 +54730,7 @@
     const [showSync, setShowSync] = react.exports.useState(false);
     const [viewMode, setViewMode] = react.exports.useState("grid");
     const [activeItem, setActiveItem] = react.exports.useState(false);
+    const closePreview = () => setActiveItem(false);
     const [offsetHistory, setOffsetHistory] = react.exports.useState([]);
     const [loadingText, setLoadingText] = react.exports.useState("");
     const offset2 = offsetHistory[offsetHistory.length - 1];
@@ -54554,7 +54752,16 @@
     const branch = (_m = cms.api.tina) == null ? void 0 : _m.branch;
     function loadMedia() {
       setListState("loading");
-      cms.media.list({ offset: offset2, limit: cms.media.pageSize, directory }).then((list22) => {
+      cms.media.list({
+        offset: offset2,
+        limit: cms.media.pageSize,
+        directory,
+        thumbnailSizes: [
+          { w: 75, h: 75 },
+          { w: 400, h: 400 },
+          { w: 1e3, h: 1e3 }
+        ]
+      }).then((list22) => {
         setList(list22);
         setListState("loaded");
       }).catch((e2) => {
@@ -54571,15 +54778,9 @@
       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.type === "dir") {
-        setDirectory(item.directory === "." || item.directory === "" ? item.filename : join(item.directory, item.filename));
-        resetOffset();
-      }
-    };
-    const onClickGridMediaItem = (item) => {
       if (!item) {
         setActiveItem(false);
       } else if (item.type === "dir") {
@@ -54592,9 +54793,7 @@
     let deleteMediaItem;
     if (allowDelete) {
       deleteMediaItem = (item) => {
-        if (confirm("Are you sure you want to delete this file?")) {
-          cms.media.delete(item);
-        }
+        cms.media.delete(item);
       };
     }
     let selectMediaItem;
@@ -54609,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);
@@ -54682,28 +54916,56 @@
         docsLink
       });
     }
-    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__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"
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, deleteModalOpen && /* @__PURE__ */ React__default.createElement(DeleteModal, {
+      filename: activeItem ? activeItem.filename : "",
+      deleteFunc: () => {
+        if (activeItem) {
+          deleteMediaItem(activeItem);
+          setActiveItem(false);
+        }
+      },
+      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 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: () => {
@@ -54714,11 +54976,13 @@
     })), /* @__PURE__ */ React__default.createElement(UploadButton, {
       onClick,
       uploading
-    })), /* @__PURE__ */ React__default.createElement("div", {
-      className: "flex h-full overflow-hidden"
+    }))), /* @__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"
     }, /* @__PURE__ */ React__default.createElement("ul", {
       ...rootProps,
-      className: `h-full bg-white overflow-y-auto transition duration-150 ease-out ${viewMode === "list" && "flex flex-1 flex-col divide-y divide-gray-100"} ${viewMode === "grid" && "w-full grid grid-cols-[repeat(auto-fit,_minmax(min(100%,_max(220px,_100%/8)),_1fr))] auto-rows-auto grid-flow-dense p-4 gap-4 content-start"} ${isDragActive ? `border-2 border-blue-500 rounded-lg` : ``}`
+      className: `h-full grow overflow-y-auto transition duration-150 ease-out bg-gradient-to-b from-gray-50/50 to-gray-50 ${list2.items.length === 0 || viewMode === "list" && "w-full flex flex-1 flex-col justify-start -mb-px"} ${list2.items.length > 0 && viewMode === "grid" && "w-full p-4 gap-4 grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3 @2xl:grid-cols-4 @4xl:grid-cols-6 @6xl:grid-cols-8 auto-rows-auto content-start justify-start"} ${isDragActive ? `border-2 border-blue-500 rounded-lg` : ``}`
     }, /* @__PURE__ */ React__default.createElement("input", {
       ...getInputProps()
     }), listState === "loaded" && list2.items.length === 0 && /* @__PURE__ */ React__default.createElement(EmptyMediaList, {
@@ -54727,24 +54991,27 @@
       key: item.id,
       item,
       onClick: onClickMediaItem,
-      onSelect: selectMediaItem,
-      onDelete: deleteMediaItem
+      active: activeItem && activeItem.id === item.id
     })), viewMode === "grid" && list2.items.map((item) => /* @__PURE__ */ React__default.createElement(GridMediaItem, {
       key: item.id,
       item,
-      onClick: onClickGridMediaItem,
+      onClick: onClickMediaItem,
       active: activeItem && activeItem.id === item.id
-    }))), viewMode === "grid" && activeItem && /* @__PURE__ */ React__default.createElement(ActiveItemPreview, {
-      activeItem,
-      selectMediaItem,
-      deleteMediaItem
-    })), /* @__PURE__ */ React__default.createElement("div", {
-      className: "bg-gray-50 border-t border-gray-150 py-3 px-5 shadow-sm z-10"
+    }))), /* @__PURE__ */ React__default.createElement("div", {
+      className: "bg-gradient-to-r to-gray-50/50 from-gray-50 shrink-0 grow-0 border-t border-gray-150 py-3 px-5 shadow-sm z-10"
     }, /* @__PURE__ */ React__default.createElement(CursorPaginator, {
       hasNext,
       navigateNext,
       hasPrev,
       navigatePrev
+    }))), /* @__PURE__ */ React__default.createElement(ActiveItemPreview, {
+      activeItem,
+      close: closePreview,
+      selectMediaItem,
+      allowDelete,
+      deleteMediaItem: () => {
+        setDeleteModalOpen(true);
+      }
     }))), showSync && /* @__PURE__ */ React__default.createElement(SyncModal, {
       folder,
       branch,
@@ -54756,23 +55023,41 @@
   }
   const ActiveItemPreview = ({
     activeItem,
+    close,
     selectMediaItem,
-    deleteMediaItem
+    deleteMediaItem,
+    allowDelete
   }) => {
+    const thumbnail = activeItem ? (activeItem.thumbnails || {})["1000x1000"] : "";
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: "p-4 shrink-0 h-full flex flex-col items-start gap-3 overflow-y-auto w-[40%] max-w-[460px] min-w-[240px] bg-white border-l border-gray-100 bg-white shadow-md animate-slide-in-left"
-    }, isImage(activeItem.thumbnail) ? /* @__PURE__ */ React__default.createElement("img", {
-      className: "object-cover border border-gray-100 rounded-md overflow-hidden w-full h-auto max-h-[40%] object-center shadow",
-      src: activeItem.thumbnail,
+      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", {
+      className: "flex grow-0 shrink-0 gap-2 w-full items-center justify-between"
+    }, /* @__PURE__ */ React__default.createElement("h3", {
+      className: "text-lg text-gray-600 w-full max-w-full break-words block truncate flex-1"
+    }, activeItem.filename), /* @__PURE__ */ React__default.createElement(IconButton, {
+      variant: "ghost",
+      className: "group grow-0 shrink-0",
+      onClick: close
+    }, /* @__PURE__ */ React__default.createElement(BiX, {
+      className: `w-7 h-auto text-gray-500 opacity-50 group-hover:opacity-100 transition duration-150 ease-out`
+    }))), isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement("div", {
+      className: "w-full max-h-[75%]"
+    }, /* @__PURE__ */ React__default.createElement("img", {
+      className: "block border border-gray-100 rounded-md overflow-hidden max-w-full max-h-full object-fit h-auto shadow",
+      src: thumbnail,
       alt: activeItem.filename
-    }) : /* @__PURE__ */ React__default.createElement("span", {
+    })) : /* @__PURE__ */ React__default.createElement("span", {
       className: "p-3 border border-gray-100 rounded-md overflow-hidden bg-gray-50 shadow"
     }, /* @__PURE__ */ React__default.createElement(BiFile, {
       className: "w-14 h-auto fill-gray-300"
-    })), /* @__PURE__ */ React__default.createElement("h3", {
-      className: "text-lg text-gray-600 flex-grow w-full break-words truncate"
-    }, activeItem.filename), /* @__PURE__ */ React__default.createElement("div", {
-      className: "grow w-full flex flex-col justify-end items-start"
+    })), /* @__PURE__ */ React__default.createElement("div", {
+      className: "grow h-full w-full shrink flex flex-col gap-3 items-start justify-start"
+    }, /* @__PURE__ */ React__default.createElement(CopyField, {
+      value: absoluteImgURL(activeItem.src),
+      label: "URL"
+    })), /* @__PURE__ */ React__default.createElement("div", {
+      className: "shrink-0 w-full flex flex-col justify-end items-start"
     }, /* @__PURE__ */ React__default.createElement("div", {
       className: "flex w-full gap-3"
     }, selectMediaItem && /* @__PURE__ */ React__default.createElement(Button, {
@@ -54782,14 +55067,14 @@
       onClick: () => selectMediaItem(activeItem)
     }, "Insert", /* @__PURE__ */ React__default.createElement(BiArrowToBottom, {
       className: "ml-1 -mr-0.5 w-6 h-auto text-white opacity-70"
-    })), /* @__PURE__ */ React__default.createElement(Button, {
+    })), allowDelete && /* @__PURE__ */ React__default.createElement(Button, {
       variant: "white",
       size: "medium",
       className: "grow max-w-[40%]",
-      onClick: () => deleteMediaItem(activeItem)
+      onClick: deleteMediaItem
     }, "Delete", /* @__PURE__ */ React__default.createElement(TrashIcon, {
       className: "ml-1 -mr-0.5 w-6 h-auto text-red-500 opacity-70"
-    })))));
+    }))))));
   };
   const UploadButton = ({ onClick, uploading }) => {
     return /* @__PURE__ */ React__default.createElement(Button, {
@@ -54817,9 +55102,9 @@
   };
   const EmptyMediaList = (props) => {
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: `text-2xl opacity-50 p-12 text-center`,
+      className: `p-12 text-xl opacity-50 text-center`,
       ...props
-    }, "Drag and Drop assets here", props.hasTinaMedia && " or click 'Sync' to sync your media to Tina Cloud");
+    }, "Drag and drop assets here", props.hasTinaMedia && " or click 'Sync' to sync your media to Tina Cloud.");
   };
   const DocsLink = ({ title, message: message2, docsLink, ...props }) => {
     return /* @__PURE__ */ React__default.createElement("div", {
@@ -54836,22 +55121,29 @@
       className: "font-bold text-blue-500 hover:text-blue-600 hover:underline transition-all ease-out duration-150"
     }, "Learn More"));
   };
-  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
-    }, "Sync Media"), /* @__PURE__ */ React__default.createElement(ModalBody, {
-      padded: true
-    }, /* @__PURE__ */ React__default.createElement("p", null, `This will copy media assets from the \`${folder}\` folder on branch \`${branch}\` in your git repository to Tina Cloud's asset service. This will allow you to use these assets in your site with Tina Cloud`)), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, {
-      style: { flexGrow: 2 },
-      onClick: close
-    }, "Cancel"), /* @__PURE__ */ React__default.createElement(Button, {
-      style: { flexGrow: 3 },
-      variant: "primary",
-      onClick: async () => {
-        await syncFunc();
-        close();
+  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");
       }
-    }, "Sync Media"))));
+    }, /* @__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",
@@ -54863,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) {
@@ -54944,7 +55242,11 @@
           id: fileRes.public_id,
           filename: fileRes.original_filename,
           directory: "/",
-          thumbnail: fileRes.url,
+          thumbnails: {
+            "75x75": fileRes.url,
+            "400x400": fileRes.url,
+            "1000x1000": fileRes.url
+          },
           src: fileRes.url
         };
         newFiles.push(parsedRes);