tinacms 2.7.5 → 2.7.6

package/dist/index.mjs

@@ -8724,6 +8724,73 @@ class GlobalFormPlugin {
     };
   }
 }
+let Alerts$1 = class Alerts {
+  constructor(events, map = {}) {
+    this.events = events;
+    this.map = map;
+    this.alerts = /* @__PURE__ */ new Map();
+    this.mapEventToAlert = (event) => {
+      const toAlert = this.map[event.type];
+      if (toAlert) {
+        let getArgs;
+        if (typeof toAlert === "function") {
+          getArgs = toAlert;
+        } else {
+          getArgs = () => toAlert;
+        }
+        const { level, message, timeout } = getArgs(event);
+        this.add(level, message, timeout);
+      }
+    };
+    this.events.subscribe("*", this.mapEventToAlert);
+  }
+  setMap(eventsToAlerts) {
+    this.map = {
+      ...this.map,
+      ...eventsToAlerts
+    };
+  }
+  add(level, message, timeout = 4e3) {
+    const alert = {
+      level,
+      message,
+      timeout,
+      id: `${message}|${Date.now()}`
+    };
+    this.alerts.set(alert.id, alert);
+    this.events.dispatch({ type: "alerts:add", alert });
+    let timeoutId = null;
+    const dismiss = () => {
+      clearTimeout(timeoutId);
+      this.dismiss(alert);
+    };
+    timeoutId = level !== "error" ? setTimeout(dismiss, alert.timeout) : null;
+    return dismiss;
+  }
+  dismiss(alert) {
+    this.alerts.delete(alert.id);
+    this.events.dispatch({ type: "alerts:remove", alert });
+  }
+  subscribe(cb) {
+    const unsub = this.events.subscribe("alerts", cb);
+    return () => unsub();
+  }
+  get all() {
+    return Array.from(this.alerts.values());
+  }
+  info(message, timeout) {
+    return this.add("info", message, timeout);
+  }
+  success(message, timeout) {
+    return this.add("success", message, timeout);
+  }
+  warn(message, timeout) {
+    return this.add("warn", message, timeout);
+  }
+  error(message, timeout) {
+    return this.add("error", message, timeout);
+  }
+};
 class PluginTypeManager {
   constructor(events) {
     this.events = events;
@@ -9568,128 +9635,42 @@ const _CMS = class _CMS2 {
 _CMS.ENABLED = { type: "cms:enable" };
 _CMS.DISABLED = { type: "cms:disable" };
 let CMS = _CMS;
-let Alerts$1 = class Alerts {
-  constructor(events, map = {}) {
-    this.events = events;
-    this.map = map;
-    this.alerts = /* @__PURE__ */ new Map();
-    this.mapEventToAlert = (event) => {
-      const toAlert = this.map[event.type];
-      if (toAlert) {
-        let getArgs;
-        if (typeof toAlert === "function") {
-          getArgs = toAlert;
-        } else {
-          getArgs = () => toAlert;
-        }
-        const { level, message, timeout } = getArgs(event);
-        this.add(level, message, timeout);
-      }
-    };
-    this.events.subscribe("*", this.mapEventToAlert);
-  }
-  setMap(eventsToAlerts) {
-    this.map = {
-      ...this.map,
-      ...eventsToAlerts
-    };
-  }
-  add(level, message, timeout = 4e3) {
-    const alert = {
-      level,
-      message,
-      timeout,
-      id: `${message}|${Date.now()}`
-    };
-    this.alerts.set(alert.id, alert);
-    this.events.dispatch({ type: "alerts:add", alert });
-    let timeoutId = null;
-    const dismiss = () => {
-      clearTimeout(timeoutId);
-      this.dismiss(alert);
-    };
-    timeoutId = level !== "error" ? setTimeout(dismiss, alert.timeout) : null;
-    return dismiss;
-  }
-  dismiss(alert) {
-    this.alerts.delete(alert.id);
-    this.events.dispatch({ type: "alerts:remove", alert });
-  }
-  subscribe(cb) {
-    const unsub = this.events.subscribe("alerts", cb);
-    return () => unsub();
-  }
-  get all() {
-    return Array.from(this.alerts.values());
-  }
-  info(message, timeout) {
-    return this.add("info", message, timeout);
-  }
-  success(message, timeout) {
-    return this.add("success", message, timeout);
-  }
-  warn(message, timeout) {
-    return this.add("warn", message, timeout);
-  }
-  error(message, timeout) {
-    return this.add("error", message, timeout);
-  }
+const MarkdownFieldPlaceholder = {
+  __type: "field",
+  name: "markdown",
+  Component: createPlaceholder(
+    "Markdown"
+  )
 };
-const SidebarLoadingPlaceholder = () => /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    className: "relative flex flex-col items-center justify-center text-center p-5 pb-16 w-full h-full overflow-y-auto",
-    style: {
-      animationName: "fade-in",
-      animationDelay: "300ms",
-      animationTimingFunction: "ease-out",
-      animationIterationCount: 1,
-      animationFillMode: "both",
-      animationDuration: "150ms"
-    }
-  },
-  /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, "Please wait while TinaCMS", /* @__PURE__ */ React.createElement("br", null), "loads your content"),
-  /* @__PURE__ */ React.createElement(LoadingDots, { color: "var(--tina-color-primary)" })
-);
-class SidebarState {
-  constructor(events, options = {}) {
-    var _a, _b;
-    this.events = events;
-    this._isOpen = false;
-    this.position = "displace";
-    this.renderNav = true;
-    this.buttons = {
-      save: "Save",
-      reset: "Reset"
-    };
-    this.position = options.position || "displace";
-    this.renderNav = options.renderNav || true;
-    this.loadingPlaceholder = options.placeholder || SidebarLoadingPlaceholder;
-    if ((_a = options.buttons) == null ? void 0 : _a.save) {
-      this.buttons.save = options.buttons.save;
-    }
-    if ((_b = options.buttons) == null ? void 0 : _b.reset) {
-      this.buttons.reset = options.buttons.reset;
-    }
-  }
-  get isOpen() {
-    return this._isOpen;
-  }
-  set isOpen(nextValue) {
-    if (this._isOpen === nextValue) {
-      return;
-    }
-    this._isOpen = nextValue;
-    if (nextValue) {
-      this.events.dispatch({ type: "sidebar:opened" });
-    } else {
-      this.events.dispatch({ type: "sidebar:closed" });
-    }
-  }
-  subscribe(callback) {
-    const unsub = this.events.subscribe("sidebar", callback);
-    return () => unsub();
-  }
+const HtmlFieldPlaceholder = {
+  __type: "field",
+  name: "html",
+  Component: createPlaceholder(
+    "HTML"
+  )
+};
+function createPlaceholder(name, _pr) {
+  return (props) => {
+    return /* @__PURE__ */ React__default.createElement(
+      FieldMeta,
+      {
+        name: props.input.name,
+        label: `${name} Field not Registered`,
+        tinaForm: props.tinaForm
+      },
+      /* @__PURE__ */ React__default.createElement("p", { className: "whitespace-normal text-[15px] mt-2" }, "The ", name, " field is not registered. Some built-in field types are not bundled by default in an effort to control bundle size. Consult the Tina docs to learn how to use this field type."),
+      /* @__PURE__ */ React__default.createElement("p", { className: "whitespace-normal text-[15px] mt-2" }, /* @__PURE__ */ React__default.createElement(
+        "a",
+        {
+          className: "text-blue-500 underline",
+          href: "https://tina.io/docs/editing/markdown/#registering-the-field-plugins",
+          target: "_blank",
+          rel: "noreferrer noopener"
+        },
+        "Tina Docs: Registering Field Plugins"
+      ))
+    );
+  };
 }
 function createScreen({
   Component,
@@ -9738,2209 +9719,2228 @@ const ModalLayout = ({ children, name, close: close2, layout }) => {
     children
   )));
 };
-function ImFilesEmpty(props) {
-  return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M14.341 5.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.689 0.561 1.25 1.25 1.25h9.5c0.689 0 1.25-0.561 1.25-1.25v-7.75c0-0.224-0.068-0.615-0.659-1.421zM12.271 4.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-9.5c-0.136 0-0.25-0.114-0.25-0.25v-11.5c0-0.135 0.114-0.25 0.25-0.25 0 0 5.749-0 5.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v7.75z" }, "child": [] }, { "tag": "path", "attr": { "d": "M9.421 0.659c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.604 0.43 1.109 1 1.225v-12.725c0-0.135 0.115-0.25 0.25-0.25h7.607c-0.151-0.124-0.297-0.238-0.437-0.341z" }, "child": [] }] })(props);
-}
-function ImUsers(props) {
-  return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 18 16" }, "child": [{ "tag": "path", "attr": { "d": "M12 12.041v-0.825c1.102-0.621 2-2.168 2-3.716 0-2.485 0-4.5-3-4.5s-3 2.015-3 4.5c0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z" }, "child": [] }, { "tag": "path", "attr": { "d": "M5.112 12.427c0.864-0.565 1.939-0.994 3.122-1.256-0.235-0.278-0.449-0.588-0.633-0.922-0.475-0.863-0.726-1.813-0.726-2.748 0-1.344 0-2.614 0.478-3.653 0.464-1.008 1.299-1.633 2.488-1.867-0.264-1.195-0.968-1.98-2.841-1.98-3 0-3 2.015-3 4.5 0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h4.359c0.227-0.202 0.478-0.393 0.753-0.573z" }, "child": [] }] })(props);
+function dirname(path) {
+  var _a, _b;
+  const pattern = new RegExp("(?<prevDir>.*)/");
+  return (_b = (_a = path.match(pattern)) == null ? void 0 : _a.groups) == null ? void 0 : _b.prevDir;
 }
-const LocalWarning = () => {
-  return /* @__PURE__ */ React.createElement(
-    "a",
+const BreadcrumbButton = ({ className = "", ...props }) => /* @__PURE__ */ React__default.createElement(
+  "button",
+  {
+    className: "capitalize transition-colors duration-150 border-0 bg-transparent hover:text-blue-500 " + className,
+    ...props
+  }
+);
+function Breadcrumb$1({ directory = "", setDirectory }) {
+  directory = directory.replace(/^\/|\/$/g, "");
+  let prevDir = dirname(directory) || "";
+  if (prevDir === ".") {
+    prevDir = "";
+  }
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex items-center text-[16px] text-gray-300" }, directory !== "" && /* @__PURE__ */ React__default.createElement(
+    IconButton,
     {
-      className: "flex-grow-0 flex w-full text-xs items-center py-1 px-4 text-yellow-600 bg-gradient-to-r from-yellow-50 to-yellow-100 border-b border-gray-150 shadow-sm",
-      href: "https://tina.io/docs/tina-cloud/",
-      target: "_blank"
+      variant: "ghost",
+      className: "mr-2",
+      onClick: () => setDirectory(prevDir)
     },
-    /* @__PURE__ */ React.createElement(AiFillWarning, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-yellow-600" }),
+    /* @__PURE__ */ React__default.createElement(
+      LeftArrowIcon,
+      {
+        className: `w-7 h-auto fill-gray-300 hover:fill-gray-900 transition duration-150 ease-out`
+      }
+    )
+  ), /* @__PURE__ */ React__default.createElement(
+    BreadcrumbButton,
+    {
+      onClick: () => setDirectory(""),
+      className: directory === "" ? "text-gray-500 font-bold" : "text-gray-300 font-medium after:pl-1.5 after:content-['/']"
+    },
+    "Media"
+  ), directory && directory.split("/").map((part, index, parts) => {
+    const currentDir = parts.slice(0, index + 1).join("/");
+    return /* @__PURE__ */ React__default.createElement(
+      BreadcrumbButton,
+      {
+        className: "pl-1.5 " + (index + 1 === parts.length ? "text-gray-500 font-bold" : "text-gray-300 font-medium after:pl-1.5 after:content-['/']"),
+        key: currentDir,
+        onClick: () => {
+          setDirectory(currentDir);
+        }
+      },
+      part
+    );
+  }));
+}
+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" }),
     " ",
-    "You are currently in",
-    /* @__PURE__ */ React.createElement("strong", { className: "ml-1 font-bold text-yellow-700" }, "Local Mode")
-  );
+    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));
 };
-const BillingWarning = () => {
-  var _a;
-  const cms = useCMS$1();
-  const api = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina;
-  const isCustomContentApi = (api == null ? void 0 : api.isCustomContentApi) || false;
-  const [billingState, setBillingState] = React.useState(
-    null
-  );
-  React.useEffect(() => {
-    const fetchBillingState = async () => {
-      if (typeof (api == null ? void 0 : api.getBillingState) !== "function")
-        return;
-      const billingRes = await (api == null ? void 0 : api.getBillingState());
-      setBillingState(billingRes);
-    };
-    if (!isCustomContentApi)
-      fetchBillingState();
-  }, []);
-  if (isCustomContentApi || !billingState || billingState.billingState === "current") {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null);
+function ListMediaItem({ item, onClick, active }) {
+  let FileIcon = BiFile;
+  if (item.type === "dir") {
+    FileIcon = BiFolder;
+  } else if (isVideo(item.src)) {
+    FileIcon = BiMovie;
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "flex-grow-0 flex flex-wrap w-full text-xs items-center justify-between gap-1.5 py-1.5 px-3 text-red-700 bg-gradient-to-br from-white via-red-50 to-red-100 border-b border-red-200" }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-1 font-bold" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-5 h-auto flex-shrink-0 flex-grow-0 inline-block opacity-70 text-red-600" }), /* @__PURE__ */ React.createElement("span", { className: "flex whitespace-nowrap" }, "There is an issue with your billing.")), /* @__PURE__ */ React.createElement(
-    "a",
+  const thumbnail = (item.thumbnails || {})["75x75"];
+  return /* @__PURE__ */ React__default.createElement(
+    "li",
     {
-      className: "text-xs text-blue-600 underline decoration-blue-200 hover:text-blue-500 hover:decoration-blue-500 transition-all ease-out duration-150 flex items-center gap-1 self-end",
-      href: `https://app.tina.io/projects/${billingState.clientId}/billing`,
-      target: "_blank"
+      className: `group relative flex shrink-0 items-center transition duration-150 ease-out cursor-pointer border-b border-gray-150 ${active ? "bg-gradient-to-r from-white to-gray-50/50 text-blue-500 hover:bg-gray-50" : "bg-white hover:bg-gray-50/50 hover:text-blue-500"}`,
+      onClick: () => {
+        if (!active) {
+          onClick(item);
+        } else {
+          onClick(false);
+        }
+      }
     },
-    "Visit Billing Page",
-    /* @__PURE__ */ React.createElement(BiRightArrowAlt, { className: "w-5 h-full opacity-70" })
-  ));
-};
-function FiInfo(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "10" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "16", "x2": "12", "y2": "12" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "8", "x2": "12.01", "y2": "8" }, "child": [] }] })(props);
-}
-function FiMoreVertical(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "1" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "5", "r": "1" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "19", "r": "1" }, "child": [] }] })(props);
-}
-function VscNewFile(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M9.5 1.1l3.4 3.5.1.4v2h-1V6H8V2H3v11h4v1H2.5l-.5-.5v-12l.5-.5h6.7l.3.1zM9 2v3h2.9L9 2zm4 14h-1v-3H9v-1h3V9h1v3h3v1h-3v3z" }, "child": [] }] })(props);
-}
-const FormModal = ({ plugin, close: close2 }) => {
-  const cms = useCMS$1();
-  const form = useMemo(
-    () => new Form({
-      id: "create-form-id",
-      label: "create-form",
-      fields: plugin.fields,
-      actions: plugin.actions,
-      buttons: plugin.buttons,
-      initialValues: plugin.initialValues || {},
-      reset: plugin.reset,
-      onChange: plugin.onChange,
-      onSubmit: async (values) => {
-        await plugin.onSubmit(values, cms).then(() => {
-          close2();
-        });
+    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-16 h-16 bg-gray-50 border-r border-gray-150 overflow-hidden flex justify-center flex-shrink-0" }, isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement(
+      "img",
+      {
+        className: "object-contain object-center w-full h-full origin-center transition-all duration-150 ease-out group-hover:scale-110",
+        src: thumbnail,
+        alt: item.filename
       }
-    }),
-    [close2, cms, plugin]
+    ) : /* @__PURE__ */ React__default.createElement(FileIcon, { className: "w-1/2 h-full fill-gray-300" })),
+    /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        className: "text-base flex-grow w-full break-words truncate px-3 py-2"
+      },
+      item.filename
+    )
   );
-  return /* @__PURE__ */ React.createElement(Modal, { id: "content-creator-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, plugin.name), /* @__PURE__ */ React.createElement(ModalBody, null, /* @__PURE__ */ React.createElement(FormBuilder, { form: { tinaForm: form } }))));
-};
-function HiOutlineClipboardList(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }, "child": [] }] })(props);
 }
-const useGetEvents = (cms, cursor, existingEvents) => {
-  const [events, setEvents] = useState([]);
-  const [nextCursor, setNextCursor] = useState(void 0);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(void 0);
-  React.useEffect(() => {
-    const fetchEvents = async () => {
-      var _a, _b, _c, _d, _e;
-      let doFetchEvents = false;
-      if (!((_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi)) {
-        doFetchEvents = await ((_e = (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.authProvider) == null ? void 0 : _e.isAuthenticated());
-      }
-      if (doFetchEvents) {
-        try {
-          const { events: nextEvents, cursor: nextCursor2 } = await cms.api.tina.fetchEvents(15, cursor);
-          setEvents([...existingEvents, ...nextEvents]);
-          setNextCursor(nextCursor2);
-        } catch (error2) {
-          cms.alerts.error(
-            `[${error2.name}] GetEvents failed: ${error2.message}`,
-            30 * 1e3
-            // 30 seconds
-          );
-          console.error(error2);
-          setEvents(void 0);
-          setError(error2);
-        }
-        setLoading(false);
-      }
-    };
-    setLoading(true);
-    fetchEvents();
-  }, [cms, cursor]);
-  return { events, cursor: nextCursor, loading, error };
-};
-function useSyncStatus$1(cms) {
-  var _a, _b;
-  const [syncStatus, setSyncStatus] = useState({ state: "loading", message: "Loading..." });
-  React.useEffect(() => {
-    const interval = setInterval(async () => {
-      var _a2, _b2, _c, _d, _e;
-      let doFetchEvents = false;
-      if (!((_b2 = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b2.isCustomContentApi)) {
-        doFetchEvents = await ((_e = (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.authProvider) == null ? void 0 : _e.isAuthenticated());
-      }
-      if (doFetchEvents) {
-        const { events } = await cms.api.tina.fetchEvents();
-        if (events.length === 0) {
-          setSyncStatus({ state: "success", message: "No Events" });
-        } else {
-          if (events[0].isError) {
-            setSyncStatus({
-              state: "error",
-              message: `Sync Failure ${events[0].message}`
-            });
+function GridMediaItem({ item, active, onClick }) {
+  let FileIcon = BiFile;
+  if (item.type === "dir") {
+    FileIcon = BiFolder;
+  } else if (isVideo(item.src)) {
+    FileIcon = BiMovie;
+  }
+  const thumbnail = (item.thumbnails || {})["400x400"];
+  return /* @__PURE__ */ React__default.createElement(
+    "li",
+    {
+      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 ${active ? "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 (!active) {
+            onClick(item);
           } else {
-            setSyncStatus({ state: "success", message: "Sync Successful" });
+            onClick(false);
           }
         }
-      } else {
-        setSyncStatus({ state: "unauthorized", message: "Not Authenticated" });
-      }
-    }, 5e3);
-    return () => clearInterval(interval);
-  }, [(_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi]);
-  return syncStatus;
+      },
+      isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement(
+        "img",
+        {
+          className: "object-contain object-center w-full h-full",
+          src: thumbnail,
+          alt: item.filename
+        }
+      ) : /* @__PURE__ */ React__default.createElement("div", { className: "p-4 w-full flex flex-col gap-4 items-center justify-center" }, /* @__PURE__ */ React__default.createElement(FileIcon, { className: "w-[30%] h-auto fill-gray-300" }), /* @__PURE__ */ React__default.createElement("span", { className: "block text-base text-gray-600 w-full break-words truncate" }, item.filename))
+    )
+  );
 }
-const SyncErrorWidget = ({ cms }) => {
-  const syncStatus = useSyncStatus$1(cms);
-  if (syncStatus.state !== "error") {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(
-    "div",
+const DeleteModal$1 = ({
+  close: close2,
+  deleteFunc,
+  filename
+}) => {
+  const [processing, setProcessing] = React__default.useState(false);
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, { close: close2 }, "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$1, { style: { flexGrow: 2 }, disabled: processing, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
+    Button$1,
     {
-      title: syncStatus.message,
-      className: "flex-grow-0 flex text-xs items-center"
+      style: { flexGrow: 3 },
+      disabled: processing,
+      variant: "danger",
+      onClick: async () => {
+        setProcessing(true);
+        try {
+          await deleteFunc();
+        } catch (e) {
+          console.error(e);
+        } finally {
+          close2();
+        }
+      }
     },
-    /* @__PURE__ */ React.createElement(MdSyncProblem, { className: "w-6 h-full ml-2 text-red-500 fill-current" })
-  );
+    /* @__PURE__ */ React__default.createElement("span", { className: "mr-1" }, "Delete"),
+    processing && /* @__PURE__ */ React__default.createElement(LoadingDots, null)
+  ))));
 };
-const EventsList = ({ cms }) => {
-  const [cursor, setCursor] = React.useState(void 0);
-  const [existingEvents, setExistingEvents] = React.useState([]);
-  const {
-    events,
-    cursor: nextCursor,
-    loading,
-    error
-  } = useGetEvents(cms, cursor, existingEvents);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4 w-full h-full grow-0" }, events.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "shrink grow-0 overflow-scroll w-full rounded-md shadow ring-1 ring-black ring-opacity-5" }, /* @__PURE__ */ React.createElement("table", { className: "w-full divide-y divide-gray-100" }, events.map((event, index) => {
-    const date = new Date(event.timestamp).toDateString();
-    const time = new Date(event.timestamp).toTimeString();
-    return /* @__PURE__ */ React.createElement("tr", { className: index % 2 === 0 ? "" : "bg-gray-50" }, event.isError ? /* @__PURE__ */ React.createElement(
-      "td",
-      {
-        key: `${event.id}_error_icon`,
-        className: "py-3 pl-4 pr-0 w-0"
-      },
-      /* @__PURE__ */ React.createElement(BsExclamationOctagonFill, { className: "text-red-500 fill-current w-5 h-auto" })
-    ) : /* @__PURE__ */ React.createElement(
-      "td",
-      {
-        key: `${event.id}_ok_icon`,
-        className: "py-3 pl-4 pr-0 w-0"
-      },
-      /* @__PURE__ */ React.createElement(BsCheckCircleFill, { className: "text-green-500 fill-current w-5 h-auto" })
-    ), /* @__PURE__ */ React.createElement(
-      "td",
-      {
-        key: `${event.id}_msg`,
-        className: "whitespace-nowrap p-3 text-base text-gray-500"
-      },
-      event.message,
-      event.isError && /* @__PURE__ */ React.createElement("div", { className: "w-full text-gray-300 text-xs mt-0.5" }, event.id)
-    ), /* @__PURE__ */ React.createElement(
-      "td",
-      {
-        key: `${event.id}_ts`,
-        className: "whitespace-nowrap py-3 pl-3 pr-4 text-sm text-gray-500"
-      },
-      date,
-      /* @__PURE__ */ React.createElement("span", { className: "w-full block text-gray-300 text-xs mt-0.5" }, time)
-    ));
-  }).flat())), loading && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-400 text-center" }, "Loading..."), error && /* @__PURE__ */ React.createElement("div", null, "Error: ", error.message), /* @__PURE__ */ React.createElement("div", { className: "text-center flex-1" }, /* @__PURE__ */ React.createElement(
+const NewFolderModal = ({ onSubmit, close: close2 }) => {
+  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: close2 }, "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"), " – 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: (e) => setFolderName(e.target.value)
+    }
+  )), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
     Button$1,
     {
+      disabled: !folderName,
+      style: { flexGrow: 3 },
+      variant: "primary",
       onClick: () => {
-        setExistingEvents(events);
-        setCursor(nextCursor);
+        if (!folderName)
+          return;
+        onSubmit(folderName);
+        close2();
       }
     },
-    "Load More Events"
-  )));
+    "Create New Folder"
+  ))));
 };
-const SyncStatusModal = ({ closeEventsModal, cms }) => /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(FullscreenModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: closeEventsModal }, "Event Log"), /* @__PURE__ */ React.createElement(ModalBody, { className: "flex h-full flex-col", padded: true }, /* @__PURE__ */ React.createElement(EventsList, { cms }))));
-const SyncStatus = ({ cms, setEventsOpen }) => {
-  var _a, _b;
-  const syncStatus = useSyncStatus$1(cms);
-  function openEventsModal() {
-    setEventsOpen(true);
-  }
-  if ((_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi) {
+const { useDropzone } = dropzone;
+const join = function(...parts) {
+  const [first, last, slash] = [0, parts.length - 1, "/"];
+  const matchLeadingSlash = new RegExp("^" + slash);
+  const matchTrailingSlash = new RegExp(slash + "$");
+  parts = parts.map(function(part, index) {
+    if (index === first && part === "file://")
+      return part;
+    if (index > first)
+      part = part.replace(matchLeadingSlash, "");
+    if (index < last)
+      part = part.replace(matchTrailingSlash, "");
+    return part;
+  });
+  return parts.join(slash);
+};
+function MediaManager2() {
+  const cms = useCMS();
+  const [request, setRequest] = useState();
+  useEffect(() => {
+    return cms.events.subscribe("media:open", ({ type, ...request2 }) => {
+      setRequest(request2);
+    });
+  }, []);
+  if (!request)
     return null;
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "button",
+  const close2 = () => setRequest(void 0);
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(FullscreenModal, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full bg-gray-50 flex items-center justify-between px-5 pt-3 m-0" }, /* @__PURE__ */ React__default.createElement("h2", { className: "text-gray-500 font-sans font-medium text-base leading-none m-0 block truncate" }, "Media Manager"), /* @__PURE__ */ React__default.createElement(
+    "div",
     {
-      className: `text-lg px-4 py-2 first:pt-3 last:pb-3 tracking-wide whitespace-nowrap flex items-center opacity-80 text-gray-600 hover:text-blue-400 hover:bg-gray-50 hover:opacity-100`,
-      onClick: openEventsModal
+      onClick: close2,
+      className: "flex items-center fill-gray-400 cursor-pointer transition-colors duration-100 ease-out hover:fill-gray-700"
     },
-    syncStatus.state !== "error" ? /* @__PURE__ */ React.createElement(HiOutlineClipboardList, { className: "w-6 h-auto mr-2 text-blue-400" }) : /* @__PURE__ */ React.createElement(MdSyncProblem, { className: "w-6 h-auto mr-2 text-red-400" }),
-    " ",
-    "Event Log"
-  ));
-};
-const version = "2.7.5";
-const Nav = ({
-  isLocalMode,
-  className = "",
-  children,
-  showCollections,
-  collectionsInfo,
-  screens,
-  cloudConfigs,
-  contentCreators,
-  sidebarWidth,
-  RenderNavSite,
-  RenderNavCloud,
-  RenderNavCollection,
-  AuthRenderNavCollection,
+    /* @__PURE__ */ React__default.createElement(CloseIcon, { className: "w-6 h-auto" })
+  )), /* @__PURE__ */ React__default.createElement(ModalBody, { className: "flex h-full flex-col" }, /* @__PURE__ */ React__default.createElement(MediaPicker, { ...request, close: close2 }))));
+}
+const defaultListError = new MediaListError({
+  title: "Error fetching media",
+  message: "Something went wrong while requesting the resource.",
+  docsLink: "https://tina.io/docs/media/#media-store"
+});
+function MediaPicker({
+  allowDelete,
+  onSelect,
+  close: close2,
   ...props
-}) => {
-  const cms = useCMS$1();
-  const [eventsOpen, setEventsOpen] = React.useState(false);
-  const { contentCollections, authCollection } = collectionsInfo.collections.reduce(
-    (acc, collection) => {
-      if (collection.isAuthCollection) {
-        acc.authCollection = collection;
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const cms = useCMS();
+  const [listState, setListState] = useState(() => {
+    if (cms.media.isConfigured)
+      return "loading";
+    return "not-configured";
+  });
+  const [deleteModalOpen, setDeleteModalOpen] = React__default.useState(false);
+  const [newFolderModalOpen, setNewFolderModalOpen] = React__default.useState(false);
+  const [listError, setListError] = useState(defaultListError);
+  const [directory, setDirectory] = useState(
+    props.directory
+  );
+  const [list, setList] = useState({
+    items: [],
+    nextOffset: void 0
+  });
+  const resetList = () => setList({
+    items: [],
+    nextOffset: void 0
+  });
+  const [viewMode, setViewMode] = useState("grid");
+  const [activeItem, setActiveItem] = useState(false);
+  const closePreview = () => setActiveItem(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [loadFolders, setLoadFolders] = useState(true);
+  const [offsetHistory, setOffsetHistory] = useState([]);
+  const offset2 = offsetHistory[offsetHistory.length - 1];
+  const resetOffset = () => setOffsetHistory([]);
+  async function loadMedia(loadFolders2 = true) {
+    setListState("loading");
+    try {
+      const _list = await cms.media.list({
+        offset: offset2,
+        limit: cms.media.pageSize,
+        directory,
+        thumbnailSizes: [
+          { w: 75, h: 75 },
+          { w: 400, h: 400 },
+          { w: 1e3, h: 1e3 }
+        ],
+        filesOnly: !loadFolders2
+      });
+      setList({
+        items: [...list.items, ..._list.items],
+        nextOffset: _list.nextOffset
+      });
+      setListState("loaded");
+    } catch (e) {
+      console.error(e);
+      if (e.ERR_TYPE === "MediaListError") {
+        setListError(e);
       } else {
-        acc.contentCollections.push(collection);
+        setListError(defaultListError);
       }
-      return acc;
-    },
-    {
-      contentCollections: []
+      setListState("error");
     }
-  );
-  function closeEventsModal() {
-    setEventsOpen(false);
   }
-  const WrappedSyncStatus = React.forwardRef(
-    (props2, ref) => /* @__PURE__ */ React.createElement(SyncStatus, { ...props2 })
-  );
-  const screenCategories = screens.reduce(
-    (acc, screen) => {
-      const category = screen.navCategory || "Site";
-      acc[category] = acc[category] || [];
-      acc[category].push(screen);
-      return acc;
-    },
-    { Site: [] }
-  );
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `relative z-30 flex flex-col bg-white border-r border-gray-200 w-96 h-full ${className}`,
-      style: { maxWidth: `${sidebarWidth}px` },
-      ...props
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "border-b border-gray-200" }, /* @__PURE__ */ React.createElement(Menu, { as: "div", className: "relative block" }, ({ open: open2 }) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-      MenuButton,
-      {
-        className: `group w-full px-6 py-3 gap-2 flex justify-between items-center transition-colors duration-150 ease-out ${open2 ? "bg-gray-50" : "bg-transparent"}`
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800 flex-1 gap-1 opacity-80 group-hover:opacity-100 transition-opacity duration-150 ease-out" }, /* @__PURE__ */ React.createElement(
-        "svg",
-        {
-          viewBox: "0 0 32 32",
-          fill: "#EC4815",
-          xmlns: "http://www.w3.org/2000/svg",
-          className: "w-10 h-auto -ml-1"
-        },
-        /* @__PURE__ */ React.createElement("path", { d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z" }),
-        /* @__PURE__ */ React.createElement("path", { d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z" })
-      ), /* @__PURE__ */ React.createElement("span", null, "Tina")),
-      /* @__PURE__ */ React.createElement(SyncErrorWidget, { cms }),
-      /* @__PURE__ */ React.createElement(
-        FiMoreVertical,
-        {
-          className: `flex-0 w-6 h-full inline-block group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open2 ? "opacity-100 text-blue-400" : "text-gray-400 opacity-50 hover:opacity-70"}`
+  useEffect(() => {
+    if (!refreshing)
+      return;
+    loadMedia();
+    setRefreshing(false);
+  }, [refreshing]);
+  useEffect(() => {
+    if (!cms.media.isConfigured)
+      return;
+    if (refreshing)
+      return;
+    loadMedia(loadFolders);
+    if (loadFolders)
+      setLoadFolders(false);
+    return cms.events.subscribe(
+      ["media:delete:success", "media:pageSize"],
+      () => {
+        setRefreshing(true);
+        resetOffset();
+        resetList();
+      }
+    );
+  }, [offset2, directory, cms.media.isConfigured]);
+  const onClickMediaItem = (item) => {
+    if (!item) {
+      setActiveItem(false);
+    } else if (item.type === "dir") {
+      setDirectory(
+        item.directory === "." || item.directory === "" ? item.filename : join(item.directory, item.filename)
+      );
+      setLoadFolders(true);
+      resetOffset();
+      resetList();
+      setActiveItem(false);
+    } else {
+      setActiveItem(item);
+    }
+  };
+  let deleteMediaItem;
+  if (allowDelete) {
+    deleteMediaItem = async (item) => {
+      await cms.media.delete(item);
+    };
+  }
+  let selectMediaItem;
+  if (onSelect) {
+    selectMediaItem = (item) => {
+      onSelect(item);
+      if (close2)
+        close2();
+    };
+  }
+  const [uploading, setUploading] = useState(false);
+  const accept = Array.isArray(
+    (_c = (_b = (_a = cms.api.tina.schema.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.media) == null ? void 0 : _c.accept
+  ) ? (_f = (_e = (_d = cms.api.tina.schema.schema) == null ? void 0 : _d.config) == null ? void 0 : _e.media) == null ? void 0 : _f.accept.join(",") : (_i = (_h = (_g = cms.api.tina.schema.schema) == null ? void 0 : _g.config) == null ? void 0 : _h.media) == null ? void 0 : _i.accept;
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: dropzoneAcceptFromString(
+      accept || cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES
+    ),
+    maxSize: cms.media.maxSize,
+    multiple: true,
+    onDrop: async (files, fileRejections) => {
+      try {
+        setUploading(true);
+        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 message = errorCodes[error.code];
+          if (message) {
+            return message;
+          }
+          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(". "), ".");
+          });
         }
-      )
-    ), /* @__PURE__ */ React.createElement("div", { className: "transform translate-y-full absolute bottom-3 right-5 z-50" }, /* @__PURE__ */ React.createElement(
-      Transition,
+        if (mediaItems.length !== 0) {
+          setActiveItem(mediaItems[0]);
+          setList((mediaList) => {
+            return {
+              items: [
+                // all the newly added items are new
+                ...mediaItems.map((x) => ({ ...x, new: true })),
+                ...mediaList.items
+              ],
+              nextOffset: mediaList.nextOffset
+            };
+          });
+        }
+      } catch {
+      }
+      setUploading(false);
+    }
+  });
+  const { onClick, ...rootProps } = getRootProps();
+  function disableScrollBody() {
+    const body = document == null ? void 0 : document.body;
+    body.style.overflow = "hidden";
+    return () => {
+      body.style.overflow = "auto";
+    };
+  }
+  useEffect(disableScrollBody, []);
+  const loaderRef = useRef(null);
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      const target = entries[0];
+      if (target.isIntersecting && list.nextOffset) {
+        setOffsetHistory((offsetHistory2) => [
+          ...offsetHistory2,
+          list.nextOffset
+        ]);
+      }
+    });
+    if (loaderRef.current) {
+      observer.observe(loaderRef.current);
+    }
+    return () => {
+      if (loaderRef.current) {
+        observer.unobserve(loaderRef.current);
+      }
+    };
+  }, [list.nextOffset, loaderRef.current]);
+  if (listState === "loading" && !((_j = list == null ? void 0 : list.items) == null ? void 0 : _j.length) || uploading) {
+    return /* @__PURE__ */ React__default.createElement(LoadingMediaList, null);
+  }
+  if (listState === "not-configured") {
+    return /* @__PURE__ */ React__default.createElement(
+      DocsLink,
       {
-        enter: "transition duration-150 ease-out",
-        enterFrom: "transform opacity-0 -translate-y-2",
-        enterTo: "transform opacity-100 translate-y-0",
-        leave: "transition duration-75 ease-in",
-        leaveFrom: "transform opacity-100 translate-y-0",
-        leaveTo: "transform opacity-0 -translate-y-2"
+        title: "No Media Store Configured",
+        message: "To use the media manager, you need to configure a Media Store.",
+        docsLink: "https://tina.io/docs/reference/media/overview/"
+      }
+    );
+  }
+  if (listState === "error") {
+    const { title, message, docsLink } = listError;
+    return /* @__PURE__ */ React__default.createElement(DocsLink, { title, message, docsLink });
+  }
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, deleteModalOpen && /* @__PURE__ */ React__default.createElement(
+    DeleteModal$1,
+    {
+      filename: activeItem ? activeItem.filename : "",
+      deleteFunc: async () => {
+        if (activeItem) {
+          await deleteMediaItem(activeItem);
+          setActiveItem(false);
+        }
       },
-      /* @__PURE__ */ React.createElement(MenuItems, { className: "bg-white border border-gray-150 rounded-lg shadow-lg flex flex-col items-stretch overflow-hidden" }, /* @__PURE__ */ React.createElement(MenuItem, null, /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          className: `text-lg px-4 py-2 first:pt-3 last:pb-3 tracking-wide whitespace-nowrap flex items-center opacity-80 text-gray-600 hover:text-blue-400 hover:bg-gray-50 hover:opacity-100`,
-          onClick: async () => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            updateBodyDisplacement({
-              displayState: "closed",
-              sidebarWidth: null,
-              resizingSidebar: false
-            });
-            try {
-              if ((_c = (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.authProvider) == null ? void 0 : _c.logout) {
-                await ((_d = cms.api.tina) == null ? void 0 : _d.authProvider.logout());
-                if ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.onLogout) {
-                  await ((_h = (_g = cms == null ? void 0 : cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.onLogout());
-                  await new Promise(
-                    (resolve) => setTimeout(resolve, 500)
-                  );
-                }
-                window.location.href = new URL(
-                  window.location.href
-                ).pathname;
-              }
-            } catch (e) {
-              cms.alerts.error(`Error logging out: ${e}`);
-              console.error("Unexpected error calling logout");
-              console.error(e);
-            }
+      close: () => setDeleteModalOpen(false)
+    }
+  ), newFolderModalOpen && /* @__PURE__ */ React__default.createElement(
+    NewFolderModal,
+    {
+      onSubmit: (name) => {
+        setDirectory((oldDir) => {
+          if (oldDir) {
+            return join(oldDir, name);
+          } else {
+            return name;
           }
-        },
-        /* @__PURE__ */ React.createElement(BiExit, { className: "w-6 h-auto mr-2 text-blue-400" }),
-        " Log Out"
-      )), /* @__PURE__ */ React.createElement(MenuItem, null, /* @__PURE__ */ React.createElement(
-        WrappedSyncStatus,
-        {
-          cms,
-          setEventsOpen
-        }
-      )))
-    ))))),
-    eventsOpen && /* @__PURE__ */ React.createElement(SyncStatusModal, { cms, closeEventsModal }),
-    children,
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col px-6 flex-1 overflow-auto" }, showCollections && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "flex space-x-1 justify-items-start uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, /* @__PURE__ */ React.createElement("span", null, "Collections"), isLocalMode && /* @__PURE__ */ React.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(
-      "a",
+        });
+        resetOffset();
+        resetList();
+      },
+      close: () => setNewFolderModalOpen(false)
+    }
+  ), /* @__PURE__ */ React__default.createElement(MediaPickerWrap, null, /* @__PURE__ */ React__default.createElement(SyncStatusContainer, 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: "flex flex-1 items-center gap-4" }, /* @__PURE__ */ React__default.createElement(ViewModeToggle, { viewMode, setViewMode }), /* @__PURE__ */ React__default.createElement(
+    Breadcrumb$1,
+    {
+      directory,
+      setDirectory: (dir) => {
+        setDirectory(dir);
+        setLoadFolders(true);
+        resetOffset();
+        resetList();
+        setActiveItem(false);
+      }
+    }
+  )), cms.media.store.isStatic ? null : /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-wrap items-center gap-4" }, /* @__PURE__ */ React__default.createElement(
+    Button$1,
+    {
+      busy: false,
+      variant: "white",
+      onClick: () => {
+        setRefreshing(true);
+        resetOffset();
+        resetList();
+        setActiveItem(false);
+      },
+      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$1,
+    {
+      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" })
+  ), /* @__PURE__ */ React__default.createElement(UploadButton, { onClick, uploading }))), /* @__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 grow overflow-y-auto transition duration-150 ease-out bg-gradient-to-b from-gray-50/50 to-gray-50 ${list.items.length === 0 || viewMode === "list" && "w-full flex flex-1 flex-col justify-start -mb-px"} ${list.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-9 auto-rows-auto content-start justify-start"} ${isDragActive ? `border-2 border-blue-500 rounded-lg` : ``}`
+    },
+    /* @__PURE__ */ React__default.createElement("input", { ...getInputProps() }),
+    listState === "loaded" && list.items.length === 0 && /* @__PURE__ */ React__default.createElement(EmptyMediaList, null),
+    viewMode === "list" && list.items.map((item) => /* @__PURE__ */ React__default.createElement(
+      ListMediaItem,
+      {
+        key: item.id,
+        item,
+        onClick: onClickMediaItem,
+        active: activeItem && activeItem.id === item.id
+      }
+    )),
+    viewMode === "grid" && list.items.map((item) => /* @__PURE__ */ React__default.createElement(
+      GridMediaItem,
+      {
+        key: item.id,
+        item,
+        onClick: onClickMediaItem,
+        active: activeItem && activeItem.id === item.id
+      }
+    )),
+    !!list.nextOffset && /* @__PURE__ */ React__default.createElement(LoadingMediaList, { ref: loaderRef })
+  )), /* @__PURE__ */ React__default.createElement(
+    ActiveItemPreview,
+    {
+      activeItem,
+      close: closePreview,
+      selectMediaItem,
+      allowDelete: cms.media.store.isStatic ? false : allowDelete,
+      deleteMediaItem: () => {
+        setDeleteModalOpen(true);
+      }
+    }
+  )))));
+}
+const ActiveItemPreview = ({
+  activeItem,
+  close: close2,
+  selectMediaItem,
+  deleteMediaItem,
+  allowDelete
+}) => {
+  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", { 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,
       {
-        href: "https://tina.io/docs/schema/#defining-collections",
-        target: "_blank"
+        variant: "ghost",
+        className: "group grow-0 shrink-0",
+        onClick: close2
       },
-      /* @__PURE__ */ React.createElement(FiInfo, null)
-    ))), /* @__PURE__ */ React.createElement(
-      CollectionsList,
+      /* @__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",
       {
-        RenderNavCollection,
-        collections: contentCollections
+        className: "block border border-gray-100 rounded-md overflow-hidden object-center object-contain max-w-full max-h-full m-auto shadow",
+        src: thumbnail,
+        alt: activeItem.filename
       }
-    )), (screenCategories.Site.length > 0 || contentCreators.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Site"), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, screenCategories.Site.map((view) => {
-      return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React.createElement(RenderNavSite, { view }));
-    }), contentCreators.map((plugin, idx) => {
-      return /* @__PURE__ */ React.createElement(CreateContentNavItem, { key: `plugin-${idx}`, plugin });
-    }), authCollection && /* @__PURE__ */ React.createElement(
-      CollectionsList,
+    )) : /* @__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("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$1,
       {
-        RenderNavCollection: AuthRenderNavCollection,
-        collections: [authCollection]
-      }
-    ))), Object.entries(screenCategories).map(([category, screens2]) => {
-      if (category !== "Site") {
-        return /* @__PURE__ */ React.createElement("div", { key: category }, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, category), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, screens2.map((view) => {
-          return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React.createElement(RenderNavSite, { view }));
-        })));
-      }
-    }), !!(cloudConfigs == null ? void 0 : cloudConfigs.length) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Cloud"), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, cloudConfigs.map((config) => {
-      return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${config.name}` }, /* @__PURE__ */ React.createElement(RenderNavCloud, { config }));
-    }))), /* @__PURE__ */ React.createElement("div", { className: "grow" }), /* @__PURE__ */ React.createElement("span", { className: "font-sans font-light text-xs mb-3 mt-8 text-gray-500" }, "v", version))
+        size: "medium",
+        variant: "primary",
+        className: "grow",
+        onClick: () => selectMediaItem(activeItem)
+      },
+      "Insert",
+      /* @__PURE__ */ React__default.createElement(BiArrowToBottom, { className: "ml-1 -mr-0.5 w-6 h-auto text-white opacity-70" })
+    ), allowDelete && /* @__PURE__ */ React__default.createElement(
+      Button$1,
+      {
+        variant: "white",
+        size: "medium",
+        className: "grow max-w-[40%]",
+        onClick: deleteMediaItem
+      },
+      "Delete",
+      /* @__PURE__ */ React__default.createElement(TrashIcon, { className: "ml-1 -mr-0.5 w-6 h-auto text-red-500 opacity-70" })
+    ))))
   );
 };
-const CollectionsList = ({
-  collections,
-  RenderNavCollection
-}) => {
-  if (collections.length === 0) {
-    return /* @__PURE__ */ React.createElement("div", null, "No collections found");
-  }
-  return /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, collections.map((collection) => {
-    return /* @__PURE__ */ React.createElement("li", { key: `nav-collection-${collection.name}` }, /* @__PURE__ */ React.createElement(RenderNavCollection, { collection }));
-  }));
-};
-const CreateContentNavItem = ({ plugin }) => {
-  const [open2, setOpen] = React.useState(false);
-  return /* @__PURE__ */ React.createElement("li", { key: plugin.name }, /* @__PURE__ */ React.createElement(
-    "button",
+const UploadButton = ({ onClick, uploading }) => {
+  return /* @__PURE__ */ React__default.createElement(
+    Button$1,
     {
-      className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100",
-      onClick: () => {
-        setOpen(true);
-      }
+      variant: "primary",
+      size: "custom",
+      className: "text-sm h-10 px-6",
+      busy: uploading,
+      onClick
     },
-    /* @__PURE__ */ React.createElement(VscNewFile, { className: "mr-3 h-6 opacity-80 w-auto" }),
-    " ",
-    plugin.name
-  ), open2 && /* @__PURE__ */ React.createElement(FormModal, { plugin, close: () => setOpen(false) }));
+    uploading ? /* @__PURE__ */ React__default.createElement(LoadingDots, null) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, "Upload ", /* @__PURE__ */ React__default.createElement(BiCloudUpload, { className: "w-6 h-full ml-2 opacity-70" }))
+  );
 };
-const ResizeHandle = () => {
-  const {
-    resizingSidebar,
-    setResizingSidebar,
-    fullscreen,
-    setSidebarWidth,
-    displayState
-  } = React.useContext(SidebarContext);
-  React.useEffect(() => {
-    const handleMouseUp = () => setResizingSidebar(false);
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      window.removeEventListener("mouseup", handleMouseUp);
+const LoadingMediaList = forwardRef(
+  (props, ref) => {
+    const { extraText, ...rest } = props;
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref,
+        className: "w-full h-full flex flex-col items-center justify-center",
+        ...rest
+      },
+      extraText && /* @__PURE__ */ React__default.createElement("p", null, extraText),
+      /* @__PURE__ */ React__default.createElement(LoadingDots, { color: "var(--tina-color-primary)" })
+    );
+  }
+);
+const MediaPickerWrap = ({ children }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "h-full flex-1 text-gray-700 flex flex-col relative bg-gray-50 outline-none active:outline-none focus:outline-none" }, children);
+};
+const SyncStatusContext = createContext(
+  void 0
+);
+const SyncStatusContainer = ({ children }) => {
+  var _a, _b, _c;
+  const cms = useCMS();
+  const isLocal = cms.api.tina.isLocalMode;
+  const tinaMedia = (_c = (_b = (_a = cms.api.tina.schema.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.media) == null ? void 0 : _c.tina;
+  const hasTinaMedia = !!((tinaMedia == null ? void 0 : tinaMedia.mediaRoot) || (tinaMedia == null ? void 0 : tinaMedia.publicFolder));
+  const doCheckSyncStatus = hasTinaMedia && !isLocal;
+  const [syncStatus, setSyncStatus] = useState(doCheckSyncStatus ? "loading" : "synced");
+  useEffect(() => {
+    const checkSyncStatus = async () => {
+      if (doCheckSyncStatus) {
+        const project = await cms.api.tina.getProject();
+        setSyncStatus(project.mediaBranch ? "synced" : "needs-sync");
+      }
     };
+    if (!cms.media.store.isStatic) {
+      checkSyncStatus();
+    }
   }, []);
-  React.useEffect(() => {
-    const handleMouseMove = (e) => {
-      setSidebarWidth((sidebarWidth) => {
-        const newWidth = sidebarWidth + e.movementX;
-        const maxWidth = window.innerWidth - 8;
-        if (newWidth < minSidebarWidth) {
-          return minSidebarWidth;
-        } else if (newWidth > maxWidth) {
-          return maxWidth;
-        } else {
-          return newWidth;
-        }
-      });
-    };
-    if (resizingSidebar) {
-      window.addEventListener("mousemove", handleMouseMove);
-      document.body.classList.add("select-none");
+  return syncStatus == "needs-sync" ? /* @__PURE__ */ React__default.createElement("div", { className: "h-full flex items-center justify-center p-6 bg-gradient-to-t from-gray-200 to-transparent" }, /* @__PURE__ */ React__default.createElement("div", { className: "rounded-lg border shadow-sm px-4 lg:px-6 py-3 lg:py-4 bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-200 mx-auto mb-12" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-start sm:items-center gap-2" }, /* @__PURE__ */ React__default.createElement(
+    BiError,
+    {
+      className: `w-7 h-auto flex-shrink-0 text-yellow-400 -mt-px`
     }
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      document.body.classList.remove("select-none");
-    };
-  }, [resizingSidebar]);
-  const handleresizingSidebar = () => setResizingSidebar(true);
-  if (fullscreen) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      onMouseDown: handleresizingSidebar,
-      className: `z-100 absolute top-1/2 right-px w-2 h-32 bg-white rounded-r-md border border-gray-150 shadow-sm hover:shadow-md origin-left transition-all duration-150 ease-out transform translate-x-full -translate-y-1/2 group hover:bg-gray-50 ${displayState !== "closed" ? `opacity-100` : `opacity-0`} ${resizingSidebar ? `scale-110` : `scale-90 hover:scale-100`}`,
-      style: { cursor: "grab" }
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "absolute top-1/2 left-1/2 h-4/6 w-px bg-gray-200 transform -translate-y-1/2 -translate-x-1/2 opacity-30 transition-opacity duration-150 ease-out group-hover:opacity-100" })
-  );
-};
-const Item = ({
-  item,
-  depth,
-  setActiveFormId
-}) => {
-  const cms = useCMS();
-  const depths = ["pl-6", "pl-10", "pl-14"];
-  const form = React.useMemo(
-    () => cms.state.forms.find(({ tinaForm }) => item.formId === tinaForm.id),
-    [item.formId]
-  );
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      type: "button",
-      key: item.path,
-      onClick: () => setActiveFormId(item.formId),
-      className: `${depths[depth] || "pl-12"} pr-6 py-3 w-full h-full bg-transparent border-none text-lg text-gray-700 group hover:bg-gray-50 transition-all ease-out duration-150 flex items-center justify-between gap-2`
+      className: `flex-1 flex flex-col items-start gap-0.5 text-base text-yellow-700`
     },
-    /* @__PURE__ */ React.createElement(BiEdit, { className: "opacity-70 w-5 h-auto text-blue-500 flex-none" }),
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex flex-col gap-0.5 items-start" }, /* @__PURE__ */ React.createElement("div", { className: "group-hover:text-blue-500 font-sans text-xs font-semibold text-gray-700 whitespace-normal" }, form.tinaForm.label), /* @__PURE__ */ React.createElement("div", { className: "group-hover:text-blue-500 text-base truncate leading-tight text-gray-600" }, form.tinaForm.id))
-  );
+    "Media needs to be turned on for this project.",
+    /* @__PURE__ */ React__default.createElement(
+      "a",
+      {
+        className: "transition-all duration-150 ease-out text-blue-500 hover:text-blue-400 hover:underline underline decoration-blue-200 hover:decoration-blue-400 font-medium flex items-center justify-start gap-1",
+        target: "_blank",
+        href: `${cms.api.tina.appDashboardLink}/media`
+      },
+      "Sync Your Media In TinaCloud.",
+      /* @__PURE__ */ React__default.createElement(BiLinkExternal, { className: `w-5 h-auto flex-shrink-0` })
+    )
+  )))) : /* @__PURE__ */ React__default.createElement(SyncStatusContext.Provider, { value: { syncStatus } }, children);
 };
-const FormListItem = ({
-  item,
-  depth,
-  setActiveFormId
-}) => {
-  var _a;
-  return /* @__PURE__ */ React.createElement("div", { className: "divide-y divide-gray-200" }, /* @__PURE__ */ React.createElement(Item, { setActiveFormId, item, depth }), item.subItems && /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-gray-200" }, (_a = item.subItems) == null ? void 0 : _a.map((subItem) => {
-    if (subItem.type === "document") {
-      return /* @__PURE__ */ React.createElement("li", { key: subItem.formId }, /* @__PURE__ */ React.createElement(
-        Item,
-        {
-          setActiveFormId,
-          depth: depth + 1,
-          item: subItem
-        }
-      ));
-    }
-  })));
+const useSyncStatus$1 = () => {
+  const context = useContext(SyncStatusContext);
+  if (!context) {
+    throw new Error("useSyncStatus must be used within a SyncStatusProvider");
+  }
+  return context;
 };
-const FormLists = (props) => {
-  const cms = useCMS();
-  return /* @__PURE__ */ React.createElement(
-    Transition,
+const EmptyMediaList = () => {
+  const { syncStatus } = useSyncStatus$1();
+  return /* @__PURE__ */ React__default.createElement("div", { className: `p-12 text-xl opacity-50 text-center` }, syncStatus == "synced" ? "Drag and drop assets here" : "Loading...");
+};
+const DocsLink = ({ title, message, docsLink, ...props }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "h-3/4 text-center flex flex-col justify-center", ...props }, /* @__PURE__ */ React__default.createElement("h2", { className: "mb-3 text-xl text-gray-600" }, title), /* @__PURE__ */ React__default.createElement("div", { className: "mb-3 text-base text-gray-700" }, message), /* @__PURE__ */ React__default.createElement(
+    "a",
     {
-      appear: true,
-      show: true,
-      as: "div",
-      enter: "transition-all ease-out duration-150",
-      enterFrom: "opacity-0 -translate-x-1/2",
-      enterTo: "opacity-100",
-      leave: "transition-all ease-out duration-150",
-      leaveFrom: "opacity-100",
-      leaveTo: "opacity-0 -translate-x-1/2"
+      href: docsLink,
+      target: "_blank",
+      rel: "noreferrer noopener",
+      className: "font-bold text-blue-500 hover:text-blue-600 hover:underline transition-all ease-out duration-150"
     },
-    cms.state.formLists.map((formList, index) => /* @__PURE__ */ React.createElement("div", { key: `${formList.id}-${index}`, className: "pt-16" }, /* @__PURE__ */ React.createElement(
-      FormList,
+    "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",
       {
-        isEditing: props.isEditing,
-        setActiveFormId: (id) => {
-          cms.dispatch({ type: "forms:set-active-form-id", value: id });
-        },
-        formList
-      }
-    )))
+        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" })
+    )
   );
 };
-const FormList = (props) => {
-  const cms = useCMS();
-  const listItems = React.useMemo(() => {
+const MediaManagerScreenPlugin = createScreen({
+  name: "Media Manager",
+  Component: MediaPicker,
+  Icon: MdOutlinePhotoLibrary,
+  layout: "fullscreen",
+  props: {
+    allowDelete: true
+  }
+});
+function UpdatePassword(props) {
+  const cms = useCMS$1();
+  const client = cms.api.tina;
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [dirty, setDirty] = useState(false);
+  const [result, setResult] = useState(null);
+  const [formState, setFormState] = useState("idle");
+  const [passwordChangeRequired, setPasswordChangeRequired] = useState(false);
+  useEffect(() => {
     var _a;
-    const orderedListItems = [];
-    const globalItems = [];
-    const topItems = [];
-    props.formList.items.forEach((item) => {
-      if (item.type === "document") {
-        const form = cms.state.forms.find(
-          ({ tinaForm }) => tinaForm.id === item.formId
-        );
-        if (form.tinaForm.global) {
-          globalItems.push(item);
-        } else {
-          orderedListItems.push(item);
+    (_a = client == null ? void 0 : client.authProvider) == null ? void 0 : _a.getUser().then(
+      (user) => setPasswordChangeRequired((user == null ? void 0 : user.passwordChangeRequired) ?? false)
+    );
+  }, []);
+  let err = null;
+  if (dirty && password !== confirmPassword) {
+    err = "Passwords do not match";
+  }
+  if (dirty && !password) {
+    err = "Please enter a password";
+  }
+  const updatePassword = async () => {
+    var _a;
+    setResult(null);
+    setFormState("busy");
+    const res = await cms.api.tina.request(
+      `mutation($password: String!) { updatePassword(password: $password) }`,
+      {
+        variables: {
+          password
         }
-      } else {
-        orderedListItems.push(item);
       }
-    });
-    if (((_a = orderedListItems[0]) == null ? void 0 : _a.type) === "document") {
-      topItems.push({ type: "list", label: "Documents" });
+    );
+    if (!(res == null ? void 0 : res.updatePassword)) {
+      setResult("Error updating password");
+    } else {
+      setDirty(false);
+      setPassword("");
+      setConfirmPassword("");
+      setResult("Password updated");
+      setPasswordChangeRequired(false);
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      (_a = client == null ? void 0 : client.authProvider) == null ? void 0 : _a.logout().then(async () => {
+        if (typeof (client == null ? void 0 : client.onLogout) === "function") {
+          await client.onLogout();
+          await new Promise((resolve) => setTimeout(resolve, 500));
+        }
+        window.location.href = new URL(window.location.href).pathname;
+      }).catch((e) => console.error(e));
     }
-    let extra = [];
-    if (globalItems.length) {
-      extra = [{ type: "list", label: "Global Documents" }, ...globalItems];
+    setFormState("idle");
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex justify-center items-center h-full" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col space-y-8 p-6" }, passwordChangeRequired && /* @__PURE__ */ React__default.createElement("div", { className: "text-center text-red-500" }, "Your password has expired. Please update your password."), /* @__PURE__ */ React__default.createElement("label", { className: "block" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-gray-700" }, "New Password"), /* @__PURE__ */ React__default.createElement(
+    BaseTextField,
+    {
+      type: "password",
+      name: "password",
+      id: "password",
+      placeholder: "Enter password",
+      className: err ? "border-red-500" : "border-gray-300 focus:ring-indigo-500 focus:border-indigo-500",
+      value: password,
+      onKeyDown: () => {
+        setDirty(true);
+        setResult(null);
+      },
+      onChange: (e) => setPassword(e.target.value),
+      required: true
     }
-    return [...topItems, ...orderedListItems, ...extra];
-  }, [JSON.stringify(props.formList.items)]);
-  return /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", { className: "divide-y divide-gray-200" }, listItems.map((item, index) => {
-    if (item.type === "list") {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: item.label,
-          className: `relative group text-left w-full bg-white shadow-sm
-   border-gray-100 px-6 -mt-px pb-3 ${index > 0 ? "pt-6 bg-gradient-to-b from-gray-50 via-white to-white" : "pt-3"}`
-        },
-        /* @__PURE__ */ React.createElement(
-          "span",
-          {
-            className: "text-sm tracking-wide font-bold text-gray-700 uppercase"
-          },
-          item.label
-        )
-      );
+  )), /* @__PURE__ */ React__default.createElement("label", { className: "block" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-gray-700" }, "Confirm New Password"), /* @__PURE__ */ React__default.createElement(
+    BaseTextField,
+    {
+      type: "password",
+      name: "confirmPassword",
+      id: "confirmPassword",
+      placeholder: "Confirm password",
+      className: err ? "border-red-500" : "border-gray-300 focus:ring-indigo-500 focus:border-indigo-500",
+      value: confirmPassword,
+      onKeyDown: () => {
+        setDirty(true);
+        setResult(null);
+      },
+      onChange: (e) => setConfirmPassword(e.target.value),
+      required: true
     }
-    return /* @__PURE__ */ React.createElement(
-      FormListItem,
-      {
-        setActiveFormId: (id) => props.setActiveFormId(id),
-        key: item.formId,
-        item,
-        depth: 0
-      }
-    );
-  })));
-};
-const SidebarNoFormsPlaceholder = () => /* @__PURE__ */ React.createElement(
+  )), result && /* @__PURE__ */ React__default.createElement("div", { className: "text-center text-sm text-gray-500" }, result), err && /* @__PURE__ */ React__default.createElement("div", { className: "text-center text-sm text-red-500" }, err), /* @__PURE__ */ React__default.createElement(
+    Button$1,
+    {
+      onClick: updatePassword,
+      disabled: err,
+      variant: "primary",
+      busy: formState === "busy"
+    },
+    "Update"
+  ))));
+}
+const PasswordScreenPlugin = createScreen({
+  name: "Change Password",
+  Component: UpdatePassword,
+  Icon: MdVpnKey,
+  layout: "fullscreen",
+  navCategory: "Account"
+});
+function createCloudConfig({
+  ...options
+}) {
+  return {
+    __type: "cloud-config",
+    Icon: MdOutlineCloud,
+    ...options
+  };
+}
+const SidebarLoadingPlaceholder = () => /* @__PURE__ */ React.createElement(
   "div",
   {
     className: "relative flex flex-col items-center justify-center text-center p-5 pb-16 w-full h-full overflow-y-auto",
     style: {
       animationName: "fade-in",
       animationDelay: "300ms",
-      animationTimingFunction: "ease-out",
-      animationIterationCount: 1,
-      animationFillMode: "both",
-      animationDuration: "150ms"
-    }
-  },
-  /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, "Looks like there's ", /* @__PURE__ */ React.createElement("br", null), "nothing to edit on ", /* @__PURE__ */ React.createElement("br", null), "this page."),
-  /* @__PURE__ */ React.createElement("p", { className: "block pt-5" }, /* @__PURE__ */ React.createElement(
-    Button$1,
-    {
-      href: "https://tina.io/docs/contextual-editing/overview",
-      target: "_blank",
-      as: "a"
-    },
-    /* @__PURE__ */ React.createElement(Emoji$1, { className: "mr-1.5" }, "📖"),
-    " Contextual Editing Docs"
-  ))
+      animationTimingFunction: "ease-out",
+      animationIterationCount: 1,
+      animationFillMode: "both",
+      animationDuration: "150ms"
+    }
+  },
+  /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, "Please wait while TinaCMS", /* @__PURE__ */ React.createElement("br", null), "loads your content"),
+  /* @__PURE__ */ React.createElement(LoadingDots, { color: "var(--tina-color-primary)" })
 );
-const Emoji$1 = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
-  "span",
-  {
-    className: `text-[24px] leading-none inline-block ${className}`,
-    ...props
+class SidebarState {
+  constructor(events, options = {}) {
+    var _a, _b;
+    this.events = events;
+    this._isOpen = false;
+    this.position = "displace";
+    this.renderNav = true;
+    this.buttons = {
+      save: "Save",
+      reset: "Reset"
+    };
+    this.position = options.position || "displace";
+    this.renderNav = options.renderNav || true;
+    this.loadingPlaceholder = options.placeholder || SidebarLoadingPlaceholder;
+    if ((_a = options.buttons) == null ? void 0 : _a.save) {
+      this.buttons.save = options.buttons.save;
+    }
+    if ((_b = options.buttons) == null ? void 0 : _b.reset) {
+      this.buttons.reset = options.buttons.reset;
+    }
   }
-);
-const minimumTimeToShowLoadingIndicator = 1e3;
-const FormsView = ({ loadingPlaceholder } = {}) => {
-  const cms = useCMS$1();
-  const { setFormIsPristine } = React.useContext(SidebarContext);
-  const [isShowingLoading, setIsShowingLoading] = React.useState(true);
-  const [initialLoadComplete, setInitialLoadComplete] = React.useState(false);
-  React.useEffect(() => {
-    if (cms.state.isLoadingContent) {
-      setIsShowingLoading(true);
-      const timer = setTimeout(() => {
-        if (!cms.state.isLoadingContent) {
-          setIsShowingLoading(false);
-          setInitialLoadComplete(true);
-        }
-      }, minimumTimeToShowLoadingIndicator);
-      return () => clearTimeout(timer);
+  get isOpen() {
+    return this._isOpen;
+  }
+  set isOpen(nextValue) {
+    if (this._isOpen === nextValue) {
+      return;
+    }
+    this._isOpen = nextValue;
+    if (nextValue) {
+      this.events.dispatch({ type: "sidebar:opened" });
     } else {
-      const timer = setTimeout(() => {
-        setIsShowingLoading(false);
-        setInitialLoadComplete(true);
-      }, minimumTimeToShowLoadingIndicator);
-      return () => clearTimeout(timer);
+      this.events.dispatch({ type: "sidebar:closed" });
     }
-  }, [cms.state.isLoadingContent]);
-  if (isShowingLoading || !initialLoadComplete) {
-    const LoadingPlaceholder = loadingPlaceholder || SidebarLoadingPlaceholder;
-    return /* @__PURE__ */ React.createElement(LoadingPlaceholder, null);
-  }
-  if (!cms.state.formLists.length) {
-    return /* @__PURE__ */ React.createElement(SidebarNoFormsPlaceholder, null);
   }
-  const isMultiform = cms.state.forms.length > 1;
-  const activeForm = cms.state.forms.find(
-    ({ tinaForm }) => tinaForm.id === cms.state.activeFormId
-  );
-  const isEditing = !!activeForm;
-  if (isMultiform && !activeForm) {
-    return /* @__PURE__ */ React.createElement(FormLists, { isEditing });
+  subscribe(callback) {
+    const unsub = this.events.subscribe("sidebar", callback);
+    return () => unsub();
   }
-  const formMetas = cms.plugins.all("form:meta");
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, activeForm && /* @__PURE__ */ React.createElement(FormWrapper$1, { isEditing, isMultiform }, isMultiform && /* @__PURE__ */ React.createElement(MultiformFormHeader, { activeForm }), !isMultiform && /* @__PURE__ */ React.createElement(FormHeader, { activeForm }), formMetas == null ? void 0 : formMetas.map((meta) => /* @__PURE__ */ React.createElement(React.Fragment, { key: meta.name }, /* @__PURE__ */ React.createElement(meta.Component, null))), /* @__PURE__ */ React.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine })));
-};
-const FormWrapper$1 = ({ isEditing, children }) => {
+}
+function ImFilesEmpty(props) {
+  return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M14.341 5.579c-0.347-0.473-0.831-1.027-1.362-1.558s-1.085-1.015-1.558-1.362c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.689 0.561 1.25 1.25 1.25h9.5c0.689 0 1.25-0.561 1.25-1.25v-7.75c0-0.224-0.068-0.615-0.659-1.421zM12.271 4.729c0.48 0.48 0.856 0.912 1.134 1.271h-2.406v-2.405c0.359 0.278 0.792 0.654 1.271 1.134v0zM14 14.75c0 0.136-0.114 0.25-0.25 0.25h-9.5c-0.136 0-0.25-0.114-0.25-0.25v-11.5c0-0.135 0.114-0.25 0.25-0.25 0 0 5.749-0 5.75 0v3.5c0 0.276 0.224 0.5 0.5 0.5h3.5v7.75z" }, "child": [] }, { "tag": "path", "attr": { "d": "M9.421 0.659c-0.806-0.591-1.197-0.659-1.421-0.659h-5.75c-0.689 0-1.25 0.561-1.25 1.25v11.5c0 0.604 0.43 1.109 1 1.225v-12.725c0-0.135 0.115-0.25 0.25-0.25h7.607c-0.151-0.124-0.297-0.238-0.437-0.341z" }, "child": [] }] })(props);
+}
+function ImUsers(props) {
+  return GenIcon({ "tag": "svg", "attr": { "version": "1.1", "viewBox": "0 0 18 16" }, "child": [{ "tag": "path", "attr": { "d": "M12 12.041v-0.825c1.102-0.621 2-2.168 2-3.716 0-2.485 0-4.5-3-4.5s-3 2.015-3 4.5c0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z" }, "child": [] }, { "tag": "path", "attr": { "d": "M5.112 12.427c0.864-0.565 1.939-0.994 3.122-1.256-0.235-0.278-0.449-0.588-0.633-0.922-0.475-0.863-0.726-1.813-0.726-2.748 0-1.344 0-2.614 0.478-3.653 0.464-1.008 1.299-1.633 2.488-1.867-0.264-1.195-0.968-1.98-2.841-1.98-3 0-3 2.015-3 4.5 0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h4.359c0.227-0.202 0.478-0.393 0.753-0.573z" }, "child": [] }] })(props);
+}
+const LocalWarning = () => {
   return /* @__PURE__ */ React.createElement(
-    "div",
+    "a",
     {
-      className: "flex-1 flex flex-col flex-nowrap overflow-hidden h-full w-full relative bg-white",
-      style: isEditing ? {
-        transform: "none",
-        animationName: "fly-in-left",
-        animationDuration: "150ms",
-        animationDelay: "0",
-        animationIterationCount: 1,
-        animationTimingFunction: "ease-out"
-      } : {
-        transform: "translate3d(100%, 0, 0)"
-      }
+      className: "flex-grow-0 flex w-full text-xs items-center py-1 px-4 text-yellow-600 bg-gradient-to-r from-yellow-50 to-yellow-100 border-b border-gray-150 shadow-sm",
+      href: "https://tina.io/docs/tina-cloud/",
+      target: "_blank"
     },
-    children
+    /* @__PURE__ */ React.createElement(AiFillWarning, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-yellow-600" }),
+    " ",
+    "You are currently in",
+    /* @__PURE__ */ React.createElement("strong", { className: "ml-1 font-bold text-yellow-700" }, "Local Mode")
   );
 };
-const MultiformFormHeader = ({
-  activeForm
-}) => {
+const BillingWarning = () => {
+  var _a;
   const cms = useCMS$1();
-  const { formIsPristine } = React.useContext(SidebarContext);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "pt-18 pb-4 px-6 border-b border-gray-200 bg-gradient-to-t from-white to-gray-50"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
-        onClick: () => {
-          const state = activeForm.tinaForm.finalForm.getState();
-          if (state.invalid === true) {
-            cms.alerts.error("Cannot navigate away from an invalid form.");
-          } else {
-            cms.dispatch({ type: "forms:set-active-form-id", value: null });
-          }
-        }
-      },
-      /* @__PURE__ */ React.createElement(BiDotsVertical, { className: "h-auto w-5 inline-block opacity-70" })
-    ), /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
-        onClick: () => {
-          const collectionName = cms.api.tina.schema.getCollectionByFullPath(
-            cms.state.activeFormId
-          ).name;
-          window.location.href = `${new URL(window.location.href).pathname}#/collections/${collectionName}/~`;
-        }
-      },
-      /* @__PURE__ */ React.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
-    ), /* @__PURE__ */ React.createElement("span", { className: "opacity-30 text-sm leading-tight whitespace-nowrap flex-0" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, activeForm.tinaForm.label || activeForm.tinaForm.id), /* @__PURE__ */ React.createElement(FormStatus, { pristine: formIsPristine }))
+  const api = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina;
+  const isCustomContentApi = (api == null ? void 0 : api.isCustomContentApi) || false;
+  const [billingState, setBillingState] = React.useState(
+    null
   );
-};
-const FormHeader = ({ activeForm }) => {
-  const { formIsPristine } = React.useContext(SidebarContext);
-  const cms = useCMS$1();
-  const shortFormLabel = activeForm.tinaForm.label ? activeForm.tinaForm.label.replace(/^.*[\\\/]/, "") : false;
-  return /* @__PURE__ */ React.createElement(
-    "div",
+  React.useEffect(() => {
+    const fetchBillingState = async () => {
+      if (typeof (api == null ? void 0 : api.getBillingState) !== "function")
+        return;
+      const billingRes = await (api == null ? void 0 : api.getBillingState());
+      setBillingState(billingRes);
+    };
+    if (!isCustomContentApi)
+      fetchBillingState();
+  }, []);
+  if (isCustomContentApi || !billingState || billingState.billingState === "current") {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "flex-grow-0 flex flex-wrap w-full text-xs items-center justify-between gap-1.5 py-1.5 px-3 text-red-700 bg-gradient-to-br from-white via-red-50 to-red-100 border-b border-red-200" }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-1 font-bold" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-5 h-auto flex-shrink-0 flex-grow-0 inline-block opacity-70 text-red-600" }), /* @__PURE__ */ React.createElement("span", { className: "flex whitespace-nowrap" }, "There is an issue with your billing.")), /* @__PURE__ */ React.createElement(
+    "a",
     {
-      className: "pt-18 pb-4 px-6 border-b border-gray-200 bg-gradient-to-t from-white to-gray-50"
+      className: "text-xs text-blue-600 underline decoration-blue-200 hover:text-blue-500 hover:decoration-blue-500 transition-all ease-out duration-150 flex items-center gap-1 self-end",
+      href: `https://app.tina.io/projects/${billingState.clientId}/billing`,
+      target: "_blank"
     },
-    /* @__PURE__ */ React.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
-        onClick: () => {
-          const collectionName = cms.api.tina.schema.getCollectionByFullPath(
-            cms.state.activeFormId
-          ).name;
-          window.location.href = `${new URL(window.location.href).pathname}#/collections/${collectionName}/~`;
-        }
-      },
-      /* @__PURE__ */ React.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
-    ), shortFormLabel && /* @__PURE__ */ React.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, shortFormLabel), /* @__PURE__ */ React.createElement(FormStatus, { pristine: formIsPristine }))
-  );
-};
-const SidebarContext = React.createContext(null);
-const minPreviewWidth = 440;
-const minSidebarWidth = 360;
-const navBreakpoint = 1279;
-const LOCALSTATEKEY = "tina.sidebarState";
-const LOCALWIDTHKEY = "tina.sidebarWidth";
-const defaultSidebarWidth = 440;
-const defaultSidebarPosition = "displace";
-const defaultSidebarState = "open";
-function SidebarProvider({
-  position = defaultSidebarPosition,
-  resizingSidebar,
-  setResizingSidebar,
-  defaultWidth = defaultSidebarWidth,
-  sidebar
-}) {
-  var _a, _b, _c;
-  useSubscribable(sidebar);
-  const cms = useCMS$1();
-  if (!cms.enabled)
-    return null;
-  return /* @__PURE__ */ React.createElement(
-    Sidebar$1,
-    {
-      position: ((_a = cms == null ? void 0 : cms.sidebar) == null ? void 0 : _a.position) || position,
-      defaultWidth: ((_b = cms == null ? void 0 : cms.sidebar) == null ? void 0 : _b.defaultWidth) || defaultWidth,
-      resizingSidebar,
-      setResizingSidebar,
-      renderNav: (
-        // @ts-ignore
-        typeof ((_c = cms == null ? void 0 : cms.sidebar) == null ? void 0 : _c.renderNav) !== "undefined" ? (
-          // @ts-ignore
-          cms.sidebar.renderNav
-        ) : true
-      ),
-      sidebar
-    }
-  );
-}
-const useFetchCollections = (cms) => {
-  return { collections: cms.api.admin.fetchCollections(), loading: false };
+    "Visit Billing Page",
+    /* @__PURE__ */ React.createElement(BiRightArrowAlt, { className: "w-5 h-full opacity-70" })
+  ));
 };
-const Sidebar$1 = ({
-  sidebar,
-  defaultWidth,
-  // defaultState,
-  position,
-  renderNav,
-  resizingSidebar,
-  setResizingSidebar
-}) => {
-  var _a, _b, _c, _d, _e, _f;
+function FiInfo(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "10" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "16", "x2": "12", "y2": "12" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "8", "x2": "12.01", "y2": "8" }, "child": [] }] })(props);
+}
+function FiMoreVertical(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "1" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "5", "r": "1" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "19", "r": "1" }, "child": [] }] })(props);
+}
+function VscNewFile(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 16 16", "fill": "currentColor" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "clipRule": "evenodd", "d": "M9.5 1.1l3.4 3.5.1.4v2h-1V6H8V2H3v11h4v1H2.5l-.5-.5v-12l.5-.5h6.7l.3.1zM9 2v3h2.9L9 2zm4 14h-1v-3H9v-1h3V9h1v3h3v1h-3v3z" }, "child": [] }] })(props);
+}
+const FormModal = ({ plugin, close: close2 }) => {
   const cms = useCMS$1();
-  const collectionsInfo = useFetchCollections(cms);
-  const [branchingEnabled, setBranchingEnabled] = React.useState(
-    () => cms.flags.get("branch-switcher")
-  );
-  React.useEffect(() => {
-    cms.events.subscribe("flag:set", ({ key, value }) => {
-      if (key === "branch-switcher") {
-        setBranchingEnabled(value);
+  const form = useMemo(
+    () => new Form({
+      id: "create-form-id",
+      label: "create-form",
+      fields: plugin.fields,
+      actions: plugin.actions,
+      buttons: plugin.buttons,
+      initialValues: plugin.initialValues || {},
+      reset: plugin.reset,
+      onChange: plugin.onChange,
+      onSubmit: async (values) => {
+        await plugin.onSubmit(values, cms).then(() => {
+          close2();
+        });
       }
-    });
-  }, [cms.events]);
-  const screens = cms.plugins.getType("screen");
-  const cloudConfigs = cms.plugins.getType("cloud-config");
-  useSubscribable(sidebar);
-  useSubscribable(screens);
-  const allScreens = screens.all();
-  const allConfigs = cloudConfigs.all();
-  const [menuIsOpen, setMenuIsOpen] = useState(false);
-  const [activeScreen, setActiveView] = useState(null);
-  const [sidebarWidth, setSidebarWidth] = React.useState(defaultWidth);
-  const [formIsPristine, setFormIsPristine] = React.useState(true);
-  const activeScreens = allScreens.filter(
-    (screen) => {
-      var _a2, _b2;
-      return screen.navCategory !== "Account" || ((_b2 = (_a2 = cms.api.tina) == null ? void 0 : _a2.authProvider) == null ? void 0 : _b2.getLoginStrategy()) === "UsernamePassword";
-    }
+    }),
+    [close2, cms, plugin]
   );
-  const setDisplayState = (value) => cms.dispatch({ type: "sidebar:set-display-state", value });
-  const displayState = cms.state.sidebarDisplayState;
+  return /* @__PURE__ */ React.createElement(Modal, { id: "content-creator-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, plugin.name), /* @__PURE__ */ React.createElement(ModalBody, null, /* @__PURE__ */ React.createElement(FormBuilder, { form: { tinaForm: form } }))));
+};
+function HiOutlineClipboardList(props) {
+  return GenIcon({ "tag": "svg", "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }, "child": [] }] })(props);
+}
+const useGetEvents = (cms, cursor, existingEvents) => {
+  const [events, setEvents] = useState([]);
+  const [nextCursor, setNextCursor] = useState(void 0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(void 0);
   React.useEffect(() => {
-    if (typeof window !== "undefined") {
-      const localSidebarState = window.localStorage.getItem(LOCALSTATEKEY);
-      const localSidebarWidth = window.localStorage.getItem(LOCALWIDTHKEY);
-      if (localSidebarState !== null) {
-        setDisplayState(JSON.parse(localSidebarState));
+    const fetchEvents = async () => {
+      var _a, _b, _c, _d, _e;
+      let doFetchEvents = false;
+      if (!((_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi)) {
+        doFetchEvents = await ((_e = (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.authProvider) == null ? void 0 : _e.isAuthenticated());
       }
-      if (localSidebarWidth !== null) {
-        setSidebarWidth(JSON.parse(localSidebarWidth));
+      if (doFetchEvents) {
+        try {
+          const { events: nextEvents, cursor: nextCursor2 } = await cms.api.tina.fetchEvents(15, cursor);
+          setEvents([...existingEvents, ...nextEvents]);
+          setNextCursor(nextCursor2);
+        } catch (error2) {
+          cms.alerts.error(
+            `[${error2.name}] GetEvents failed: ${error2.message}`,
+            30 * 1e3
+            // 30 seconds
+          );
+          console.error(error2);
+          setEvents(void 0);
+          setError(error2);
+        }
+        setLoading(false);
       }
-    }
-  }, []);
+    };
+    setLoading(true);
+    fetchEvents();
+  }, [cms, cursor]);
+  return { events, cursor: nextCursor, loading, error };
+};
+function useSyncStatus(cms) {
+  var _a, _b;
+  const [syncStatus, setSyncStatus] = useState({ state: "loading", message: "Loading..." });
   React.useEffect(() => {
-    if (typeof window !== "undefined") {
-      const localSidebarState = window.localStorage.getItem(LOCALSTATEKEY);
-      if (localSidebarState === null) {
-        setDisplayState(defaultSidebarState);
+    const interval = setInterval(async () => {
+      var _a2, _b2, _c, _d, _e;
+      let doFetchEvents = false;
+      if (!((_b2 = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b2.isCustomContentApi)) {
+        doFetchEvents = await ((_e = (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.authProvider) == null ? void 0 : _e.isAuthenticated());
       }
-    }
-  }, [defaultSidebarState]);
-  React.useEffect(() => {
-    if (typeof window !== "undefined" && cms.enabled) {
-      window.localStorage.setItem(LOCALSTATEKEY, JSON.stringify(displayState));
-    }
-  }, [displayState, cms]);
-  React.useEffect(() => {
-    if (resizingSidebar) {
-      window.localStorage.setItem(LOCALWIDTHKEY, JSON.stringify(sidebarWidth));
-    }
-  }, [sidebarWidth, resizingSidebar]);
-  const isTinaAdminEnabled = cms.flags.get("tina-admin") === false ? false : true;
-  const contentCreators = isTinaAdminEnabled ? [] : cms.plugins.getType("content-creator").all();
-  const toggleFullscreen = () => {
-    if (displayState === "fullscreen") {
-      setDisplayState("open");
-    } else {
-      setDisplayState("fullscreen");
-    }
-  };
-  const toggleSidebarOpen = () => {
-    cms.dispatch({ type: "toggle-edit-state" });
-  };
-  const toggleMenu = () => {
-    setMenuIsOpen((menuIsOpen2) => !menuIsOpen2);
-  };
-  React.useEffect(() => {
-    const updateLayout = () => {
-      if (displayState === "fullscreen") {
-        return;
+      if (doFetchEvents) {
+        const { events } = await cms.api.tina.fetchEvents();
+        if (events.length === 0) {
+          setSyncStatus({ state: "success", message: "No Events" });
+        } else {
+          if (events[0].isError) {
+            setSyncStatus({
+              state: "error",
+              message: `Sync Failure ${events[0].message}`
+            });
+          } else {
+            setSyncStatus({ state: "success", message: "Sync Successful" });
+          }
+        }
+      } else {
+        setSyncStatus({ state: "unauthorized", message: "Not Authenticated" });
       }
-      updateBodyDisplacement({
-        position,
-        displayState,
-        sidebarWidth,
-        resizingSidebar
-      });
-    };
-    updateLayout();
-    window.addEventListener("resize", updateLayout);
-    return () => {
-      window.removeEventListener("resize", updateLayout);
-    };
-  }, [displayState, position, sidebarWidth, resizingSidebar]);
-  const windowWidth = useWindowWidth();
-  const displayNav = renderNav && (sidebarWidth > navBreakpoint && windowWidth > navBreakpoint || displayState === "fullscreen" && windowWidth > navBreakpoint);
-  const renderMobileNav = renderNav && (sidebarWidth < navBreakpoint + 1 || windowWidth < navBreakpoint + 1);
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, [(_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi]);
+  return syncStatus;
+}
+const SyncErrorWidget = ({ cms }) => {
+  const syncStatus = useSyncStatus(cms);
+  if (syncStatus.state !== "error") {
+    return null;
+  }
   return /* @__PURE__ */ React.createElement(
-    SidebarContext.Provider,
+    "div",
     {
-      value: {
-        sidebarWidth,
-        setSidebarWidth,
-        displayState,
-        setDisplayState,
-        position,
-        toggleFullscreen,
-        toggleSidebarOpen,
-        resizingSidebar,
-        setResizingSidebar,
-        menuIsOpen,
-        setMenuIsOpen,
-        toggleMenu,
-        setActiveView,
-        formIsPristine,
-        setFormIsPristine
-      }
+      title: syncStatus.message,
+      className: "flex-grow-0 flex text-xs items-center"
     },
-    /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SidebarWrapper, null, /* @__PURE__ */ React.createElement(EditButton, null), displayNav && /* @__PURE__ */ React.createElement(
-      Nav,
-      {
-        isLocalMode: (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode,
-        showCollections: isTinaAdminEnabled,
-        collectionsInfo,
-        screens: activeScreens,
-        cloudConfigs: allConfigs,
-        contentCreators,
-        sidebarWidth,
-        RenderNavSite: ({ view }) => /* @__PURE__ */ React.createElement(
-          SidebarSiteLink,
-          {
-            view,
-            onClick: () => {
-              setActiveView(view);
-              setMenuIsOpen(false);
-            }
-          }
-        ),
-        RenderNavCloud: ({ config }) => /* @__PURE__ */ React.createElement(SidebarCloudLink$1, { config }),
-        RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(
-          SidebarCollectionLink,
-          {
-            onClick: () => {
-              setMenuIsOpen(false);
-            },
-            collection
-          }
-        ),
-        AuthRenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(
-          SidebarCollectionLink,
-          {
-            onClick: () => {
-              setMenuIsOpen(false);
-            },
-            collection,
-            Icon: ImUsers
-          }
-        )
-      }
-    ), /* @__PURE__ */ React.createElement(SidebarBody, null, /* @__PURE__ */ React.createElement(
-      SidebarHeader,
+    /* @__PURE__ */ React.createElement(MdSyncProblem, { className: "w-6 h-full ml-2 text-red-500 fill-current" })
+  );
+};
+const EventsList = ({ cms }) => {
+  const [cursor, setCursor] = React.useState(void 0);
+  const [existingEvents, setExistingEvents] = React.useState([]);
+  const {
+    events,
+    cursor: nextCursor,
+    loading,
+    error
+  } = useGetEvents(cms, cursor, existingEvents);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4 w-full h-full grow-0" }, events.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "shrink grow-0 overflow-scroll w-full rounded-md shadow ring-1 ring-black ring-opacity-5" }, /* @__PURE__ */ React.createElement("table", { className: "w-full divide-y divide-gray-100" }, events.map((event, index) => {
+    const date = new Date(event.timestamp).toDateString();
+    const time = new Date(event.timestamp).toTimeString();
+    return /* @__PURE__ */ React.createElement("tr", { className: index % 2 === 0 ? "" : "bg-gray-50" }, event.isError ? /* @__PURE__ */ React.createElement(
+      "td",
       {
-        displayNav,
-        renderNav,
-        isLocalMode: (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isLocalMode,
-        branchingEnabled
-      }
-    ), /* @__PURE__ */ React.createElement(FormsView, { loadingPlaceholder: sidebar.loadingPlaceholder }), activeScreen && /* @__PURE__ */ React.createElement(
-      ScreenPluginModal,
+        key: `${event.id}_error_icon`,
+        className: "py-3 pl-4 pr-0 w-0"
+      },
+      /* @__PURE__ */ React.createElement(BsExclamationOctagonFill, { className: "text-red-500 fill-current w-5 h-auto" })
+    ) : /* @__PURE__ */ React.createElement(
+      "td",
       {
-        screen: activeScreen,
-        close: () => setActiveView(null)
-      }
-    )), /* @__PURE__ */ React.createElement(ResizeHandle, null)), renderMobileNav && /* @__PURE__ */ React.createElement(Transition, { show: menuIsOpen, as: "div" }, /* @__PURE__ */ React.createElement(
-      TransitionChild,
+        key: `${event.id}_ok_icon`,
+        className: "py-3 pl-4 pr-0 w-0"
+      },
+      /* @__PURE__ */ React.createElement(BsCheckCircleFill, { className: "text-green-500 fill-current w-5 h-auto" })
+    ), /* @__PURE__ */ React.createElement(
+      "td",
       {
-        enter: "transform transition-all ease-out duration-300",
-        enterFrom: "opacity-0 -translate-x-full",
-        enterTo: "opacity-100 translate-x-0",
-        leave: "transform transition-all ease-in duration-200",
-        leaveFrom: "opacity-100 translate-x-0",
-        leaveTo: "opacity-0 -translate-x-full"
+        key: `${event.id}_msg`,
+        className: "whitespace-nowrap p-3 text-base text-gray-500"
       },
-      /* @__PURE__ */ React.createElement("div", { className: "fixed left-0 top-0 z-overlay h-full transform" }, /* @__PURE__ */ React.createElement(
-        Nav,
-        {
-          isLocalMode: (_f = (_e = cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.isLocalMode,
-          className: "rounded-r-md",
-          showCollections: isTinaAdminEnabled,
-          collectionsInfo,
-          screens: activeScreens,
-          cloudConfigs: allConfigs,
-          contentCreators,
-          sidebarWidth,
-          RenderNavSite: ({ view }) => /* @__PURE__ */ React.createElement(
-            SidebarSiteLink,
-            {
-              view,
-              onClick: () => {
-                setActiveView(view);
-                setMenuIsOpen(false);
-              }
-            }
-          ),
-          RenderNavCloud: ({ config }) => /* @__PURE__ */ React.createElement(SidebarCloudLink$1, { config }),
-          RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(
-            SidebarCollectionLink,
-            {
-              onClick: () => {
-                setMenuIsOpen(false);
-              },
-              collection
-            }
-          ),
-          AuthRenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(
-            SidebarCollectionLink,
-            {
-              onClick: () => {
-                setMenuIsOpen(false);
-              },
-              collection,
-              Icon: ImUsers
-            }
-          )
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "absolute top-8 right-0 transform translate-x-full overflow-hidden" }, /* @__PURE__ */ React.createElement(
-          Button$1,
-          {
-            rounded: "right",
-            variant: "secondary",
-            onClick: () => {
-              setMenuIsOpen(false);
-            },
-            className: "transition-opacity duration-150 ease-out"
-          },
-          /* @__PURE__ */ React.createElement(IoMdClose, { className: "h-5 w-auto text-blue-500" })
-        ))
-      ))
+      event.message,
+      event.isError && /* @__PURE__ */ React.createElement("div", { className: "w-full text-gray-300 text-xs mt-0.5" }, event.id)
     ), /* @__PURE__ */ React.createElement(
-      TransitionChild,
+      "td",
       {
-        enter: "ease-out duration-300",
-        enterFrom: "opacity-0",
-        enterTo: "opacity-80",
-        entered: "opacity-80",
-        leave: "ease-in duration-200",
-        leaveFrom: "opacity-80",
-        leaveTo: "opacity-0"
+        key: `${event.id}_ts`,
+        className: "whitespace-nowrap py-3 pl-3 pr-4 text-sm text-gray-500"
       },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          onClick: () => {
-            setMenuIsOpen(false);
-          },
-          className: "fixed z-menu inset-0 bg-gradient-to-br from-gray-800 via-gray-900 to-black"
-        }
-      )
-    )))
-  );
-};
-const updateBodyDisplacement = ({
-  position = "overlay",
-  displayState,
-  sidebarWidth,
-  resizingSidebar
-}) => {
-  const body = document.getElementsByTagName("body")[0];
-  const windowWidth = window.innerWidth;
-  if (position === "displace") {
-    body.style.transition = resizingSidebar ? "" : displayState === "fullscreen" ? "padding 0ms 150ms" : displayState === "closed" ? "padding 0ms 0ms" : "padding 0ms 300ms";
-    if (displayState === "open") {
-      const bodyDisplacement = Math.min(
-        sidebarWidth,
-        windowWidth - minPreviewWidth
-      );
-      body.style.paddingLeft = `${bodyDisplacement}px`;
-    } else {
-      body.style.paddingLeft = "0";
-    }
-  } else {
-    body.style.transition = "";
-    body.style.paddingLeft = "0";
-  }
-};
-const SidebarHeader = ({
-  branchingEnabled,
-  renderNav,
-  displayNav,
-  isLocalMode
-}) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const { toggleFullscreen, displayState, setMenuIsOpen, toggleSidebarOpen } = React.useContext(SidebarContext);
-  const displayMenuButton = renderNav && !displayNav;
-  const cms = useCMS$1();
-  const previewFunction = (_f = (_e = (_d = (_c = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.schema) == null ? void 0 : _c.config) == null ? void 0 : _d.config) == null ? void 0 : _e.ui) == null ? void 0 : _f.previewUrl;
-  const branch = (_h = (_g = cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.branch;
-  const previewUrl = typeof previewFunction === "function" ? (_i = previewFunction({ branch })) == null ? void 0 : _i.url : null;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex-grow-0 w-full overflow-visible z-20" }, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "mt-4 -mb-14 w-full flex gap-3 items-center justify-between pointer-events-none" }, displayMenuButton && /* @__PURE__ */ React.createElement(
+      date,
+      /* @__PURE__ */ React.createElement("span", { className: "w-full block text-gray-300 text-xs mt-0.5" }, time)
+    ));
+  }).flat())), loading && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-400 text-center" }, "Loading..."), error && /* @__PURE__ */ React.createElement("div", null, "Error: ", error.message), /* @__PURE__ */ React.createElement("div", { className: "text-center flex-1" }, /* @__PURE__ */ React.createElement(
     Button$1,
     {
-      rounded: "right",
-      variant: "white",
       onClick: () => {
-        setMenuIsOpen(true);
-      },
-      className: "pointer-events-auto -ml-px"
+        setExistingEvents(events);
+        setCursor(nextCursor);
+      }
     },
-    /* @__PURE__ */ React.createElement(BiMenu, { className: "h-6 w-auto text-blue-500" })
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex gap-3 items-center shrink min-w-0" }, branchingEnabled && !isLocalMode && /* @__PURE__ */ React.createElement(BranchButton, null), branchingEnabled && !isLocalMode && previewUrl && /* @__PURE__ */ React.createElement(
+    "Load More Events"
+  )));
+};
+const SyncStatusModal = ({ closeEventsModal, cms }) => /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(FullscreenModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: closeEventsModal }, "Event Log"), /* @__PURE__ */ React.createElement(ModalBody, { className: "flex h-full flex-col", padded: true }, /* @__PURE__ */ React.createElement(EventsList, { cms }))));
+const SyncStatus = ({ cms, setEventsOpen }) => {
+  var _a, _b;
+  const syncStatus = useSyncStatus(cms);
+  function openEventsModal() {
+    setEventsOpen(true);
+  }
+  if ((_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     "button",
     {
-      className: "pointer-events-auto flex min-w-0	shrink gap-1 items-center justify-between form-select text-sm h-10 px-4 shadow text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-100 transition-color duration-150 ease-out rounded-full focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out text-[12px] leading-tight min-w-[5rem]",
-      onClick: () => {
-        window.open(previewUrl, "_blank");
+      className: `text-lg px-4 py-2 first:pt-3 last:pb-3 tracking-wide whitespace-nowrap flex items-center opacity-80 text-gray-600 hover:text-blue-400 hover:bg-gray-50 hover:opacity-100`,
+      onClick: openEventsModal
+    },
+    syncStatus.state !== "error" ? /* @__PURE__ */ React.createElement(HiOutlineClipboardList, { className: "w-6 h-auto mr-2 text-blue-400" }) : /* @__PURE__ */ React.createElement(MdSyncProblem, { className: "w-6 h-auto mr-2 text-red-400" }),
+    " ",
+    "Event Log"
+  ));
+};
+const version = "2.7.6";
+const Nav = ({
+  isLocalMode,
+  className = "",
+  children,
+  showCollections,
+  collectionsInfo,
+  screens,
+  cloudConfigs,
+  contentCreators,
+  sidebarWidth,
+  RenderNavSite,
+  RenderNavCloud,
+  RenderNavCollection,
+  AuthRenderNavCollection,
+  ...props
+}) => {
+  const cms = useCMS$1();
+  const [eventsOpen, setEventsOpen] = React.useState(false);
+  const { contentCollections, authCollection } = collectionsInfo.collections.reduce(
+    (acc, collection) => {
+      if (collection.isAuthCollection) {
+        acc.authCollection = collection;
+      } else {
+        acc.contentCollections.push(collection);
       }
+      return acc;
     },
-    /* @__PURE__ */ React.createElement(BiLinkExternal, { className: "flex-shrink-0 w-4 h-auto text-blue-500/70 mr-1" }),
-    /* @__PURE__ */ React.createElement("span", { className: "truncate max-w-full min-w-0 shrink" }, "Preview")
-  )), /* @__PURE__ */ React.createElement(
+    {
+      contentCollections: []
+    }
+  );
+  function closeEventsModal() {
+    setEventsOpen(false);
+  }
+  const WrappedSyncStatus = React.forwardRef(
+    (props2, ref) => /* @__PURE__ */ React.createElement(SyncStatus, { ...props2 })
+  );
+  const screenCategories = screens.reduce(
+    (acc, screen) => {
+      const category = screen.navCategory || "Site";
+      acc[category] = acc[category] || [];
+      acc[category].push(screen);
+      return acc;
+    },
+    { Site: [] }
+  );
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: "flex items-center pointer-events-auto transition-opacity duration-150 ease-in-out -mr-px"
+      className: `relative z-30 flex flex-col bg-white border-r border-gray-200 w-96 h-full ${className}`,
+      style: { maxWidth: `${sidebarWidth}px` },
+      ...props
     },
-    /* @__PURE__ */ React.createElement(
-      Button$1,
+    /* @__PURE__ */ React.createElement("div", { className: "border-b border-gray-200" }, /* @__PURE__ */ React.createElement(Menu, { as: "div", className: "relative block" }, ({ open: open2 }) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      MenuButton,
       {
-        rounded: "left",
-        variant: "white",
-        onClick: toggleSidebarOpen,
-        "aria-label": "closes cms sidebar",
-        className: "-mr-px"
+        className: `group w-full px-6 py-3 gap-2 flex justify-between items-center transition-colors duration-150 ease-out ${open2 ? "bg-gray-50" : "bg-transparent"}`
       },
-      /* @__PURE__ */ React.createElement(MdOutlineArrowBackIos, { className: "h-[18px] w-auto -mr-1 text-blue-500" })
-    ),
-    /* @__PURE__ */ React.createElement(Button$1, { rounded: "custom", variant: "white", onClick: toggleFullscreen }, displayState === "fullscreen" ? (
-      // BiCollapseAlt
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800 flex-1 gap-1 opacity-80 group-hover:opacity-100 transition-opacity duration-150 ease-out" }, /* @__PURE__ */ React.createElement(
         "svg",
         {
-          className: "h-5 w-auto -mx-1 text-blue-500",
-          stroke: "currentColor",
-          fill: "currentColor",
-          strokeWidth: "0",
-          viewBox: "0 0 24 24",
-          xmlns: "http://www.w3.org/2000/svg"
+          viewBox: "0 0 32 32",
+          fill: "#EC4815",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "w-10 h-auto -ml-1"
         },
-        /* @__PURE__ */ React.createElement("path", { d: "M2 15h7v7h2v-9H2v2zM15 2h-2v9h9V9h-7V2z" })
+        /* @__PURE__ */ React.createElement("path", { d: "M18.6466 14.5553C19.9018 13.5141 20.458 7.36086 21.0014 5.14903C21.5447 2.9372 23.7919 3.04938 23.7919 3.04938C23.7919 3.04938 23.2085 4.06764 23.4464 4.82751C23.6844 5.58738 25.3145 6.26662 25.3145 6.26662L24.9629 7.19622C24.9629 7.19622 24.2288 7.10204 23.7919 7.9785C23.355 8.85496 24.3392 17.4442 24.3392 17.4442C24.3392 17.4442 21.4469 22.7275 21.4469 24.9206C21.4469 27.1136 22.4819 28.9515 22.4819 28.9515H21.0296C21.0296 28.9515 18.899 26.4086 18.462 25.1378C18.0251 23.8669 18.1998 22.596 18.1998 22.596C18.1998 22.596 15.8839 22.4646 13.8303 22.596C11.7767 22.7275 10.4072 24.498 10.16 25.4884C9.91287 26.4787 9.81048 28.9515 9.81048 28.9515H8.66211C7.96315 26.7882 7.40803 26.0129 7.70918 24.9206C8.54334 21.8949 8.37949 20.1788 8.18635 19.4145C7.99321 18.6501 6.68552 17.983 6.68552 17.983C7.32609 16.6741 7.97996 16.0452 10.7926 15.9796C13.6052 15.914 17.3915 15.5965 18.6466 14.5553Z" }),
+        /* @__PURE__ */ React.createElement("path", { d: "M11.1268 24.7939C11.1268 24.7939 11.4236 27.5481 13.0001 28.9516H14.3511C13.0001 27.4166 12.8527 23.4155 12.8527 23.4155C12.1656 23.6399 11.3045 24.3846 11.1268 24.7939Z" })
+      ), /* @__PURE__ */ React.createElement("span", null, "Tina")),
+      /* @__PURE__ */ React.createElement(SyncErrorWidget, { cms }),
+      /* @__PURE__ */ React.createElement(
+        FiMoreVertical,
+        {
+          className: `flex-0 w-6 h-full inline-block group-hover:opacity-80 transition-all duration-300 ease-in-out transform ${open2 ? "opacity-100 text-blue-400" : "text-gray-400 opacity-50 hover:opacity-70"}`
+        }
       )
-    ) : /* @__PURE__ */ React.createElement(BiExpandAlt, { className: "h-5 -mx-1 w-auto text-blue-500" }))
-  )));
-};
-const SidebarSiteLink = ({
-  view,
-  onClick
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100",
-      value: view.name,
-      onClick
-    },
-    /* @__PURE__ */ React.createElement(view.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }),
-    " ",
-    view.name
-  );
-};
-const SidebarCloudLink$1 = ({ config }) => {
-  if (config.text) {
-    return /* @__PURE__ */ React.createElement("span", { className: "text-base tracking-wide text-gray-500 flex items-center opacity-90" }, config.text, " ", /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement("div", { className: "transform translate-y-full absolute bottom-3 right-5 z-50" }, /* @__PURE__ */ React.createElement(
+      Transition,
+      {
+        enter: "transition duration-150 ease-out",
+        enterFrom: "transform opacity-0 -translate-y-2",
+        enterTo: "transform opacity-100 translate-y-0",
+        leave: "transition duration-75 ease-in",
+        leaveFrom: "transform opacity-100 translate-y-0",
+        leaveTo: "transform opacity-0 -translate-y-2"
+      },
+      /* @__PURE__ */ React.createElement(MenuItems, { className: "bg-white border border-gray-150 rounded-lg shadow-lg flex flex-col items-stretch overflow-hidden" }, /* @__PURE__ */ React.createElement(MenuItem, null, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: `text-lg px-4 py-2 first:pt-3 last:pb-3 tracking-wide whitespace-nowrap flex items-center opacity-80 text-gray-600 hover:text-blue-400 hover:bg-gray-50 hover:opacity-100`,
+          onClick: async () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            updateBodyDisplacement({
+              displayState: "closed",
+              sidebarWidth: null,
+              resizingSidebar: false
+            });
+            try {
+              if ((_c = (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.authProvider) == null ? void 0 : _c.logout) {
+                await ((_d = cms.api.tina) == null ? void 0 : _d.authProvider.logout());
+                if ((_f = (_e = cms == null ? void 0 : cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.onLogout) {
+                  await ((_h = (_g = cms == null ? void 0 : cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.onLogout());
+                  await new Promise(
+                    (resolve) => setTimeout(resolve, 500)
+                  );
+                }
+                window.location.href = new URL(
+                  window.location.href
+                ).pathname;
+              }
+            } catch (e) {
+              cms.alerts.error(`Error logging out: ${e}`);
+              console.error("Unexpected error calling logout");
+              console.error(e);
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(BiExit, { className: "w-6 h-auto mr-2 text-blue-400" }),
+        " Log Out"
+      )), /* @__PURE__ */ React.createElement(MenuItem, null, /* @__PURE__ */ React.createElement(
+        WrappedSyncStatus,
+        {
+          cms,
+          setEventsOpen
+        }
+      )))
+    ))))),
+    eventsOpen && /* @__PURE__ */ React.createElement(SyncStatusModal, { cms, closeEventsModal }),
+    children,
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col px-6 flex-1 overflow-auto" }, showCollections && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "flex space-x-1 justify-items-start uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, /* @__PURE__ */ React.createElement("span", null, "Collections"), isLocalMode && /* @__PURE__ */ React.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(
       "a",
       {
-        target: "_blank",
-        className: "ml-1 text-blue-600 hover:opacity-60",
-        href: config.link.href
+        href: "https://tina.io/docs/schema/#defining-collections",
+        target: "_blank"
       },
-      config.link.text
-    ));
-  }
-  return /* @__PURE__ */ React.createElement("span", { className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100" }, /* @__PURE__ */ React.createElement(config.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }), /* @__PURE__ */ React.createElement("a", { target: "_blank", href: config.link.href }, config.link.text));
+      /* @__PURE__ */ React.createElement(FiInfo, null)
+    ))), /* @__PURE__ */ React.createElement(
+      CollectionsList,
+      {
+        RenderNavCollection,
+        collections: contentCollections
+      }
+    )), (screenCategories.Site.length > 0 || contentCreators.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Site"), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, screenCategories.Site.map((view) => {
+      return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React.createElement(RenderNavSite, { view }));
+    }), contentCreators.map((plugin, idx) => {
+      return /* @__PURE__ */ React.createElement(CreateContentNavItem, { key: `plugin-${idx}`, plugin });
+    }), authCollection && /* @__PURE__ */ React.createElement(
+      CollectionsList,
+      {
+        RenderNavCollection: AuthRenderNavCollection,
+        collections: [authCollection]
+      }
+    ))), Object.entries(screenCategories).map(([category, screens2]) => {
+      if (category !== "Site") {
+        return /* @__PURE__ */ React.createElement("div", { key: category }, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, category), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, screens2.map((view) => {
+          return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React.createElement(RenderNavSite, { view }));
+        })));
+      }
+    }), !!(cloudConfigs == null ? void 0 : cloudConfigs.length) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Cloud"), /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, cloudConfigs.map((config) => {
+      return /* @__PURE__ */ React.createElement("li", { key: `nav-site-${config.name}` }, /* @__PURE__ */ React.createElement(RenderNavCloud, { config }));
+    }))), /* @__PURE__ */ React.createElement("div", { className: "grow" }), /* @__PURE__ */ React.createElement("span", { className: "font-sans font-light text-xs mb-3 mt-8 text-gray-500" }, "v", version))
+  );
 };
-const SidebarCollectionLink = ({
-  Icon = ImFilesEmpty,
-  collection,
-  onClick
+const CollectionsList = ({
+  collections,
+  RenderNavCollection
 }) => {
-  const cms = useCMS$1();
-  const tinaPreview = cms.flags.get("tina-preview") || false;
-  return /* @__PURE__ */ React.createElement(
-    "a",
+  if (collections.length === 0) {
+    return /* @__PURE__ */ React.createElement("div", null, "No collections found");
+  }
+  return /* @__PURE__ */ React.createElement("ul", { className: "flex flex-col gap-4" }, collections.map((collection) => {
+    return /* @__PURE__ */ React.createElement("li", { key: `nav-collection-${collection.name}` }, /* @__PURE__ */ React.createElement(RenderNavCollection, { collection }));
+  }));
+};
+const CreateContentNavItem = ({ plugin }) => {
+  const [open2, setOpen] = React.useState(false);
+  return /* @__PURE__ */ React.createElement("li", { key: plugin.name }, /* @__PURE__ */ React.createElement(
+    "button",
     {
-      onClick,
-      href: `${tinaPreview ? `/${tinaPreview}/index.html#` : "/admin#"}/collections/${collection.name}/~`,
-      className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100"
+      className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100",
+      onClick: () => {
+        setOpen(true);
+      }
     },
-    /* @__PURE__ */ React.createElement(Icon, { className: "mr-2 h-6 opacity-80 w-auto" }),
+    /* @__PURE__ */ React.createElement(VscNewFile, { className: "mr-3 h-6 opacity-80 w-auto" }),
     " ",
-    collection.label ? collection.label : collection.name
-  );
+    plugin.name
+  ), open2 && /* @__PURE__ */ React.createElement(FormModal, { plugin, close: () => setOpen(false) }));
 };
-const EditButton = ({}) => {
-  const { displayState, toggleSidebarOpen } = React.useContext(SidebarContext);
+const ResizeHandle = () => {
+  const {
+    resizingSidebar,
+    setResizingSidebar,
+    fullscreen,
+    setSidebarWidth,
+    displayState
+  } = React.useContext(SidebarContext);
+  React.useEffect(() => {
+    const handleMouseUp = () => setResizingSidebar(false);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
+  React.useEffect(() => {
+    const handleMouseMove = (e) => {
+      setSidebarWidth((sidebarWidth) => {
+        const newWidth = sidebarWidth + e.movementX;
+        const maxWidth = window.innerWidth - 8;
+        if (newWidth < minSidebarWidth) {
+          return minSidebarWidth;
+        } else if (newWidth > maxWidth) {
+          return maxWidth;
+        } else {
+          return newWidth;
+        }
+      });
+    };
+    if (resizingSidebar) {
+      window.addEventListener("mousemove", handleMouseMove);
+      document.body.classList.add("select-none");
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      document.body.classList.remove("select-none");
+    };
+  }, [resizingSidebar]);
+  const handleresizingSidebar = () => setResizingSidebar(true);
+  if (fullscreen) {
+    return null;
+  }
   return /* @__PURE__ */ React.createElement(
-    Button$1,
+    "div",
     {
-      rounded: "right",
-      variant: "primary",
-      size: "custom",
-      onClick: toggleSidebarOpen,
-      className: `z-chrome absolute top-6 right-0 translate-x-full text-sm h-10 pl-3 pr-4 transition-all duration-300 ${displayState !== "closed" ? "opacity-0 ease-in pointer-events-none" : "ease-out pointer-events-auto"}`,
-      "aria-label": "opens cms sidebar"
+      onMouseDown: handleresizingSidebar,
+      className: `z-100 absolute top-1/2 right-px w-2 h-32 bg-white rounded-r-md border border-gray-150 shadow-sm hover:shadow-md origin-left transition-all duration-150 ease-out transform translate-x-full -translate-y-1/2 group hover:bg-gray-50 ${displayState !== "closed" ? `opacity-100` : `opacity-0`} ${resizingSidebar ? `scale-110` : `scale-90 hover:scale-100`}`,
+      style: { cursor: "grab" }
     },
-    /* @__PURE__ */ React.createElement(BiPencil, { className: "h-6 w-auto" })
+    /* @__PURE__ */ React.createElement("span", { className: "absolute top-1/2 left-1/2 h-4/6 w-px bg-gray-200 transform -translate-y-1/2 -translate-x-1/2 opacity-30 transition-opacity duration-150 ease-out group-hover:opacity-100" })
   );
 };
-const SidebarWrapper = ({ children }) => {
-  const { displayState, sidebarWidth, resizingSidebar } = React.useContext(SidebarContext);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `fixed top-0 left-0 h-dvh z-base ${displayState === "closed" ? "pointer-events-none" : ""}`
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `relative h-dvh transform flex ${displayState !== "closed" ? "" : "-translate-x-full"} ${resizingSidebar ? "transition-none" : displayState === "closed" ? "transition-all duration-300 ease-in" : displayState === "fullscreen" ? "transition-all duration-150 ease-out" : "transition-all duration-300 ease-out"}`,
-        style: {
-          width: displayState === "fullscreen" ? "100vw" : `${sidebarWidth}px`,
-          maxWidth: displayState === "fullscreen" ? "100vw" : "calc(100vw - 8px)",
-          minWidth: "360px"
-        }
-      },
-      children
-    )
+const Item = ({
+  item,
+  depth,
+  setActiveFormId
+}) => {
+  const cms = useCMS();
+  const depths = ["pl-6", "pl-10", "pl-14"];
+  const form = React.useMemo(
+    () => cms.state.forms.find(({ tinaForm }) => item.formId === tinaForm.id),
+    [item.formId]
   );
-};
-const SidebarBody = ({ children }) => {
   return /* @__PURE__ */ React.createElement(
-    "div",
+    "button",
     {
-      className: "relative left-0 w-full h-full flex flex-col items-stretch bg-white border-r border-gray-200 overflow-hidden"
+      type: "button",
+      key: item.path,
+      onClick: () => setActiveFormId(item.formId),
+      className: `${depths[depth] || "pl-12"} pr-6 py-3 w-full h-full bg-transparent border-none text-lg text-gray-700 group hover:bg-gray-50 transition-all ease-out duration-150 flex items-center justify-between gap-2`
     },
-    children
+    /* @__PURE__ */ React.createElement(BiEdit, { className: "opacity-70 w-5 h-auto text-blue-500 flex-none" }),
+    /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex flex-col gap-0.5 items-start" }, /* @__PURE__ */ React.createElement("div", { className: "group-hover:text-blue-500 font-sans text-xs font-semibold text-gray-700 whitespace-normal" }, form.tinaForm.label), /* @__PURE__ */ React.createElement("div", { className: "group-hover:text-blue-500 text-base truncate leading-tight text-gray-600" }, form.tinaForm.id))
   );
 };
-const MarkdownFieldPlaceholder = {
-  __type: "field",
-  name: "markdown",
-  Component: createPlaceholder(
-    "Markdown"
-  )
-};
-const HtmlFieldPlaceholder = {
-  __type: "field",
-  name: "html",
-  Component: createPlaceholder(
-    "HTML"
-  )
-};
-function createPlaceholder(name, _pr) {
-  return (props) => {
-    return /* @__PURE__ */ React__default.createElement(
-      FieldMeta,
-      {
-        name: props.input.name,
-        label: `${name} Field not Registered`,
-        tinaForm: props.tinaForm
-      },
-      /* @__PURE__ */ React__default.createElement("p", { className: "whitespace-normal text-[15px] mt-2" }, "The ", name, " field is not registered. Some built-in field types are not bundled by default in an effort to control bundle size. Consult the Tina docs to learn how to use this field type."),
-      /* @__PURE__ */ React__default.createElement("p", { className: "whitespace-normal text-[15px] mt-2" }, /* @__PURE__ */ React__default.createElement(
-        "a",
+const FormListItem = ({
+  item,
+  depth,
+  setActiveFormId
+}) => {
+  var _a;
+  return /* @__PURE__ */ React.createElement("div", { className: "divide-y divide-gray-200" }, /* @__PURE__ */ React.createElement(Item, { setActiveFormId, item, depth }), item.subItems && /* @__PURE__ */ React.createElement("ul", { className: "divide-y divide-gray-200" }, (_a = item.subItems) == null ? void 0 : _a.map((subItem) => {
+    if (subItem.type === "document") {
+      return /* @__PURE__ */ React.createElement("li", { key: subItem.formId }, /* @__PURE__ */ React.createElement(
+        Item,
         {
-          className: "text-blue-500 underline",
-          href: "https://tina.io/docs/editing/markdown/#registering-the-field-plugins",
-          target: "_blank",
-          rel: "noreferrer noopener"
-        },
-        "Tina Docs: Registering Field Plugins"
-      ))
-    );
-  };
-}
-function dirname(path) {
-  var _a, _b;
-  const pattern = new RegExp("(?<prevDir>.*)/");
-  return (_b = (_a = path.match(pattern)) == null ? void 0 : _a.groups) == null ? void 0 : _b.prevDir;
-}
-const BreadcrumbButton = ({ className = "", ...props }) => /* @__PURE__ */ React__default.createElement(
-  "button",
-  {
-    className: "capitalize transition-colors duration-150 border-0 bg-transparent hover:text-blue-500 " + className,
-    ...props
-  }
-);
-function Breadcrumb$1({ directory = "", setDirectory }) {
-  directory = directory.replace(/^\/|\/$/g, "");
-  let prevDir = dirname(directory) || "";
-  if (prevDir === ".") {
-    prevDir = "";
-  }
-  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex items-center text-[16px] text-gray-300" }, directory !== "" && /* @__PURE__ */ React__default.createElement(
-    IconButton,
+          setActiveFormId,
+          depth: depth + 1,
+          item: subItem
+        }
+      ));
+    }
+  })));
+};
+const FormLists = (props) => {
+  const cms = useCMS();
+  return /* @__PURE__ */ React.createElement(
+    Transition,
     {
-      variant: "ghost",
-      className: "mr-2",
-      onClick: () => setDirectory(prevDir)
+      appear: true,
+      show: true,
+      as: "div",
+      enter: "transition-all ease-out duration-150",
+      enterFrom: "opacity-0 -translate-x-1/2",
+      enterTo: "opacity-100",
+      leave: "transition-all ease-out duration-150",
+      leaveFrom: "opacity-100",
+      leaveTo: "opacity-0 -translate-x-1/2"
     },
-    /* @__PURE__ */ React__default.createElement(
-      LeftArrowIcon,
+    cms.state.formLists.map((formList, index) => /* @__PURE__ */ React.createElement("div", { key: `${formList.id}-${index}`, className: "pt-16" }, /* @__PURE__ */ React.createElement(
+      FormList,
       {
-        className: `w-7 h-auto fill-gray-300 hover:fill-gray-900 transition duration-150 ease-out`
+        isEditing: props.isEditing,
+        setActiveFormId: (id) => {
+          cms.dispatch({ type: "forms:set-active-form-id", value: id });
+        },
+        formList
       }
-    )
-  ), /* @__PURE__ */ React__default.createElement(
-    BreadcrumbButton,
-    {
-      onClick: () => setDirectory(""),
-      className: directory === "" ? "text-gray-500 font-bold" : "text-gray-300 font-medium after:pl-1.5 after:content-['/']"
-    },
-    "Media"
-  ), directory && directory.split("/").map((part, index, parts) => {
-    const currentDir = parts.slice(0, index + 1).join("/");
-    return /* @__PURE__ */ React__default.createElement(
-      BreadcrumbButton,
-      {
-        className: "pl-1.5 " + (index + 1 === parts.length ? "text-gray-500 font-bold" : "text-gray-300 font-medium after:pl-1.5 after:content-['/']"),
-        key: currentDir,
-        onClick: () => {
-          setDirectory(currentDir);
+    )))
+  );
+};
+const FormList = (props) => {
+  const cms = useCMS();
+  const listItems = React.useMemo(() => {
+    var _a;
+    const orderedListItems = [];
+    const globalItems = [];
+    const topItems = [];
+    props.formList.items.forEach((item) => {
+      if (item.type === "document") {
+        const form = cms.state.forms.find(
+          ({ tinaForm }) => tinaForm.id === item.formId
+        );
+        if (form.tinaForm.global) {
+          globalItems.push(item);
+        } else {
+          orderedListItems.push(item);
         }
-      },
-      part
+      } else {
+        orderedListItems.push(item);
+      }
+    });
+    if (((_a = orderedListItems[0]) == null ? void 0 : _a.type) === "document") {
+      topItems.push({ type: "list", label: "Documents" });
+    }
+    let extra = [];
+    if (globalItems.length) {
+      extra = [{ type: "list", label: "Global Documents" }, ...globalItems];
+    }
+    return [...topItems, ...orderedListItems, ...extra];
+  }, [JSON.stringify(props.formList.items)]);
+  return /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", { className: "divide-y divide-gray-200" }, listItems.map((item, index) => {
+    if (item.type === "list") {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: item.label,
+          className: `relative group text-left w-full bg-white shadow-sm
+   border-gray-100 px-6 -mt-px pb-3 ${index > 0 ? "pt-6 bg-gradient-to-b from-gray-50 via-white to-white" : "pt-3"}`
+        },
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            className: "text-sm tracking-wide font-bold text-gray-700 uppercase"
+          },
+          item.label
+        )
+      );
+    }
+    return /* @__PURE__ */ React.createElement(
+      FormListItem,
+      {
+        setActiveFormId: (id) => props.setActiveFormId(id),
+        key: item.formId,
+        item,
+        depth: 0
+      }
     );
-  }));
-}
-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",
+  })));
+};
+const SidebarNoFormsPlaceholder = () => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: "relative flex flex-col items-center justify-center text-center p-5 pb-16 w-full h-full overflow-y-auto",
+    style: {
+      animationName: "fade-in",
+      animationDelay: "300ms",
+      animationTimingFunction: "ease-out",
+      animationIterationCount: 1,
+      animationFillMode: "both",
+      animationDuration: "150ms"
+    }
+  },
+  /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, "Looks like there's ", /* @__PURE__ */ React.createElement("br", null), "nothing to edit on ", /* @__PURE__ */ React.createElement("br", null), "this page."),
+  /* @__PURE__ */ React.createElement("p", { className: "block pt-5" }, /* @__PURE__ */ React.createElement(
+    Button$1,
     {
-      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` : ``}`
+      href: "https://tina.io/docs/contextual-editing/overview",
+      target: "_blank",
+      as: "a"
     },
-    /* @__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));
-};
-function ListMediaItem({ item, onClick, active }) {
-  let FileIcon = BiFile;
-  if (item.type === "dir") {
-    FileIcon = BiFolder;
-  } else if (isVideo(item.src)) {
-    FileIcon = BiMovie;
+    /* @__PURE__ */ React.createElement(Emoji$1, { className: "mr-1.5" }, "📖"),
+    " Contextual Editing Docs"
+  ))
+);
+const Emoji$1 = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
+  "span",
+  {
+    className: `text-[24px] leading-none inline-block ${className}`,
+    ...props
   }
-  const thumbnail = (item.thumbnails || {})["75x75"];
-  return /* @__PURE__ */ React__default.createElement(
-    "li",
-    {
-      className: `group relative flex shrink-0 items-center transition duration-150 ease-out cursor-pointer border-b border-gray-150 ${active ? "bg-gradient-to-r from-white to-gray-50/50 text-blue-500 hover:bg-gray-50" : "bg-white hover:bg-gray-50/50 hover:text-blue-500"}`,
-      onClick: () => {
-        if (!active) {
-          onClick(item);
-        } else {
-          onClick(false);
+);
+const minimumTimeToShowLoadingIndicator = 1e3;
+const FormsView = ({ loadingPlaceholder } = {}) => {
+  const cms = useCMS$1();
+  const { setFormIsPristine } = React.useContext(SidebarContext);
+  const [isShowingLoading, setIsShowingLoading] = React.useState(true);
+  const [initialLoadComplete, setInitialLoadComplete] = React.useState(false);
+  React.useEffect(() => {
+    if (cms.state.isLoadingContent) {
+      setIsShowingLoading(true);
+      const timer = setTimeout(() => {
+        if (!cms.state.isLoadingContent) {
+          setIsShowingLoading(false);
+          setInitialLoadComplete(true);
         }
+      }, minimumTimeToShowLoadingIndicator);
+      return () => clearTimeout(timer);
+    } else {
+      const timer = setTimeout(() => {
+        setIsShowingLoading(false);
+        setInitialLoadComplete(true);
+      }, minimumTimeToShowLoadingIndicator);
+      return () => clearTimeout(timer);
+    }
+  }, [cms.state.isLoadingContent]);
+  if (isShowingLoading || !initialLoadComplete) {
+    const LoadingPlaceholder = loadingPlaceholder || SidebarLoadingPlaceholder;
+    return /* @__PURE__ */ React.createElement(LoadingPlaceholder, null);
+  }
+  if (!cms.state.formLists.length) {
+    return /* @__PURE__ */ React.createElement(SidebarNoFormsPlaceholder, null);
+  }
+  const isMultiform = cms.state.forms.length > 1;
+  const activeForm = cms.state.forms.find(
+    ({ tinaForm }) => tinaForm.id === cms.state.activeFormId
+  );
+  const isEditing = !!activeForm;
+  if (isMultiform && !activeForm) {
+    return /* @__PURE__ */ React.createElement(FormLists, { isEditing });
+  }
+  const formMetas = cms.plugins.all("form:meta");
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, activeForm && /* @__PURE__ */ React.createElement(FormWrapper$1, { isEditing, isMultiform }, isMultiform && /* @__PURE__ */ React.createElement(MultiformFormHeader, { activeForm }), !isMultiform && /* @__PURE__ */ React.createElement(FormHeader, { activeForm }), formMetas == null ? void 0 : formMetas.map((meta) => /* @__PURE__ */ React.createElement(React.Fragment, { key: meta.name }, /* @__PURE__ */ React.createElement(meta.Component, null))), /* @__PURE__ */ React.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine })));
+};
+const FormWrapper$1 = ({ isEditing, children }) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "flex-1 flex flex-col flex-nowrap overflow-hidden h-full w-full relative bg-white",
+      style: isEditing ? {
+        transform: "none",
+        animationName: "fly-in-left",
+        animationDuration: "150ms",
+        animationDelay: "0",
+        animationIterationCount: 1,
+        animationTimingFunction: "ease-out"
+      } : {
+        transform: "translate3d(100%, 0, 0)"
       }
     },
-    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-16 h-16 bg-gray-50 border-r border-gray-150 overflow-hidden flex justify-center flex-shrink-0" }, isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement(
-      "img",
-      {
-        className: "object-contain object-center w-full h-full origin-center transition-all duration-150 ease-out group-hover:scale-110",
-        src: thumbnail,
-        alt: item.filename
-      }
-    ) : /* @__PURE__ */ React__default.createElement(FileIcon, { className: "w-1/2 h-full fill-gray-300" })),
-    /* @__PURE__ */ React__default.createElement(
-      "span",
-      {
-        className: "text-base flex-grow w-full break-words truncate px-3 py-2"
-      },
-      item.filename
-    )
+    children
   );
-}
-function GridMediaItem({ item, active, onClick }) {
-  let FileIcon = BiFile;
-  if (item.type === "dir") {
-    FileIcon = BiFolder;
-  } else if (isVideo(item.src)) {
-    FileIcon = BiMovie;
-  }
-  const thumbnail = (item.thumbnails || {})["400x400"];
-  return /* @__PURE__ */ React__default.createElement(
-    "li",
+};
+const MultiformFormHeader = ({
+  activeForm
+}) => {
+  const cms = useCMS$1();
+  const { formIsPristine } = React.useContext(SidebarContext);
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      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 ${active ? "shadow-outline" : "shadow hover:shadow-md hover:scale-103 hover:border-gray-150"} ${item.type === "dir" ? "cursor-pointer" : ""}`
+      className: "pt-18 pb-4 px-6 border-b border-gray-200 bg-gradient-to-t from-white to-gray-50"
     },
-    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(
+    /* @__PURE__ */ React.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React.createElement(
       "button",
       {
-        className: "absolute w-full h-full flex items-center justify-center bg-white",
+        type: "button",
+        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
         onClick: () => {
-          if (!active) {
-            onClick(item);
+          const state = activeForm.tinaForm.finalForm.getState();
+          if (state.invalid === true) {
+            cms.alerts.error("Cannot navigate away from an invalid form.");
           } else {
-            onClick(false);
+            cms.dispatch({ type: "forms:set-active-form-id", value: null });
           }
         }
       },
-      isImage(thumbnail) ? /* @__PURE__ */ React__default.createElement(
-        "img",
-        {
-          className: "object-contain object-center w-full h-full",
-          src: thumbnail,
-          alt: item.filename
+      /* @__PURE__ */ React.createElement(BiDotsVertical, { className: "h-auto w-5 inline-block opacity-70" })
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
+        onClick: () => {
+          const collectionName = cms.api.tina.schema.getCollectionByFullPath(
+            cms.state.activeFormId
+          ).name;
+          window.location.href = `${new URL(window.location.href).pathname}#/collections/${collectionName}/~`;
         }
-      ) : /* @__PURE__ */ React__default.createElement("div", { className: "p-4 w-full flex flex-col gap-4 items-center justify-center" }, /* @__PURE__ */ React__default.createElement(FileIcon, { className: "w-[30%] h-auto fill-gray-300" }), /* @__PURE__ */ React__default.createElement("span", { className: "block text-base text-gray-600 w-full break-words truncate" }, item.filename))
-    )
+      },
+      /* @__PURE__ */ React.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
+    ), /* @__PURE__ */ React.createElement("span", { className: "opacity-30 text-sm leading-tight whitespace-nowrap flex-0" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, activeForm.tinaForm.label || activeForm.tinaForm.id), /* @__PURE__ */ React.createElement(FormStatus, { pristine: formIsPristine }))
   );
-}
-const DeleteModal$1 = ({
-  close: close2,
-  deleteFunc,
-  filename
-}) => {
-  const [processing, setProcessing] = React__default.useState(false);
-  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, { close: close2 }, "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$1, { style: { flexGrow: 2 }, disabled: processing, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
-    Button$1,
-    {
-      style: { flexGrow: 3 },
-      disabled: processing,
-      variant: "danger",
-      onClick: async () => {
-        setProcessing(true);
-        try {
-          await deleteFunc();
-        } catch (e) {
-          console.error(e);
-        } finally {
-          close2();
-        }
-      }
-    },
-    /* @__PURE__ */ React__default.createElement("span", { className: "mr-1" }, "Delete"),
-    processing && /* @__PURE__ */ React__default.createElement(LoadingDots, null)
-  ))));
 };
-const NewFolderModal = ({ onSubmit, close: close2 }) => {
-  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: close2 }, "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"), " – 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: (e) => setFolderName(e.target.value)
-    }
-  )), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
-    Button$1,
+const FormHeader = ({ activeForm }) => {
+  const { formIsPristine } = React.useContext(SidebarContext);
+  const cms = useCMS$1();
+  const shortFormLabel = activeForm.tinaForm.label ? activeForm.tinaForm.label.replace(/^.*[\\\/]/, "") : false;
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      disabled: !folderName,
-      style: { flexGrow: 3 },
-      variant: "primary",
-      onClick: () => {
-        if (!folderName)
-          return;
-        onSubmit(folderName);
-        close2();
-      }
+      className: "pt-18 pb-4 px-6 border-b border-gray-200 bg-gradient-to-t from-white to-gray-50"
     },
-    "Create New Folder"
-  ))));
-};
-const { useDropzone } = dropzone;
-const join = function(...parts) {
-  const [first, last, slash] = [0, parts.length - 1, "/"];
-  const matchLeadingSlash = new RegExp("^" + slash);
-  const matchTrailingSlash = new RegExp(slash + "$");
-  parts = parts.map(function(part, index) {
-    if (index === first && part === "file://")
-      return part;
-    if (index > first)
-      part = part.replace(matchLeadingSlash, "");
-    if (index < last)
-      part = part.replace(matchTrailingSlash, "");
-    return part;
-  });
-  return parts.join(slash);
+    /* @__PURE__ */ React.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "pointer-events-auto text-xs text-blue-400 hover:text-blue-500 hover:underline transition-all ease-out duration-150",
+        onClick: () => {
+          const collectionName = cms.api.tina.schema.getCollectionByFullPath(
+            cms.state.activeFormId
+          ).name;
+          window.location.href = `${new URL(window.location.href).pathname}#/collections/${collectionName}/~`;
+        }
+      },
+      /* @__PURE__ */ React.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
+    ), shortFormLabel && /* @__PURE__ */ React.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, shortFormLabel), /* @__PURE__ */ React.createElement(FormStatus, { pristine: formIsPristine }))
+  );
 };
-function MediaManager2() {
-  const cms = useCMS();
-  const [request, setRequest] = useState();
-  useEffect(() => {
-    return cms.events.subscribe("media:open", ({ type, ...request2 }) => {
-      setRequest(request2);
-    });
-  }, []);
-  if (!request)
+const SidebarContext = React.createContext(null);
+const minPreviewWidth = 440;
+const minSidebarWidth = 360;
+const navBreakpoint = 1279;
+const LOCALSTATEKEY = "tina.sidebarState";
+const LOCALWIDTHKEY = "tina.sidebarWidth";
+const defaultSidebarWidth = 440;
+const defaultSidebarPosition = "displace";
+const defaultSidebarState = "open";
+function SidebarProvider({
+  position = defaultSidebarPosition,
+  resizingSidebar,
+  setResizingSidebar,
+  defaultWidth = defaultSidebarWidth,
+  sidebar
+}) {
+  var _a, _b, _c;
+  useSubscribable(sidebar);
+  const cms = useCMS$1();
+  if (!cms.enabled)
     return null;
-  const close2 = () => setRequest(void 0);
-  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(FullscreenModal, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full bg-gray-50 flex items-center justify-between px-5 pt-3 m-0" }, /* @__PURE__ */ React__default.createElement("h2", { className: "text-gray-500 font-sans font-medium text-base leading-none m-0 block truncate" }, "Media Manager"), /* @__PURE__ */ React__default.createElement(
-    "div",
+  return /* @__PURE__ */ React.createElement(
+    Sidebar$1,
     {
-      onClick: close2,
-      className: "flex items-center fill-gray-400 cursor-pointer transition-colors duration-100 ease-out hover:fill-gray-700"
-    },
-    /* @__PURE__ */ React__default.createElement(CloseIcon, { className: "w-6 h-auto" })
-  )), /* @__PURE__ */ React__default.createElement(ModalBody, { className: "flex h-full flex-col" }, /* @__PURE__ */ React__default.createElement(MediaPicker, { ...request, close: close2 }))));
+      position: ((_a = cms == null ? void 0 : cms.sidebar) == null ? void 0 : _a.position) || position,
+      defaultWidth: ((_b = cms == null ? void 0 : cms.sidebar) == null ? void 0 : _b.defaultWidth) || defaultWidth,
+      resizingSidebar,
+      setResizingSidebar,
+      renderNav: (
+        // @ts-ignore
+        typeof ((_c = cms == null ? void 0 : cms.sidebar) == null ? void 0 : _c.renderNav) !== "undefined" ? (
+          // @ts-ignore
+          cms.sidebar.renderNav
+        ) : true
+      ),
+      sidebar
+    }
+  );
 }
-const defaultListError = new MediaListError({
-  title: "Error fetching media",
-  message: "Something went wrong while requesting the resource.",
-  docsLink: "https://tina.io/docs/media/#media-store"
-});
-function MediaPicker({
-  allowDelete,
-  onSelect,
-  close: close2,
-  ...props
-}) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const cms = useCMS();
-  const [listState, setListState] = useState(() => {
-    if (cms.media.isConfigured)
-      return "loading";
-    return "not-configured";
-  });
-  const [deleteModalOpen, setDeleteModalOpen] = React__default.useState(false);
-  const [newFolderModalOpen, setNewFolderModalOpen] = React__default.useState(false);
-  const [listError, setListError] = useState(defaultListError);
-  const [directory, setDirectory] = useState(
-    props.directory
+const useFetchCollections = (cms) => {
+  return { collections: cms.api.admin.fetchCollections(), loading: false };
+};
+const Sidebar$1 = ({
+  sidebar,
+  defaultWidth,
+  // defaultState,
+  position,
+  renderNav,
+  resizingSidebar,
+  setResizingSidebar
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const cms = useCMS$1();
+  const collectionsInfo = useFetchCollections(cms);
+  const [branchingEnabled, setBranchingEnabled] = React.useState(
+    () => cms.flags.get("branch-switcher")
   );
-  const [list, setList] = useState({
-    items: [],
-    nextOffset: void 0
-  });
-  const resetList = () => setList({
-    items: [],
-    nextOffset: void 0
-  });
-  const [viewMode, setViewMode] = useState("grid");
-  const [activeItem, setActiveItem] = useState(false);
-  const closePreview = () => setActiveItem(false);
-  const [refreshing, setRefreshing] = useState(false);
-  const [loadFolders, setLoadFolders] = useState(true);
-  const [offsetHistory, setOffsetHistory] = useState([]);
-  const offset2 = offsetHistory[offsetHistory.length - 1];
-  const resetOffset = () => setOffsetHistory([]);
-  async function loadMedia(loadFolders2 = true) {
-    setListState("loading");
-    try {
-      const _list = await cms.media.list({
-        offset: offset2,
-        limit: cms.media.pageSize,
-        directory,
-        thumbnailSizes: [
-          { w: 75, h: 75 },
-          { w: 400, h: 400 },
-          { w: 1e3, h: 1e3 }
-        ],
-        filesOnly: !loadFolders2
-      });
-      setList({
-        items: [...list.items, ..._list.items],
-        nextOffset: _list.nextOffset
-      });
-      setListState("loaded");
-    } catch (e) {
-      console.error(e);
-      if (e.ERR_TYPE === "MediaListError") {
-        setListError(e);
-      } else {
-        setListError(defaultListError);
+  React.useEffect(() => {
+    cms.events.subscribe("flag:set", ({ key, value }) => {
+      if (key === "branch-switcher") {
+        setBranchingEnabled(value);
       }
-      setListState("error");
+    });
+  }, [cms.events]);
+  const screens = cms.plugins.getType("screen");
+  const cloudConfigs = cms.plugins.getType("cloud-config");
+  useSubscribable(sidebar);
+  useSubscribable(screens);
+  const allScreens = screens.all();
+  const allConfigs = cloudConfigs.all();
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
+  const [activeScreen, setActiveView] = useState(null);
+  const [sidebarWidth, setSidebarWidth] = React.useState(defaultWidth);
+  const [formIsPristine, setFormIsPristine] = React.useState(true);
+  const activeScreens = allScreens.filter(
+    (screen) => {
+      var _a2, _b2;
+      return screen.navCategory !== "Account" || ((_b2 = (_a2 = cms.api.tina) == null ? void 0 : _a2.authProvider) == null ? void 0 : _b2.getLoginStrategy()) === "UsernamePassword";
     }
-  }
-  useEffect(() => {
-    if (!refreshing)
-      return;
-    loadMedia();
-    setRefreshing(false);
-  }, [refreshing]);
-  useEffect(() => {
-    if (!cms.media.isConfigured)
-      return;
-    if (refreshing)
-      return;
-    loadMedia(loadFolders);
-    if (loadFolders)
-      setLoadFolders(false);
-    return cms.events.subscribe(
-      ["media:delete:success", "media:pageSize"],
-      () => {
-        setRefreshing(true);
-        resetOffset();
-        resetList();
+  );
+  const setDisplayState = (value) => cms.dispatch({ type: "sidebar:set-display-state", value });
+  const displayState = cms.state.sidebarDisplayState;
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const localSidebarState = window.localStorage.getItem(LOCALSTATEKEY);
+      const localSidebarWidth = window.localStorage.getItem(LOCALWIDTHKEY);
+      if (localSidebarState !== null) {
+        setDisplayState(JSON.parse(localSidebarState));
+      }
+      if (localSidebarWidth !== null) {
+        setSidebarWidth(JSON.parse(localSidebarWidth));
       }
-    );
-  }, [offset2, directory, cms.media.isConfigured]);
-  const onClickMediaItem = (item) => {
-    if (!item) {
-      setActiveItem(false);
-    } else if (item.type === "dir") {
-      setDirectory(
-        item.directory === "." || item.directory === "" ? item.filename : join(item.directory, item.filename)
-      );
-      setLoadFolders(true);
-      resetOffset();
-      resetList();
-      setActiveItem(false);
-    } else {
-      setActiveItem(item);
     }
-  };
-  let deleteMediaItem;
-  if (allowDelete) {
-    deleteMediaItem = async (item) => {
-      await cms.media.delete(item);
-    };
-  }
-  let selectMediaItem;
-  if (onSelect) {
-    selectMediaItem = (item) => {
-      onSelect(item);
-      if (close2)
-        close2();
-    };
-  }
-  const [uploading, setUploading] = useState(false);
-  const accept = Array.isArray(
-    (_c = (_b = (_a = cms.api.tina.schema.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.media) == null ? void 0 : _c.accept
-  ) ? (_f = (_e = (_d = cms.api.tina.schema.schema) == null ? void 0 : _d.config) == null ? void 0 : _e.media) == null ? void 0 : _f.accept.join(",") : (_i = (_h = (_g = cms.api.tina.schema.schema) == null ? void 0 : _g.config) == null ? void 0 : _h.media) == null ? void 0 : _i.accept;
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    accept: dropzoneAcceptFromString(
-      accept || cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES
-    ),
-    maxSize: cms.media.maxSize,
-    multiple: true,
-    onDrop: async (files, fileRejections) => {
-      try {
-        setUploading(true);
-        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 message = errorCodes[error.code];
-          if (message) {
-            return message;
-          }
-          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: [
-                // all the newly added items are new
-                ...mediaItems.map((x) => ({ ...x, new: true })),
-                ...mediaList.items
-              ],
-              nextOffset: mediaList.nextOffset
-            };
-          });
-        }
-      } catch {
+  }, []);
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const localSidebarState = window.localStorage.getItem(LOCALSTATEKEY);
+      if (localSidebarState === null) {
+        setDisplayState(defaultSidebarState);
       }
-      setUploading(false);
     }
-  });
-  const { onClick, ...rootProps } = getRootProps();
-  function disableScrollBody() {
-    const body = document == null ? void 0 : document.body;
-    body.style.overflow = "hidden";
+  }, [defaultSidebarState]);
+  React.useEffect(() => {
+    if (typeof window !== "undefined" && cms.enabled) {
+      window.localStorage.setItem(LOCALSTATEKEY, JSON.stringify(displayState));
+    }
+  }, [displayState, cms]);
+  React.useEffect(() => {
+    if (resizingSidebar) {
+      window.localStorage.setItem(LOCALWIDTHKEY, JSON.stringify(sidebarWidth));
+    }
+  }, [sidebarWidth, resizingSidebar]);
+  const isTinaAdminEnabled = cms.flags.get("tina-admin") === false ? false : true;
+  const contentCreators = isTinaAdminEnabled ? [] : cms.plugins.getType("content-creator").all();
+  const toggleFullscreen = () => {
+    if (displayState === "fullscreen") {
+      setDisplayState("open");
+    } else {
+      setDisplayState("fullscreen");
+    }
+  };
+  const toggleSidebarOpen = () => {
+    cms.dispatch({ type: "toggle-edit-state" });
+  };
+  const toggleMenu = () => {
+    setMenuIsOpen((menuIsOpen2) => !menuIsOpen2);
+  };
+  React.useEffect(() => {
+    const updateLayout = () => {
+      if (displayState === "fullscreen") {
+        return;
+      }
+      updateBodyDisplacement({
+        position,
+        displayState,
+        sidebarWidth,
+        resizingSidebar
+      });
+    };
+    updateLayout();
+    window.addEventListener("resize", updateLayout);
     return () => {
-      body.style.overflow = "auto";
+      window.removeEventListener("resize", updateLayout);
     };
-  }
-  useEffect(disableScrollBody, []);
-  const loaderRef = useRef(null);
-  useEffect(() => {
-    const observer = new IntersectionObserver((entries) => {
-      const target = entries[0];
-      if (target.isIntersecting && list.nextOffset) {
-        setOffsetHistory((offsetHistory2) => [
-          ...offsetHistory2,
-          list.nextOffset
-        ]);
+  }, [displayState, position, sidebarWidth, resizingSidebar]);
+  const windowWidth = useWindowWidth();
+  const displayNav = renderNav && (sidebarWidth > navBreakpoint && windowWidth > navBreakpoint || displayState === "fullscreen" && windowWidth > navBreakpoint);
+  const renderMobileNav = renderNav && (sidebarWidth < navBreakpoint + 1 || windowWidth < navBreakpoint + 1);
+  return /* @__PURE__ */ React.createElement(
+    SidebarContext.Provider,
+    {
+      value: {
+        sidebarWidth,
+        setSidebarWidth,
+        displayState,
+        setDisplayState,
+        position,
+        toggleFullscreen,
+        toggleSidebarOpen,
+        resizingSidebar,
+        setResizingSidebar,
+        menuIsOpen,
+        setMenuIsOpen,
+        toggleMenu,
+        setActiveView,
+        formIsPristine,
+        setFormIsPristine
       }
-    });
-    if (loaderRef.current) {
-      observer.observe(loaderRef.current);
-    }
-    return () => {
-      if (loaderRef.current) {
-        observer.unobserve(loaderRef.current);
+    },
+    /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SidebarWrapper, null, /* @__PURE__ */ React.createElement(EditButton, null), displayNav && /* @__PURE__ */ React.createElement(
+      Nav,
+      {
+        isLocalMode: (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode,
+        showCollections: isTinaAdminEnabled,
+        collectionsInfo,
+        screens: activeScreens,
+        cloudConfigs: allConfigs,
+        contentCreators,
+        sidebarWidth,
+        RenderNavSite: ({ view }) => /* @__PURE__ */ React.createElement(
+          SidebarSiteLink,
+          {
+            view,
+            onClick: () => {
+              setActiveView(view);
+              setMenuIsOpen(false);
+            }
+          }
+        ),
+        RenderNavCloud: ({ config }) => /* @__PURE__ */ React.createElement(SidebarCloudLink$1, { config }),
+        RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(
+          SidebarCollectionLink,
+          {
+            onClick: () => {
+              setMenuIsOpen(false);
+            },
+            collection
+          }
+        ),
+        AuthRenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(
+          SidebarCollectionLink,
+          {
+            onClick: () => {
+              setMenuIsOpen(false);
+            },
+            collection,
+            Icon: ImUsers
+          }
+        )
       }
-    };
-  }, [list.nextOffset, loaderRef.current]);
-  if (listState === "loading" && !((_j = list == null ? void 0 : list.items) == null ? void 0 : _j.length) || uploading) {
-    return /* @__PURE__ */ React__default.createElement(LoadingMediaList, null);
-  }
-  if (listState === "not-configured") {
-    return /* @__PURE__ */ React__default.createElement(
-      DocsLink,
+    ), /* @__PURE__ */ React.createElement(SidebarBody, null, /* @__PURE__ */ React.createElement(
+      SidebarHeader,
       {
-        title: "No Media Store Configured",
-        message: "To use the media manager, you need to configure a Media Store.",
-        docsLink: "https://tina.io/docs/reference/media/overview/"
+        displayNav,
+        renderNav,
+        isLocalMode: (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isLocalMode,
+        branchingEnabled
       }
-    );
-  }
-  if (listState === "error") {
-    const { title, message, docsLink } = listError;
-    return /* @__PURE__ */ React__default.createElement(DocsLink, { title, message, docsLink });
-  }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, deleteModalOpen && /* @__PURE__ */ React__default.createElement(
-    DeleteModal$1,
-    {
-      filename: activeItem ? activeItem.filename : "",
-      deleteFunc: async () => {
-        if (activeItem) {
-          await deleteMediaItem(activeItem);
-          setActiveItem(false);
-        }
+    ), /* @__PURE__ */ React.createElement(FormsView, { loadingPlaceholder: sidebar.loadingPlaceholder }), activeScreen && /* @__PURE__ */ React.createElement(
+      ScreenPluginModal,
+      {
+        screen: activeScreen,
+        close: () => setActiveView(null)
+      }
+    )), /* @__PURE__ */ React.createElement(ResizeHandle, null)), renderMobileNav && /* @__PURE__ */ React.createElement(Transition, { show: menuIsOpen, as: "div" }, /* @__PURE__ */ React.createElement(
+      TransitionChild,
+      {
+        enter: "transform transition-all ease-out duration-300",
+        enterFrom: "opacity-0 -translate-x-full",
+        enterTo: "opacity-100 translate-x-0",
+        leave: "transform transition-all ease-in duration-200",
+        leaveFrom: "opacity-100 translate-x-0",
+        leaveTo: "opacity-0 -translate-x-full"
       },
-      close: () => setDeleteModalOpen(false)
-    }
-  ), newFolderModalOpen && /* @__PURE__ */ React__default.createElement(
-    NewFolderModal,
-    {
-      onSubmit: (name) => {
-        setDirectory((oldDir) => {
-          if (oldDir) {
-            return join(oldDir, name);
-          } else {
-            return name;
-          }
-        });
-        resetOffset();
-        resetList();
+      /* @__PURE__ */ React.createElement("div", { className: "fixed left-0 top-0 z-overlay h-full transform" }, /* @__PURE__ */ React.createElement(
+        Nav,
+        {
+          isLocalMode: (_f = (_e = cms.api) == null ? void 0 : _e.tina) == null ? void 0 : _f.isLocalMode,
+          className: "rounded-r-md",
+          showCollections: isTinaAdminEnabled,
+          collectionsInfo,
+          screens: activeScreens,
+          cloudConfigs: allConfigs,
+          contentCreators,
+          sidebarWidth,
+          RenderNavSite: ({ view }) => /* @__PURE__ */ React.createElement(
+            SidebarSiteLink,
+            {
+              view,
+              onClick: () => {
+                setActiveView(view);
+                setMenuIsOpen(false);
+              }
+            }
+          ),
+          RenderNavCloud: ({ config }) => /* @__PURE__ */ React.createElement(SidebarCloudLink$1, { config }),
+          RenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(
+            SidebarCollectionLink,
+            {
+              onClick: () => {
+                setMenuIsOpen(false);
+              },
+              collection
+            }
+          ),
+          AuthRenderNavCollection: ({ collection }) => /* @__PURE__ */ React.createElement(
+            SidebarCollectionLink,
+            {
+              onClick: () => {
+                setMenuIsOpen(false);
+              },
+              collection,
+              Icon: ImUsers
+            }
+          )
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "absolute top-8 right-0 transform translate-x-full overflow-hidden" }, /* @__PURE__ */ React.createElement(
+          Button$1,
+          {
+            rounded: "right",
+            variant: "secondary",
+            onClick: () => {
+              setMenuIsOpen(false);
+            },
+            className: "transition-opacity duration-150 ease-out"
+          },
+          /* @__PURE__ */ React.createElement(IoMdClose, { className: "h-5 w-auto text-blue-500" })
+        ))
+      ))
+    ), /* @__PURE__ */ React.createElement(
+      TransitionChild,
+      {
+        enter: "ease-out duration-300",
+        enterFrom: "opacity-0",
+        enterTo: "opacity-80",
+        entered: "opacity-80",
+        leave: "ease-in duration-200",
+        leaveFrom: "opacity-80",
+        leaveTo: "opacity-0"
       },
-      close: () => setNewFolderModalOpen(false)
-    }
-  ), /* @__PURE__ */ React__default.createElement(MediaPickerWrap, null, /* @__PURE__ */ React__default.createElement(SyncStatusContainer, 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: "flex flex-1 items-center gap-4" }, /* @__PURE__ */ React__default.createElement(ViewModeToggle, { viewMode, setViewMode }), /* @__PURE__ */ React__default.createElement(
-    Breadcrumb$1,
-    {
-      directory,
-      setDirectory: (dir) => {
-        setDirectory(dir);
-        setLoadFolders(true);
-        resetOffset();
-        resetList();
-        setActiveItem(false);
-      }
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          onClick: () => {
+            setMenuIsOpen(false);
+          },
+          className: "fixed z-menu inset-0 bg-gradient-to-br from-gray-800 via-gray-900 to-black"
+        }
+      )
+    )))
+  );
+};
+const updateBodyDisplacement = ({
+  position = "overlay",
+  displayState,
+  sidebarWidth,
+  resizingSidebar
+}) => {
+  const body = document.getElementsByTagName("body")[0];
+  const windowWidth = window.innerWidth;
+  if (position === "displace") {
+    body.style.transition = resizingSidebar ? "" : displayState === "fullscreen" ? "padding 0ms 150ms" : displayState === "closed" ? "padding 0ms 0ms" : "padding 0ms 300ms";
+    if (displayState === "open") {
+      const bodyDisplacement = Math.min(
+        sidebarWidth,
+        windowWidth - minPreviewWidth
+      );
+      body.style.paddingLeft = `${bodyDisplacement}px`;
+    } else {
+      body.style.paddingLeft = "0";
     }
-  )), cms.media.store.isStatic ? null : /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-wrap items-center gap-4" }, /* @__PURE__ */ React__default.createElement(
+  } else {
+    body.style.transition = "";
+    body.style.paddingLeft = "0";
+  }
+};
+const SidebarHeader = ({
+  branchingEnabled,
+  renderNav,
+  displayNav,
+  isLocalMode
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const { toggleFullscreen, displayState, setMenuIsOpen, toggleSidebarOpen } = React.useContext(SidebarContext);
+  const displayMenuButton = renderNav && !displayNav;
+  const cms = useCMS$1();
+  const previewFunction = (_f = (_e = (_d = (_c = (_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.schema) == null ? void 0 : _c.config) == null ? void 0 : _d.config) == null ? void 0 : _e.ui) == null ? void 0 : _f.previewUrl;
+  const branch = (_h = (_g = cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.branch;
+  const previewUrl = typeof previewFunction === "function" ? (_i = previewFunction({ branch })) == null ? void 0 : _i.url : null;
+  return /* @__PURE__ */ React.createElement("div", { className: "flex-grow-0 w-full overflow-visible z-20" }, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "mt-4 -mb-14 w-full flex gap-3 items-center justify-between pointer-events-none" }, displayMenuButton && /* @__PURE__ */ React.createElement(
     Button$1,
     {
-      busy: false,
+      rounded: "right",
       variant: "white",
       onClick: () => {
-        setRefreshing(true);
-        resetOffset();
-        resetList();
-        setActiveItem(false);
+        setMenuIsOpen(true);
       },
-      className: "whitespace-nowrap"
+      className: "pointer-events-auto -ml-px"
     },
-    "Refresh",
-    /* @__PURE__ */ React__default.createElement(IoMdRefresh, { className: "w-6 h-full ml-2 opacity-70 text-blue-500" })
-  ), /* @__PURE__ */ React__default.createElement(
-    Button$1,
+    /* @__PURE__ */ React.createElement(BiMenu, { className: "h-6 w-auto text-blue-500" })
+  ), /* @__PURE__ */ React.createElement("div", { className: "flex-1 flex gap-3 items-center shrink min-w-0" }, branchingEnabled && !isLocalMode && /* @__PURE__ */ React.createElement(BranchButton, null), branchingEnabled && !isLocalMode && previewUrl && /* @__PURE__ */ React.createElement(
+    "button",
     {
-      busy: false,
-      variant: "white",
+      className: "pointer-events-auto flex min-w-0	shrink gap-1 items-center justify-between form-select text-sm h-10 px-4 shadow text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-100 transition-color duration-150 ease-out rounded-full focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out text-[12px] leading-tight min-w-[5rem]",
       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" })
-  ), /* @__PURE__ */ React__default.createElement(UploadButton, { onClick, uploading }))), /* @__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 grow overflow-y-auto transition duration-150 ease-out bg-gradient-to-b from-gray-50/50 to-gray-50 ${list.items.length === 0 || viewMode === "list" && "w-full flex flex-1 flex-col justify-start -mb-px"} ${list.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-9 auto-rows-auto content-start justify-start"} ${isDragActive ? `border-2 border-blue-500 rounded-lg` : ``}`
-    },
-    /* @__PURE__ */ React__default.createElement("input", { ...getInputProps() }),
-    listState === "loaded" && list.items.length === 0 && /* @__PURE__ */ React__default.createElement(EmptyMediaList, null),
-    viewMode === "list" && list.items.map((item) => /* @__PURE__ */ React__default.createElement(
-      ListMediaItem,
-      {
-        key: item.id,
-        item,
-        onClick: onClickMediaItem,
-        active: activeItem && activeItem.id === item.id
-      }
-    )),
-    viewMode === "grid" && list.items.map((item) => /* @__PURE__ */ React__default.createElement(
-      GridMediaItem,
-      {
-        key: item.id,
-        item,
-        onClick: onClickMediaItem,
-        active: activeItem && activeItem.id === item.id
-      }
-    )),
-    !!list.nextOffset && /* @__PURE__ */ React__default.createElement(LoadingMediaList, { ref: loaderRef })
-  )), /* @__PURE__ */ React__default.createElement(
-    ActiveItemPreview,
-    {
-      activeItem,
-      close: closePreview,
-      selectMediaItem,
-      allowDelete: cms.media.store.isStatic ? false : allowDelete,
-      deleteMediaItem: () => {
-        setDeleteModalOpen(true);
+        window.open(previewUrl, "_blank");
       }
-    }
-  )))));
-}
-const ActiveItemPreview = ({
-  activeItem,
-  close: close2,
-  selectMediaItem,
-  deleteMediaItem,
-  allowDelete
-}) => {
-  const thumbnail = activeItem ? (activeItem.thumbnails || {})["1000x1000"] : "";
-  return /* @__PURE__ */ React__default.createElement(
+    },
+    /* @__PURE__ */ React.createElement(BiLinkExternal, { className: "flex-shrink-0 w-4 h-auto text-blue-500/70 mr-1" }),
+    /* @__PURE__ */ React.createElement("span", { className: "truncate max-w-full min-w-0 shrink" }, "Preview")
+  )), /* @__PURE__ */ React.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]`}`
+      className: "flex items-center pointer-events-auto transition-opacity duration-150 ease-in-out -mr-px"
     },
-    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: close2
-      },
-      /* @__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 object-center object-contain max-w-full max-h-full m-auto shadow",
-        src: thumbnail,
-        alt: activeItem.filename
-      }
-    )) : /* @__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("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$1,
-      {
-        size: "medium",
-        variant: "primary",
-        className: "grow",
-        onClick: () => selectMediaItem(activeItem)
-      },
-      "Insert",
-      /* @__PURE__ */ React__default.createElement(BiArrowToBottom, { className: "ml-1 -mr-0.5 w-6 h-auto text-white opacity-70" })
-    ), allowDelete && /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(
       Button$1,
       {
+        rounded: "left",
         variant: "white",
-        size: "medium",
-        className: "grow max-w-[40%]",
-        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$1,
-    {
-      variant: "primary",
-      size: "custom",
-      className: "text-sm h-10 px-6",
-      busy: uploading,
-      onClick
-    },
-    uploading ? /* @__PURE__ */ React__default.createElement(LoadingDots, null) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, "Upload ", /* @__PURE__ */ React__default.createElement(BiCloudUpload, { className: "w-6 h-full ml-2 opacity-70" }))
-  );
-};
-const LoadingMediaList = forwardRef(
-  (props, ref) => {
-    const { extraText, ...rest } = props;
-    return /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        ref,
-        className: "w-full h-full flex flex-col items-center justify-center",
-        ...rest
+        onClick: toggleSidebarOpen,
+        "aria-label": "closes cms sidebar",
+        className: "-mr-px"
       },
-      extraText && /* @__PURE__ */ React__default.createElement("p", null, extraText),
-      /* @__PURE__ */ React__default.createElement(LoadingDots, { color: "var(--tina-color-primary)" })
-    );
-  }
-);
-const MediaPickerWrap = ({ children }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "h-full flex-1 text-gray-700 flex flex-col relative bg-gray-50 outline-none active:outline-none focus:outline-none" }, children);
-};
-const SyncStatusContext = createContext(
-  void 0
-);
-const SyncStatusContainer = ({ children }) => {
-  var _a, _b, _c;
-  const cms = useCMS();
-  const isLocal = cms.api.tina.isLocalMode;
-  const tinaMedia = (_c = (_b = (_a = cms.api.tina.schema.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.media) == null ? void 0 : _c.tina;
-  const hasTinaMedia = !!((tinaMedia == null ? void 0 : tinaMedia.mediaRoot) || (tinaMedia == null ? void 0 : tinaMedia.publicFolder));
-  const doCheckSyncStatus = hasTinaMedia && !isLocal;
-  const [syncStatus, setSyncStatus] = useState(doCheckSyncStatus ? "loading" : "synced");
-  useEffect(() => {
-    const checkSyncStatus = async () => {
-      if (doCheckSyncStatus) {
-        const project = await cms.api.tina.getProject();
-        setSyncStatus(project.mediaBranch ? "synced" : "needs-sync");
-      }
-    };
-    if (!cms.media.store.isStatic) {
-      checkSyncStatus();
-    }
-  }, []);
-  return syncStatus == "needs-sync" ? /* @__PURE__ */ React__default.createElement("div", { className: "h-full flex items-center justify-center p-6 bg-gradient-to-t from-gray-200 to-transparent" }, /* @__PURE__ */ React__default.createElement("div", { className: "rounded-lg border shadow-sm px-4 lg:px-6 py-3 lg:py-4 bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-200 mx-auto mb-12" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-start sm:items-center gap-2" }, /* @__PURE__ */ React__default.createElement(
-    BiError,
-    {
-      className: `w-7 h-auto flex-shrink-0 text-yellow-400 -mt-px`
-    }
-  ), /* @__PURE__ */ React__default.createElement(
-    "div",
+      /* @__PURE__ */ React.createElement(MdOutlineArrowBackIos, { className: "h-[18px] w-auto -mr-1 text-blue-500" })
+    ),
+    /* @__PURE__ */ React.createElement(Button$1, { rounded: "custom", variant: "white", onClick: toggleFullscreen }, displayState === "fullscreen" ? (
+      // BiCollapseAlt
+      /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          className: "h-5 w-auto -mx-1 text-blue-500",
+          stroke: "currentColor",
+          fill: "currentColor",
+          strokeWidth: "0",
+          viewBox: "0 0 24 24",
+          xmlns: "http://www.w3.org/2000/svg"
+        },
+        /* @__PURE__ */ React.createElement("path", { d: "M2 15h7v7h2v-9H2v2zM15 2h-2v9h9V9h-7V2z" })
+      )
+    ) : /* @__PURE__ */ React.createElement(BiExpandAlt, { className: "h-5 -mx-1 w-auto text-blue-500" }))
+  )));
+};
+const SidebarSiteLink = ({
+  view,
+  onClick
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "button",
     {
-      className: `flex-1 flex flex-col items-start gap-0.5 text-base text-yellow-700`
+      className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100",
+      value: view.name,
+      onClick
     },
-    "Media needs to be turned on for this project.",
-    /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React.createElement(view.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }),
+    " ",
+    view.name
+  );
+};
+const SidebarCloudLink$1 = ({ config }) => {
+  if (config.text) {
+    return /* @__PURE__ */ React.createElement("span", { className: "text-base tracking-wide text-gray-500 flex items-center opacity-90" }, config.text, " ", /* @__PURE__ */ React.createElement(
       "a",
       {
-        className: "transition-all duration-150 ease-out text-blue-500 hover:text-blue-400 hover:underline underline decoration-blue-200 hover:decoration-blue-400 font-medium flex items-center justify-start gap-1",
         target: "_blank",
-        href: `${cms.api.tina.appDashboardLink}/media`
+        className: "ml-1 text-blue-600 hover:opacity-60",
+        href: config.link.href
       },
-      "Sync Your Media In TinaCloud.",
-      /* @__PURE__ */ React__default.createElement(BiLinkExternal, { className: `w-5 h-auto flex-shrink-0` })
-    )
-  )))) : /* @__PURE__ */ React__default.createElement(SyncStatusContext.Provider, { value: { syncStatus } }, children);
-};
-const useSyncStatus = () => {
-  const context = useContext(SyncStatusContext);
-  if (!context) {
-    throw new Error("useSyncStatus must be used within a SyncStatusProvider");
+      config.link.text
+    ));
   }
-  return context;
-};
-const EmptyMediaList = () => {
-  const { syncStatus } = useSyncStatus();
-  return /* @__PURE__ */ React__default.createElement("div", { className: `p-12 text-xl opacity-50 text-center` }, syncStatus == "synced" ? "Drag and drop assets here" : "Loading...");
+  return /* @__PURE__ */ React.createElement("span", { className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100" }, /* @__PURE__ */ React.createElement(config.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }), /* @__PURE__ */ React.createElement("a", { target: "_blank", href: config.link.href }, config.link.text));
 };
-const DocsLink = ({ title, message, docsLink, ...props }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "h-3/4 text-center flex flex-col justify-center", ...props }, /* @__PURE__ */ React__default.createElement("h2", { className: "mb-3 text-xl text-gray-600" }, title), /* @__PURE__ */ React__default.createElement("div", { className: "mb-3 text-base text-gray-700" }, message), /* @__PURE__ */ React__default.createElement(
+const SidebarCollectionLink = ({
+  Icon = ImFilesEmpty,
+  collection,
+  onClick
+}) => {
+  const cms = useCMS$1();
+  const tinaPreview = cms.flags.get("tina-preview") || false;
+  return /* @__PURE__ */ React.createElement(
     "a",
     {
-      href: docsLink,
-      target: "_blank",
-      rel: "noreferrer noopener",
-      className: "font-bold text-blue-500 hover:text-blue-600 hover:underline transition-all ease-out duration-150"
+      onClick,
+      href: `${tinaPreview ? `/${tinaPreview}/index.html#` : "/admin#"}/collections/${collection.name}/~`,
+      className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100"
     },
-    "Learn More"
-  ));
+    /* @__PURE__ */ React.createElement(Icon, { className: "mr-2 h-6 opacity-80 w-auto" }),
+    " ",
+    collection.label ? collection.label : collection.name
+  );
 };
-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(
+const EditButton = ({}) => {
+  const { displayState, toggleSidebarOpen } = React.useContext(SidebarContext);
+  return /* @__PURE__ */ React.createElement(
+    Button$1,
+    {
+      rounded: "right",
+      variant: "primary",
+      size: "custom",
+      onClick: toggleSidebarOpen,
+      className: `z-chrome absolute top-6 right-0 translate-x-full text-sm h-10 pl-3 pr-4 transition-all duration-300 ${displayState !== "closed" ? "opacity-0 ease-in pointer-events-none" : "ease-out pointer-events-auto"}`,
+      "aria-label": "opens cms sidebar"
+    },
+    /* @__PURE__ */ React.createElement(BiPencil, { className: "h-6 w-auto" })
+  );
+};
+const SidebarWrapper = ({ children }) => {
+  const { displayState, sidebarWidth, resizingSidebar } = React.useContext(SidebarContext);
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: `grow-0 flex justify-between rounded-md border border-gray-100`
+      className: `fixed top-0 left-0 h-dvh z-base ${displayState === "closed" ? "pointer-events-none" : ""}`
     },
-    /* @__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",
+    /* @__PURE__ */ React.createElement(
+      "div",
       {
-        className: `${toggleClasses.base} px-2 rounded-r-md ${viewMode === "list" ? toggleClasses.active : toggleClasses.inactive}`,
-        onClick: () => {
-          setViewMode("list");
+        className: `relative h-dvh transform flex ${displayState !== "closed" ? "" : "-translate-x-full"} ${resizingSidebar ? "transition-none" : displayState === "closed" ? "transition-all duration-300 ease-in" : displayState === "fullscreen" ? "transition-all duration-150 ease-out" : "transition-all duration-300 ease-out"}`,
+        style: {
+          width: displayState === "fullscreen" ? "100vw" : `${sidebarWidth}px`,
+          maxWidth: displayState === "fullscreen" ? "100vw" : "calc(100vw - 8px)",
+          minWidth: "360px"
         }
       },
-      /* @__PURE__ */ React__default.createElement(BiListUl, { className: "w-8 h-full opacity-70" })
+      children
     )
   );
 };
-const MediaManagerScreenPlugin = createScreen({
-  name: "Media Manager",
-  Component: MediaPicker,
-  Icon: MdOutlinePhotoLibrary,
-  layout: "fullscreen",
-  props: {
-    allowDelete: true
-  }
-});
-function UpdatePassword(props) {
-  const cms = useCMS$1();
-  const client = cms.api.tina;
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [dirty, setDirty] = useState(false);
-  const [result, setResult] = useState(null);
-  const [formState, setFormState] = useState("idle");
-  const [passwordChangeRequired, setPasswordChangeRequired] = useState(false);
-  useEffect(() => {
-    var _a;
-    (_a = client == null ? void 0 : client.authProvider) == null ? void 0 : _a.getUser().then(
-      (user) => setPasswordChangeRequired((user == null ? void 0 : user.passwordChangeRequired) ?? false)
-    );
-  }, []);
-  let err = null;
-  if (dirty && password !== confirmPassword) {
-    err = "Passwords do not match";
-  }
-  if (dirty && !password) {
-    err = "Please enter a password";
-  }
-  const updatePassword = async () => {
-    var _a;
-    setResult(null);
-    setFormState("busy");
-    const res = await cms.api.tina.request(
-      `mutation($password: String!) { updatePassword(password: $password) }`,
-      {
-        variables: {
-          password
-        }
-      }
-    );
-    if (!(res == null ? void 0 : res.updatePassword)) {
-      setResult("Error updating password");
-    } else {
-      setDirty(false);
-      setPassword("");
-      setConfirmPassword("");
-      setResult("Password updated");
-      setPasswordChangeRequired(false);
-      await new Promise((resolve) => setTimeout(resolve, 1e3));
-      (_a = client == null ? void 0 : client.authProvider) == null ? void 0 : _a.logout().then(async () => {
-        if (typeof (client == null ? void 0 : client.onLogout) === "function") {
-          await client.onLogout();
-          await new Promise((resolve) => setTimeout(resolve, 500));
-        }
-        window.location.href = new URL(window.location.href).pathname;
-      }).catch((e) => console.error(e));
-    }
-    setFormState("idle");
-  };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex justify-center items-center h-full" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col space-y-8 p-6" }, passwordChangeRequired && /* @__PURE__ */ React__default.createElement("div", { className: "text-center text-red-500" }, "Your password has expired. Please update your password."), /* @__PURE__ */ React__default.createElement("label", { className: "block" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-gray-700" }, "New Password"), /* @__PURE__ */ React__default.createElement(
-    BaseTextField,
-    {
-      type: "password",
-      name: "password",
-      id: "password",
-      placeholder: "Enter password",
-      className: err ? "border-red-500" : "border-gray-300 focus:ring-indigo-500 focus:border-indigo-500",
-      value: password,
-      onKeyDown: () => {
-        setDirty(true);
-        setResult(null);
-      },
-      onChange: (e) => setPassword(e.target.value),
-      required: true
-    }
-  )), /* @__PURE__ */ React__default.createElement("label", { className: "block" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-gray-700" }, "Confirm New Password"), /* @__PURE__ */ React__default.createElement(
-    BaseTextField,
-    {
-      type: "password",
-      name: "confirmPassword",
-      id: "confirmPassword",
-      placeholder: "Confirm password",
-      className: err ? "border-red-500" : "border-gray-300 focus:ring-indigo-500 focus:border-indigo-500",
-      value: confirmPassword,
-      onKeyDown: () => {
-        setDirty(true);
-        setResult(null);
-      },
-      onChange: (e) => setConfirmPassword(e.target.value),
-      required: true
-    }
-  )), result && /* @__PURE__ */ React__default.createElement("div", { className: "text-center text-sm text-gray-500" }, result), err && /* @__PURE__ */ React__default.createElement("div", { className: "text-center text-sm text-red-500" }, err), /* @__PURE__ */ React__default.createElement(
-    Button$1,
+const SidebarBody = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      onClick: updatePassword,
-      disabled: err,
-      variant: "primary",
-      busy: formState === "busy"
+      className: "relative left-0 w-full h-full flex flex-col items-stretch bg-white border-r border-gray-200 overflow-hidden"
     },
-    "Update"
-  ))));
-}
-const PasswordScreenPlugin = createScreen({
-  name: "Change Password",
-  Component: UpdatePassword,
-  Icon: MdVpnKey,
-  layout: "fullscreen",
-  navCategory: "Account"
-});
-function createCloudConfig({
-  ...options
-}) {
-  return {
-    __type: "cloud-config",
-    Icon: MdOutlineCloud,
-    ...options
-  };
-}
+    children
+  );
+};
 const DEFAULT_FIELDS = [
   TextFieldPlugin,
   TextareaFieldPlugin,
@@ -12028,7 +12028,7 @@ class TinaCMS extends CMS {
             name: "Support",
             link: {
               text: "Support",
-              href: "https:/tina.io/docs/support"
+              href: "https://tina.io/docs/support"
             },
             Icon: MdOutlineHelpOutline
           })