tinacms 2.7.5 → 2.7.7

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/cn"), require("@udecode/plate"), require("@udecode/plate-common"), require("@udecode/plate-slash-command"), require("slate-react"), require("@udecode/plate-code-block"), require("@monaco-editor/react"), require("@headlessui/react"), require("class-variance-authority"), require("lucide-react"), require("mermaid"), require("@udecode/plate-heading"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-table"), require("@udecode/plate-resizable"), require("@radix-ui/react-popover"), require("@radix-ui/react-slot"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-separator"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("react-color"), require("color-string"), require("react-dropzone"), require("clsx"), require("tailwind-merge"), require("cmdk"), require("is-hotkey"), require("slate"), require("@react-hook/window-size"), require("lodash.get"), require("moment"), require("date-fns"), require("@udecode/plate-link"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-tooltip"), require("@udecode/plate-paragraph"), require("@udecode/plate-block-quote"), require("@udecode/plate-floating"), require("graphql"), require("@tinacms/schema-tools"), require("graphql-tag"), require("@graphql-inspector/core"), require("yup"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/cn", "@udecode/plate", "@udecode/plate-common", "@udecode/plate-slash-command", "slate-react", "@udecode/plate-code-block", "@monaco-editor/react", "@headlessui/react", "class-variance-authority", "lucide-react", "mermaid", "@udecode/plate-heading", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-table", "@udecode/plate-resizable", "@radix-ui/react-popover", "@radix-ui/react-slot", "@radix-ui/react-dropdown-menu", "@radix-ui/react-separator", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "react-color", "color-string", "react-dropzone", "clsx", "tailwind-merge", "cmdk", "is-hotkey", "slate", "@react-hook/window-size", "lodash.get", "moment", "date-fns", "@udecode/plate-link", "@radix-ui/react-toolbar", "@radix-ui/react-tooltip", "@udecode/plate-paragraph", "@udecode/plate-block-quote", "@udecode/plate-floating", "graphql", "@tinacms/schema-tools", "graphql-tag", "@graphql-inspector/core", "yup", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, zod, React, reactDom, cn$1, plate, plateCommon, plateSlashCommand, slateReact, plateCodeBlock, MonacoEditor, react, classVarianceAuthority, lucideReact, mermaid, plateHeading, react$1, plateCombobox, plateTable, plateResizable, PopoverPrimitive, reactSlot, DropdownMenuPrimitive, SeparatorPrimitive, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, pkg$1, pkg, dropzone, clsx, tailwindMerge, cmdk, isHotkey, slate, windowSize, get, moment, dateFns, plateLink, ToolbarPrimitive, TooltipPrimitive, plateParagraph, plateBlockQuote, plateFloating, graphql, schemaTools, gql, core, yup, reactRouterDom, mdx) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/cn"), require("@udecode/plate"), require("@udecode/plate-common"), require("@udecode/plate-slash-command"), require("@udecode/plate-code-block"), require("@monaco-editor/react"), require("slate-react"), require("@headlessui/react"), require("class-variance-authority"), require("lucide-react"), require("mermaid"), require("@udecode/plate-heading"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-table"), require("@udecode/plate-resizable"), require("@radix-ui/react-popover"), require("@radix-ui/react-slot"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-separator"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("react-color"), require("color-string"), require("react-dropzone"), require("clsx"), require("tailwind-merge"), require("cmdk"), require("is-hotkey"), require("slate"), require("@react-hook/window-size"), require("lodash.get"), require("moment"), require("date-fns"), require("@udecode/plate-link"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-tooltip"), require("@udecode/plate-paragraph"), require("@udecode/plate-block-quote"), require("@udecode/plate-floating"), require("graphql"), require("@tinacms/schema-tools"), require("graphql-tag"), require("@graphql-inspector/core"), require("yup"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/cn", "@udecode/plate", "@udecode/plate-common", "@udecode/plate-slash-command", "@udecode/plate-code-block", "@monaco-editor/react", "slate-react", "@headlessui/react", "class-variance-authority", "lucide-react", "mermaid", "@udecode/plate-heading", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-table", "@udecode/plate-resizable", "@radix-ui/react-popover", "@radix-ui/react-slot", "@radix-ui/react-dropdown-menu", "@radix-ui/react-separator", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "react-color", "color-string", "react-dropzone", "clsx", "tailwind-merge", "cmdk", "is-hotkey", "slate", "@react-hook/window-size", "lodash.get", "moment", "date-fns", "@udecode/plate-link", "@radix-ui/react-toolbar", "@radix-ui/react-tooltip", "@udecode/plate-paragraph", "@udecode/plate-block-quote", "@udecode/plate-floating", "graphql", "@tinacms/schema-tools", "graphql-tag", "@graphql-inspector/core", "yup", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, zod, React, reactDom, cn$1, plate, plateCommon, plateSlashCommand, plateCodeBlock, MonacoEditor, slateReact, react, classVarianceAuthority, lucideReact, mermaid, plateHeading, react$1, plateCombobox, plateTable, plateResizable, PopoverPrimitive, reactSlot, DropdownMenuPrimitive, SeparatorPrimitive, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, pkg$1, pkg, dropzone, clsx, tailwindMerge, cmdk, isHotkey, slate, windowSize, get, moment, dateFns, plateLink, ToolbarPrimitive, TooltipPrimitive, plateParagraph, plateBlockQuote, plateFloating, graphql, schemaTools, gql, core, yup, reactRouterDom, mdx) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -2954,7 +2954,6 @@ flowchart TD
         children,
         ...props
       }) => {
-        const selected = slateReact.useSelected();
         return /* @__PURE__ */ React.createElement(
           "div",
           {
@@ -2965,8 +2964,7 @@ flowchart TD
             ...attributes,
             ...props
           },
-          children,
-          selected && /* @__PURE__ */ React.createElement("span", { className: "absolute h-4 -top-2 inset-0 ring-2 ring-blue-100 ring-inset rounded-md z-10 pointer-events-none" })
+          children
         );
       },
       [plate.ELEMENT_TABLE]: TableElement,
@@ -8697,6 +8695,73 @@ flowchart TD
       };
     }
   }
+  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;
@@ -9541,128 +9606,42 @@ flowchart TD
   _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__namespace.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__namespace.createElement("p", { className: "block pb-5" }, "Please wait while TinaCMS", /* @__PURE__ */ React__namespace.createElement("br", null), "loads your content"),
-    /* @__PURE__ */ React__namespace.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.createElement(
+        FieldMeta,
+        {
+          name: props.input.name,
+          label: `${name} Field not Registered`,
+          tinaForm: props.tinaForm
+        },
+        /* @__PURE__ */ React.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.createElement("p", { className: "whitespace-normal text-[15px] mt-2" }, /* @__PURE__ */ React.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,
@@ -9711,2209 +9690,2228 @@ flowchart TD
       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 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;
   }
-  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 BreadcrumbButton = ({ className = "", ...props }) => /* @__PURE__ */ React.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.createElement("div", { className: "w-full flex items-center text-[16px] text-gray-300" }, directory !== "" && /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        variant: "ghost",
+        className: "mr-2",
+        onClick: () => setDirectory(prevDir)
+      },
+      /* @__PURE__ */ React.createElement(
+        LeftArrowIcon,
+        {
+          className: `w-7 h-auto fill-gray-300 hover:fill-gray-900 transition duration-150 ease-out`
+        }
+      )
+    ), /* @__PURE__ */ React.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.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 LocalWarning = () => {
-    return /* @__PURE__ */ React__namespace.createElement(
-      "a",
+  const CopyField = ({ label, description, value }) => {
+    const [copied, setCopied] = React.useState(false);
+    const [fadeOut, setFadeOut] = React.useState(false);
+    return /* @__PURE__ */ React.createElement("div", { className: "w-full" }, label && /* @__PURE__ */ React.createElement("label", { className: "w-full mb-1 block flex-1  text-sm font-bold leading-5 text-gray-700" }, label), /* @__PURE__ */ React.createElement(
+      "span",
       {
-        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"
+        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__namespace.createElement(AiFillWarning, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-yellow-600" }),
+      /* @__PURE__ */ React.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__namespace.createElement("strong", { className: "ml-1 font-bold text-yellow-700" }, "Local Mode")
-    );
+      value,
+      " ",
+      copied && /* @__PURE__ */ React.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.createElement("span", null, "Copied to clipboard!")
+      )
+    ), description && /* @__PURE__ */ React.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__namespace.useState(
-      null
-    );
-    React__namespace.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__namespace.createElement(React__namespace.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__namespace.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__namespace.createElement("span", { className: "flex items-center gap-1 font-bold" }, /* @__PURE__ */ React__namespace.createElement(BiError, { className: "w-5 h-auto flex-shrink-0 flex-grow-0 inline-block opacity-70 text-red-600" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "flex whitespace-nowrap" }, "There is an issue with your billing.")), /* @__PURE__ */ React__namespace.createElement(
-      "a",
+    const thumbnail = (item.thumbnails || {})["75x75"];
+    return /* @__PURE__ */ React.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__namespace.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 = React.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.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.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.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.createElement(FileIcon, { className: "w-1/2 h-full fill-gray-300" })),
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: "text-base flex-grow w-full break-words truncate px-3 py-2"
+        },
+        item.filename
+      )
     );
-    return /* @__PURE__ */ React__namespace.createElement(Modal, { id: "content-creator-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React__namespace.createElement(PopupModal, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: close2 }, plugin.name), /* @__PURE__ */ React__namespace.createElement(ModalBody, null, /* @__PURE__ */ React__namespace.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] = React.useState([]);
-    const [nextCursor, setNextCursor] = React.useState(void 0);
-    const [loading, setLoading] = React.useState(true);
-    const [error, setError] = React.useState(void 0);
-    React__namespace.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] = React.useState({ state: "loading", message: "Loading..." });
-    React__namespace.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.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.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.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.createElement(
+          "img",
+          {
+            className: "object-contain object-center w-full h-full",
+            src: thumbnail,
+            alt: item.filename
+          }
+        ) : /* @__PURE__ */ React.createElement("div", { className: "p-4 w-full flex flex-col gap-4 items-center justify-center" }, /* @__PURE__ */ React.createElement(FileIcon, { className: "w-[30%] h-auto fill-gray-300" }), /* @__PURE__ */ React.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__namespace.createElement(
-      "div",
+  const DeleteModal$1 = ({
+    close: close2,
+    deleteFunc,
+    filename
+  }) => {
+    const [processing, setProcessing] = React.useState(false);
+    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Delete ", filename), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", null, "Are you sure you want to delete ", /* @__PURE__ */ React.createElement("strong", null, filename), "?")), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, disabled: processing, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.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__namespace.createElement(MdSyncProblem, { className: "w-6 h-full ml-2 text-red-500 fill-current" })
-    );
+      /* @__PURE__ */ React.createElement("span", { className: "mr-1" }, "Delete"),
+      processing && /* @__PURE__ */ React.createElement(LoadingDots, null)
+    ))));
   };
-  const EventsList = ({ cms }) => {
-    const [cursor, setCursor] = React__namespace.useState(void 0);
-    const [existingEvents, setExistingEvents] = React__namespace.useState([]);
-    const {
-      events,
-      cursor: nextCursor,
-      loading,
-      error
-    } = useGetEvents(cms, cursor, existingEvents);
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-4 w-full h-full grow-0" }, events.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "shrink grow-0 overflow-scroll w-full rounded-md shadow ring-1 ring-black ring-opacity-5" }, /* @__PURE__ */ React__namespace.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__namespace.createElement("tr", { className: index % 2 === 0 ? "" : "bg-gray-50" }, event.isError ? /* @__PURE__ */ React__namespace.createElement(
-        "td",
-        {
-          key: `${event.id}_error_icon`,
-          className: "py-3 pl-4 pr-0 w-0"
-        },
-        /* @__PURE__ */ React__namespace.createElement(BsExclamationOctagonFill, { className: "text-red-500 fill-current w-5 h-auto" })
-      ) : /* @__PURE__ */ React__namespace.createElement(
-        "td",
-        {
-          key: `${event.id}_ok_icon`,
-          className: "py-3 pl-4 pr-0 w-0"
-        },
-        /* @__PURE__ */ React__namespace.createElement(BsCheckCircleFill, { className: "text-green-500 fill-current w-5 h-auto" })
-      ), /* @__PURE__ */ React__namespace.createElement(
-        "td",
-        {
-          key: `${event.id}_msg`,
-          className: "whitespace-nowrap p-3 text-base text-gray-500"
-        },
-        event.message,
-        event.isError && /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full text-gray-300 text-xs mt-0.5" }, event.id)
-      ), /* @__PURE__ */ React__namespace.createElement(
-        "td",
-        {
-          key: `${event.id}_ts`,
-          className: "whitespace-nowrap py-3 pl-3 pr-4 text-sm text-gray-500"
-        },
-        date,
-        /* @__PURE__ */ React__namespace.createElement("span", { className: "w-full block text-gray-300 text-xs mt-0.5" }, time)
-      ));
-    }).flat())), loading && /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm text-gray-400 text-center" }, "Loading..."), error && /* @__PURE__ */ React__namespace.createElement("div", null, "Error: ", error.message), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center flex-1" }, /* @__PURE__ */ React__namespace.createElement(
+  const NewFolderModal = ({ onSubmit, close: close2 }) => {
+    const [folderName, setFolderName] = React.useState("");
+    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "New Folder"), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", { className: "text-base text-gray-700 mb-2" }, "Please provide a name for your folder."), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-500 mb-4 italic" }, /* @__PURE__ */ React.createElement("span", { className: "font-bold" }, "Note"), " – If you navigate away before uploading a media item, the folder will disappear."), /* @__PURE__ */ React.createElement(
+      Input,
+      {
+        value: folderName,
+        placeholder: "Folder Name",
+        required: true,
+        onChange: (e) => setFolderName(e.target.value)
+      }
+    )), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.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__namespace.createElement(Modal, null, /* @__PURE__ */ React__namespace.createElement(FullscreenModal, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: closeEventsModal }, "Event Log"), /* @__PURE__ */ React__namespace.createElement(ModalBody, { className: "flex h-full flex-col", padded: true }, /* @__PURE__ */ React__namespace.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__namespace;
+  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 MediaManager() {
+    const cms = useCMS();
+    const [request, setRequest] = React.useState();
+    React.useEffect(() => {
+      return cms.events.subscribe("media:open", ({ type, ...request2 }) => {
+        setRequest(request2);
+      });
+    }, []);
+    if (!request)
       return null;
-    }
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
-      "button",
+    const close2 = () => setRequest(void 0);
+    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(FullscreenModal, null, /* @__PURE__ */ React.createElement("div", { className: "w-full bg-gray-50 flex items-center justify-between px-5 pt-3 m-0" }, /* @__PURE__ */ React.createElement("h2", { className: "text-gray-500 font-sans font-medium text-base leading-none m-0 block truncate" }, "Media Manager"), /* @__PURE__ */ React.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__namespace.createElement(HiOutlineClipboardList, { className: "w-6 h-auto mr-2 text-blue-400" }) : /* @__PURE__ */ React__namespace.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.createElement(CloseIcon, { className: "w-6 h-auto" })
+    )), /* @__PURE__ */ React.createElement(ModalBody, { className: "flex h-full flex-col" }, /* @__PURE__ */ React.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__namespace.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] = React.useState(() => {
+      if (cms.media.isConfigured)
+        return "loading";
+      return "not-configured";
+    });
+    const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
+    const [newFolderModalOpen, setNewFolderModalOpen] = React.useState(false);
+    const [listError, setListError] = React.useState(defaultListError);
+    const [directory, setDirectory] = React.useState(
+      props.directory
+    );
+    const [list, setList] = React.useState({
+      items: [],
+      nextOffset: void 0
+    });
+    const resetList = () => setList({
+      items: [],
+      nextOffset: void 0
+    });
+    const [viewMode, setViewMode] = React.useState("grid");
+    const [activeItem, setActiveItem] = React.useState(false);
+    const closePreview = () => setActiveItem(false);
+    const [refreshing, setRefreshing] = React.useState(false);
+    const [loadFolders, setLoadFolders] = React.useState(true);
+    const [offsetHistory, setOffsetHistory] = React.useState([]);
+    const offset = offsetHistory[offsetHistory.length - 1];
+    const resetOffset = () => setOffsetHistory([]);
+    async function loadMedia(loadFolders2 = true) {
+      setListState("loading");
+      try {
+        const _list = await cms.media.list({
+          offset,
+          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__namespace.forwardRef(
-      (props2, ref) => /* @__PURE__ */ React__namespace.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__namespace.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__namespace.createElement("div", { className: "border-b border-gray-200" }, /* @__PURE__ */ React__namespace.createElement(react.Menu, { as: "div", className: "relative block" }, ({ open: open2 }) => /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
-        react.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement("span", null, "Tina")),
-        /* @__PURE__ */ React__namespace.createElement(SyncErrorWidget, { cms }),
-        /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: "transform translate-y-full absolute bottom-3 right-5 z-50" }, /* @__PURE__ */ React__namespace.createElement(
-        react.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__namespace.createElement(react.MenuItems, { className: "bg-white border border-gray-150 rounded-lg shadow-lg flex flex-col items-stretch overflow-hidden" }, /* @__PURE__ */ React__namespace.createElement(react.MenuItem, null, /* @__PURE__ */ React__namespace.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);
-              }
+    React.useEffect(() => {
+      if (!refreshing)
+        return;
+      loadMedia();
+      setRefreshing(false);
+    }, [refreshing]);
+    React.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();
+        }
+      );
+    }, [offset, 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] = React.useState(false);
+    const accept = Array.isArray(
+      (_c = (_b = (_a = cms.api.tina.schema.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.media) == null ? void 0 : _c.accept
+    ) ? (_f = (_e = (_d = cms.api.tina.schema.schema) == null ? void 0 : _d.config) == null ? void 0 : _e.media) == null ? void 0 : _f.accept.join(",") : (_i = (_h = (_g = cms.api.tina.schema.schema) == null ? void 0 : _g.config) == null ? void 0 : _h.media) == null ? void 0 : _i.accept;
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+      accept: dropzoneAcceptFromString(
+        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;
             }
-          },
-          /* @__PURE__ */ React__namespace.createElement(BiExit, { className: "w-6 h-auto mr-2 text-blue-400" }),
-          " Log Out"
-        )), /* @__PURE__ */ React__namespace.createElement(react.MenuItem, null, /* @__PURE__ */ React__namespace.createElement(
-          WrappedSyncStatus,
-          {
-            cms,
-            setEventsOpen
+            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.createElement(React.Fragment, null, "Upload Failed. ", /* @__PURE__ */ React.createElement("br", null), messages.join(". "), ".");
+            });
           }
-        )))
-      ))))),
-      eventsOpen && /* @__PURE__ */ React__namespace.createElement(SyncStatusModal, { cms, closeEventsModal }),
-      children,
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col px-6 flex-1 overflow-auto" }, showCollections && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.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__namespace.createElement("span", null, "Collections"), isLocalMode && /* @__PURE__ */ React__namespace.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React__namespace.createElement(
-        "a",
-        {
-          href: "https://tina.io/docs/schema/#defining-collections",
-          target: "_blank"
-        },
-        /* @__PURE__ */ React__namespace.createElement(FiInfo, null)
-      ))), /* @__PURE__ */ React__namespace.createElement(
-        CollectionsList,
-        {
-          RenderNavCollection,
-          collections: contentCollections
+          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 {
         }
-      )), (screenCategories.Site.length > 0 || contentCreators.length) > 0 && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Site"), /* @__PURE__ */ React__namespace.createElement("ul", { className: "flex flex-col gap-4" }, screenCategories.Site.map((view) => {
-        return /* @__PURE__ */ React__namespace.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React__namespace.createElement(RenderNavSite, { view }));
-      }), contentCreators.map((plugin, idx) => {
-        return /* @__PURE__ */ React__namespace.createElement(CreateContentNavItem, { key: `plugin-${idx}`, plugin });
-      }), authCollection && /* @__PURE__ */ React__namespace.createElement(
-        CollectionsList,
-        {
-          RenderNavCollection: AuthRenderNavCollection,
-          collections: [authCollection]
+        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";
+      };
+    }
+    React.useEffect(disableScrollBody, []);
+    const loaderRef = React.useRef(null);
+    React.useEffect(() => {
+      const observer = new IntersectionObserver((entries) => {
+        const target = entries[0];
+        if (target.isIntersecting && list.nextOffset) {
+          setOffsetHistory((offsetHistory2) => [
+            ...offsetHistory2,
+            list.nextOffset
+          ]);
         }
-      ))), Object.entries(screenCategories).map(([category, screens2]) => {
-        if (category !== "Site") {
-          return /* @__PURE__ */ React__namespace.createElement("div", { key: category }, /* @__PURE__ */ React__namespace.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, category), /* @__PURE__ */ React__namespace.createElement("ul", { className: "flex flex-col gap-4" }, screens2.map((view) => {
-            return /* @__PURE__ */ React__namespace.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React__namespace.createElement(RenderNavSite, { view }));
-          })));
+      });
+      if (loaderRef.current) {
+        observer.observe(loaderRef.current);
+      }
+      return () => {
+        if (loaderRef.current) {
+          observer.unobserve(loaderRef.current);
         }
-      }), !!(cloudConfigs == null ? void 0 : cloudConfigs.length) && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Cloud"), /* @__PURE__ */ React__namespace.createElement("ul", { className: "flex flex-col gap-4" }, cloudConfigs.map((config) => {
-        return /* @__PURE__ */ React__namespace.createElement("li", { key: `nav-site-${config.name}` }, /* @__PURE__ */ React__namespace.createElement(RenderNavCloud, { config }));
-      }))), /* @__PURE__ */ React__namespace.createElement("div", { className: "grow" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "font-sans font-light text-xs mb-3 mt-8 text-gray-500" }, "v", version))
-    );
-  };
-  const CollectionsList = ({
-    collections,
-    RenderNavCollection
-  }) => {
-    if (collections.length === 0) {
-      return /* @__PURE__ */ React__namespace.createElement("div", null, "No collections found");
+      };
+    }, [list.nextOffset, loaderRef.current]);
+    if (listState === "loading" && !((_j = list == null ? void 0 : list.items) == null ? void 0 : _j.length) || uploading) {
+      return /* @__PURE__ */ React.createElement(LoadingMediaList, null);
     }
-    return /* @__PURE__ */ React__namespace.createElement("ul", { className: "flex flex-col gap-4" }, collections.map((collection) => {
-      return /* @__PURE__ */ React__namespace.createElement("li", { key: `nav-collection-${collection.name}` }, /* @__PURE__ */ React__namespace.createElement(RenderNavCollection, { collection }));
-    }));
-  };
-  const CreateContentNavItem = ({ plugin }) => {
-    const [open2, setOpen] = React__namespace.useState(false);
-    return /* @__PURE__ */ React__namespace.createElement("li", { key: plugin.name }, /* @__PURE__ */ React__namespace.createElement(
-      "button",
-      {
-        className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100",
-        onClick: () => {
-          setOpen(true);
+    if (listState === "not-configured") {
+      return /* @__PURE__ */ React.createElement(
+        DocsLink,
+        {
+          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/"
         }
-      },
-      /* @__PURE__ */ React__namespace.createElement(VscNewFile, { className: "mr-3 h-6 opacity-80 w-auto" }),
-      " ",
-      plugin.name
-    ), open2 && /* @__PURE__ */ React__namespace.createElement(FormModal, { plugin, close: () => setOpen(false) }));
-  };
-  const ResizeHandle = () => {
-    const {
-      resizingSidebar,
-      setResizingSidebar,
-      fullscreen,
-      setSidebarWidth,
-      displayState
-    } = React__namespace.useContext(SidebarContext);
-    React__namespace.useEffect(() => {
-      const handleMouseUp = () => setResizingSidebar(false);
-      window.addEventListener("mouseup", handleMouseUp);
-      return () => {
-        window.removeEventListener("mouseup", handleMouseUp);
-      };
-    }, []);
-    React__namespace.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 (listState === "error") {
+      const { title, message, docsLink } = listError;
+      return /* @__PURE__ */ React.createElement(DocsLink, { title, message, docsLink });
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, deleteModalOpen && /* @__PURE__ */ React.createElement(
+      DeleteModal$1,
+      {
+        filename: activeItem ? activeItem.filename : "",
+        deleteFunc: async () => {
+          if (activeItem) {
+            await deleteMediaItem(activeItem);
+            setActiveItem(false);
           }
-        });
-      };
-      if (resizingSidebar) {
-        window.addEventListener("mousemove", handleMouseMove);
-        document.body.classList.add("select-none");
+        },
+        close: () => setDeleteModalOpen(false)
       }
-      return () => {
-        window.removeEventListener("mousemove", handleMouseMove);
-        document.body.classList.remove("select-none");
-      };
-    }, [resizingSidebar]);
-    const handleresizingSidebar = () => setResizingSidebar(true);
-    if (fullscreen) {
-      return null;
-    }
-    return /* @__PURE__ */ React__namespace.createElement(
-      "div",
+    ), newFolderModalOpen && /* @__PURE__ */ React.createElement(
+      NewFolderModal,
       {
-        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" }
+        onSubmit: (name) => {
+          setDirectory((oldDir) => {
+            if (oldDir) {
+              return join(oldDir, name);
+            } else {
+              return name;
+            }
+          });
+          resetOffset();
+          resetList();
+        },
+        close: () => setNewFolderModalOpen(false)
+      }
+    ), /* @__PURE__ */ React.createElement(MediaPickerWrap, null, /* @__PURE__ */ React.createElement(SyncStatusContainer, null, /* @__PURE__ */ React.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.createElement("div", { className: "flex flex-1 items-center gap-4" }, /* @__PURE__ */ React.createElement(ViewModeToggle, { viewMode, setViewMode }), /* @__PURE__ */ React.createElement(
+      Breadcrumb$1,
+      {
+        directory,
+        setDirectory: (dir) => {
+          setDirectory(dir);
+          setLoadFolders(true);
+          resetOffset();
+          resetList();
+          setActiveItem(false);
+        }
+      }
+    )), cms.media.store.isStatic ? null : /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-4" }, /* @__PURE__ */ React.createElement(
+      Button$1,
+      {
+        busy: false,
+        variant: "white",
+        onClick: () => {
+          setRefreshing(true);
+          resetOffset();
+          resetList();
+          setActiveItem(false);
+        },
+        className: "whitespace-nowrap"
       },
-      /* @__PURE__ */ React__namespace.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__namespace.useMemo(
-      () => cms.state.forms.find(({ tinaForm }) => item.formId === tinaForm.id),
-      [item.formId]
-    );
-    return /* @__PURE__ */ React__namespace.createElement(
-      "button",
+      "Refresh",
+      /* @__PURE__ */ React.createElement(IoMdRefresh, { className: "w-6 h-full ml-2 opacity-70 text-blue-500" })
+    ), /* @__PURE__ */ React.createElement(
+      Button$1,
       {
-        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`
+        busy: false,
+        variant: "white",
+        onClick: () => {
+          setNewFolderModalOpen(true);
+        },
+        className: "whitespace-nowrap"
       },
-      /* @__PURE__ */ React__namespace.createElement(BiEdit, { className: "opacity-70 w-5 h-auto text-blue-500 flex-none" }),
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1 flex flex-col gap-0.5 items-start" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "group-hover:text-blue-500 font-sans text-xs font-semibold text-gray-700 whitespace-normal" }, form.tinaForm.label), /* @__PURE__ */ React__namespace.createElement("div", { className: "group-hover:text-blue-500 text-base truncate leading-tight text-gray-600" }, form.tinaForm.id))
-    );
-  };
-  const FormListItem = ({
-    item,
-    depth,
-    setActiveFormId
-  }) => {
-    var _a;
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "divide-y divide-gray-200" }, /* @__PURE__ */ React__namespace.createElement(Item, { setActiveFormId, item, depth }), item.subItems && /* @__PURE__ */ React__namespace.createElement("ul", { className: "divide-y divide-gray-200" }, (_a = item.subItems) == null ? void 0 : _a.map((subItem) => {
-      if (subItem.type === "document") {
-        return /* @__PURE__ */ React__namespace.createElement("li", { key: subItem.formId }, /* @__PURE__ */ React__namespace.createElement(
-          Item,
-          {
-            setActiveFormId,
-            depth: depth + 1,
-            item: subItem
-          }
-        ));
-      }
-    })));
-  };
-  const FormLists = (props) => {
-    const cms = useCMS();
-    return /* @__PURE__ */ React__namespace.createElement(
-      react.Transition,
+      "New Folder",
+      /* @__PURE__ */ React.createElement(BiFolder, { className: "w-6 h-full ml-2 opacity-70 text-blue-500" })
+    ), /* @__PURE__ */ React.createElement(UploadButton, { onClick, uploading }))), /* @__PURE__ */ React.createElement("div", { className: "flex h-full overflow-hidden bg-white" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col h-full @container" }, /* @__PURE__ */ React.createElement(
+      "ul",
       {
-        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"
+        ...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` : ``}`
       },
-      cms.state.formLists.map((formList, index) => /* @__PURE__ */ React__namespace.createElement("div", { key: `${formList.id}-${index}`, className: "pt-16" }, /* @__PURE__ */ React__namespace.createElement(
-        FormList,
+      /* @__PURE__ */ React.createElement("input", { ...getInputProps() }),
+      listState === "loaded" && list.items.length === 0 && /* @__PURE__ */ React.createElement(EmptyMediaList, null),
+      viewMode === "list" && list.items.map((item) => /* @__PURE__ */ React.createElement(
+        ListMediaItem,
         {
-          isEditing: props.isEditing,
-          setActiveFormId: (id) => {
-            cms.dispatch({ type: "forms:set-active-form-id", value: id });
-          },
-          formList
-        }
-      )))
-    );
-  };
-  const FormList = (props) => {
-    const cms = useCMS();
-    const listItems = React__namespace.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);
-          }
-        } else {
-          orderedListItems.push(item);
+          key: item.id,
+          item,
+          onClick: onClickMediaItem,
+          active: activeItem && activeItem.id === item.id
         }
-      });
-      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__namespace.createElement("ul", null, /* @__PURE__ */ React__namespace.createElement("li", { className: "divide-y divide-gray-200" }, listItems.map((item, index) => {
-      if (item.type === "list") {
-        return /* @__PURE__ */ React__namespace.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__namespace.createElement(
-            "span",
-            {
-              className: "text-sm tracking-wide font-bold text-gray-700 uppercase"
-            },
-            item.label
-          )
-        );
-      }
-      return /* @__PURE__ */ React__namespace.createElement(
-        FormListItem,
+      )),
+      viewMode === "grid" && list.items.map((item) => /* @__PURE__ */ React.createElement(
+        GridMediaItem,
         {
-          setActiveFormId: (id) => props.setActiveFormId(id),
-          key: item.formId,
+          key: item.id,
           item,
-          depth: 0
+          onClick: onClickMediaItem,
+          active: activeItem && activeItem.id === item.id
         }
-      );
-    })));
-  };
-  const SidebarNoFormsPlaceholder = () => /* @__PURE__ */ React__namespace.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__namespace.createElement("p", { className: "block pb-5" }, "Looks like there's ", /* @__PURE__ */ React__namespace.createElement("br", null), "nothing to edit on ", /* @__PURE__ */ React__namespace.createElement("br", null), "this page."),
-    /* @__PURE__ */ React__namespace.createElement("p", { className: "block pt-5" }, /* @__PURE__ */ React__namespace.createElement(
-      Button$1,
-      {
-        href: "https://tina.io/docs/contextual-editing/overview",
-        target: "_blank",
-        as: "a"
-      },
-      /* @__PURE__ */ React__namespace.createElement(Emoji$1, { className: "mr-1.5" }, "📖"),
-      " Contextual Editing Docs"
-    ))
-  );
-  const Emoji$1 = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
-    "span",
-    {
-      className: `text-[24px] leading-none inline-block ${className}`,
-      ...props
-    }
-  );
-  const minimumTimeToShowLoadingIndicator = 1e3;
-  const FormsView = ({ loadingPlaceholder } = {}) => {
-    const cms = useCMS$1();
-    const { setFormIsPristine } = React__namespace.useContext(SidebarContext);
-    const [isShowingLoading, setIsShowingLoading] = React__namespace.useState(true);
-    const [initialLoadComplete, setInitialLoadComplete] = React__namespace.useState(false);
-    React__namespace.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__namespace.createElement(LoadingPlaceholder, null);
-    }
-    if (!cms.state.formLists.length) {
-      return /* @__PURE__ */ React__namespace.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__namespace.createElement(FormLists, { isEditing });
-    }
-    const formMetas = cms.plugins.all("form:meta");
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, activeForm && /* @__PURE__ */ React__namespace.createElement(FormWrapper$1, { isEditing, isMultiform }, isMultiform && /* @__PURE__ */ React__namespace.createElement(MultiformFormHeader, { activeForm }), !isMultiform && /* @__PURE__ */ React__namespace.createElement(FormHeader, { activeForm }), formMetas == null ? void 0 : formMetas.map((meta) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, { key: meta.name }, /* @__PURE__ */ React__namespace.createElement(meta.Component, null))), /* @__PURE__ */ React__namespace.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine })));
-  };
-  const FormWrapper$1 = ({ isEditing, children }) => {
-    return /* @__PURE__ */ React__namespace.createElement(
-      "div",
+      )),
+      !!list.nextOffset && /* @__PURE__ */ React.createElement(LoadingMediaList, { ref: loaderRef })
+    )), /* @__PURE__ */ React.createElement(
+      ActiveItemPreview,
       {
-        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)"
+        activeItem,
+        close: closePreview,
+        selectMediaItem,
+        allowDelete: cms.media.store.isStatic ? false : allowDelete,
+        deleteMediaItem: () => {
+          setDeleteModalOpen(true);
         }
-      },
-      children
-    );
-  };
-  const MultiformFormHeader = ({
-    activeForm
+      }
+    )))));
+  }
+  const ActiveItemPreview = ({
+    activeItem,
+    close: close2,
+    selectMediaItem,
+    deleteMediaItem,
+    allowDelete
   }) => {
-    const cms = useCMS$1();
-    const { formIsPristine } = React__namespace.useContext(SidebarContext);
-    return /* @__PURE__ */ React__namespace.createElement(
+    const thumbnail = activeItem ? (activeItem.thumbnails || {})["1000x1000"] : "";
+    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"
+        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]`}`
       },
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React__namespace.createElement(
-        "button",
+      activeItem && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex grow-0 shrink-0 gap-2 w-full items-center justify-between" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg text-gray-600 w-full max-w-full break-words block truncate flex-1" }, activeItem.filename), /* @__PURE__ */ React.createElement(
+        IconButton,
         {
-          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 });
-            }
+          variant: "ghost",
+          className: "group grow-0 shrink-0",
+          onClick: close2
+        },
+        /* @__PURE__ */ React.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.createElement("div", { className: "w-full max-h-[75%]" }, /* @__PURE__ */ React.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.createElement("span", { className: "p-3 border border-gray-100 rounded-md overflow-hidden bg-gray-50 shadow" }, /* @__PURE__ */ React.createElement(BiFile, { className: "w-14 h-auto fill-gray-300" })), /* @__PURE__ */ React.createElement("div", { className: "grow h-full w-full shrink flex flex-col gap-3 items-start justify-start" }, /* @__PURE__ */ React.createElement(CopyField, { value: absoluteImgURL(activeItem.src), label: "URL" })), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 w-full flex flex-col justify-end items-start" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full gap-3" }, selectMediaItem && /* @__PURE__ */ React.createElement(
+        Button$1,
+        {
+          size: "medium",
+          variant: "primary",
+          className: "grow",
+          onClick: () => selectMediaItem(activeItem)
         },
-        /* @__PURE__ */ React__namespace.createElement(BiDotsVertical, { className: "h-auto w-5 inline-block opacity-70" })
-      ), /* @__PURE__ */ React__namespace.createElement(
-        "button",
+        "Insert",
+        /* @__PURE__ */ React.createElement(BiArrowToBottom, { className: "ml-1 -mr-0.5 w-6 h-auto text-white opacity-70" })
+      ), allowDelete && /* @__PURE__ */ React.createElement(
+        Button$1,
         {
-          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}/~`;
-          }
+          variant: "white",
+          size: "medium",
+          className: "grow max-w-[40%]",
+          onClick: deleteMediaItem
         },
-        /* @__PURE__ */ React__namespace.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
-      ), /* @__PURE__ */ React__namespace.createElement("span", { className: "opacity-30 text-sm leading-tight whitespace-nowrap flex-0" }, "/"), /* @__PURE__ */ React__namespace.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, activeForm.tinaForm.label || activeForm.tinaForm.id), /* @__PURE__ */ React__namespace.createElement(FormStatus, { pristine: formIsPristine }))
+        "Delete",
+        /* @__PURE__ */ React.createElement(TrashIcon, { className: "ml-1 -mr-0.5 w-6 h-auto text-red-500 opacity-70" })
+      ))))
     );
   };
-  const FormHeader = ({ activeForm }) => {
-    const { formIsPristine } = React__namespace.useContext(SidebarContext);
-    const cms = useCMS$1();
-    const shortFormLabel = activeForm.tinaForm.label ? activeForm.tinaForm.label.replace(/^.*[\\\/]/, "") : false;
-    return /* @__PURE__ */ React__namespace.createElement(
-      "div",
+  const UploadButton = ({ onClick, uploading }) => {
+    return /* @__PURE__ */ React.createElement(
+      Button$1,
       {
-        className: "pt-18 pb-4 px-6 border-b border-gray-200 bg-gradient-to-t from-white to-gray-50"
+        variant: "primary",
+        size: "custom",
+        className: "text-sm h-10 px-6",
+        busy: uploading,
+        onClick
       },
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React__namespace.createElement(
-        "button",
+      uploading ? /* @__PURE__ */ React.createElement(LoadingDots, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, "Upload ", /* @__PURE__ */ React.createElement(BiCloudUpload, { className: "w-6 h-full ml-2 opacity-70" }))
+    );
+  };
+  const LoadingMediaList = React.forwardRef(
+    (props, ref) => {
+      const { extraText, ...rest } = props;
+      return /* @__PURE__ */ React.createElement(
+        "div",
         {
-          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}/~`;
-          }
+          ref,
+          className: "w-full h-full flex flex-col items-center justify-center",
+          ...rest
         },
-        /* @__PURE__ */ React__namespace.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
-      ), shortFormLabel && /* @__PURE__ */ React__namespace.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, shortFormLabel), /* @__PURE__ */ React__namespace.createElement(FormStatus, { pristine: formIsPristine }))
-    );
+        extraText && /* @__PURE__ */ React.createElement("p", null, extraText),
+        /* @__PURE__ */ React.createElement(LoadingDots, { color: "var(--tina-color-primary)" })
+      );
+    }
+  );
+  const MediaPickerWrap = ({ children }) => {
+    return /* @__PURE__ */ React.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 SidebarContext = React__namespace.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
-  }) {
+  const SyncStatusContext = React.createContext(
+    void 0
+  );
+  const SyncStatusContainer = ({ children }) => {
     var _a, _b, _c;
-    useSubscribable(sidebar);
-    const cms = useCMS$1();
-    if (!cms.enabled)
-      return null;
-    return /* @__PURE__ */ React__namespace.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 };
-  };
-  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__namespace.useState(
-      () => cms.flags.get("branch-switcher")
-    );
-    React__namespace.useEffect(() => {
-      cms.events.subscribe("flag:set", ({ key, value }) => {
-        if (key === "branch-switcher") {
-          setBranchingEnabled(value);
-        }
-      });
-    }, [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] = React.useState(false);
-    const [activeScreen, setActiveView] = React.useState(null);
-    const [sidebarWidth, setSidebarWidth] = React__namespace.useState(defaultWidth);
-    const [formIsPristine, setFormIsPristine] = React__namespace.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";
-      }
-    );
-    const setDisplayState = (value) => cms.dispatch({ type: "sidebar:set-display-state", value });
-    const displayState = cms.state.sidebarDisplayState;
-    React__namespace.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));
+    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] = React.useState(doCheckSyncStatus ? "loading" : "synced");
+    React.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__namespace.useEffect(() => {
-      if (typeof window !== "undefined") {
-        const localSidebarState = window.localStorage.getItem(LOCALSTATEKEY);
-        if (localSidebarState === null) {
-          setDisplayState(defaultSidebarState);
-        }
-      }
-    }, [defaultSidebarState]);
-    React__namespace.useEffect(() => {
-      if (typeof window !== "undefined" && cms.enabled) {
-        window.localStorage.setItem(LOCALSTATEKEY, JSON.stringify(displayState));
-      }
-    }, [displayState, cms]);
-    React__namespace.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__namespace.useEffect(() => {
-      const updateLayout = () => {
-        if (displayState === "fullscreen") {
-          return;
-        }
-        updateBodyDisplacement({
-          position,
-          displayState,
-          sidebarWidth,
-          resizingSidebar
-        });
-      };
-      updateLayout();
-      window.addEventListener("resize", updateLayout);
-      return () => {
-        window.removeEventListener("resize", updateLayout);
-      };
-    }, [displayState, position, sidebarWidth, resizingSidebar]);
-    const windowWidth = windowSize.useWindowWidth();
-    const displayNav = renderNav && (sidebarWidth > navBreakpoint && windowWidth > navBreakpoint || displayState === "fullscreen" && windowWidth > navBreakpoint);
-    const renderMobileNav = renderNav && (sidebarWidth < navBreakpoint + 1 || windowWidth < navBreakpoint + 1);
-    return /* @__PURE__ */ React__namespace.createElement(
-      SidebarContext.Provider,
+    return syncStatus == "needs-sync" ? /* @__PURE__ */ React.createElement("div", { className: "h-full flex items-center justify-center p-6 bg-gradient-to-t from-gray-200 to-transparent" }, /* @__PURE__ */ React.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.createElement("div", { className: "flex items-start sm:items-center gap-2" }, /* @__PURE__ */ React.createElement(
+      BiError,
       {
-        value: {
-          sidebarWidth,
-          setSidebarWidth,
-          displayState,
-          setDisplayState,
-          position,
-          toggleFullscreen,
-          toggleSidebarOpen,
-          resizingSidebar,
-          setResizingSidebar,
-          menuIsOpen,
-          setMenuIsOpen,
-          toggleMenu,
-          setActiveView,
-          formIsPristine,
-          setFormIsPristine
-        }
-      },
-      /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(SidebarWrapper, null, /* @__PURE__ */ React__namespace.createElement(EditButton, null), displayNav && /* @__PURE__ */ React__namespace.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__namespace.createElement(
-            SidebarSiteLink,
-            {
-              view,
-              onClick: () => {
-                setActiveView(view);
-                setMenuIsOpen(false);
-              }
-            }
-          ),
-          RenderNavCloud: ({ config }) => /* @__PURE__ */ React__namespace.createElement(SidebarCloudLink$1, { config }),
-          RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__namespace.createElement(
-            SidebarCollectionLink,
-            {
-              onClick: () => {
-                setMenuIsOpen(false);
-              },
-              collection
-            }
-          ),
-          AuthRenderNavCollection: ({ collection }) => /* @__PURE__ */ React__namespace.createElement(
-            SidebarCollectionLink,
-            {
-              onClick: () => {
-                setMenuIsOpen(false);
-              },
-              collection,
-              Icon: ImUsers
-            }
-          )
-        }
-      ), /* @__PURE__ */ React__namespace.createElement(SidebarBody, null, /* @__PURE__ */ React__namespace.createElement(
-        SidebarHeader,
-        {
-          displayNav,
-          renderNav,
-          isLocalMode: (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isLocalMode,
-          branchingEnabled
-        }
-      ), /* @__PURE__ */ React__namespace.createElement(FormsView, { loadingPlaceholder: sidebar.loadingPlaceholder }), activeScreen && /* @__PURE__ */ React__namespace.createElement(
-        ScreenPluginModal,
-        {
-          screen: activeScreen,
-          close: () => setActiveView(null)
-        }
-      )), /* @__PURE__ */ React__namespace.createElement(ResizeHandle, null)), renderMobileNav && /* @__PURE__ */ React__namespace.createElement(react.Transition, { show: menuIsOpen, as: "div" }, /* @__PURE__ */ React__namespace.createElement(
-        react.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"
-        },
-        /* @__PURE__ */ React__namespace.createElement("div", { className: "fixed left-0 top-0 z-overlay h-full transform" }, /* @__PURE__ */ React__namespace.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__namespace.createElement(
-              SidebarSiteLink,
-              {
-                view,
-                onClick: () => {
-                  setActiveView(view);
-                  setMenuIsOpen(false);
-                }
-              }
-            ),
-            RenderNavCloud: ({ config }) => /* @__PURE__ */ React__namespace.createElement(SidebarCloudLink$1, { config }),
-            RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__namespace.createElement(
-              SidebarCollectionLink,
-              {
-                onClick: () => {
-                  setMenuIsOpen(false);
-                },
-                collection
-              }
-            ),
-            AuthRenderNavCollection: ({ collection }) => /* @__PURE__ */ React__namespace.createElement(
-              SidebarCollectionLink,
-              {
-                onClick: () => {
-                  setMenuIsOpen(false);
-                },
-                collection,
-                Icon: ImUsers
-              }
-            )
-          },
-          /* @__PURE__ */ React__namespace.createElement("div", { className: "absolute top-8 right-0 transform translate-x-full overflow-hidden" }, /* @__PURE__ */ React__namespace.createElement(
-            Button$1,
-            {
-              rounded: "right",
-              variant: "secondary",
-              onClick: () => {
-                setMenuIsOpen(false);
-              },
-              className: "transition-opacity duration-150 ease-out"
-            },
-            /* @__PURE__ */ React__namespace.createElement(IoMdClose, { className: "h-5 w-auto text-blue-500" })
-          ))
-        ))
-      ), /* @__PURE__ */ React__namespace.createElement(
-        react.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"
-        },
-        /* @__PURE__ */ React__namespace.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";
+        className: `w-7 h-auto flex-shrink-0 text-yellow-400 -mt-px`
       }
-    } 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__namespace.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__namespace.createElement("div", { className: "flex-grow-0 w-full overflow-visible z-20" }, isLocalMode && /* @__PURE__ */ React__namespace.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React__namespace.createElement(BillingWarning, null), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-4 -mb-14 w-full flex gap-3 items-center justify-between pointer-events-none" }, displayMenuButton && /* @__PURE__ */ React__namespace.createElement(
-      Button$1,
-      {
-        rounded: "right",
-        variant: "white",
-        onClick: () => {
-          setMenuIsOpen(true);
-        },
-        className: "pointer-events-auto -ml-px"
-      },
-      /* @__PURE__ */ React__namespace.createElement(BiMenu, { className: "h-6 w-auto text-blue-500" })
-    ), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1 flex gap-3 items-center shrink min-w-0" }, branchingEnabled && !isLocalMode && /* @__PURE__ */ React__namespace.createElement(BranchButton, null), branchingEnabled && !isLocalMode && previewUrl && /* @__PURE__ */ React__namespace.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");
-        }
-      },
-      /* @__PURE__ */ React__namespace.createElement(BiLinkExternal, { className: "flex-shrink-0 w-4 h-auto text-blue-500/70 mr-1" }),
-      /* @__PURE__ */ React__namespace.createElement("span", { className: "truncate max-w-full min-w-0 shrink" }, "Preview")
-    )), /* @__PURE__ */ React__namespace.createElement(
+    ), /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: "flex items-center pointer-events-auto transition-opacity duration-150 ease-in-out -mr-px"
-      },
-      /* @__PURE__ */ React__namespace.createElement(
-        Button$1,
-        {
-          rounded: "left",
-          variant: "white",
-          onClick: toggleSidebarOpen,
-          "aria-label": "closes cms sidebar",
-          className: "-mr-px"
-        },
-        /* @__PURE__ */ React__namespace.createElement(MdOutlineArrowBackIos, { className: "h-[18px] w-auto -mr-1 text-blue-500" })
-      ),
-      /* @__PURE__ */ React__namespace.createElement(Button$1, { rounded: "custom", variant: "white", onClick: toggleFullscreen }, displayState === "fullscreen" ? (
-        // BiCollapseAlt
-        /* @__PURE__ */ React__namespace.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__namespace.createElement("path", { d: "M2 15h7v7h2v-9H2v2zM15 2h-2v9h9V9h-7V2z" })
-        )
-      ) : /* @__PURE__ */ React__namespace.createElement(BiExpandAlt, { className: "h-5 -mx-1 w-auto text-blue-500" }))
-    )));
-  };
-  const SidebarSiteLink = ({
-    view,
-    onClick
-  }) => {
-    return /* @__PURE__ */ React__namespace.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
+        className: `flex-1 flex flex-col items-start gap-0.5 text-base text-yellow-700`
       },
-      /* @__PURE__ */ React__namespace.createElement(view.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }),
-      " ",
-      view.name
-    );
-  };
-  const SidebarCloudLink$1 = ({ config }) => {
-    if (config.text) {
-      return /* @__PURE__ */ React__namespace.createElement("span", { className: "text-base tracking-wide text-gray-500 flex items-center opacity-90" }, config.text, " ", /* @__PURE__ */ React__namespace.createElement(
+      "Media needs to be turned on for this project.",
+      /* @__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",
-          className: "ml-1 text-blue-600 hover:opacity-60",
-          href: config.link.href
+          href: `${cms.api.tina.appDashboardLink}/media`
         },
-        config.link.text
-      ));
+        "Sync Your Media In TinaCloud.",
+        /* @__PURE__ */ React.createElement(BiLinkExternal, { className: `w-5 h-auto flex-shrink-0` })
+      )
+    )))) : /* @__PURE__ */ React.createElement(SyncStatusContext.Provider, { value: { syncStatus } }, children);
+  };
+  const useSyncStatus$1 = () => {
+    const context = React.useContext(SyncStatusContext);
+    if (!context) {
+      throw new Error("useSyncStatus must be used within a SyncStatusProvider");
     }
-    return /* @__PURE__ */ React__namespace.createElement("span", { className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100" }, /* @__PURE__ */ React__namespace.createElement(config.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }), /* @__PURE__ */ React__namespace.createElement("a", { target: "_blank", href: config.link.href }, config.link.text));
+    return context;
   };
-  const SidebarCollectionLink = ({
-    Icon = ImFilesEmpty,
-    collection,
-    onClick
-  }) => {
-    const cms = useCMS$1();
-    const tinaPreview = cms.flags.get("tina-preview") || false;
-    return /* @__PURE__ */ React__namespace.createElement(
-      "a",
-      {
-        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"
-      },
-      /* @__PURE__ */ React__namespace.createElement(Icon, { className: "mr-2 h-6 opacity-80 w-auto" }),
-      " ",
-      collection.label ? collection.label : collection.name
-    );
+  const EmptyMediaList = () => {
+    const { syncStatus } = useSyncStatus$1();
+    return /* @__PURE__ */ React.createElement("div", { className: `p-12 text-xl opacity-50 text-center` }, syncStatus == "synced" ? "Drag and drop assets here" : "Loading...");
   };
-  const EditButton = ({}) => {
-    const { displayState, toggleSidebarOpen } = React__namespace.useContext(SidebarContext);
-    return /* @__PURE__ */ React__namespace.createElement(
-      Button$1,
+  const DocsLink = ({ title, message, docsLink, ...props }) => {
+    return /* @__PURE__ */ React.createElement("div", { className: "h-3/4 text-center flex flex-col justify-center", ...props }, /* @__PURE__ */ React.createElement("h2", { className: "mb-3 text-xl text-gray-600" }, title), /* @__PURE__ */ React.createElement("div", { className: "mb-3 text-base text-gray-700" }, message), /* @__PURE__ */ React.createElement(
+      "a",
       {
-        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"
+        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"
       },
-      /* @__PURE__ */ React__namespace.createElement(BiPencil, { className: "h-6 w-auto" })
-    );
+      "Learn More"
+    ));
   };
-  const SidebarWrapper = ({ children }) => {
-    const { displayState, sidebarWidth, resizingSidebar } = React__namespace.useContext(SidebarContext);
-    return /* @__PURE__ */ React__namespace.createElement(
+  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.createElement(
       "div",
       {
-        className: `fixed top-0 left-0 h-dvh z-base ${displayState === "closed" ? "pointer-events-none" : ""}`
+        className: `grow-0 flex justify-between rounded-md border border-gray-100`
       },
-      /* @__PURE__ */ React__namespace.createElement(
-        "div",
+      /* @__PURE__ */ React.createElement(
+        "button",
         {
-          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"
+          className: `${toggleClasses.base} px-2.5 rounded-l-md ${viewMode === "grid" ? toggleClasses.active : toggleClasses.inactive}`,
+          onClick: () => {
+            setViewMode("grid");
           }
         },
-        children
-      )
-    );
-  };
-  const SidebarBody = ({ children }) => {
-    return /* @__PURE__ */ React__namespace.createElement(
-      "div",
-      {
-        className: "relative left-0 w-full h-full flex flex-col items-stretch bg-white border-r border-gray-200 overflow-hidden"
-      },
-      children
-    );
-  };
-  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.createElement(
-        FieldMeta,
-        {
-          name: props.input.name,
-          label: `${name} Field not Registered`,
-          tinaForm: props.tinaForm
-        },
-        /* @__PURE__ */ React.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.createElement("p", { className: "whitespace-normal text-[15px] mt-2" }, /* @__PURE__ */ React.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 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.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.createElement("div", { className: "w-full flex items-center text-[16px] text-gray-300" }, directory !== "" && /* @__PURE__ */ React.createElement(
-      IconButton,
-      {
-        variant: "ghost",
-        className: "mr-2",
-        onClick: () => setDirectory(prevDir)
-      },
+        /* @__PURE__ */ React.createElement(BiGridAlt, { className: "w-6 h-full opacity-70" })
+      ),
       /* @__PURE__ */ React.createElement(
-        LeftArrowIcon,
-        {
-          className: `w-7 h-auto fill-gray-300 hover:fill-gray-900 transition duration-150 ease-out`
-        }
-      )
-    ), /* @__PURE__ */ React.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.createElement(
-        BreadcrumbButton,
+        "button",
         {
-          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,
+          className: `${toggleClasses.base} px-2 rounded-r-md ${viewMode === "list" ? toggleClasses.active : toggleClasses.inactive}`,
           onClick: () => {
-            setDirectory(currentDir);
+            setViewMode("list");
           }
         },
-        part
-      );
-    }));
-  }
-  const CopyField = ({ label, description, value }) => {
-    const [copied, setCopied] = React.useState(false);
-    const [fadeOut, setFadeOut] = React.useState(false);
-    return /* @__PURE__ */ React.createElement("div", { className: "w-full" }, label && /* @__PURE__ */ React.createElement("label", { className: "w-full mb-1 block flex-1  text-sm font-bold leading-5 text-gray-700" }, label), /* @__PURE__ */ React.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.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.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.createElement("span", null, "Copied to clipboard!")
+        /* @__PURE__ */ React.createElement(BiListUl, { className: "w-8 h-full opacity-70" })
       )
-    ), description && /* @__PURE__ */ React.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;
+  const MediaManagerScreenPlugin = createScreen({
+    name: "Media Manager",
+    Component: MediaPicker,
+    Icon: MdOutlinePhotoLibrary,
+    layout: "fullscreen",
+    props: {
+      allowDelete: true
     }
-    const thumbnail = (item.thumbnails || {})["75x75"];
-    return /* @__PURE__ */ React.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);
-          }
-        }
-      },
-      item.new && /* @__PURE__ */ React.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.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.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.createElement(FileIcon, { className: "w-1/2 h-full fill-gray-300" })),
-      /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: "text-base flex-grow w-full break-words truncate px-3 py-2"
-        },
-        item.filename
-      )
-    );
-  }
-  function GridMediaItem({ item, active, onClick }) {
-    let FileIcon = BiFile;
-    if (item.type === "dir") {
-      FileIcon = BiFolder;
-    } else if (isVideo(item.src)) {
-      FileIcon = BiMovie;
+  });
+  function UpdatePassword(props) {
+    const cms = useCMS$1();
+    const client = cms.api.tina;
+    const [password, setPassword] = React.useState("");
+    const [confirmPassword, setConfirmPassword] = React.useState("");
+    const [dirty, setDirty] = React.useState(false);
+    const [result, setResult] = React.useState(null);
+    const [formState, setFormState] = React.useState("idle");
+    const [passwordChangeRequired, setPasswordChangeRequired] = React.useState(false);
+    React.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";
     }
-    const thumbnail = (item.thumbnails || {})["400x400"];
-    return /* @__PURE__ */ React.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.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.createElement(
-        "button",
+    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) }`,
         {
-          className: "absolute w-full h-full flex items-center justify-center bg-white",
-          onClick: () => {
-            if (!active) {
-              onClick(item);
-            } else {
-              onClick(false);
-            }
+          variables: {
+            password
           }
-        },
-        isImage(thumbnail) ? /* @__PURE__ */ React.createElement(
-          "img",
-          {
-            className: "object-contain object-center w-full h-full",
-            src: thumbnail,
-            alt: item.filename
+        }
+      );
+      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));
           }
-        ) : /* @__PURE__ */ React.createElement("div", { className: "p-4 w-full flex flex-col gap-4 items-center justify-center" }, /* @__PURE__ */ React.createElement(FileIcon, { className: "w-[30%] h-auto fill-gray-300" }), /* @__PURE__ */ React.createElement("span", { className: "block text-base text-gray-600 w-full break-words truncate" }, item.filename))
-      )
-    );
-  }
-  const DeleteModal$1 = ({
-    close: close2,
-    deleteFunc,
-    filename
-  }) => {
-    const [processing, setProcessing] = React.useState(false);
-    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Delete ", filename), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", null, "Are you sure you want to delete ", /* @__PURE__ */ React.createElement("strong", null, filename), "?")), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, disabled: processing, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
-      Button$1,
+          window.location.href = new URL(window.location.href).pathname;
+        }).catch((e) => console.error(e));
+      }
+      setFormState("idle");
+    };
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex justify-center items-center h-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col space-y-8 p-6" }, passwordChangeRequired && /* @__PURE__ */ React.createElement("div", { className: "text-center text-red-500" }, "Your password has expired. Please update your password."), /* @__PURE__ */ React.createElement("label", { className: "block" }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-700" }, "New Password"), /* @__PURE__ */ React.createElement(
+      BaseTextField,
       {
-        style: { flexGrow: 3 },
-        disabled: processing,
-        variant: "danger",
-        onClick: async () => {
-          setProcessing(true);
-          try {
-            await deleteFunc();
-          } catch (e) {
-            console.error(e);
-          } finally {
-            close2();
-          }
-        }
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "mr-1" }, "Delete"),
-      processing && /* @__PURE__ */ React.createElement(LoadingDots, null)
-    ))));
-  };
-  const NewFolderModal = ({ onSubmit, close: close2 }) => {
-    const [folderName, setFolderName] = React.useState("");
-    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "New Folder"), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", { className: "text-base text-gray-700 mb-2" }, "Please provide a name for your folder."), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-500 mb-4 italic" }, /* @__PURE__ */ React.createElement("span", { className: "font-bold" }, "Note"), " – If you navigate away before uploading a media item, the folder will disappear."), /* @__PURE__ */ React.createElement(
-      Input,
+        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.createElement("label", { className: "block" }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-700" }, "Confirm New Password"), /* @__PURE__ */ React.createElement(
+      BaseTextField,
       {
-        value: folderName,
-        placeholder: "Folder Name",
-        required: true,
-        onChange: (e) => setFolderName(e.target.value)
+        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
       }
-    )), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
+    )), result && /* @__PURE__ */ React.createElement("div", { className: "text-center text-sm text-gray-500" }, result), err && /* @__PURE__ */ React.createElement("div", { className: "text-center text-sm text-red-500" }, err), /* @__PURE__ */ React.createElement(
       Button$1,
       {
-        disabled: !folderName,
-        style: { flexGrow: 3 },
+        onClick: updatePassword,
+        disabled: err,
         variant: "primary",
-        onClick: () => {
-          if (!folderName)
-            return;
-          onSubmit(folderName);
-          close2();
-        }
+        busy: formState === "busy"
       },
-      "Create New Folder"
+      "Update"
     ))));
-  };
-  const { useDropzone } = dropzone__namespace;
-  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 MediaManager() {
-    const cms = useCMS();
-    const [request, setRequest] = React.useState();
-    React.useEffect(() => {
-      return cms.events.subscribe("media:open", ({ type, ...request2 }) => {
-        setRequest(request2);
-      });
-    }, []);
-    if (!request)
-      return null;
-    const close2 = () => setRequest(void 0);
-    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(FullscreenModal, null, /* @__PURE__ */ React.createElement("div", { className: "w-full bg-gray-50 flex items-center justify-between px-5 pt-3 m-0" }, /* @__PURE__ */ React.createElement("h2", { className: "text-gray-500 font-sans font-medium text-base leading-none m-0 block truncate" }, "Media Manager"), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        onClick: close2,
-        className: "flex items-center fill-gray-400 cursor-pointer transition-colors duration-100 ease-out hover:fill-gray-700"
-      },
-      /* @__PURE__ */ React.createElement(CloseIcon, { className: "w-6 h-auto" })
-    )), /* @__PURE__ */ React.createElement(ModalBody, { className: "flex h-full flex-col" }, /* @__PURE__ */ React.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"
+  const PasswordScreenPlugin = createScreen({
+    name: "Change Password",
+    Component: UpdatePassword,
+    Icon: MdVpnKey,
+    layout: "fullscreen",
+    navCategory: "Account"
   });
-  function MediaPicker({
-    allowDelete,
-    onSelect,
-    close: close2,
-    ...props
+  function createCloudConfig({
+    ...options
   }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-    const cms = useCMS();
-    const [listState, setListState] = React.useState(() => {
-      if (cms.media.isConfigured)
-        return "loading";
-      return "not-configured";
-    });
-    const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
-    const [newFolderModalOpen, setNewFolderModalOpen] = React.useState(false);
-    const [listError, setListError] = React.useState(defaultListError);
-    const [directory, setDirectory] = React.useState(
-      props.directory
-    );
-    const [list, setList] = React.useState({
-      items: [],
-      nextOffset: void 0
-    });
-    const resetList = () => setList({
-      items: [],
-      nextOffset: void 0
-    });
-    const [viewMode, setViewMode] = React.useState("grid");
-    const [activeItem, setActiveItem] = React.useState(false);
-    const closePreview = () => setActiveItem(false);
-    const [refreshing, setRefreshing] = React.useState(false);
-    const [loadFolders, setLoadFolders] = React.useState(true);
-    const [offsetHistory, setOffsetHistory] = React.useState([]);
-    const offset = offsetHistory[offsetHistory.length - 1];
-    const resetOffset = () => setOffsetHistory([]);
-    async function loadMedia(loadFolders2 = true) {
-      setListState("loading");
-      try {
-        const _list = await cms.media.list({
-          offset,
-          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);
-        }
-        setListState("error");
+    return {
+      __type: "cloud-config",
+      Icon: MdOutlineCloud,
+      ...options
+    };
+  }
+  const SidebarLoadingPlaceholder = () => /* @__PURE__ */ React__namespace.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__namespace.createElement("p", { className: "block pb-5" }, "Please wait while TinaCMS", /* @__PURE__ */ React__namespace.createElement("br", null), "loads your content"),
+    /* @__PURE__ */ React__namespace.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;
       }
     }
-    React.useEffect(() => {
-      if (!refreshing)
-        return;
-      loadMedia();
-      setRefreshing(false);
-    }, [refreshing]);
-    React.useEffect(() => {
-      if (!cms.media.isConfigured)
-        return;
-      if (refreshing)
+    get isOpen() {
+      return this._isOpen;
+    }
+    set isOpen(nextValue) {
+      if (this._isOpen === nextValue) {
         return;
-      loadMedia(loadFolders);
-      if (loadFolders)
-        setLoadFolders(false);
-      return cms.events.subscribe(
-        ["media:delete:success", "media:pageSize"],
-        () => {
-          setRefreshing(true);
-          resetOffset();
-          resetList();
-        }
-      );
-    }, [offset, 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);
+      }
+      this._isOpen = nextValue;
+      if (nextValue) {
+        this.events.dispatch({ type: "sidebar:opened" });
       } else {
-        setActiveItem(item);
+        this.events.dispatch({ type: "sidebar:closed" });
       }
-    };
-    let deleteMediaItem;
-    if (allowDelete) {
-      deleteMediaItem = async (item) => {
-        await cms.media.delete(item);
-      };
     }
-    let selectMediaItem;
-    if (onSelect) {
-      selectMediaItem = (item) => {
-        onSelect(item);
-        if (close2)
-          close2();
+    subscribe(callback) {
+      const unsub = this.events.subscribe("sidebar", callback);
+      return () => unsub();
+    }
+  }
+  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__namespace.createElement(
+      "a",
+      {
+        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"
+      },
+      /* @__PURE__ */ React__namespace.createElement(AiFillWarning, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-yellow-600" }),
+      " ",
+      "You are currently in",
+      /* @__PURE__ */ React__namespace.createElement("strong", { className: "ml-1 font-bold text-yellow-700" }, "Local Mode")
+    );
+  };
+  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__namespace.useState(
+      null
+    );
+    React__namespace.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__namespace.createElement(React__namespace.Fragment, null);
     }
-    const [uploading, setUploading] = React.useState(false);
-    const accept = Array.isArray(
-      (_c = (_b = (_a = cms.api.tina.schema.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.media) == null ? void 0 : _c.accept
-    ) ? (_f = (_e = (_d = cms.api.tina.schema.schema) == null ? void 0 : _d.config) == null ? void 0 : _e.media) == null ? void 0 : _f.accept.join(",") : (_i = (_h = (_g = cms.api.tina.schema.schema) == null ? void 0 : _g.config) == null ? void 0 : _h.media) == null ? void 0 : _i.accept;
-    const { getRootProps, getInputProps, isDragActive } = useDropzone({
-      accept: dropzoneAcceptFromString(
-        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.createElement(React.Fragment, null, "Upload Failed. ", /* @__PURE__ */ React.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
-              };
-            });
+    return /* @__PURE__ */ React__namespace.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__namespace.createElement("span", { className: "flex items-center gap-1 font-bold" }, /* @__PURE__ */ React__namespace.createElement(BiError, { className: "w-5 h-auto flex-shrink-0 flex-grow-0 inline-block opacity-70 text-red-600" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "flex whitespace-nowrap" }, "There is an issue with your billing.")), /* @__PURE__ */ React__namespace.createElement(
+      "a",
+      {
+        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"
+      },
+      "Visit Billing Page",
+      /* @__PURE__ */ React__namespace.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 = React.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();
+          });
+        }
+      }),
+      [close2, cms, plugin]
+    );
+    return /* @__PURE__ */ React__namespace.createElement(Modal, { id: "content-creator-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React__namespace.createElement(PopupModal, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: close2 }, plugin.name), /* @__PURE__ */ React__namespace.createElement(ModalBody, null, /* @__PURE__ */ React__namespace.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] = React.useState([]);
+    const [nextCursor, setNextCursor] = React.useState(void 0);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(void 0);
+    React__namespace.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);
           }
-        } catch {
+          setLoading(false);
         }
-        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";
       };
-    }
-    React.useEffect(disableScrollBody, []);
-    const loaderRef = React.useRef(null);
-    React.useEffect(() => {
-      const observer = new IntersectionObserver((entries) => {
-        const target = entries[0];
-        if (target.isIntersecting && list.nextOffset) {
-          setOffsetHistory((offsetHistory2) => [
-            ...offsetHistory2,
-            list.nextOffset
-          ]);
+      setLoading(true);
+      fetchEvents();
+    }, [cms, cursor]);
+    return { events, cursor: nextCursor, loading, error };
+  };
+  function useSyncStatus(cms) {
+    var _a, _b;
+    const [syncStatus, setSyncStatus] = React.useState({ state: "loading", message: "Loading..." });
+    React__namespace.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 (loaderRef.current) {
-        observer.observe(loaderRef.current);
-      }
-      return () => {
-        if (loaderRef.current) {
-          observer.unobserve(loaderRef.current);
+        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" });
         }
-      };
-    }, [list.nextOffset, loaderRef.current]);
-    if (listState === "loading" && !((_j = list == null ? void 0 : list.items) == null ? void 0 : _j.length) || uploading) {
-      return /* @__PURE__ */ React.createElement(LoadingMediaList, null);
+      }, 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;
     }
-    if (listState === "not-configured") {
-      return /* @__PURE__ */ React.createElement(
-        DocsLink,
+    return /* @__PURE__ */ React__namespace.createElement(
+      "div",
+      {
+        title: syncStatus.message,
+        className: "flex-grow-0 flex text-xs items-center"
+      },
+      /* @__PURE__ */ React__namespace.createElement(MdSyncProblem, { className: "w-6 h-full ml-2 text-red-500 fill-current" })
+    );
+  };
+  const EventsList = ({ cms }) => {
+    const [cursor, setCursor] = React__namespace.useState(void 0);
+    const [existingEvents, setExistingEvents] = React__namespace.useState([]);
+    const {
+      events,
+      cursor: nextCursor,
+      loading,
+      error
+    } = useGetEvents(cms, cursor, existingEvents);
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-4 w-full h-full grow-0" }, events.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "shrink grow-0 overflow-scroll w-full rounded-md shadow ring-1 ring-black ring-opacity-5" }, /* @__PURE__ */ React__namespace.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__namespace.createElement("tr", { className: index % 2 === 0 ? "" : "bg-gray-50" }, event.isError ? /* @__PURE__ */ React__namespace.createElement(
+        "td",
         {
-          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/"
+          key: `${event.id}_error_icon`,
+          className: "py-3 pl-4 pr-0 w-0"
+        },
+        /* @__PURE__ */ React__namespace.createElement(BsExclamationOctagonFill, { className: "text-red-500 fill-current w-5 h-auto" })
+      ) : /* @__PURE__ */ React__namespace.createElement(
+        "td",
+        {
+          key: `${event.id}_ok_icon`,
+          className: "py-3 pl-4 pr-0 w-0"
+        },
+        /* @__PURE__ */ React__namespace.createElement(BsCheckCircleFill, { className: "text-green-500 fill-current w-5 h-auto" })
+      ), /* @__PURE__ */ React__namespace.createElement(
+        "td",
+        {
+          key: `${event.id}_msg`,
+          className: "whitespace-nowrap p-3 text-base text-gray-500"
+        },
+        event.message,
+        event.isError && /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full text-gray-300 text-xs mt-0.5" }, event.id)
+      ), /* @__PURE__ */ React__namespace.createElement(
+        "td",
+        {
+          key: `${event.id}_ts`,
+          className: "whitespace-nowrap py-3 pl-3 pr-4 text-sm text-gray-500"
+        },
+        date,
+        /* @__PURE__ */ React__namespace.createElement("span", { className: "w-full block text-gray-300 text-xs mt-0.5" }, time)
+      ));
+    }).flat())), loading && /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm text-gray-400 text-center" }, "Loading..."), error && /* @__PURE__ */ React__namespace.createElement("div", null, "Error: ", error.message), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center flex-1" }, /* @__PURE__ */ React__namespace.createElement(
+      Button$1,
+      {
+        onClick: () => {
+          setExistingEvents(events);
+          setCursor(nextCursor);
         }
-      );
+      },
+      "Load More Events"
+    )));
+  };
+  const SyncStatusModal = ({ closeEventsModal, cms }) => /* @__PURE__ */ React__namespace.createElement(Modal, null, /* @__PURE__ */ React__namespace.createElement(FullscreenModal, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: closeEventsModal }, "Event Log"), /* @__PURE__ */ React__namespace.createElement(ModalBody, { className: "flex h-full flex-col", padded: true }, /* @__PURE__ */ React__namespace.createElement(EventsList, { cms }))));
+  const SyncStatus = ({ cms, setEventsOpen }) => {
+    var _a, _b;
+    const syncStatus = useSyncStatus(cms);
+    function openEventsModal() {
+      setEventsOpen(true);
     }
-    if (listState === "error") {
-      const { title, message, docsLink } = listError;
-      return /* @__PURE__ */ React.createElement(DocsLink, { title, message, docsLink });
+    if ((_b = (_a = cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isCustomContentApi) {
+      return null;
     }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, deleteModalOpen && /* @__PURE__ */ React.createElement(
-      DeleteModal$1,
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
+      "button",
       {
-        filename: activeItem ? activeItem.filename : "",
-        deleteFunc: async () => {
-          if (activeItem) {
-            await deleteMediaItem(activeItem);
-            setActiveItem(false);
-          }
-        },
-        close: () => setDeleteModalOpen(false)
+        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__namespace.createElement(HiOutlineClipboardList, { className: "w-6 h-auto mr-2 text-blue-400" }) : /* @__PURE__ */ React__namespace.createElement(MdSyncProblem, { className: "w-6 h-auto mr-2 text-red-400" }),
+      " ",
+      "Event Log"
+    ));
+  };
+  const version = "2.7.7";
+  const Nav = ({
+    isLocalMode,
+    className = "",
+    children,
+    showCollections,
+    collectionsInfo,
+    screens,
+    cloudConfigs,
+    contentCreators,
+    sidebarWidth,
+    RenderNavSite,
+    RenderNavCloud,
+    RenderNavCollection,
+    AuthRenderNavCollection,
+    ...props
+  }) => {
+    const cms = useCMS$1();
+    const [eventsOpen, setEventsOpen] = React__namespace.useState(false);
+    const { contentCollections, authCollection } = collectionsInfo.collections.reduce(
+      (acc, collection) => {
+        if (collection.isAuthCollection) {
+          acc.authCollection = collection;
+        } else {
+          acc.contentCollections.push(collection);
+        }
+        return acc;
+      },
+      {
+        contentCollections: []
       }
-    ), newFolderModalOpen && /* @__PURE__ */ React.createElement(
-      NewFolderModal,
+    );
+    function closeEventsModal() {
+      setEventsOpen(false);
+    }
+    const WrappedSyncStatus = React__namespace.forwardRef(
+      (props2, ref) => /* @__PURE__ */ React__namespace.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__namespace.createElement(
+      "div",
       {
-        onSubmit: (name) => {
-          setDirectory((oldDir) => {
-            if (oldDir) {
-              return join(oldDir, name);
-            } else {
-              return name;
+        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__namespace.createElement("div", { className: "border-b border-gray-200" }, /* @__PURE__ */ React__namespace.createElement(react.Menu, { as: "div", className: "relative block" }, ({ open: open2 }) => /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
+        react.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement("span", null, "Tina")),
+        /* @__PURE__ */ React__namespace.createElement(SyncErrorWidget, { cms }),
+        /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: "transform translate-y-full absolute bottom-3 right-5 z-50" }, /* @__PURE__ */ React__namespace.createElement(
+        react.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__namespace.createElement(react.MenuItems, { className: "bg-white border border-gray-150 rounded-lg shadow-lg flex flex-col items-stretch overflow-hidden" }, /* @__PURE__ */ React__namespace.createElement(react.MenuItem, null, /* @__PURE__ */ React__namespace.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);
+              }
             }
-          });
-          resetOffset();
-          resetList();
+          },
+          /* @__PURE__ */ React__namespace.createElement(BiExit, { className: "w-6 h-auto mr-2 text-blue-400" }),
+          " Log Out"
+        )), /* @__PURE__ */ React__namespace.createElement(react.MenuItem, null, /* @__PURE__ */ React__namespace.createElement(
+          WrappedSyncStatus,
+          {
+            cms,
+            setEventsOpen
+          }
+        )))
+      ))))),
+      eventsOpen && /* @__PURE__ */ React__namespace.createElement(SyncStatusModal, { cms, closeEventsModal }),
+      children,
+      /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col px-6 flex-1 overflow-auto" }, showCollections && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.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__namespace.createElement("span", null, "Collections"), isLocalMode && /* @__PURE__ */ React__namespace.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React__namespace.createElement(
+        "a",
+        {
+          href: "https://tina.io/docs/schema/#defining-collections",
+          target: "_blank"
+        },
+        /* @__PURE__ */ React__namespace.createElement(FiInfo, null)
+      ))), /* @__PURE__ */ React__namespace.createElement(
+        CollectionsList,
+        {
+          RenderNavCollection,
+          collections: contentCollections
+        }
+      )), (screenCategories.Site.length > 0 || contentCreators.length) > 0 && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Site"), /* @__PURE__ */ React__namespace.createElement("ul", { className: "flex flex-col gap-4" }, screenCategories.Site.map((view) => {
+        return /* @__PURE__ */ React__namespace.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React__namespace.createElement(RenderNavSite, { view }));
+      }), contentCreators.map((plugin, idx) => {
+        return /* @__PURE__ */ React__namespace.createElement(CreateContentNavItem, { key: `plugin-${idx}`, plugin });
+      }), authCollection && /* @__PURE__ */ React__namespace.createElement(
+        CollectionsList,
+        {
+          RenderNavCollection: AuthRenderNavCollection,
+          collections: [authCollection]
+        }
+      ))), Object.entries(screenCategories).map(([category, screens2]) => {
+        if (category !== "Site") {
+          return /* @__PURE__ */ React__namespace.createElement("div", { key: category }, /* @__PURE__ */ React__namespace.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, category), /* @__PURE__ */ React__namespace.createElement("ul", { className: "flex flex-col gap-4" }, screens2.map((view) => {
+            return /* @__PURE__ */ React__namespace.createElement("li", { key: `nav-site-${view.name}` }, /* @__PURE__ */ React__namespace.createElement(RenderNavSite, { view }));
+          })));
+        }
+      }), !!(cloudConfigs == null ? void 0 : cloudConfigs.length) && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("h4", { className: "uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, "Cloud"), /* @__PURE__ */ React__namespace.createElement("ul", { className: "flex flex-col gap-4" }, cloudConfigs.map((config) => {
+        return /* @__PURE__ */ React__namespace.createElement("li", { key: `nav-site-${config.name}` }, /* @__PURE__ */ React__namespace.createElement(RenderNavCloud, { config }));
+      }))), /* @__PURE__ */ React__namespace.createElement("div", { className: "grow" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "font-sans font-light text-xs mb-3 mt-8 text-gray-500" }, "v", version))
+    );
+  };
+  const CollectionsList = ({
+    collections,
+    RenderNavCollection
+  }) => {
+    if (collections.length === 0) {
+      return /* @__PURE__ */ React__namespace.createElement("div", null, "No collections found");
+    }
+    return /* @__PURE__ */ React__namespace.createElement("ul", { className: "flex flex-col gap-4" }, collections.map((collection) => {
+      return /* @__PURE__ */ React__namespace.createElement("li", { key: `nav-collection-${collection.name}` }, /* @__PURE__ */ React__namespace.createElement(RenderNavCollection, { collection }));
+    }));
+  };
+  const CreateContentNavItem = ({ plugin }) => {
+    const [open2, setOpen] = React__namespace.useState(false);
+    return /* @__PURE__ */ React__namespace.createElement("li", { key: plugin.name }, /* @__PURE__ */ React__namespace.createElement(
+      "button",
+      {
+        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__namespace.createElement(VscNewFile, { className: "mr-3 h-6 opacity-80 w-auto" }),
+      " ",
+      plugin.name
+    ), open2 && /* @__PURE__ */ React__namespace.createElement(FormModal, { plugin, close: () => setOpen(false) }));
+  };
+  const ResizeHandle = () => {
+    const {
+      resizingSidebar,
+      setResizingSidebar,
+      fullscreen,
+      setSidebarWidth,
+      displayState
+    } = React__namespace.useContext(SidebarContext);
+    React__namespace.useEffect(() => {
+      const handleMouseUp = () => setResizingSidebar(false);
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }, []);
+    React__namespace.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__namespace.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__namespace.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__namespace.useMemo(
+      () => cms.state.forms.find(({ tinaForm }) => item.formId === tinaForm.id),
+      [item.formId]
+    );
+    return /* @__PURE__ */ React__namespace.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`
+      },
+      /* @__PURE__ */ React__namespace.createElement(BiEdit, { className: "opacity-70 w-5 h-auto text-blue-500 flex-none" }),
+      /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1 flex flex-col gap-0.5 items-start" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "group-hover:text-blue-500 font-sans text-xs font-semibold text-gray-700 whitespace-normal" }, form.tinaForm.label), /* @__PURE__ */ React__namespace.createElement("div", { className: "group-hover:text-blue-500 text-base truncate leading-tight text-gray-600" }, form.tinaForm.id))
+    );
+  };
+  const FormListItem = ({
+    item,
+    depth,
+    setActiveFormId
+  }) => {
+    var _a;
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "divide-y divide-gray-200" }, /* @__PURE__ */ React__namespace.createElement(Item, { setActiveFormId, item, depth }), item.subItems && /* @__PURE__ */ React__namespace.createElement("ul", { className: "divide-y divide-gray-200" }, (_a = item.subItems) == null ? void 0 : _a.map((subItem) => {
+      if (subItem.type === "document") {
+        return /* @__PURE__ */ React__namespace.createElement("li", { key: subItem.formId }, /* @__PURE__ */ React__namespace.createElement(
+          Item,
+          {
+            setActiveFormId,
+            depth: depth + 1,
+            item: subItem
+          }
+        ));
+      }
+    })));
+  };
+  const FormLists = (props) => {
+    const cms = useCMS();
+    return /* @__PURE__ */ React__namespace.createElement(
+      react.Transition,
+      {
+        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"
+      },
+      cms.state.formLists.map((formList, index) => /* @__PURE__ */ React__namespace.createElement("div", { key: `${formList.id}-${index}`, className: "pt-16" }, /* @__PURE__ */ React__namespace.createElement(
+        FormList,
+        {
+          isEditing: props.isEditing,
+          setActiveFormId: (id) => {
+            cms.dispatch({ type: "forms:set-active-form-id", value: id });
+          },
+          formList
+        }
+      )))
+    );
+  };
+  const FormList = (props) => {
+    const cms = useCMS();
+    const listItems = React__namespace.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);
+          }
+        } 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__namespace.createElement("ul", null, /* @__PURE__ */ React__namespace.createElement("li", { className: "divide-y divide-gray-200" }, listItems.map((item, index) => {
+      if (item.type === "list") {
+        return /* @__PURE__ */ React__namespace.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__namespace.createElement(
+            "span",
+            {
+              className: "text-sm tracking-wide font-bold text-gray-700 uppercase"
+            },
+            item.label
+          )
+        );
+      }
+      return /* @__PURE__ */ React__namespace.createElement(
+        FormListItem,
+        {
+          setActiveFormId: (id) => props.setActiveFormId(id),
+          key: item.formId,
+          item,
+          depth: 0
+        }
+      );
+    })));
+  };
+  const SidebarNoFormsPlaceholder = () => /* @__PURE__ */ React__namespace.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__namespace.createElement("p", { className: "block pb-5" }, "Looks like there's ", /* @__PURE__ */ React__namespace.createElement("br", null), "nothing to edit on ", /* @__PURE__ */ React__namespace.createElement("br", null), "this page."),
+    /* @__PURE__ */ React__namespace.createElement("p", { className: "block pt-5" }, /* @__PURE__ */ React__namespace.createElement(
+      Button$1,
+      {
+        href: "https://tina.io/docs/contextual-editing/overview",
+        target: "_blank",
+        as: "a"
+      },
+      /* @__PURE__ */ React__namespace.createElement(Emoji$1, { className: "mr-1.5" }, "📖"),
+      " Contextual Editing Docs"
+    ))
+  );
+  const Emoji$1 = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
+    "span",
+    {
+      className: `text-[24px] leading-none inline-block ${className}`,
+      ...props
+    }
+  );
+  const minimumTimeToShowLoadingIndicator = 1e3;
+  const FormsView = ({ loadingPlaceholder } = {}) => {
+    const cms = useCMS$1();
+    const { setFormIsPristine } = React__namespace.useContext(SidebarContext);
+    const [isShowingLoading, setIsShowingLoading] = React__namespace.useState(true);
+    const [initialLoadComplete, setInitialLoadComplete] = React__namespace.useState(false);
+    React__namespace.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__namespace.createElement(LoadingPlaceholder, null);
+    }
+    if (!cms.state.formLists.length) {
+      return /* @__PURE__ */ React__namespace.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__namespace.createElement(FormLists, { isEditing });
+    }
+    const formMetas = cms.plugins.all("form:meta");
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, activeForm && /* @__PURE__ */ React__namespace.createElement(FormWrapper$1, { isEditing, isMultiform }, isMultiform && /* @__PURE__ */ React__namespace.createElement(MultiformFormHeader, { activeForm }), !isMultiform && /* @__PURE__ */ React__namespace.createElement(FormHeader, { activeForm }), formMetas == null ? void 0 : formMetas.map((meta) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, { key: meta.name }, /* @__PURE__ */ React__namespace.createElement(meta.Component, null))), /* @__PURE__ */ React__namespace.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine })));
+  };
+  const FormWrapper$1 = ({ isEditing, children }) => {
+    return /* @__PURE__ */ React__namespace.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)"
+        }
+      },
+      children
+    );
+  };
+  const MultiformFormHeader = ({
+    activeForm
+  }) => {
+    const cms = useCMS$1();
+    const { formIsPristine } = React__namespace.useContext(SidebarContext);
+    return /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React__namespace.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__namespace.createElement(BiDotsVertical, { className: "h-auto w-5 inline-block opacity-70" })
+      ), /* @__PURE__ */ React__namespace.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__namespace.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
+      ), /* @__PURE__ */ React__namespace.createElement("span", { className: "opacity-30 text-sm leading-tight whitespace-nowrap flex-0" }, "/"), /* @__PURE__ */ React__namespace.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, activeForm.tinaForm.label || activeForm.tinaForm.id), /* @__PURE__ */ React__namespace.createElement(FormStatus, { pristine: formIsPristine }))
+    );
+  };
+  const FormHeader = ({ activeForm }) => {
+    const { formIsPristine } = React__namespace.useContext(SidebarContext);
+    const cms = useCMS$1();
+    const shortFormLabel = activeForm.tinaForm.label ? activeForm.tinaForm.label.replace(/^.*[\\\/]/, "") : false;
+    return /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: "max-w-form mx-auto flex gap-2 justify-between items-center" }, /* @__PURE__ */ React__namespace.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__namespace.createElement(BiHomeAlt, { className: "h-auto w-5 inline-block opacity-70" })
+      ), shortFormLabel && /* @__PURE__ */ React__namespace.createElement("span", { className: "block w-full text-sm leading-tight whitespace-nowrap truncate" }, shortFormLabel), /* @__PURE__ */ React__namespace.createElement(FormStatus, { pristine: formIsPristine }))
+    );
+  };
+  const SidebarContext = React__namespace.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__namespace.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 };
+  };
+  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__namespace.useState(
+      () => cms.flags.get("branch-switcher")
+    );
+    React__namespace.useEffect(() => {
+      cms.events.subscribe("flag:set", ({ key, value }) => {
+        if (key === "branch-switcher") {
+          setBranchingEnabled(value);
+        }
+      });
+    }, [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] = React.useState(false);
+    const [activeScreen, setActiveView] = React.useState(null);
+    const [sidebarWidth, setSidebarWidth] = React__namespace.useState(defaultWidth);
+    const [formIsPristine, setFormIsPristine] = React__namespace.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";
+      }
+    );
+    const setDisplayState = (value) => cms.dispatch({ type: "sidebar:set-display-state", value });
+    const displayState = cms.state.sidebarDisplayState;
+    React__namespace.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));
+        }
+      }
+    }, []);
+    React__namespace.useEffect(() => {
+      if (typeof window !== "undefined") {
+        const localSidebarState = window.localStorage.getItem(LOCALSTATEKEY);
+        if (localSidebarState === null) {
+          setDisplayState(defaultSidebarState);
+        }
+      }
+    }, [defaultSidebarState]);
+    React__namespace.useEffect(() => {
+      if (typeof window !== "undefined" && cms.enabled) {
+        window.localStorage.setItem(LOCALSTATEKEY, JSON.stringify(displayState));
+      }
+    }, [displayState, cms]);
+    React__namespace.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__namespace.useEffect(() => {
+      const updateLayout = () => {
+        if (displayState === "fullscreen") {
+          return;
+        }
+        updateBodyDisplacement({
+          position,
+          displayState,
+          sidebarWidth,
+          resizingSidebar
+        });
+      };
+      updateLayout();
+      window.addEventListener("resize", updateLayout);
+      return () => {
+        window.removeEventListener("resize", updateLayout);
+      };
+    }, [displayState, position, sidebarWidth, resizingSidebar]);
+    const windowWidth = windowSize.useWindowWidth();
+    const displayNav = renderNav && (sidebarWidth > navBreakpoint && windowWidth > navBreakpoint || displayState === "fullscreen" && windowWidth > navBreakpoint);
+    const renderMobileNav = renderNav && (sidebarWidth < navBreakpoint + 1 || windowWidth < navBreakpoint + 1);
+    return /* @__PURE__ */ React__namespace.createElement(
+      SidebarContext.Provider,
+      {
+        value: {
+          sidebarWidth,
+          setSidebarWidth,
+          displayState,
+          setDisplayState,
+          position,
+          toggleFullscreen,
+          toggleSidebarOpen,
+          resizingSidebar,
+          setResizingSidebar,
+          menuIsOpen,
+          setMenuIsOpen,
+          toggleMenu,
+          setActiveView,
+          formIsPristine,
+          setFormIsPristine
+        }
+      },
+      /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(SidebarWrapper, null, /* @__PURE__ */ React__namespace.createElement(EditButton, null), displayNav && /* @__PURE__ */ React__namespace.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__namespace.createElement(
+            SidebarSiteLink,
+            {
+              view,
+              onClick: () => {
+                setActiveView(view);
+                setMenuIsOpen(false);
+              }
+            }
+          ),
+          RenderNavCloud: ({ config }) => /* @__PURE__ */ React__namespace.createElement(SidebarCloudLink$1, { config }),
+          RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__namespace.createElement(
+            SidebarCollectionLink,
+            {
+              onClick: () => {
+                setMenuIsOpen(false);
+              },
+              collection
+            }
+          ),
+          AuthRenderNavCollection: ({ collection }) => /* @__PURE__ */ React__namespace.createElement(
+            SidebarCollectionLink,
+            {
+              onClick: () => {
+                setMenuIsOpen(false);
+              },
+              collection,
+              Icon: ImUsers
+            }
+          )
+        }
+      ), /* @__PURE__ */ React__namespace.createElement(SidebarBody, null, /* @__PURE__ */ React__namespace.createElement(
+        SidebarHeader,
+        {
+          displayNav,
+          renderNav,
+          isLocalMode: (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isLocalMode,
+          branchingEnabled
+        }
+      ), /* @__PURE__ */ React__namespace.createElement(FormsView, { loadingPlaceholder: sidebar.loadingPlaceholder }), activeScreen && /* @__PURE__ */ React__namespace.createElement(
+        ScreenPluginModal,
+        {
+          screen: activeScreen,
+          close: () => setActiveView(null)
+        }
+      )), /* @__PURE__ */ React__namespace.createElement(ResizeHandle, null)), renderMobileNav && /* @__PURE__ */ React__namespace.createElement(react.Transition, { show: menuIsOpen, as: "div" }, /* @__PURE__ */ React__namespace.createElement(
+        react.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"
+        },
+        /* @__PURE__ */ React__namespace.createElement("div", { className: "fixed left-0 top-0 z-overlay h-full transform" }, /* @__PURE__ */ React__namespace.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__namespace.createElement(
+              SidebarSiteLink,
+              {
+                view,
+                onClick: () => {
+                  setActiveView(view);
+                  setMenuIsOpen(false);
+                }
+              }
+            ),
+            RenderNavCloud: ({ config }) => /* @__PURE__ */ React__namespace.createElement(SidebarCloudLink$1, { config }),
+            RenderNavCollection: ({ collection }) => /* @__PURE__ */ React__namespace.createElement(
+              SidebarCollectionLink,
+              {
+                onClick: () => {
+                  setMenuIsOpen(false);
+                },
+                collection
+              }
+            ),
+            AuthRenderNavCollection: ({ collection }) => /* @__PURE__ */ React__namespace.createElement(
+              SidebarCollectionLink,
+              {
+                onClick: () => {
+                  setMenuIsOpen(false);
+                },
+                collection,
+                Icon: ImUsers
+              }
+            )
+          },
+          /* @__PURE__ */ React__namespace.createElement("div", { className: "absolute top-8 right-0 transform translate-x-full overflow-hidden" }, /* @__PURE__ */ React__namespace.createElement(
+            Button$1,
+            {
+              rounded: "right",
+              variant: "secondary",
+              onClick: () => {
+                setMenuIsOpen(false);
+              },
+              className: "transition-opacity duration-150 ease-out"
+            },
+            /* @__PURE__ */ React__namespace.createElement(IoMdClose, { className: "h-5 w-auto text-blue-500" })
+          ))
+        ))
+      ), /* @__PURE__ */ React__namespace.createElement(
+        react.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.createElement(MediaPickerWrap, null, /* @__PURE__ */ React.createElement(SyncStatusContainer, null, /* @__PURE__ */ React.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.createElement("div", { className: "flex flex-1 items-center gap-4" }, /* @__PURE__ */ React.createElement(ViewModeToggle, { viewMode, setViewMode }), /* @__PURE__ */ React.createElement(
-      Breadcrumb$1,
-      {
-        directory,
-        setDirectory: (dir) => {
-          setDirectory(dir);
-          setLoadFolders(true);
-          resetOffset();
-          resetList();
-          setActiveItem(false);
-        }
+        /* @__PURE__ */ React__namespace.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.createElement("div", { className: "flex flex-wrap items-center gap-4" }, /* @__PURE__ */ React.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__namespace.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__namespace.createElement("div", { className: "flex-grow-0 w-full overflow-visible z-20" }, isLocalMode && /* @__PURE__ */ React__namespace.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React__namespace.createElement(BillingWarning, null), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-4 -mb-14 w-full flex gap-3 items-center justify-between pointer-events-none" }, displayMenuButton && /* @__PURE__ */ React__namespace.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.createElement(IoMdRefresh, { className: "w-6 h-full ml-2 opacity-70 text-blue-500" })
-    ), /* @__PURE__ */ React.createElement(
-      Button$1,
+      /* @__PURE__ */ React__namespace.createElement(BiMenu, { className: "h-6 w-auto text-blue-500" })
+    ), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1 flex gap-3 items-center shrink min-w-0" }, branchingEnabled && !isLocalMode && /* @__PURE__ */ React__namespace.createElement(BranchButton, null), branchingEnabled && !isLocalMode && previewUrl && /* @__PURE__ */ React__namespace.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.createElement(BiFolder, { className: "w-6 h-full ml-2 opacity-70 text-blue-500" })
-    ), /* @__PURE__ */ React.createElement(UploadButton, { onClick, uploading }))), /* @__PURE__ */ React.createElement("div", { className: "flex h-full overflow-hidden bg-white" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col h-full @container" }, /* @__PURE__ */ React.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.createElement("input", { ...getInputProps() }),
-      listState === "loaded" && list.items.length === 0 && /* @__PURE__ */ React.createElement(EmptyMediaList, null),
-      viewMode === "list" && list.items.map((item) => /* @__PURE__ */ React.createElement(
-        ListMediaItem,
-        {
-          key: item.id,
-          item,
-          onClick: onClickMediaItem,
-          active: activeItem && activeItem.id === item.id
-        }
-      )),
-      viewMode === "grid" && list.items.map((item) => /* @__PURE__ */ React.createElement(
-        GridMediaItem,
-        {
-          key: item.id,
-          item,
-          onClick: onClickMediaItem,
-          active: activeItem && activeItem.id === item.id
-        }
-      )),
-      !!list.nextOffset && /* @__PURE__ */ React.createElement(LoadingMediaList, { ref: loaderRef })
-    )), /* @__PURE__ */ React.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.createElement(
+      },
+      /* @__PURE__ */ React__namespace.createElement(BiLinkExternal, { className: "flex-shrink-0 w-4 h-auto text-blue-500/70 mr-1" }),
+      /* @__PURE__ */ React__namespace.createElement("span", { className: "truncate max-w-full min-w-0 shrink" }, "Preview")
+    )), /* @__PURE__ */ React__namespace.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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex grow-0 shrink-0 gap-2 w-full items-center justify-between" }, /* @__PURE__ */ React.createElement("h3", { className: "text-lg text-gray-600 w-full max-w-full break-words block truncate flex-1" }, activeItem.filename), /* @__PURE__ */ React.createElement(
-        IconButton,
-        {
-          variant: "ghost",
-          className: "group grow-0 shrink-0",
-          onClick: close2
-        },
-        /* @__PURE__ */ React.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.createElement("div", { className: "w-full max-h-[75%]" }, /* @__PURE__ */ React.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.createElement("span", { className: "p-3 border border-gray-100 rounded-md overflow-hidden bg-gray-50 shadow" }, /* @__PURE__ */ React.createElement(BiFile, { className: "w-14 h-auto fill-gray-300" })), /* @__PURE__ */ React.createElement("div", { className: "grow h-full w-full shrink flex flex-col gap-3 items-start justify-start" }, /* @__PURE__ */ React.createElement(CopyField, { value: absoluteImgURL(activeItem.src), label: "URL" })), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 w-full flex flex-col justify-end items-start" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full gap-3" }, selectMediaItem && /* @__PURE__ */ React.createElement(
-        Button$1,
-        {
-          size: "medium",
-          variant: "primary",
-          className: "grow",
-          onClick: () => selectMediaItem(activeItem)
-        },
-        "Insert",
-        /* @__PURE__ */ React.createElement(BiArrowToBottom, { className: "ml-1 -mr-0.5 w-6 h-auto text-white opacity-70" })
-      ), allowDelete && /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__namespace.createElement(
         Button$1,
         {
+          rounded: "left",
           variant: "white",
-          size: "medium",
-          className: "grow max-w-[40%]",
-          onClick: deleteMediaItem
+          onClick: toggleSidebarOpen,
+          "aria-label": "closes cms sidebar",
+          className: "-mr-px"
         },
-        "Delete",
-        /* @__PURE__ */ React.createElement(TrashIcon, { className: "ml-1 -mr-0.5 w-6 h-auto text-red-500 opacity-70" })
-      ))))
-    );
+        /* @__PURE__ */ React__namespace.createElement(MdOutlineArrowBackIos, { className: "h-[18px] w-auto -mr-1 text-blue-500" })
+      ),
+      /* @__PURE__ */ React__namespace.createElement(Button$1, { rounded: "custom", variant: "white", onClick: toggleFullscreen }, displayState === "fullscreen" ? (
+        // BiCollapseAlt
+        /* @__PURE__ */ React__namespace.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__namespace.createElement("path", { d: "M2 15h7v7h2v-9H2v2zM15 2h-2v9h9V9h-7V2z" })
+        )
+      ) : /* @__PURE__ */ React__namespace.createElement(BiExpandAlt, { className: "h-5 -mx-1 w-auto text-blue-500" }))
+    )));
   };
-  const UploadButton = ({ onClick, uploading }) => {
-    return /* @__PURE__ */ React.createElement(
-      Button$1,
+  const SidebarSiteLink = ({
+    view,
+    onClick
+  }) => {
+    return /* @__PURE__ */ React__namespace.createElement(
+      "button",
       {
-        variant: "primary",
-        size: "custom",
-        className: "text-sm h-10 px-6",
-        busy: uploading,
+        className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100",
+        value: view.name,
         onClick
       },
-      uploading ? /* @__PURE__ */ React.createElement(LoadingDots, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, "Upload ", /* @__PURE__ */ React.createElement(BiCloudUpload, { className: "w-6 h-full ml-2 opacity-70" }))
+      /* @__PURE__ */ React__namespace.createElement(view.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }),
+      " ",
+      view.name
     );
   };
-  const LoadingMediaList = React.forwardRef(
-    (props, ref) => {
-      const { extraText, ...rest } = props;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          ref,
-          className: "w-full h-full flex flex-col items-center justify-center",
-          ...rest
-        },
-        extraText && /* @__PURE__ */ React.createElement("p", null, extraText),
-        /* @__PURE__ */ React.createElement(LoadingDots, { color: "var(--tina-color-primary)" })
-      );
-    }
-  );
-  const MediaPickerWrap = ({ children }) => {
-    return /* @__PURE__ */ React.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 = React.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] = React.useState(doCheckSyncStatus ? "loading" : "synced");
-    React.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.createElement("div", { className: "h-full flex items-center justify-center p-6 bg-gradient-to-t from-gray-200 to-transparent" }, /* @__PURE__ */ React.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.createElement("div", { className: "flex items-start sm:items-center gap-2" }, /* @__PURE__ */ React.createElement(
-      BiError,
-      {
-        className: `w-7 h-auto flex-shrink-0 text-yellow-400 -mt-px`
-      }
-    ), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `flex-1 flex flex-col items-start gap-0.5 text-base text-yellow-700`
-      },
-      "Media needs to be turned on for this project.",
-      /* @__PURE__ */ React.createElement(
+  const SidebarCloudLink$1 = ({ config }) => {
+    if (config.text) {
+      return /* @__PURE__ */ React__namespace.createElement("span", { className: "text-base tracking-wide text-gray-500 flex items-center opacity-90" }, config.text, " ", /* @__PURE__ */ React__namespace.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.createElement(BiLinkExternal, { className: `w-5 h-auto flex-shrink-0` })
-      )
-    )))) : /* @__PURE__ */ React.createElement(SyncStatusContext.Provider, { value: { syncStatus } }, children);
-  };
-  const useSyncStatus = () => {
-    const context = React.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.createElement("div", { className: `p-12 text-xl opacity-50 text-center` }, syncStatus == "synced" ? "Drag and drop assets here" : "Loading...");
+    return /* @__PURE__ */ React__namespace.createElement("span", { className: "text-base tracking-wide text-gray-500 hover:text-blue-600 flex items-center opacity-90 hover:opacity-100" }, /* @__PURE__ */ React__namespace.createElement(config.Icon, { className: "mr-2 h-6 opacity-80 w-auto" }), /* @__PURE__ */ React__namespace.createElement("a", { target: "_blank", href: config.link.href }, config.link.text));
   };
-  const DocsLink = ({ title, message, docsLink, ...props }) => {
-    return /* @__PURE__ */ React.createElement("div", { className: "h-3/4 text-center flex flex-col justify-center", ...props }, /* @__PURE__ */ React.createElement("h2", { className: "mb-3 text-xl text-gray-600" }, title), /* @__PURE__ */ React.createElement("div", { className: "mb-3 text-base text-gray-700" }, message), /* @__PURE__ */ React.createElement(
+  const SidebarCollectionLink = ({
+    Icon = ImFilesEmpty,
+    collection,
+    onClick
+  }) => {
+    const cms = useCMS$1();
+    const tinaPreview = cms.flags.get("tina-preview") || false;
+    return /* @__PURE__ */ React__namespace.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__namespace.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.createElement(
+  const EditButton = ({}) => {
+    const { displayState, toggleSidebarOpen } = React__namespace.useContext(SidebarContext);
+    return /* @__PURE__ */ React__namespace.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__namespace.createElement(BiPencil, { className: "h-6 w-auto" })
+    );
+  };
+  const SidebarWrapper = ({ children }) => {
+    const { displayState, sidebarWidth, resizingSidebar } = React__namespace.useContext(SidebarContext);
+    return /* @__PURE__ */ React__namespace.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.createElement(
-        "button",
-        {
-          className: `${toggleClasses.base} px-2.5 rounded-l-md ${viewMode === "grid" ? toggleClasses.active : toggleClasses.inactive}`,
-          onClick: () => {
-            setViewMode("grid");
-          }
-        },
-        /* @__PURE__ */ React.createElement(BiGridAlt, { className: "w-6 h-full opacity-70" })
-      ),
-      /* @__PURE__ */ React.createElement(
-        "button",
+      /* @__PURE__ */ React__namespace.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.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] = React.useState("");
-    const [confirmPassword, setConfirmPassword] = React.useState("");
-    const [dirty, setDirty] = React.useState(false);
-    const [result, setResult] = React.useState(null);
-    const [formState, setFormState] = React.useState("idle");
-    const [passwordChangeRequired, setPasswordChangeRequired] = React.useState(false);
-    React.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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex justify-center items-center h-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col space-y-8 p-6" }, passwordChangeRequired && /* @__PURE__ */ React.createElement("div", { className: "text-center text-red-500" }, "Your password has expired. Please update your password."), /* @__PURE__ */ React.createElement("label", { className: "block" }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-700" }, "New Password"), /* @__PURE__ */ React.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.createElement("label", { className: "block" }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-700" }, "Confirm New Password"), /* @__PURE__ */ React.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.createElement("div", { className: "text-center text-sm text-gray-500" }, result), err && /* @__PURE__ */ React.createElement("div", { className: "text-center text-sm text-red-500" }, err), /* @__PURE__ */ React.createElement(
-      Button$1,
+  const SidebarBody = ({ children }) => {
+    return /* @__PURE__ */ React__namespace.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,
@@ -12001,7 +11999,7 @@ flowchart TD
               name: "Support",
               link: {
                 text: "Support",
-                href: "https:/tina.io/docs/support"
+                href: "https://tina.io/docs/support"
               },
               Icon: MdOutlineHelpOutline
             })
@@ -32299,8 +32297,8 @@ This will work when developing locally but NOT when deployed to production.
     return client.request(query, { variables });
   };
   const GetCMS = ({ children }) => {
+    const cms = useCMS$1();
     try {
-      const cms = useCMS$1();
       return /* @__PURE__ */ React.createElement(React.Fragment, null, children(cms));
     } catch (e) {
       return null;
@@ -33708,22 +33706,28 @@ This will work when developing locally but NOT when deployed to production.
     search
   }) => {
     const navigate = reactRouterDom.useNavigate();
-    const { collection, loading, error, reFetchCollection, collectionExtra } = search ? useSearchCollection(
-      cms,
-      collectionName,
-      includeDocuments,
-      folder,
-      startCursor || "",
-      search
-    ) : useGetCollection(
-      cms,
-      collectionName,
-      includeDocuments,
-      folder,
-      startCursor || "",
-      sortKey,
-      filterArgs
-    ) || {};
+    const { collection, loading, error, reFetchCollection, collectionExtra } = search ? (
+      // biome-ignore lint/correctness/useHookAtTopLevel: not ready to fix these yet
+      useSearchCollection(
+        cms,
+        collectionName,
+        includeDocuments,
+        folder,
+        startCursor || "",
+        search
+      )
+    ) : (
+      // biome-ignore lint/correctness/useHookAtTopLevel: not ready to fix these yet
+      useGetCollection(
+        cms,
+        collectionName,
+        includeDocuments,
+        folder,
+        startCursor || "",
+        sortKey,
+        filterArgs
+      ) || {}
+    );
     React.useEffect(() => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i;
       if (loading)
@@ -35078,3 +35082,4 @@ This will work when developing locally but NOT when deployed to production.
   exports2.wrapFieldsWithMeta = wrapFieldsWithMeta;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 });
+//# sourceMappingURL=index.js.map