tinacms 0.0.0-9bb408f-20241030010559 → 0.0.0-9db4961-20250328182422

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("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("@react-hook/window-size"), require("graphql"), require("graphql-tag"), require("@tinacms/schema-tools"), require("yup"), require("@graphql-inspector/core"), 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", "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", "@react-hook/window-size", "graphql", "graphql-tag", "@tinacms/schema-tools", "yup", "@graphql-inspector/core", "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, get, moment, dateFns, plateLink, ToolbarPrimitive, TooltipPrimitive, plateParagraph, plateBlockQuote, plateFloating, windowSize, graphql, gql, schemaTools, yup, core, 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("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("graphql-tag"), require("@tinacms/schema-tools"), 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", "graphql-tag", "@tinacms/schema-tools", "@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, gql, schemaTools, 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) => {
@@ -774,6 +774,22 @@ var __publicField = (obj, key, value) => {
       );
     };
   }
+  function wrapFieldWithNoHeader(Field) {
+    return (props) => {
+      return /* @__PURE__ */ React__namespace.createElement(
+        FieldMeta,
+        {
+          name: props.input.name,
+          label: false,
+          description: "",
+          error: props.meta.error,
+          index: props.index,
+          tinaForm: props.tinaForm
+        },
+        /* @__PURE__ */ React__namespace.createElement(Field, { ...props })
+      );
+    };
+  }
   function wrapFieldWithError(Field) {
     return (props) => {
       return /* @__PURE__ */ React__namespace.createElement(
@@ -846,6 +862,16 @@ var __publicField = (obj, key, value) => {
     className,
     ...props
   }) => {
+    if (typeof children === "string") {
+      return /* @__PURE__ */ React__namespace.createElement(
+        "span",
+        {
+          className: `block font-sans text-xs italic font-light text-gray-400 pt-0.5 whitespace-normal m-0 ${className}`,
+          ...props,
+          dangerouslySetInnerHTML: { __html: children }
+        }
+      );
+    }
     return /* @__PURE__ */ React__namespace.createElement(
       "span",
       {
@@ -2917,7 +2943,7 @@ flowchart TD
       ),
       [plate.MARK_CODE]: CodeLeaf,
       [plate.MARK_UNDERLINE]: cn$1.withProps(plateCommon.PlateLeaf, { as: "u" }),
-      [plate.MARK_STRIKETHROUGH]: cn$1.withProps(plateCommon.PlateLeaf, { as: "s" }),
+      [plate.MARK_STRIKETHROUGH]: ({ editor, leaf, text, ...props }) => /* @__PURE__ */ React.createElement("s", { ...props.attributes, ...props }),
       [plate.MARK_ITALIC]: cn$1.withProps(plateCommon.PlateLeaf, { as: "em" }),
       [plate.MARK_BOLD]: ({ editor, leaf, text, ...props }) => /* @__PURE__ */ React.createElement("strong", { ...props.attributes, ...props }),
       [plate.ELEMENT_HR]: ({
@@ -3804,7 +3830,7 @@ flowchart TD
   function _objectWithoutProperties(source, excluded) {
     if (source == null)
       return {};
-    var target = _objectWithoutPropertiesLoose$1(source, excluded);
+    var target = _objectWithoutPropertiesLoose(source, excluded);
     var key, i;
     if (Object.getOwnPropertySymbols) {
       var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -3819,7 +3845,7 @@ flowchart TD
     }
     return target;
   }
-  function _objectWithoutPropertiesLoose$1(source, excluded) {
+  function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null)
       return {};
     var target = {};
@@ -4909,7 +4935,28 @@ flowchart TD
     onChange,
     value,
     step
-  }) => /* @__PURE__ */ React__namespace.createElement(Input, { type: "number", step, value, onChange });
+  }) => /* @__PURE__ */ React__namespace.createElement(
+    Input,
+    {
+      type: "number",
+      step,
+      value,
+      onChange: (event) => {
+        const inputValue = event.target.value;
+        const newValue = inputValue === "" ? void 0 : inputValue;
+        if (onChange) {
+          const syntheticEvent = {
+            ...event,
+            target: {
+              ...event.target,
+              value: newValue
+            }
+          };
+          onChange(syntheticEvent);
+        }
+      }
+    }
+  );
   function useCMS() {
     return useCMS$1();
   }
@@ -5150,7 +5197,7 @@ flowchart TD
       side: "bottom",
       className: cn(
         "rounded-md border bg-white p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        "max-h-[30vh] max-w-[30vh] overflow-y-auto",
+        "max-h-[30vh] max-w-[30vw] overflow-y-auto",
         className
       ),
       ...props
@@ -5242,11 +5289,7 @@ flowchart TD
     const node = nodes.find((node2) => node2.id === value);
     return node ? node._internalSys.filename : null;
   };
-  const ComboboxDemo = ({
-    cms,
-    input,
-    field
-  }) => {
+  const Combobox = ({ cms, input, field }) => {
     const [open2, setOpen] = React__namespace.useState(false);
     const [value, setValue] = React__namespace.useState(input.value);
     const [displayText, setDisplayText] = React__namespace.useState(null);
@@ -5262,7 +5305,9 @@ flowchart TD
     }, [value, input, optionSets]);
     React__namespace.useEffect(() => {
       if (field.experimental___filter && optionSets.length > 0) {
-        setFilteredOptionsList(field.experimental___filter(optionSets, void 0));
+        setFilteredOptionsList(
+          field.experimental___filter(optionSets, void 0)
+        );
       } else {
         setFilteredOptionsList(optionSets);
       }
@@ -5270,17 +5315,17 @@ flowchart TD
     if (loading === true) {
       return /* @__PURE__ */ React__namespace.createElement(LoadingDots, { color: "var(--tina-color-primary)" });
     }
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(Popover, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement(Popover, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
       Button,
       {
         variant: "outline",
         role: "combobox",
         "aria-expanded": open2,
-        className: "w-52 justify-between"
+        className: "w-full justify-between"
       },
       /* @__PURE__ */ React__namespace.createElement("p", { className: "truncate" }, displayText ?? "Choose an option..."),
       open2 ? /* @__PURE__ */ React__namespace.createElement(IoMdArrowDropup, { size: 20 }) : /* @__PURE__ */ React__namespace.createElement(IoMdArrowDropdown, { size: 20 })
-    )), /* @__PURE__ */ React__namespace.createElement(PopoverContent, { className: "p-0 relative" }, /* @__PURE__ */ React__namespace.createElement(
+    )), /* @__PURE__ */ React__namespace.createElement(PopoverContent, { className: "p-0 relative min-w-[var(--radix-popover-trigger-width)]" }, /* @__PURE__ */ React__namespace.createElement(
       Command,
       {
         shouldFilter: !field.experimental___filter,
@@ -5304,32 +5349,25 @@ flowchart TD
         }
       ),
       /* @__PURE__ */ React__namespace.createElement(CommandEmpty, null, "No reference found"),
-      /* @__PURE__ */ React__namespace.createElement(CommandList, null, filteredOptionsList.length > 0 && (filteredOptionsList == null ? void 0 : filteredOptionsList.map(({ collection, edges }) => /* @__PURE__ */ React__namespace.createElement(
-        CommandGroup,
-        {
-          key: `${collection}-group`,
-          heading: collection
-        },
-        /* @__PURE__ */ React__namespace.createElement(CommandList, null, edges == null ? void 0 : edges.map(({ node }) => {
-          const { id, _values } = node;
-          return /* @__PURE__ */ React__namespace.createElement(
-            OptionComponent,
-            {
-              id,
-              key: id,
-              value,
-              field,
-              _values,
-              node,
-              onSelect: (currentValue) => {
-                setValue(currentValue);
-                setOpen(false);
-              }
+      /* @__PURE__ */ React__namespace.createElement(CommandList, null, filteredOptionsList.length > 0 && (filteredOptionsList == null ? void 0 : filteredOptionsList.map(({ collection, edges }) => /* @__PURE__ */ React__namespace.createElement(CommandGroup, { key: `${collection}-group`, heading: collection }, /* @__PURE__ */ React__namespace.createElement(CommandList, null, edges == null ? void 0 : edges.map(({ node }) => {
+        const { id, _values } = node;
+        return /* @__PURE__ */ React__namespace.createElement(
+          OptionComponent,
+          {
+            id,
+            key: id,
+            value,
+            field,
+            _values,
+            node,
+            onSelect: (currentValue) => {
+              setValue(currentValue);
+              setOpen(false);
             }
-          );
-        }))
-      ))))
-    ))));
+          }
+        );
+      }))))))
+    )));
   };
   const useGetNode = (cms, id) => {
     const [document2, setDocument] = React__namespace.useState(
@@ -5402,7 +5440,7 @@ flowchart TD
   };
   const Reference = ({ input, field }) => {
     const cms = useCMS();
-    return /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group" }, /* @__PURE__ */ React__namespace.createElement(ComboboxDemo, { cms, input, field })), /* @__PURE__ */ React__namespace.createElement(ReferenceLink, { cms, input }));
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group" }, /* @__PURE__ */ React__namespace.createElement(Combobox, { cms, input, field })), /* @__PURE__ */ React__namespace.createElement(ReferenceLink, { cms, input }));
   };
   const ButtonToggle = ({
     input,
@@ -5639,7 +5677,9 @@ flowchart TD
           onClick: () => {
             const state = tinaForm.finalForm.getState();
             if (state.invalid === true) {
-              cms.alerts.error("Cannot navigate away from an invalid form.");
+              cms.alerts.error(
+                "Cannot navigate away from an invalid form."
+              );
               return;
             }
             cms.dispatch({
@@ -5710,10 +5750,11 @@ flowchart TD
     return /* @__PURE__ */ React.createElement(
       "button",
       {
-        className: `w-8 px-1 py-2.5 flex items-center justify-center hover:bg-gray-50 text-gray-200 hover:text-red-500 ${disabled && "pointer-events-none opacity-30 cursor-not-allowed"}`,
+        type: "button",
+        className: `w-8 px-1 py-2.5 flex items-center justify-center text-gray-200 hover:opacity-100 opacity-30 hover:bg-gray-50 ${disabled && "pointer-events-none opacity-30 cursor-not-allowed"}`,
         onClick
       },
-      /* @__PURE__ */ React.createElement(TrashIcon, { className: "fill-current transition-colors ease-out duration-100" })
+      /* @__PURE__ */ React.createElement(TrashIcon, { className: "h-5 w-auto fill-current text-red-500 transition-colors duration-150 ease-out" })
     );
   };
   const DragHandle = ({ isDragging }) => {
@@ -5791,27 +5832,35 @@ flowchart TD
       ))))
     ))));
   };
-  const Group = wrapFieldWithError(({ tinaForm, field }) => {
-    const cms = useCMS$1();
-    React__namespace.useState(false);
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
-      Header,
-      {
-        onClick: () => {
-          const state = tinaForm.finalForm.getState();
-          if (state.invalid === true) {
-            cms.alerts.error("Cannot navigate away from an invalid form.");
-            return;
+  const Group = wrapFieldWithNoHeader(
+    ({ tinaForm, field }) => {
+      const cms = useCMS$1();
+      return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
+        Header,
+        {
+          onClick: () => {
+            const state = tinaForm.finalForm.getState();
+            if (state.invalid === true) {
+              cms.alerts.error("Cannot navigate away from an invalid form.");
+              return;
+            }
+            cms.dispatch({
+              type: "forms:set-active-field-name",
+              value: { formId: tinaForm.id, fieldName: field.name }
+            });
           }
-          cms.dispatch({
-            type: "forms:set-active-field-name",
-            value: { formId: tinaForm.id, fieldName: field.name }
-          });
-        }
-      },
-      field.label || field.name
-    ));
-  });
+        },
+        field.label || field.name,
+        field.description && /* @__PURE__ */ React__namespace.createElement(
+          "span",
+          {
+            className: `block font-sans text-xs italic font-light text-gray-400 pt-0.5 whitespace-normal m-0`,
+            dangerouslySetInnerHTML: { __html: field.description }
+          }
+        )
+      ));
+    }
+  );
   const Header = ({ onClick, children }) => {
     return /* @__PURE__ */ React__namespace.createElement("div", { className: "pt-1 mb-5" }, /* @__PURE__ */ React__namespace.createElement(
       "button",
@@ -6214,7 +6263,9 @@ flowchart TD
         onClick: () => {
           const state = tinaForm.finalForm.getState();
           if (state.invalid === true) {
-            cms.alerts.error("Cannot navigate away from an invalid form.");
+            cms.alerts.error(
+              "Cannot navigate away from an invalid form."
+            );
             return;
           }
           cms.dispatch({
@@ -6696,28 +6747,28 @@ flowchart TD
     }
     renderDayHeaders() {
       const locale = this.props.viewDate.localeData();
-      let dayItems = getDaysOfWeek(locale).map((day, index) => /* @__PURE__ */ React.createElement("th", { key: day + index, className: "dow" }, day));
+      const dayItems = getDaysOfWeek(locale).map((day, index) => /* @__PURE__ */ React.createElement("th", { key: day + index, className: "dow" }, day));
       return /* @__PURE__ */ React.createElement("tr", null, dayItems);
     }
     renderDays() {
       const date = this.props.viewDate;
       const startOfMonth = date.clone().startOf("month");
       const endOfMonth = date.clone().endOf("month");
-      let rows = [[], [], [], [], [], []];
-      let startDate = date.clone().subtract(1, "months");
+      const rows = [[], [], [], [], [], []];
+      const startDate = date.clone().subtract(1, "months");
       startDate.date(startDate.daysInMonth()).startOf("week");
-      let endDate = startDate.clone().add(42, "d");
+      const endDate = startDate.clone().add(42, "d");
       let i = 0;
       while (startDate.isBefore(endDate)) {
-        let row = getRow$2(rows, i++);
+        const row = getRow$2(rows, i++);
         row.push(this.renderDay(startDate, startOfMonth, endOfMonth));
         startDate.add(1, "d");
       }
       return rows.map((r, i2) => /* @__PURE__ */ React.createElement("tr", { key: `${endDate.month()}_${i2}` }, r));
     }
     renderDay(date, startOfMonth, endOfMonth) {
-      let selectedDate = this.props.selectedDate;
-      let dayProps = {
+      const selectedDate = this.props.selectedDate;
+      const dayProps = {
         key: date.format("M_D"),
         "data-value": date.date(),
         "data-month": date.month(),
@@ -6771,7 +6822,7 @@ flowchart TD
   }
   function getDaysOfWeek(locale) {
     const first = locale.firstDayOfWeek();
-    let dow = [];
+    const dow = [];
     let i = 0;
     locale._weekdaysMin.forEach(function(day) {
       dow[(7 + i++ - first) % 7] = day;
@@ -6789,7 +6840,7 @@ flowchart TD
       return /* @__PURE__ */ React.createElement("div", { className: "rdtMonths" }, /* @__PURE__ */ React.createElement("table", null, /* @__PURE__ */ React.createElement("thead", null, this.renderNavigation())), /* @__PURE__ */ React.createElement("table", null, /* @__PURE__ */ React.createElement("tbody", null, this.renderMonths())));
     }
     renderNavigation() {
-      let year = this.props.viewDate.year();
+      const year = this.props.viewDate.year();
       return /* @__PURE__ */ React.createElement(
         ViewNavigation,
         {
@@ -6802,9 +6853,9 @@ flowchart TD
       );
     }
     renderMonths() {
-      let rows = [[], [], []];
+      const rows = [[], [], []];
       for (let month = 0; month < 12; month++) {
-        let row = getRow$1(rows, month);
+        const row = getRow$1(rows, month);
         row.push(this.renderMonth(month));
       }
       return rows.map((months, i) => /* @__PURE__ */ React.createElement("tr", { key: i }, months));
@@ -6821,7 +6872,7 @@ flowchart TD
       if (selectedDate && selectedDate.year() === this.props.viewDate.year() && selectedDate.month() === month) {
         className += " rdtActive";
       }
-      let props = { key: month, className, "data-value": month, onClick };
+      const props = { key: month, className, "data-value": month, onClick };
       if (this.props.renderMonth) {
         return this.props.renderMonth(
           props,
@@ -6833,11 +6884,11 @@ flowchart TD
       return /* @__PURE__ */ React.createElement("td", { ...props }, this.getMonthText(month));
     }
     isDisabledMonth(month) {
-      let isValidDate = this.props.isValidDate;
+      const isValidDate = this.props.isValidDate;
       if (!isValidDate) {
         return false;
       }
-      let date = this.props.viewDate.clone().set({ month });
+      const date = this.props.viewDate.clone().set({ month });
       let day = date.endOf("month").date() + 1;
       while (day-- > 1) {
         if (isValidDate(date.date(day))) {
@@ -6889,9 +6940,9 @@ flowchart TD
     }
     renderYears() {
       const viewYear = this.getViewYear();
-      let rows = [[], [], []];
+      const rows = [[], [], []];
       for (let year = viewYear - 1; year < viewYear + 11; year++) {
-        let row = getRow(rows, year - viewYear);
+        const row = getRow(rows, year - viewYear);
         row.push(this.renderYear(year));
       }
       return rows.map((years, i) => /* @__PURE__ */ React.createElement("tr", { key: i }, years));
@@ -6908,7 +6959,7 @@ flowchart TD
       if (selectedYear === year) {
         className += " rdtActive";
       }
-      let props = { key: year, className, "data-value": year, onClick };
+      const props = { key: year, className, "data-value": year, onClick };
       return this.props.renderYear(
         props,
         year,
@@ -6922,15 +6973,15 @@ flowchart TD
       return this.props.selectedDate && this.props.selectedDate.year();
     }
     isDisabledYear(year) {
-      let cache = this.disabledYearsCache;
+      const cache = this.disabledYearsCache;
       if (cache[year] !== void 0) {
         return cache[year];
       }
-      let isValidDate = this.props.isValidDate;
+      const isValidDate = this.props.isValidDate;
       if (!isValidDate) {
         return false;
       }
-      let date = this.props.viewDate.clone().set({ year });
+      const date = this.props.viewDate.clone().set({ year });
       let day = date.endOf("year").dayOfYear() + 1;
       while (day-- > 1) {
         if (isValidDate(date.dayOfYear(day))) {
@@ -6977,7 +7028,7 @@ flowchart TD
     }
   };
   function createConstraints(overrideTimeConstraints) {
-    let constraints = {};
+    const constraints = {};
     Object.keys(timeConstraints).forEach((type) => {
       constraints[type] = {
         ...timeConstraints[type],
@@ -6993,7 +7044,7 @@ flowchart TD
       this.state = this.getTimeParts(props.selectedDate || props.viewDate);
     }
     render() {
-      let items2 = [];
+      const items2 = [];
       const timeParts = this.state;
       this.getCounters().forEach((c, i) => {
         if (i && c !== "ampm") {
@@ -7055,8 +7106,8 @@ flowchart TD
       }
       if (type === "ampm")
         return this.toggleDayPart();
-      let update = {};
-      let body = document.body;
+      const update = {};
+      const body = document.body;
       update[type] = this[action](type);
       this.setState(update);
       this.timer = setTimeout(() => {
@@ -7099,8 +7150,8 @@ flowchart TD
       return pad(type, value);
     }
     getCounters() {
-      let counters = [];
-      let format2 = this.props.timeFormat;
+      const counters = [];
+      const format2 = this.props.timeFormat;
       if (format2.toLowerCase().indexOf("h") !== -1) {
         counters.push("hours");
         if (format2.indexOf("m") !== -1) {
@@ -7153,244 +7204,65 @@ flowchart TD
       str = "0" + str;
     return str;
   }
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-    _setPrototypeOf(subClass, superClass);
-  }
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf2(o2, p2) {
-      o2.__proto__ = p2;
-      return o2;
-    };
-    return _setPrototypeOf(o, p);
-  }
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null)
-      return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0)
-        continue;
-      target[key] = source[key];
-    }
-    return target;
-  }
-  function _assertThisInitialized(self2) {
-    if (self2 === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-    return self2;
-  }
-  function isNodeFound(current, componentNode, ignoreClass) {
-    if (current === componentNode) {
-      return true;
-    }
-    if (current.correspondingElement) {
-      return current.correspondingElement.classList.contains(ignoreClass);
-    }
-    return current.classList.contains(ignoreClass);
-  }
-  function findHighest(current, componentNode, ignoreClass) {
-    if (current === componentNode) {
-      return true;
+  var useClickAway$1 = {};
+  var util = {};
+  Object.defineProperty(util, "__esModule", { value: true });
+  util.isNavigator = util.isBrowser = util.off = util.on = util.noop = void 0;
+  var noop = function() {
+  };
+  util.noop = noop;
+  function on(obj) {
+    var args = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      args[_i - 1] = arguments[_i];
     }
-    while (current.parentNode || current.host) {
-      if (current.parentNode && isNodeFound(current, componentNode, ignoreClass)) {
-        return true;
-      }
-      current = current.parentNode || current.host;
+    if (obj && obj.addEventListener) {
+      obj.addEventListener.apply(obj, args);
     }
-    return current;
-  }
-  function clickedScrollbar(evt) {
-    return document.documentElement.clientWidth <= evt.clientX || document.documentElement.clientHeight <= evt.clientY;
   }
-  var testPassiveEventSupport = function testPassiveEventSupport2() {
-    if (typeof window === "undefined" || typeof window.addEventListener !== "function") {
-      return;
+  util.on = on;
+  function off(obj) {
+    var args = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      args[_i - 1] = arguments[_i];
     }
-    var passive = false;
-    var options = Object.defineProperty({}, "passive", {
-      get: function get2() {
-        passive = true;
-      }
-    });
-    var noop = function noop2() {
-    };
-    window.addEventListener("testPassiveEventSupport", noop, options);
-    window.removeEventListener("testPassiveEventSupport", noop, options);
-    return passive;
-  };
-  function autoInc(seed) {
-    if (seed === void 0) {
-      seed = 0;
+    if (obj && obj.removeEventListener) {
+      obj.removeEventListener.apply(obj, args);
     }
-    return function() {
-      return ++seed;
-    };
-  }
-  var uid = autoInc();
-  var passiveEventSupport;
-  var handlersMap = {};
-  var enabledInstances = {};
-  var touchEvents = ["touchstart", "touchmove"];
-  var IGNORE_CLASS_NAME = "ignore-react-onclickoutside";
-  function getEventHandlerOptions(instance, eventName) {
-    var handlerOptions = {};
-    var isTouchEvent = touchEvents.indexOf(eventName) !== -1;
-    if (isTouchEvent && passiveEventSupport) {
-      handlerOptions.passive = !instance.props.preventDefault;
-    }
-    return handlerOptions;
   }
-  function onClickOutsideHOC(WrappedComponent, config) {
-    var _class, _temp;
-    var componentName = WrappedComponent.displayName || WrappedComponent.name || "Component";
-    return _temp = _class = /* @__PURE__ */ function(_Component) {
-      _inheritsLoose(onClickOutside, _Component);
-      function onClickOutside(props) {
-        var _this;
-        _this = _Component.call(this, props) || this;
-        _this.__outsideClickHandler = function(event) {
-          if (typeof _this.__clickOutsideHandlerProp === "function") {
-            _this.__clickOutsideHandlerProp(event);
-            return;
-          }
-          var instance = _this.getInstance();
-          if (typeof instance.props.handleClickOutside === "function") {
-            instance.props.handleClickOutside(event);
-            return;
-          }
-          if (typeof instance.handleClickOutside === "function") {
-            instance.handleClickOutside(event);
-            return;
-          }
-          throw new Error("WrappedComponent: " + componentName + " lacks a handleClickOutside(event) function for processing outside click events.");
-        };
-        _this.__getComponentNode = function() {
-          var instance = _this.getInstance();
-          if (config && typeof config.setClickOutsideRef === "function") {
-            return config.setClickOutsideRef()(instance);
-          }
-          if (typeof instance.setClickOutsideRef === "function") {
-            return instance.setClickOutsideRef();
-          }
-          return reactDom.findDOMNode(instance);
-        };
-        _this.enableOnClickOutside = function() {
-          if (typeof document === "undefined" || enabledInstances[_this._uid]) {
-            return;
-          }
-          if (typeof passiveEventSupport === "undefined") {
-            passiveEventSupport = testPassiveEventSupport();
-          }
-          enabledInstances[_this._uid] = true;
-          var events = _this.props.eventTypes;
-          if (!events.forEach) {
-            events = [events];
-          }
-          handlersMap[_this._uid] = function(event) {
-            if (_this.componentNode === null)
-              return;
-            if (_this.initTimeStamp > event.timeStamp)
-              return;
-            if (_this.props.preventDefault) {
-              event.preventDefault();
-            }
-            if (_this.props.stopPropagation) {
-              event.stopPropagation();
-            }
-            if (_this.props.excludeScrollbar && clickedScrollbar(event))
-              return;
-            var current = event.composed && event.composedPath && event.composedPath().shift() || event.target;
-            if (findHighest(current, _this.componentNode, _this.props.outsideClickIgnoreClass) !== document) {
-              return;
-            }
-            _this.__outsideClickHandler(event);
-          };
-          events.forEach(function(eventName) {
-            document.addEventListener(eventName, handlersMap[_this._uid], getEventHandlerOptions(_assertThisInitialized(_this), eventName));
-          });
-        };
-        _this.disableOnClickOutside = function() {
-          delete enabledInstances[_this._uid];
-          var fn = handlersMap[_this._uid];
-          if (fn && typeof document !== "undefined") {
-            var events = _this.props.eventTypes;
-            if (!events.forEach) {
-              events = [events];
-            }
-            events.forEach(function(eventName) {
-              return document.removeEventListener(eventName, fn, getEventHandlerOptions(_assertThisInitialized(_this), eventName));
-            });
-            delete handlersMap[_this._uid];
-          }
-        };
-        _this.getRef = function(ref) {
-          return _this.instanceRef = ref;
-        };
-        _this._uid = uid();
-        _this.initTimeStamp = performance.now();
-        return _this;
-      }
-      var _proto = onClickOutside.prototype;
-      _proto.getInstance = function getInstance() {
-        if (WrappedComponent.prototype && !WrappedComponent.prototype.isReactComponent) {
-          return this;
-        }
-        var ref = this.instanceRef;
-        return ref.getInstance ? ref.getInstance() : ref;
+  util.off = off;
+  util.isBrowser = typeof window !== "undefined";
+  util.isNavigator = typeof navigator !== "undefined";
+  Object.defineProperty(useClickAway$1, "__esModule", { value: true });
+  var react_1 = React;
+  var util_1 = util;
+  var defaultEvents = ["mousedown", "touchstart"];
+  var useClickAway = function(ref, onClickAway, events) {
+    if (events === void 0) {
+      events = defaultEvents;
+    }
+    var savedCallback = react_1.useRef(onClickAway);
+    react_1.useEffect(function() {
+      savedCallback.current = onClickAway;
+    }, [onClickAway]);
+    react_1.useEffect(function() {
+      var handler = function(event) {
+        var el = ref.current;
+        el && !el.contains(event.target) && savedCallback.current(event);
       };
-      _proto.componentDidMount = function componentDidMount() {
-        if (typeof document === "undefined" || !document.createElement) {
-          return;
-        }
-        var instance = this.getInstance();
-        if (config && typeof config.handleClickOutside === "function") {
-          this.__clickOutsideHandlerProp = config.handleClickOutside(instance);
-          if (typeof this.__clickOutsideHandlerProp !== "function") {
-            throw new Error("WrappedComponent: " + componentName + " lacks a function for processing outside click events specified by the handleClickOutside config option.");
-          }
-        }
-        this.componentNode = this.__getComponentNode();
-        if (this.props.disableOnClickOutside)
-          return;
-        this.enableOnClickOutside();
-      };
-      _proto.componentDidUpdate = function componentDidUpdate() {
-        this.componentNode = this.__getComponentNode();
-      };
-      _proto.componentWillUnmount = function componentWillUnmount() {
-        this.disableOnClickOutside();
-      };
-      _proto.render = function render() {
-        var _this$props = this.props;
-        _this$props.excludeScrollbar;
-        var props = _objectWithoutPropertiesLoose(_this$props, ["excludeScrollbar"]);
-        if (WrappedComponent.prototype && WrappedComponent.prototype.isReactComponent) {
-          props.ref = this.getRef;
-        } else {
-          props.wrappedRef = this.getRef;
+      for (var _i = 0, events_1 = events; _i < events_1.length; _i++) {
+        var eventName = events_1[_i];
+        util_1.on(document, eventName, handler);
+      }
+      return function() {
+        for (var _i2 = 0, events_2 = events; _i2 < events_2.length; _i2++) {
+          var eventName2 = events_2[_i2];
+          util_1.off(document, eventName2, handler);
         }
-        props.disableOnClickOutside = this.disableOnClickOutside;
-        props.enableOnClickOutside = this.enableOnClickOutside;
-        return React.createElement(WrappedComponent, props);
       };
-      return onClickOutside;
-    }(React.Component), _class.displayName = "OnClickOutside(" + componentName + ")", _class.defaultProps = {
-      eventTypes: ["mousedown", "touchstart"],
-      excludeScrollbar: config && config.excludeScrollbar || false,
-      outsideClickIgnoreClass: IGNORE_CLASS_NAME,
-      preventDefault: false,
-      stopPropagation: false
-    }, _class.getClass = function() {
-      return WrappedComponent.getClass ? WrappedComponent.getClass() : WrappedComponent;
-    }, _temp;
-  }
+    }, [events, ref]);
+  };
+  var _default = useClickAway$1.default = useClickAway;
   const viewModes = {
     YEARS: "years",
     MONTHS: "months",
@@ -7411,7 +7283,7 @@ flowchart TD
       __publicField(this, "_renderCalendar", () => {
         const props = this.props;
         const state = this.state;
-        let viewProps = {
+        const viewProps = {
           viewDate: state.viewDate.clone(),
           selectedDate: this.getSelectedDate(),
           isValidDate: props.isValidDate,
@@ -7454,10 +7326,10 @@ flowchart TD
       __publicField(this, "viewToMethod", { days: "date", months: "month", years: "year" });
       __publicField(this, "nextView", { days: "time", months: "days", years: "months" });
       __publicField(this, "_updateDate", (e) => {
-        let state = this.state;
-        let currentView = state.currentView;
-        let updateOnView = this.getUpdateOn(this.getFormat("date"));
-        let viewDate = this.state.viewDate.clone();
+        const state = this.state;
+        const currentView = state.currentView;
+        const updateOnView = this.getUpdateOn(this.getFormat("date"));
+        const viewDate = this.state.viewDate.clone();
         viewDate[this.viewToMethod[currentView]](
           parseInt(e.target.getAttribute("data-value"), 10)
         );
@@ -7465,7 +7337,7 @@ flowchart TD
           viewDate.month(parseInt(e.target.getAttribute("data-month"), 10));
           viewDate.year(parseInt(e.target.getAttribute("data-year"), 10));
         }
-        let update = { viewDate };
+        const update = { viewDate };
         if (currentView === updateOnView) {
           update.selectedDate = viewDate.clone();
           update.inputValue = viewDate.format(this.getFormat("datetime"));
@@ -7479,7 +7351,7 @@ flowchart TD
         this.setState(update);
       });
       __publicField(this, "_viewNavigate", (modifier, unit) => {
-        let viewDate = this.state.viewDate.clone();
+        const viewDate = this.state.viewDate.clone();
         viewDate.add(modifier, unit);
         if (modifier > 0) {
           this.props.onNavigateForward(modifier, unit);
@@ -7489,7 +7361,7 @@ flowchart TD
         this.setState({ viewDate });
       });
       __publicField(this, "_setTime", (type, value) => {
-        let date = (this.getSelectedDate() || this.state.viewDate).clone();
+        const date = (this.getSelectedDate() || this.state.viewDate).clone();
         date[type](value);
         if (!this.props.value) {
           this.setState({
@@ -7513,7 +7385,7 @@ flowchart TD
         });
       });
       __publicField(this, "_handleClickOutside", () => {
-        let props = this.props;
+        const props = this.props;
         if (props.input && this.state.open && props.open === void 0 && props.closeOnClickOutside) {
           this._closeCalendar();
         }
@@ -7528,7 +7400,7 @@ flowchart TD
           return;
         const value = e.target ? e.target.value : e;
         const localMoment = this.localMoment(value, this.getFormat("datetime"));
-        let update = { inputValue: value };
+        const update = { inputValue: value };
         if (localMoment.isValid()) {
           update.selectedDate = localMoment;
           update.viewDate = localMoment.clone().startOf("month");
@@ -7592,9 +7464,9 @@ flowchart TD
       return this.props.renderView(this.state.currentView, this._renderCalendar);
     }
     getInitialState() {
-      let props = this.props;
-      let inputFormat = this.getFormat("datetime");
-      let selectedDate = this.parseDate(
+      const props = this.props;
+      const inputFormat = this.getFormat("datetime");
+      const selectedDate = this.parseDate(
         props.value || props.initialValue,
         inputFormat
       );
@@ -7625,7 +7497,7 @@ flowchart TD
       return this.getInitialDate();
     }
     getInitialDate() {
-      let m = this.localMoment();
+      const m = this.localMoment();
       m.hour(0).minute(0).second(0).millisecond(0);
       return m;
     }
@@ -7645,8 +7517,8 @@ flowchart TD
     }
     getClassName() {
       let cn2 = "rdt";
-      let props = this.props;
-      let propCn = props.className;
+      const props = this.props;
+      const propCn = props.className;
       if (Array.isArray(propCn)) {
         cn2 += " " + propCn.join(" ");
       } else if (propCn) {
@@ -7679,14 +7551,14 @@ flowchart TD
       return viewModes.DAYS;
     }
     getLocaleData() {
-      let p = this.props;
+      const p = this.props;
       return this.localMoment(
         p.value || p.defaultValue || /* @__PURE__ */ new Date()
       ).localeData();
     }
     getDateFormat() {
       const locale = this.getLocaleData();
-      let format2 = this.props.dateFormat;
+      const format2 = this.props.dateFormat;
       if (format2 === true)
         return locale.longDateFormat("L");
       if (format2)
@@ -7695,7 +7567,7 @@ flowchart TD
     }
     getTimeFormat() {
       const locale = this.getLocaleData();
-      let format2 = this.props.timeFormat;
+      const format2 = this.props.timeFormat;
       if (format2 === true) {
         return locale.longDateFormat("LT");
       }
@@ -7707,12 +7579,12 @@ flowchart TD
       } else if (type === "time") {
         return this.getTimeFormat();
       }
-      let dateFormat = this.getDateFormat();
-      let timeFormat = this.getTimeFormat();
+      const dateFormat = this.getDateFormat();
+      const timeFormat = this.getTimeFormat();
       return dateFormat && timeFormat ? dateFormat + " " + timeFormat : dateFormat || timeFormat;
     }
     updateTime(op, amount, type, toSelected) {
-      let update = {};
+      const update = {};
       const date = toSelected ? "selectedDate" : "viewDate";
       update[date] = this.state[date].clone()[op](amount, type);
       this.setState(update);
@@ -7745,7 +7617,7 @@ flowchart TD
       if (prevProps === this.props)
         return;
       let needsUpdate = false;
-      let thisProps = this.props;
+      const thisProps = this.props;
       ["locale", "utc", "displayZone", "dateFormat", "timeFormat"].forEach(
         function(p) {
           prevProps[p] !== thisProps[p] && (needsUpdate = true);
@@ -7761,8 +7633,8 @@ flowchart TD
     }
     regenerateDates() {
       const props = this.props;
-      let viewDate = this.state.viewDate.clone();
-      let selectedDate = this.state.selectedDate && this.state.selectedDate.clone();
+      const viewDate = this.state.viewDate.clone();
+      const selectedDate = this.state.selectedDate && this.state.selectedDate.clone();
       if (props.locale) {
         viewDate.locale(props.locale);
         selectedDate && selectedDate.locale(props.locale);
@@ -7777,7 +7649,7 @@ flowchart TD
         viewDate.locale();
         selectedDate && selectedDate.locale();
       }
-      let update = { viewDate, selectedDate };
+      const update = { viewDate, selectedDate };
       if (selectedDate && selectedDate.isValid()) {
         update.inputValue = selectedDate.format(this.getFormat("datetime"));
       }
@@ -7786,7 +7658,7 @@ flowchart TD
     getSelectedDate() {
       if (this.props.value === void 0)
         return this.state.selectedDate;
-      let selectedDate = this.parseDate(
+      const selectedDate = this.parseDate(
         this.props.value,
         this.getFormat("datetime")
       );
@@ -7805,7 +7677,7 @@ flowchart TD
       return "";
     }
     getInputValue() {
-      let selectedDate = this.getSelectedDate();
+      const selectedDate = this.getSelectedDate();
       return selectedDate ? selectedDate.format(this.getFormat("datetime")) : this.state.inputValue;
     }
     /**
@@ -7815,7 +7687,7 @@ flowchart TD
      * @public
      */
     setViewDate(date) {
-      let logError = function() {
+      const logError = function() {
         return log("Invalid date passed to the `setViewDate` method: " + date);
       };
       if (!date)
@@ -7911,7 +7783,7 @@ flowchart TD
   // Make moment accessible through the Datetime class
   __publicField(Datetime, "moment", moment);
   function log(message, method) {
-    let con = typeof window !== "undefined" && window.console;
+    const con = typeof window !== "undefined" && window.console;
     if (!con)
       return;
     if (!method) {
@@ -7919,22 +7791,13 @@ flowchart TD
     }
     con[method]("***react-datetime:" + message);
   }
-  class ClickOutBase extends React.Component {
-    constructor() {
-      super(...arguments);
-      __publicField(this, "container", React.createRef());
-    }
-    render() {
-      return /* @__PURE__ */ React.createElement("div", { className: this.props.className, ref: this.container }, this.props.children);
-    }
-    handleClickOutside(e) {
-      this.props.onClickOut(e);
-    }
-    setClickOutsideRef() {
-      return this.container.current;
-    }
+  function ClickableWrapper({ className, onClickOut, children }) {
+    const containerRef = React.useRef(null);
+    _default(containerRef, (event) => {
+      onClickOut(event);
+    });
+    return /* @__PURE__ */ React.createElement("div", { className, ref: containerRef }, children);
   }
-  const ClickableWrapper = onClickOutsideHOC(ClickOutBase);
   const DEFAULT_DATE_DISPLAY_FORMAT = "MMM DD, YYYY";
   const DEFAULT_TIME_DISPLAY_FORMAT = "h:mm A";
   const format$1 = (val, _name, field) => {
@@ -7977,7 +7840,10 @@ flowchart TD
         ReactDateTimeWithStyles,
         {
           value: input.value,
-          onChange: input.onChange,
+          onChange: (value) => {
+            const newValue = value === "" ? void 0 : value;
+            input.onChange(newValue);
+          },
           dateFormat: dateFormat || DEFAULT_DATE_DISPLAY_FORMAT,
           timeFormat: timeFormat || false,
           inputProps: { className: textFieldClasses },
@@ -8740,7 +8606,10 @@ flowchart TD
                 label: "View in GitHub",
                 Icon: /* @__PURE__ */ React__namespace.createElement(BiLinkExternal, { className: "w-5 h-auto text-blue-500 opacity-70" }),
                 onMouseDown: () => {
-                  window.open(branch.githubPullRequestUrl, "_blank");
+                  window.open(
+                    branch.githubPullRequestUrl,
+                    "_blank"
+                  );
                 }
               },
               typeof previewFunction === "function" && ((_b2 = previewFunction({ branch: branch.name })) == null ? void 0 : _b2.url) && {
@@ -9046,7 +8915,9 @@ flowchart TD
       } else {
         events = event;
       }
-      const newListeners = events.map((event2) => new Listener(event2, callback));
+      const newListeners = events.map(
+        (event2) => new Listener(event2, callback)
+      );
       newListeners.forEach((newListener) => this.listeners.add(newListener));
       return () => {
         newListeners.forEach((listener) => this.listeners.delete(listener));
@@ -9402,9 +9273,7 @@ flowchart TD
             const deleteStartTime = Date.now();
             while (true) {
               await new Promise((resolve) => setTimeout(resolve, 1e3));
-              const { error, message } = await this.api.getRequestStatus(
-                requestId
-              );
+              const { error, message } = await this.api.getRequestStatus(requestId);
               if (error !== void 0) {
                 if (error) {
                   throw new Error(message);
@@ -9429,6 +9298,17 @@ flowchart TD
       }
     }
   }
+  const encodeUrlIfNeeded = (url) => {
+    if (url) {
+      try {
+        return new URL(url).toString();
+      } catch (e) {
+        return url;
+      }
+    } else {
+      return url;
+    }
+  };
   let MediaManager$1 = class MediaManager {
     constructor(store, events) {
       this.store = store;
@@ -9501,6 +9381,20 @@ flowchart TD
       try {
         this.events.dispatch({ type: "media:list:start", ...options });
         const media = await this.store.list(options);
+        media.items = media.items.map((item) => {
+          if (item.type === "dir") {
+            return item;
+          }
+          if (item.thumbnails) {
+            for (const [size, src] of Object.entries(item.thumbnails)) {
+              item.thumbnails[size] = encodeUrlIfNeeded(src);
+            }
+          }
+          return {
+            ...item,
+            src: encodeUrlIfNeeded(item.src)
+          };
+        });
         this.events.dispatch({ type: "media:list:success", ...options, media });
         return media;
       } catch (error) {
@@ -9714,7 +9608,7 @@ flowchart TD
       return this.add("error", message, timeout);
     }
   };
-  const NoFormsPlaceholder = () => /* @__PURE__ */ React__namespace.createElement(
+  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",
@@ -9727,25 +9621,8 @@ flowchart TD
         animationDuration: "150ms"
       }
     },
-    /* @__PURE__ */ React__namespace.createElement(Emoji$1, { className: "pb-5" }, "🔎"),
-    /* @__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" }, /* @__PURE__ */ React__namespace.createElement(
-      Button$1,
-      {
-        href: "https://tina.io/docs/tinacms-context/",
-        target: "_blank",
-        as: "a"
-      },
-      /* @__PURE__ */ React__namespace.createElement(Emoji$1, { className: "mr-1.5" }, "📖"),
-      " Contextual Editing"
-    ))
-  );
-  const Emoji$1 = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
-    "span",
-    {
-      className: `text-[24px] leading-none inline-block ${className}`,
-      ...props
-    }
+    /* @__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 = {}) {
@@ -9760,7 +9637,7 @@ flowchart TD
       };
       this.position = options.position || "displace";
       this.renderNav = options.renderNav || true;
-      this.placeholder = options.placeholder || NoFormsPlaceholder;
+      this.loadingPlaceholder = options.placeholder || SidebarLoadingPlaceholder;
       if ((_a = options.buttons) == null ? void 0 : _a.save) {
         this.buttons.save = options.buttons.save;
       }
@@ -9834,238 +9711,6 @@ flowchart TD
       children
     )));
   };
-  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 FormsView = ({
-    children
-  }) => {
-    const cms = useCMS$1();
-    const { setFormIsPristine } = React__namespace.useContext(SidebarContext);
-    const isMultiform = cms.state.forms.length > 1;
-    const activeForm = cms.state.forms.find(
-      ({ tinaForm }) => tinaForm.id === cms.state.activeFormId
-    );
-    const isEditing = !!activeForm;
-    if (!cms.state.formLists.length) {
-      return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, " ", children, " ");
-    }
-    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 }))
-    );
-  };
   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);
   }
@@ -10308,7 +9953,7 @@ flowchart TD
       "Event Log"
     ));
   };
-  const version = "2.3.0";
+  const version = "2.7.4";
   const Nav = ({
     isLocalMode,
     className = "",
@@ -10550,6 +10195,293 @@ flowchart TD
       /* @__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;
@@ -10768,7 +10700,7 @@ flowchart TD
           isLocalMode: (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isLocalMode,
           branchingEnabled
         }
-      ), /* @__PURE__ */ React__namespace.createElement(FormsView, null, /* @__PURE__ */ React__namespace.createElement(sidebar.placeholder, null)), activeScreen && /* @__PURE__ */ React__namespace.createElement(
+      ), /* @__PURE__ */ React__namespace.createElement(FormsView, { loadingPlaceholder: sidebar.loadingPlaceholder }), activeScreen && /* @__PURE__ */ React__namespace.createElement(
         ScreenPluginModal,
         {
           screen: activeScreen,
@@ -10944,7 +10876,7 @@ flowchart TD
             className: "h-5 w-auto -mx-1 text-blue-500",
             stroke: "currentColor",
             fill: "currentColor",
-            "stroke-width": "0",
+            strokeWidth: "0",
             viewBox: "0 0 24 24",
             xmlns: "http://www.w3.org/2000/svg"
           },
@@ -11534,7 +11466,10 @@ flowchart TD
       const observer = new IntersectionObserver((entries) => {
         const target = entries[0];
         if (target.isIntersecting && list.nextOffset) {
-          setOffsetHistory((offsetHistory2) => [...offsetHistory2, list.nextOffset]);
+          setOffsetHistory((offsetHistory2) => [
+            ...offsetHistory2,
+            list.nextOffset
+          ]);
         }
       });
       if (loaderRef.current) {
@@ -12129,6 +12064,7 @@ flowchart TD
       forms: [],
       formLists: [],
       editingMode: "basic",
+      isLoadingContent: false,
       quickEditSupported: false,
       sidebarDisplayState: ((_a = cms == null ? void 0 : cms.sidebar) == null ? void 0 : _a.defaultState) || "open"
     };
@@ -12188,7 +12124,12 @@ flowchart TD
             }
           });
         }
-        return { ...state, activeFormId, formLists: nextFormLists };
+        return {
+          ...state,
+          activeFormId,
+          formLists: nextFormLists,
+          isLoadingContent: false
+        };
       }
       case "form-lists:remove": {
         const nextFormLists = state.formLists.filter(
@@ -12257,6 +12198,9 @@ flowchart TD
         }
         return { ...state, sidebarDisplayState: action.value };
       }
+      case "sidebar:set-loading-state": {
+        return { ...state, isLoadingContent: action.value };
+      }
       default:
         throw new Error(`Unhandled action ${action.type}`);
     }
@@ -12498,7 +12442,9 @@ flowchart TD
       if (activeEle) {
         setDisplay(true);
         setPosition(activeEle.getBoundingClientRect());
-        const iframe = document.getElementById("tina-iframe");
+        const iframe = document.getElementById(
+          "tina-iframe"
+        );
         if (iframe) {
           setIframePosition(iframe.getBoundingClientRect());
         }
@@ -12940,7 +12886,6 @@ flowchart TD
   }) => {
     const cms = useCMS$1();
     const tinaApi = cms.api.tina;
-    tinaApi.branch;
     const [disabled, setDisabled] = React__namespace.useState(false);
     const [newBranchName, setNewBranchName] = React__namespace.useState("");
     const [error, setError] = React__namespace.useState("");
@@ -12966,10 +12911,10 @@ flowchart TD
       const newUrl = window.location.href.replace(hash, newHash);
       window.location.href = newUrl;
     };
-    return /* @__PURE__ */ React__namespace.createElement(Modal, null, /* @__PURE__ */ React__namespace.createElement(PopupModal, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: close2 }, /* @__PURE__ */ React__namespace.createElement(BiGitBranch, { className: "w-6 h-auto mr-1 text-blue-500 opacity-70" }), " ", "Create Branch"), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__namespace.createElement("p", { className: "text-base text-gray-700 mb-2" }, "This branch is ", /* @__PURE__ */ React__namespace.createElement("strong", null, "protected"), ". Create a new branch to save your changes."), /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement(Modal, null, /* @__PURE__ */ React__namespace.createElement(PopupModal, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: close2 }, /* @__PURE__ */ React__namespace.createElement(BiGitBranch, { className: "w-6 h-auto mr-1 text-blue-500 opacity-70" }), " ", "Create Branch"), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__namespace.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "This content is protected 🚧"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-gray-700 mb-4" }, "To make changes, you need to create a copy then get it approved and merged for it to go live."), /* @__PURE__ */ React__namespace.createElement(
       PrefixedTextField,
       {
-        placeholder: "Branch Name",
+        placeholder: "e.g. {{PAGE-NAME}}-updates",
         value: newBranchName,
         onChange: (e) => {
           setError("");
@@ -13116,7 +13061,9 @@ flowchart TD
     const { fieldName } = useTemplates();
     const { handleClose, handleRemove, handleSelect, isExpanded } = useEmbedHandles(editor, element, fieldName);
     useHotkey("enter", () => {
-      plateCommon.insertNodes(editor, [{ type: plate.ELEMENT_PARAGRAPH, children: [{ text: "" }] }]);
+      plateCommon.insertNodes(editor, [
+        { type: plate.ELEMENT_PARAGRAPH, children: [{ text: "" }] }
+      ]);
     });
     return /* @__PURE__ */ React.createElement("span", { ...attributes, className: "" }, children, element.url ? /* @__PURE__ */ React.createElement(
       "div",
@@ -13259,7 +13206,9 @@ flowchart TD
     const { templates, fieldName } = useTemplates();
     const { handleClose, handleRemove, handleSelect, isExpanded } = useEmbedHandles(editor, element, fieldName);
     useHotkey("enter", () => {
-      plateCommon.insertNodes(editor, [{ type: plate.ELEMENT_PARAGRAPH, children: [{ text: "" }] }]);
+      plateCommon.insertNodes(editor, [
+        { type: plate.ELEMENT_PARAGRAPH, children: [{ text: "" }] }
+      ]);
     });
     useHotkey("space", () => {
       plateCommon.insertNodes(editor, [{ text: " " }], {
@@ -13315,7 +13264,9 @@ flowchart TD
     const { templates, fieldName } = useTemplates();
     const { handleClose, handleRemove, handleSelect, isExpanded } = useEmbedHandles(editor, element, fieldName);
     useHotkey("enter", () => {
-      plateCommon.insertNodes(editor, [{ type: plate.ELEMENT_PARAGRAPH, children: [{ text: "" }] }]);
+      plateCommon.insertNodes(editor, [
+        { type: plate.ELEMENT_PARAGRAPH, children: [{ text: "" }] }
+      ]);
     });
     const activeTemplate = templates.find(
       (template) => template.name === element.name
@@ -13661,6 +13612,11 @@ flowchart TD
       mode: "mark",
       type: plate.MARK_CODE,
       match: "`"
+    },
+    {
+      mode: "mark",
+      type: plate.MARK_STRIKETHROUGH,
+      match: ["~~", "~"]
     }
   ];
   const autoformatRules = [
@@ -13802,16 +13758,14 @@ flowchart TD
     })
   ];
   const plugins = [
+    plate.createBasicMarksPlugin(),
     plate.createHeadingPlugin(),
     plate.createParagraphPlugin(),
     createCodeBlockPlugin(),
     createHTMLBlockPlugin(),
     createHTMLInlinePlugin(),
     plate.createBlockquotePlugin(),
-    plate.createBoldPlugin(),
-    plate.createItalicPlugin(),
     plate.createUnderlinePlugin(),
-    plate.createCodePlugin(),
     plate.createListPlugin(),
     plate.createIndentListPlugin(),
     plate.createHorizontalRulePlugin(),
@@ -14171,7 +14125,9 @@ flowchart TD
   const CONTAINER_MD_BREAKPOINT = 448;
   const FLOAT_BUTTON_WIDTH = 25;
   const HEADING_LABEL = "Headings";
-  const ToolbarContext = React.createContext(void 0);
+  const ToolbarContext = React.createContext(
+    void 0
+  );
   const ToolbarProvider = ({
     tinaForm,
     templates,
@@ -14321,7 +14277,7 @@ flowchart TD
   const CodeBlockToolbarButton = cn$1.withRef(({ clear, ...rest }, ref) => {
     const state = useCodeBlockToolbarButtonState();
     const { props } = useCodeBlockToolbarButton(state);
-    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.codeBlock, null));
+    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Code Block", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.codeBlock, null));
   });
   const useImageToolbarButtonState = () => {
     const editor = plateCommon.useEditorState();
@@ -14353,36 +14309,54 @@ flowchart TD
   const ImageToolbarButton = cn$1.withRef(({ clear, ...rest }, ref) => {
     const state = useImageToolbarButtonState();
     const { props } = useImageToolbarButton(state);
-    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.image, null));
-  });
-  const IndentListToolbarButton = cn$1.withRef(({ nodeType = plate.ELEMENT_UL }, ref) => {
-    const editor = plateCommon.useEditorState();
-    const state = plate.useListToolbarButtonState({ nodeType });
-    const { props } = plate.useListToolbarButton(state);
-    return /* @__PURE__ */ React.createElement(
-      ToolbarButton,
-      {
-        ref,
-        tooltip: nodeType === plate.ELEMENT_UL ? "Bulleted List" : "Numbered List",
-        ...props,
-        onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          plate.toggleList(editor, { type: nodeType });
-        }
-      },
-      nodeType === plate.ELEMENT_UL ? /* @__PURE__ */ React.createElement(Icons.ul, null) : /* @__PURE__ */ React.createElement(Icons.ol, null)
-    );
+    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Image", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.image, null));
   });
+  const UnorderedListToolbarButton = cn$1.withRef(
+    (props, ref) => {
+      const editor = plateCommon.useEditorState();
+      const state = plate.useListToolbarButtonState({ nodeType: plate.ELEMENT_UL });
+      const { props: buttonProps } = plate.useListToolbarButton(state);
+      return /* @__PURE__ */ React.createElement(
+        ToolbarButton,
+        {
+          ref,
+          tooltip: "Bulleted List",
+          ...buttonProps,
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            plate.toggleList(editor, { type: plate.ELEMENT_UL });
+          }
+        },
+        /* @__PURE__ */ React.createElement(Icons.ul, null)
+      );
+    }
+  );
+  const OrderedListToolbarButton = cn$1.withRef(
+    (props, ref) => {
+      const editor = plateCommon.useEditorState();
+      const state = plate.useListToolbarButtonState({ nodeType: plate.ELEMENT_OL });
+      const { props: buttonProps } = plate.useListToolbarButton(state);
+      return /* @__PURE__ */ React.createElement(
+        ToolbarButton,
+        {
+          ref,
+          tooltip: "Numbered List",
+          ...buttonProps,
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            plate.toggleList(editor, { type: plate.ELEMENT_OL });
+          }
+        },
+        /* @__PURE__ */ React.createElement(Icons.ol, null)
+      );
+    }
+  );
   const LinkToolbarButton = cn$1.withRef((rest, ref) => {
     const state = plateLink.useLinkToolbarButtonState();
     const { props } = plateLink.useLinkToolbarButton(state);
-    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...props, ...rest }, /* @__PURE__ */ React.createElement(Icons.link, null));
-  });
-  const MarkToolbarButton = cn$1.withRef(({ clear, nodeType, ...rest }, ref) => {
-    const state = plateCommon.useMarkToolbarButtonState({ clear, nodeType });
-    const { props } = plateCommon.useMarkToolbarButton(state);
-    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, ...props, ...rest });
+    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, ...props, ...rest, tooltip: "Link" }, /* @__PURE__ */ React.createElement(Icons.link, null));
   });
   const useMermaidToolbarButtonState = () => {
     const editor = plateCommon.useEditorState();
@@ -14463,7 +14437,7 @@ flowchart TD
   const QuoteToolbarButton = cn$1.withRef(({ clear, ...rest }, ref) => {
     const state = useBlockQuoteToolbarButtonState();
     const { props } = useBlockQuoteToolbarButton(state);
-    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.quote, null));
+    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Quote (⌘+⇧+.)", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.quote, null));
   });
   const useRawMarkdownToolbarButton = () => {
     const { setRawMode } = useEditorContext();
@@ -14483,7 +14457,7 @@ flowchart TD
       ToolbarButton,
       {
         ref,
-        tooltip: "Link",
+        tooltip: "Raw Markdown",
         ...rest,
         ...props,
         "data-testid": "markdown-button"
@@ -14628,7 +14602,7 @@ flowchart TD
         key: template.name,
         onMouseDown: (e) => {
           e.preventDefault();
-          close();
+          setOpen(false);
           insertMDX(editor, template);
         },
         className: ""
@@ -14636,6 +14610,15 @@ flowchart TD
       template.label || template.name
     ))));
   };
+  const MarkToolbarButton = cn$1.withRef(({ clear, nodeType, ...rest }, ref) => {
+    const state = plateCommon.useMarkToolbarButtonState({ clear, nodeType });
+    const { props } = plateCommon.useMarkToolbarButton(state);
+    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, ...props, ...rest });
+  });
+  const BoldToolbarButton = () => /* @__PURE__ */ React.createElement(MarkToolbarButton, { tooltip: "Bold (⌘+B)", nodeType: plate.MARK_BOLD }, /* @__PURE__ */ React.createElement(Icons.bold, null));
+  const StrikethroughToolbarButton = () => /* @__PURE__ */ React.createElement(MarkToolbarButton, { tooltip: "Strikethrough", nodeType: plate.MARK_STRIKETHROUGH }, /* @__PURE__ */ React.createElement(Icons.strikethrough, null));
+  const ItalicToolbarButton = () => /* @__PURE__ */ React.createElement(MarkToolbarButton, { tooltip: "Italic (⌘+I)", nodeType: plate.MARK_ITALIC }, /* @__PURE__ */ React.createElement(Icons.italic, null));
+  const CodeToolbarButton = () => /* @__PURE__ */ React.createElement(MarkToolbarButton, { tooltip: "Code (⌘+E)", nodeType: plate.MARK_CODE }, /* @__PURE__ */ React.createElement(Icons.code, null));
   const toolbarItems = {
     heading: {
       label: HEADING_LABEL,
@@ -14656,32 +14639,37 @@ flowchart TD
     quote: {
       label: "Quote",
       width: () => STANDARD_ICON_WIDTH,
-      Component: /* @__PURE__ */ React.createElement(QuoteToolbarButton, { tooltip: "Quote Quote (⌘+⇧+.)" })
+      Component: /* @__PURE__ */ React.createElement(QuoteToolbarButton, null)
     },
     ul: {
       label: "Unordered List",
       width: () => STANDARD_ICON_WIDTH,
-      Component: /* @__PURE__ */ React.createElement(IndentListToolbarButton, { nodeType: plate.ELEMENT_UL })
+      Component: /* @__PURE__ */ React.createElement(UnorderedListToolbarButton, null)
     },
     ol: {
       label: "Ordered List",
       width: () => STANDARD_ICON_WIDTH,
-      Component: /* @__PURE__ */ React.createElement(IndentListToolbarButton, { nodeType: plate.ELEMENT_OL })
+      Component: /* @__PURE__ */ React.createElement(OrderedListToolbarButton, null)
     },
     bold: {
       label: "Bold",
       width: () => STANDARD_ICON_WIDTH,
-      Component: /* @__PURE__ */ React.createElement(MarkToolbarButton, { tooltip: "Bold (⌘+B)", nodeType: plate.MARK_BOLD }, /* @__PURE__ */ React.createElement(Icons.bold, null))
+      Component: /* @__PURE__ */ React.createElement(BoldToolbarButton, null)
+    },
+    strikethrough: {
+      label: "Strikethrough",
+      width: () => STANDARD_ICON_WIDTH,
+      Component: /* @__PURE__ */ React.createElement(StrikethroughToolbarButton, null)
     },
     italic: {
       label: "Italic",
       width: () => STANDARD_ICON_WIDTH,
-      Component: /* @__PURE__ */ React.createElement(MarkToolbarButton, { tooltip: "Italic (⌘+I)", nodeType: plate.MARK_ITALIC }, /* @__PURE__ */ React.createElement(Icons.italic, null))
+      Component: /* @__PURE__ */ React.createElement(ItalicToolbarButton, null)
     },
     code: {
       label: "Code",
       width: () => STANDARD_ICON_WIDTH,
-      Component: /* @__PURE__ */ React.createElement(MarkToolbarButton, { tooltip: "Code (⌘+E)", nodeType: plate.MARK_CODE }, /* @__PURE__ */ React.createElement(Icons.code, null))
+      Component: /* @__PURE__ */ React.createElement(CodeToolbarButton, null)
     },
     codeBlock: {
       label: "Code Block",
@@ -14714,7 +14702,12 @@ flowchart TD
     const [itemsShown, setItemsShown] = React.useState(11);
     const { overrides, templates } = useToolbarContext();
     const showEmbedButton = templates.length > 0;
-    let items2 = overrides === void 0 ? Object.values(toolbarItems) : overrides.map((item) => toolbarItems[item]).filter((item) => item !== void 0);
+    let items2 = [];
+    if (Array.isArray(overrides)) {
+      items2 = overrides === void 0 ? Object.values(toolbarItems) : overrides.map((item) => toolbarItems[item]).filter((item) => item !== void 0);
+    } else {
+      items2 = (overrides == null ? void 0 : overrides.toolbar) === void 0 ? Object.values(toolbarItems) : overrides.toolbar.map((item) => toolbarItems[item]).filter((item) => item !== void 0);
+    }
     if (!showEmbedButton) {
       items2 = items2.filter((item) => item.label !== toolbarItems.embed.label);
     }
@@ -15042,6 +15035,9 @@ flowchart TD
     if (typeof string !== "string") {
       return false;
     }
+    if (string.startsWith("#")) {
+      return true;
+    }
     const generalMatch = string.match(protocolAndDomainRE);
     const emailLinkMatch = string.match(emailLintRE);
     const localUrlMatch = string.match(localUrlRE);
@@ -15063,12 +15059,12 @@ flowchart TD
     }
     return localhostDomainRE.test(everythingAfterProtocol) || nonLocalhostDomainRE.test(everythingAfterProtocol);
   };
-  const RichEditor = (props) => {
+  const RichEditor = ({ input, tinaForm, field }) => {
     var _a;
     const initialValue = React.useMemo(
       () => {
         var _a2, _b;
-        return ((_b = (_a2 = props.input.value) == null ? void 0 : _a2.children) == null ? void 0 : _b.length) ? props.input.value.children.map(helpers.normalize) : [{ type: "p", children: [{ type: "text", text: "" }] }];
+        return ((_b = (_a2 = input.value) == null ? void 0 : _a2.children) == null ? void 0 : _b.length) ? input.value.children.map(helpers.normalize) : [{ type: "p", children: [{ type: "text", text: "" }] }];
       },
       []
     );
@@ -15096,7 +15092,7 @@ flowchart TD
       ),
       []
     );
-    const tempId = [props.tinaForm.id, props.input.name].join(".");
+    const tempId = [tinaForm.id, input.name].join(".");
     const id = React.useMemo(() => uuid() + tempId, [tempId]);
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -15106,13 +15102,13 @@ flowchart TD
           const plateElement = (_a2 = ref.current) == null ? void 0 : _a2.querySelector(
             '[role="textbox"]'
           );
-          if (props.field.experimental_focusIntent && plateElement) {
+          if (field.experimental_focusIntent && plateElement) {
             if (plateElement)
               plateElement.focus();
           }
         }, 100);
       }
-    }, [props.field.experimental_focusIntent, ref]);
+    }, [field.experimental_focusIntent, ref]);
     return /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(
       plateCommon.Plate,
       {
@@ -15120,7 +15116,7 @@ flowchart TD
         initialValue,
         plugins: plugins$2,
         onChange: (value) => {
-          props.input.onChange({
+          input.onChange({
             type: "root",
             children: value
           });
@@ -15129,12 +15125,12 @@ flowchart TD
       /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(
         ToolbarProvider,
         {
-          tinaForm: props.tinaForm,
-          templates: props.field.templates,
-          overrides: (_a = props.field) == null ? void 0 : _a.toolbarOverride
+          tinaForm,
+          templates: field.templates,
+          overrides: (field == null ? void 0 : field.toolbarOverride) ? field.toolbarOverride : field.overrides
         },
         /* @__PURE__ */ React.createElement(FixedToolbar, null, /* @__PURE__ */ React.createElement(FixedToolbarButtons, null)),
-        /* @__PURE__ */ React.createElement(FloatingToolbar, null, /* @__PURE__ */ React.createElement(FloatingToolbarButtons, null))
+        ((_a = field == null ? void 0 : field.overrides) == null ? void 0 : _a.showFloatingToolbar) !== false ? /* @__PURE__ */ React.createElement(FloatingToolbar, null, /* @__PURE__ */ React.createElement(FloatingToolbarButtons, null)) : null
       ), /* @__PURE__ */ React.createElement(Editor, null))
     ));
   };
@@ -16322,132 +16318,1209 @@ flowchart TD
     "হয়"
   ];
   const bre = [
+    "'blam",
+    "'d",
+    "'m",
+    "'r",
+    "'ta",
+    "'vat",
+    "'z",
+    "'zo",
     "a",
-    "ainda",
-    "alem",
-    "ambas",
-    "ambos",
-    "antes",
-    "ao",
-    "aonde",
-    "aos",
-    "apos",
-    "aquele",
-    "aqueles",
-    "as",
-    "assim",
-    "com",
-    "como",
-    "contra",
-    "contudo",
-    "cuja",
-    "cujas",
-    "cujo",
-    "cujos",
+    "a:",
+    "aba",
+    "abalamour",
+    "abaoe",
+    "ac'hane",
+    "ac'hanoc'h",
+    "ac'hanomp",
+    "ac'hanon",
+    "ac'hanout",
+    "adal",
+    "adalek",
+    "adarre",
+    "ae",
+    "aec'h",
+    "aed",
+    "aemp",
+    "aen",
+    "aent",
+    "aes",
+    "afe",
+    "afec'h",
+    "afed",
+    "afemp",
+    "afen",
+    "afent",
+    "afes",
+    "ag",
+    "ah",
+    "aimp",
+    "aint",
+    "aio",
+    "aiou",
+    "aje",
+    "ajec'h",
+    "ajed",
+    "ajemp",
+    "ajen",
+    "ajent",
+    "ajes",
+    "al",
+    "alato",
+    "alies",
+    "aliesañ",
+    "alkent",
+    "all",
+    "allas",
+    "allo",
+    "allô",
+    "am",
+    "amañ",
+    "amzer",
+    "an",
+    "anezhañ",
+    "anezhe",
+    "anezhi",
+    "anezho",
+    "anvet",
+    "aon",
+    "aotren",
+    "ar",
+    "arall",
+    "araok",
+    "araoki",
+    "araozañ",
+    "araozo",
+    "araozoc'h",
+    "araozomp",
+    "araozon",
+    "araozor",
+    "araozout",
+    "arbenn",
+    "arre",
+    "atalek",
+    "atav",
+    "az",
+    "azalek",
+    "azirazañ",
+    "azirazi",
+    "azirazo",
+    "azirazoc'h",
+    "azirazomp",
+    "azirazon",
+    "azirazor",
+    "azirazout",
+    "b:",
+    "ba",
+    "ba'l",
+    "ba'n",
+    "ba'r",
+    "bad",
+    "bah",
+    "bal",
+    "ban",
+    "bar",
+    "bastañ",
+    "befe",
+    "bell",
+    "benaos",
+    "benn",
+    "bennag",
+    "bennak",
+    "bennozh",
+    "bep",
+    "bepred",
+    "berr",
+    "berzh",
+    "bet",
+    "betek",
+    "betra",
+    "bev",
+    "bevet",
+    "bez",
+    "bezañ",
+    "beze",
+    "bezent",
+    "bezet",
+    "bezh",
+    "bezit",
+    "bezomp",
+    "bihan",
+    "bije",
+    "biou",
+    "biskoazh",
+    "blam",
+    "bo",
+    "boa",
+    "bominapl",
+    "boudoudom",
+    "bouez",
+    "boull",
+    "boum",
+    "bout",
+    "bras",
+    "brasañ",
+    "brav",
+    "bravo",
+    "bremañ",
+    "bres",
+    "brokenn",
+    "bronn",
+    "brrr",
+    "brutal",
+    "buhezek",
+    "c'h:",
+    "c'haout",
+    "c'he",
+    "c'hem",
+    "c'herz",
+    "c'heñver",
+    "c'hichen",
+    "c'hiz",
+    "c'hoazh",
+    "c'horre",
+    "c'houde",
+    "c'houst",
+    "c'hreiz",
+    "c'hwec'h",
+    "c'hwec'hvet",
+    "c'hwezek",
+    "c'hwi",
+    "ch:",
+    "chaous",
+    "chik",
+    "chit",
+    "chom",
+    "chut",
+    "d'",
+    "d'al",
+    "d'an",
+    "d'ar",
+    "d'az",
+    "d'e",
+    "d'he",
+    "d'ho",
+    "d'hol",
+    "d'hon",
+    "d'hor",
+    "d'o",
+    "d'ober",
+    "d'ul",
+    "d'un",
+    "d'ur",
+    "d:",
     "da",
-    "das",
-    "de",
-    "dela",
-    "dele",
-    "deles",
-    "demais",
-    "depois",
-    "desde",
-    "desta",
-    "deste",
-    "dispoe",
-    "dispoem",
-    "diversa",
-    "diversas",
-    "diversos",
+    "dak",
+    "daka",
+    "dal",
+    "dalbezh",
+    "dalc'hmat",
+    "dalit",
+    "damdost",
+    "damheñvel",
+    "damm",
+    "dan",
+    "danvez",
+    "dao",
+    "daol",
+    "daonet",
+    "daou",
+    "daoust",
+    "daouzek",
+    "daouzekvet",
+    "darn",
+    "dastrewiñ",
+    "dav",
+    "davedoc'h",
+    "davedomp",
+    "davedon",
+    "davedor",
+    "davedout",
+    "davet",
+    "davetañ",
+    "davete",
+    "daveti",
+    "daveto",
+    "defe",
+    "dehou",
+    "dek",
+    "dekvet",
+    "den",
+    "deoc'h",
+    "deomp",
+    "deor",
+    "derc'hel",
+    "deus",
+    "dez",
+    "deze",
+    "dezhañ",
+    "dezhe",
+    "dezhi",
+    "dezho",
+    "di",
+    "diabarzh",
+    "diagent",
+    "diar",
+    "diaraok",
+    "diavaez",
+    "dibaoe",
+    "dibaot",
+    "dibar",
+    "dic'halañ",
+    "didiac'h",
+    "dienn",
+    "difer",
+    "diganeoc'h",
+    "diganeomp",
+    "diganeor",
+    "diganimp",
+    "diganin",
+    "diganit",
+    "digant",
+    "digantañ",
+    "digante",
+    "diganti",
+    "diganto",
+    "digemmesk",
+    "diget",
+    "digor",
+    "digoret",
+    "dija",
+    "dije",
+    "dimp",
+    "din",
+    "dinaou",
+    "dindan",
+    "dindanañ",
+    "dindani",
+    "dindano",
+    "dindanoc'h",
+    "dindanomp",
+    "dindanon",
+    "dindanor",
+    "dindanout",
+    "dioutañ",
+    "dioute",
+    "diouti",
+    "diouto",
+    "diouzh",
+    "diouzhin",
+    "diouzhit",
+    "diouzhoc'h",
+    "diouzhomp",
+    "diouzhor",
+    "dirak",
+    "dirazañ",
+    "dirazi",
+    "dirazo",
+    "dirazoc'h",
+    "dirazomp",
+    "dirazon",
+    "dirazor",
+    "dirazout",
+    "disheñvel",
+    "dispar",
+    "distank",
+    "dister",
+    "disterañ",
+    "disterig",
+    "distro",
+    "dit",
+    "divaez",
+    "diwar",
+    "diwezhat",
+    "diwezhañ",
     "do",
-    "dos",
-    "durante",
+    "doa",
+    "doare",
+    "dont",
+    "dost",
+    "doue",
+    "douetus",
+    "douez",
+    "doug",
+    "draou",
+    "draoñ",
+    "dre",
+    "drede",
+    "dreist",
+    "dreistañ",
+    "dreisti",
+    "dreisto",
+    "dreistoc'h",
+    "dreistomp",
+    "dreiston",
+    "dreistor",
+    "dreistout",
+    "drek",
+    "dreñv",
+    "dring",
+    "dro",
+    "du",
     "e",
-    "ela",
-    "elas",
-    "ele",
-    "eles",
+    "e:",
+    "eas",
+    "ebet",
+    "ec'h",
+    "edo",
+    "edoc'h",
+    "edod",
+    "edomp",
+    "edon",
+    "edont",
+    "edos",
+    "eer",
+    "eeun",
+    "efed",
+    "egedoc'h",
+    "egedomp",
+    "egedon",
+    "egedor",
+    "egedout",
+    "eget",
+    "egetañ",
+    "egete",
+    "egeti",
+    "egeto",
+    "eh",
+    "eil",
+    "eilvet",
+    "eizh",
+    "eizhvet",
+    "ejoc'h",
+    "ejod",
+    "ejomp",
+    "ejont",
+    "ejout",
+    "el",
     "em",
-    "entao",
-    "entre",
-    "essa",
-    "essas",
-    "esse",
-    "esses",
-    "esta",
-    "estas",
-    "este",
-    "estes",
+    "emaint",
+    "emaoc'h",
+    "emaomp",
+    "emaon",
+    "emaout",
+    "emañ",
+    "eme",
+    "emeur",
+    "emezañ",
+    "emezi",
+    "emezo",
+    "emezoc'h",
+    "emezomp",
+    "emezon",
+    "emezout",
+    "emporzhiañ",
+    "en",
+    "end",
+    "endan",
+    "endra",
+    "enep",
+    "ennañ",
+    "enni",
+    "enno",
+    "ennoc'h",
+    "ennomp",
+    "ennon",
+    "ennor",
+    "ennout",
+    "enta",
+    "eo",
+    "eomp",
+    "eont",
+    "eor",
+    "eot",
+    "er",
+    "erbet",
+    "erfin",
+    "esa",
+    "esae",
+    "espar",
+    "estlamm",
+    "estrañj",
+    "eta",
+    "etre",
+    "etreoc'h",
+    "etrezo",
+    "etrezoc'h",
+    "etrezomp",
+    "etrezor",
+    "euh",
+    "eur",
+    "eus",
+    "evel",
+    "evelato",
+    "eveldoc'h",
+    "eveldomp",
+    "eveldon",
+    "eveldor",
+    "eveldout",
+    "evelkent",
+    "eveltañ",
+    "evelte",
+    "evelti",
+    "evelto",
+    "evidoc'h",
+    "evidomp",
+    "evidon",
+    "evidor",
+    "evidout",
+    "evit",
+    "evitañ",
+    "evite",
+    "eviti",
+    "evito",
+    "ez",
+    "eñ",
+    "f:",
+    "fac'h",
+    "fall",
+    "fed",
+    "feiz",
+    "fenn",
+    "fezh",
+    "fin",
+    "finsalvet",
+    "foei",
+    "fouilhezañ",
+    "g:",
+    "gallout",
+    "ganeoc'h",
+    "ganeomp",
+    "ganin",
+    "ganit",
+    "gant",
+    "gantañ",
+    "ganti",
+    "ganto",
+    "gaout",
+    "gast",
+    "gein",
+    "gellout",
+    "genndost",
+    "gentañ",
+    "ger",
+    "gerz",
+    "get",
+    "geñver",
+    "gichen",
+    "gin",
+    "giz",
+    "glan",
+    "gloev",
+    "goll",
+    "gorre",
+    "goude",
+    "gouez",
+    "gouezit",
+    "gouezomp",
+    "goulz",
+    "gounnar",
+    "gour",
+    "goust",
+    "gouze",
+    "gouzout",
+    "gra",
+    "grak",
+    "grec'h",
+    "greiz",
+    "grenn",
+    "greomp",
+    "grit",
+    "groñs",
+    "gutez",
+    "gwall",
+    "gwashoc'h",
+    "gwazh",
+    "gwech",
+    "gwechall",
+    "gwechoù",
+    "gwell",
+    "gwezh",
+    "gwezhall",
+    "gwezharall",
+    "gwezhoù",
+    "gwig",
+    "gwirionez",
+    "gwitibunan",
+    "gêr",
+    "h:",
     "ha",
-    "isso",
-    "isto",
-    "logo",
-    "mais",
-    "mas",
-    "mediante",
-    "menos",
-    "mesma",
-    "mesmas",
-    "mesmo",
-    "mesmos",
+    "hag",
+    "han",
+    "hanter",
+    "hanterc'hantad",
+    "hanterkantved",
+    "harz",
+    "hañ",
+    "hañval",
+    "he",
+    "hebioù",
+    "hec'h",
+    "hei",
+    "hein",
+    "hem",
+    "hemañ",
+    "hen",
+    "hend",
+    "henhont",
+    "henn",
+    "hennezh",
+    "hent",
+    "hep",
+    "hervez",
+    "hervezañ",
+    "hervezi",
+    "hervezo",
+    "hervezoc'h",
+    "hervezomp",
+    "hervezon",
+    "hervezor",
+    "hervezout",
+    "heul",
+    "heuliañ",
+    "hevelep",
+    "heverk",
+    "heñvel",
+    "heñvelat",
+    "heñvelañ",
+    "heñveliñ",
+    "heñveloc'h",
+    "heñvelout",
+    "hi",
+    "hilh",
+    "hini",
+    "hirie",
+    "hirio",
+    "hiziv",
+    "hiziviken",
+    "ho",
+    "hoaliñ",
+    "hoc'h",
+    "hogen",
+    "hogos",
+    "hogozik",
+    "hol",
+    "holl",
+    "holà",
+    "homañ",
+    "hon",
+    "honhont",
+    "honnezh",
+    "hont",
+    "hop",
+    "hopala",
+    "hor",
+    "hou",
+    "houp",
+    "hudu",
+    "hue",
+    "hui",
+    "hum",
+    "hurrah",
+    "i",
+    "i:",
+    "in",
+    "int",
+    "is",
+    "ispisial",
+    "isurzhiet",
+    "it",
+    "ivez",
+    "izelañ",
+    "j:",
+    "just",
+    "k:",
+    "kae",
+    "kaer",
+    "kalon",
+    "kalz",
+    "kant",
+    "kaout",
+    "kar",
+    "kazi",
+    "keid",
+    "kein",
+    "keit",
+    "kel",
+    "kellies",
+    "keloù",
+    "kement",
+    "ken",
+    "kenkent",
+    "kenkoulz",
+    "kenment",
+    "kent",
+    "kentañ",
+    "kentizh",
+    "kentoc'h",
+    "kentre",
+    "ker",
+    "kerkent",
+    "kerz",
+    "kerzh",
+    "ket",
+    "keta",
+    "keñver",
+    "keñverel",
+    "keñverius",
+    "kichen",
+    "kichenik",
+    "kit",
+    "kiz",
+    "klak",
+    "klek",
+    "klik",
+    "komprenet",
+    "komz",
+    "kont",
+    "korf",
+    "korre",
+    "koulskoude",
+    "koulz",
+    "koust",
+    "krak",
+    "krampouezh",
+    "krec'h",
+    "kreiz",
+    "kuit",
+    "kwir",
+    "l:",
+    "la",
+    "laez",
+    "laoskel",
+    "laouen",
+    "lavar",
+    "lavaret",
+    "lavarout",
+    "lec'h",
+    "lein",
+    "leizh",
+    "lerc'h",
+    "leun",
+    "leuskel",
+    "lew",
+    "lies",
+    "liesañ",
+    "lod",
+    "lusk",
+    "lâr",
+    "lârout",
+    "m:",
+    "ma",
+    "ma'z",
+    "mac'h",
+    "mac'hat",
+    "mac'hañ",
+    "mac'hoc'h",
+    "mad",
+    "maez",
+    "maksimal",
+    "mann",
+    "mar",
+    "mard",
+    "marg",
+    "marzh",
+    "mat",
+    "mañ",
+    "me",
+    "memes",
+    "memestra",
+    "merkapl",
+    "mersi",
+    "mes",
+    "mesk",
+    "met",
+    "meur",
+    "mil",
+    "minimal",
+    "moan",
+    "moaniaat",
+    "mod",
+    "mont",
+    "mout",
+    "mui",
+    "muiañ",
+    "muioc'h",
+    "n",
+    "n'",
+    "n:",
     "na",
-    "nao",
-    "nas",
-    "nem",
-    "nesse",
-    "neste",
-    "nos",
+    "nag",
+    "naontek",
+    "naturel",
+    "nav",
+    "navet",
+    "ne",
+    "nebeudig",
+    "nebeut",
+    "nebeutañ",
+    "nebeutoc'h",
+    "neketa",
+    "nemedoc'h",
+    "nemedomp",
+    "nemedon",
+    "nemedor",
+    "nemedout",
+    "nemet",
+    "nemetañ",
+    "nemete",
+    "nemeti",
+    "nemeto",
+    "nemeur",
+    "neoac'h",
+    "nepell",
+    "nerzh",
+    "nes",
+    "neseser",
+    "netra",
+    "neubeudoù",
+    "neuhe",
+    "neuze",
+    "nevez",
+    "newazh",
+    "nez",
+    "ni",
+    "nikun",
+    "niverus",
+    "nul",
     "o",
-    "os",
-    "ou",
-    "outra",
-    "outras",
-    "outro",
-    "outros",
-    "pelas",
-    "pelo",
-    "pelos",
-    "perante",
-    "pois",
-    "por",
-    "porque",
-    "portanto",
-    "propios",
-    "proprio",
-    "quais",
-    "qual",
-    "qualquer",
-    "quando",
-    "quanto",
-    "que",
-    "quem",
-    "quer",
+    "o:",
+    "oa",
+    "oac'h",
+    "oad",
+    "oamp",
+    "oan",
+    "oant",
+    "oar",
+    "oas",
+    "ober",
+    "oc'h",
+    "oc'ho",
+    "oc'hola",
+    "oc'hpenn",
+    "oh",
+    "ohe",
+    "ollé",
+    "olole",
+    "olé",
+    "omp",
+    "on",
+    "ordin",
+    "ordinal",
+    "ouejoc'h",
+    "ouejod",
+    "ouejomp",
+    "ouejont",
+    "ouejout",
+    "ouek",
+    "ouezas",
+    "ouezi",
+    "ouezimp",
+    "ouezin",
+    "ouezint",
+    "ouezis",
+    "ouezo",
+    "ouezoc'h",
+    "ouezor",
+    "ouf",
+    "oufe",
+    "oufec'h",
+    "oufed",
+    "oufemp",
+    "oufen",
+    "oufent",
+    "oufes",
+    "ouie",
+    "ouiec'h",
+    "ouied",
+    "ouiemp",
+    "ouien",
+    "ouient",
+    "ouies",
+    "ouije",
+    "ouijec'h",
+    "ouijed",
+    "ouijemp",
+    "ouijen",
+    "ouijent",
+    "ouijes",
+    "out",
+    "outañ",
+    "outi",
+    "outo",
+    "ouzer",
+    "ouzh",
+    "ouzhin",
+    "ouzhit",
+    "ouzhoc'h",
+    "ouzhomp",
+    "ouzhor",
+    "ouzhpenn",
+    "ouzhpennik",
+    "ouzoc'h",
+    "ouzomp",
+    "ouzon",
+    "ouzont",
+    "ouzout",
+    "p'",
+    "p:",
+    "pa",
+    "pad",
+    "padal",
+    "paf",
+    "pan",
+    "panevedeoc'h",
+    "panevedo",
+    "panevedomp",
+    "panevedon",
+    "panevedout",
+    "panevet",
+    "panevetañ",
+    "paneveti",
+    "pas",
+    "paseet",
+    "pe",
+    "peadra",
+    "peder",
+    "pedervet",
+    "pedervetvet",
+    "pefe",
+    "pegeit",
+    "pegement",
+    "pegen",
+    "pegiz",
+    "pegoulz",
+    "pehini",
+    "pelec'h",
+    "pell",
+    "pemod",
+    "pemp",
+    "pempved",
+    "pemzek",
+    "penaos",
+    "penn",
+    "peogwir",
+    "peotramant",
+    "pep",
+    "perak",
+    "perc'hennañ",
+    "pergen",
+    "permetiñ",
+    "peseurt",
+    "pet",
+    "petiaoul",
+    "petoare",
+    "petra",
+    "peur",
+    "peurgetket",
+    "peurheñvel",
+    "peurliesañ",
+    "peurvuiañ",
+    "peus",
+    "peustost",
+    "peuz",
+    "pevar",
+    "pevare",
+    "pevarevet",
+    "pevarzek",
+    "pez",
+    "peze",
+    "pezh",
+    "pff",
+    "pfft",
+    "pfut",
+    "picher",
+    "pif",
+    "pife",
+    "pign",
+    "pije",
+    "pikol",
+    "pitiaoul",
+    "piv",
+    "plaouf",
+    "plok",
+    "plouf",
+    "po",
+    "poa",
+    "poelladus",
+    "pof",
+    "pok",
+    "posupl",
+    "pouah",
+    "pourc'henn",
+    "prest",
+    "prestik",
+    "prim",
+    "prin",
+    "provostapl",
+    "pst",
+    "pu",
+    "pur",
+    "r:",
+    "ra",
+    "rae",
+    "raec'h",
+    "raed",
+    "raemp",
+    "raen",
+    "raent",
+    "raes",
+    "rafe",
+    "rafec'h",
+    "rafed",
+    "rafemp",
+    "rafen",
+    "rafent",
+    "rafes",
+    "rag",
+    "raimp",
+    "raint",
+    "raio",
+    "raje",
+    "rajec'h",
+    "rajed",
+    "rajemp",
+    "rajen",
+    "rajent",
+    "rajes",
+    "rak",
+    "ral",
+    "ran",
+    "rankout",
+    "raok",
+    "razh",
+    "re",
+    "reas",
+    "reer",
+    "regennoù",
+    "reiñ",
+    "rejoc'h",
+    "rejod",
+    "rejomp",
+    "rejont",
+    "rejout",
+    "rener",
+    "rentañ",
+    "reoc'h",
+    "reomp",
+    "reont",
+    "reor",
+    "reot",
+    "resis",
+    "ret",
+    "reve",
+    "rez",
+    "ri",
+    "rik",
+    "rin",
+    "ris",
+    "rit",
+    "rouez",
+    "s:",
+    "sac'h",
+    "sant",
+    "sav",
+    "sañset",
     "se",
-    "seja",
-    "sem",
-    "sendo",
-    "seu",
-    "seus",
-    "sob",
-    "sobre",
-    "sua",
-    "suas",
+    "sed",
+    "seitek",
+    "seizh",
+    "seizhvet",
+    "sell",
+    "sellit",
+    "ser",
+    "setu",
+    "seul",
+    "seurt",
+    "siwazh",
+    "skignañ",
+    "skoaz",
+    "skouer",
+    "sort",
+    "souden",
+    "souvitañ",
+    "soñj",
+    "speriañ",
+    "spririñ",
+    "stad",
+    "stlabezañ",
+    "stop",
+    "stranañ",
+    "strewiñ",
+    "strishaat",
+    "stumm",
+    "sujed",
+    "surtoud",
+    "t:",
+    "ta",
+    "taer",
+    "tailh",
+    "tak",
     "tal",
-    "tambem",
-    "teu",
+    "talvoudegezh",
+    "tamm",
+    "tanav",
+    "taol",
+    "te",
+    "techet",
+    "teir",
+    "teirvet",
+    "telt",
+    "teltenn",
     "teus",
-    "toda",
-    "todas",
-    "todo",
-    "todos",
-    "tua",
-    "tuas",
-    "tudo",
-    "um",
-    "uma",
-    "umas",
-    "uns"
+    "teut",
+    "teuteu",
+    "ti",
+    "tik",
+    "toa",
+    "tok",
+    "tost",
+    "tostig",
+    "toud",
+    "touesk",
+    "touez",
+    "toull",
+    "tra",
+    "trantenn",
+    "traoñ",
+    "trawalc'h",
+    "tre",
+    "trede",
+    "tregont",
+    "tremenet",
+    "tri",
+    "trivet",
+    "triwec'h",
+    "trizek",
+    "tro",
+    "trugarez",
+    "trumm",
+    "tsoin",
+    "tsouin",
+    "tu",
+    "tud",
+    "u:",
+    "ugent",
+    "uhel",
+    "uhelañ",
+    "ul",
+    "un",
+    "unan",
+    "unanez",
+    "unanig",
+    "unnek",
+    "unnekvet",
+    "ur",
+    "urzh",
+    "us",
+    "v:",
+    "va",
+    "vale",
+    "van",
+    "vare",
+    "vat",
+    "vefe",
+    "vefec'h",
+    "vefed",
+    "vefemp",
+    "vefen",
+    "vefent",
+    "vefes",
+    "vesk",
+    "vete",
+    "vez",
+    "vezan",
+    "vezañ",
+    "veze",
+    "vezec'h",
+    "vezed",
+    "vezemp",
+    "vezen",
+    "vezent",
+    "vezer",
+    "vezes",
+    "vezez",
+    "vezit",
+    "vezomp",
+    "vezont",
+    "vi",
+    "vihan",
+    "vihanañ",
+    "vije",
+    "vijec'h",
+    "vijed",
+    "vijemp",
+    "vijen",
+    "vijent",
+    "vijes",
+    "viken",
+    "vimp",
+    "vin",
+    "vint",
+    "vior",
+    "viot",
+    "virviken",
+    "viskoazh",
+    "vlan",
+    "vlaou",
+    "vo",
+    "vod",
+    "voe",
+    "voec'h",
+    "voed",
+    "voemp",
+    "voen",
+    "voent",
+    "voes",
+    "vont",
+    "vostapl",
+    "vrac'h",
+    "vrasañ",
+    "vremañ",
+    "w:",
+    "walc'h",
+    "war",
+    "warnañ",
+    "warni",
+    "warno",
+    "warnoc'h",
+    "warnomp",
+    "warnon",
+    "warnor",
+    "warnout",
+    "wazh",
+    "wech",
+    "wechoù",
+    "well",
+    "y:",
+    "you",
+    "youadenn",
+    "youc'hadenn",
+    "youc'hou",
+    "z:",
+    "za",
+    "zan",
+    "zaw",
+    "zeu",
+    "zi",
+    "ziar",
+    "zigarez",
+    "ziget",
+    "zindan",
+    "zioc'h",
+    "ziouzh",
+    "zirak",
+    "zivout",
+    "ziwar",
+    "ziwezhañ",
+    "zo",
+    "zoken",
+    "zokenoc'h",
+    "zouesk",
+    "zouez",
+    "zro",
+    "zu"
   ];
   const bul = [
     "а",
@@ -28103,22 +29176,32 @@ flowchart TD
     "şöyle"
   ];
   const ukr = [
+    "а",
+    "або",
     "авжеж",
     "адже",
+    "аж",
     "але",
+    "ані",
     "б",
     "без",
+    "би",
+    "бо",
     "був",
     "була",
     "були",
     "було",
     "бути",
     "більш",
+    "в",
     "вам",
+    "вами",
     "вас",
     "весь",
+    "вже",
     "вздовж",
     "ви",
+    "від",
     "вниз",
     "внизу",
     "вона",
@@ -28127,55 +29210,138 @@ flowchart TD
     "все",
     "всередині",
     "всіх",
+    "вся",
     "від",
     "він",
     "да",
     "давай",
     "давати",
     "де",
+    "десь",
     "дещо",
     "для",
     "до",
+    "є",
+    "ж",
+    "же",
     "з",
+    "за",
     "завжди",
     "замість",
+    "зі",
+    "і",
+    "із",
+    "інших",
+    "її",
+    "їй",
+    "їм",
+    "їх",
     "й",
+    "його",
+    "йому",
     "коли",
     "ледве",
+    "лиш",
     "майже",
+    "мене",
+    "мені",
     "ми",
+    "між",
+    "мій",
+    "мною",
+    "мов",
+    "мого",
+    "моєї",
+    "моє",
+    "може",
+    "мої",
+    "моїх",
+    "моя",
+    "на",
+    "над",
     "навколо",
     "навіть",
     "нам",
+    "нами",
+    "нас",
+    "наче",
+    "наш",
+    "не",
+    "нє",
+    "неї",
+    "нема",
+    "немов",
+    "неначе",
+    "нею",
+    "ним",
+    "ними",
+    "них",
+    "ні",
+    "ніби",
+    "ніщо",
+    "нього",
+    "о",
+    "ось",
     "от",
     "отже",
     "отож",
+    "під",
+    "по",
     "поза",
     "про",
     "під",
+    "сам",
+    "сама",
+    "свій",
+    "свої",
+    "своя",
+    "свою",
+    "себе",
+    "собі",
     "та",
+    "там",
     "так",
+    "така",
     "такий",
     "також",
+    "твій",
+    "твого",
+    "твоєї",
+    "твої",
+    "твоя",
     "те",
+    "тебе",
     "ти",
+    "ті",
+    "тільки",
+    "то",
+    "тобі",
+    "тобою",
     "тобто",
+    "тоді",
     "тож",
+    "той",
     "тощо",
+    "тут",
+    "у",
+    "хіба",
+    "хоч",
     "хоча",
     "це",
     "цей",
+    "ці",
+    "ця",
     "чи",
     "чого",
+    "ще",
     "що",
+    "щоб",
+    "щось",
+    "я",
     "як",
+    "яка",
     "який",
-    "якої",
-    "є",
-    "із",
-    "інших",
-    "їх",
-    "її"
+    "якої"
   ];
   const urd = [
     "آئی",
@@ -29173,7 +30339,14 @@ flowchart TD
   const AUTH_TOKEN_KEY = "tinacms-auth";
   const authenticate = (clientId, frontendUrl) => {
     return new Promise((resolve) => {
-      let authTab;
+      const origin = `${window.location.protocol}//${window.location.host}`;
+      const authTab = popupWindow(
+        `${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`,
+        "_blank",
+        window,
+        1e3,
+        700
+      );
       window.addEventListener("message", function(e) {
         if (e.data.source === TINA_LOGIN_EVENT) {
           if (authTab) {
@@ -29186,14 +30359,6 @@ flowchart TD
           });
         }
       });
-      const origin = `${window.location.protocol}//${window.location.host}`;
-      authTab = popupWindow(
-        `${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`,
-        "_blank",
-        window,
-        1e3,
-        700
-      );
     });
   };
   const DefaultSessionProvider = ({
@@ -29899,21 +31064,352 @@ mutation addPendingDocumentMutation(
       !submitting && name
     );
   };
-  const TINA_AUTH_CONFIG = "tina_auth_config";
-  const useTinaAuthRedirect = () => {
-    React.useEffect(() => {
-      const urlParams = new URLSearchParams(window.location.search);
-      const config = {
-        code: urlParams.get("code") || "",
-        scope: urlParams.get("scope") || "email",
-        state: urlParams.get("state")
-      };
-      if (!config.code) {
-        return;
+  class TinaAdminApi {
+    constructor(cms) {
+      var _a, _b, _c, _d;
+      this.maxSearchIndexFieldLength = 100;
+      this.api = cms.api.tina;
+      this.schema = cms.api.tina.schema;
+      if (cms.api.search && ((_a = cms.api.search) == null ? void 0 : _a.supportsClientSideIndexing())) {
+        this.searchClient = cms.api.searchClient;
+        this.maxSearchIndexFieldLength = ((_d = (_c = (_b = this.schema.config) == null ? void 0 : _b.config) == null ? void 0 : _c.search) == null ? void 0 : _d.maxSearchIndexFieldLength) || 100;
       }
-      localStorage[TINA_AUTH_CONFIG] = JSON.stringify(config);
-    }, []);
-  };
+    }
+    async isAuthenticated() {
+      return await this.api.authProvider.isAuthenticated();
+    }
+    async checkGraphqlSchema({ localSchema }) {
+      const schemaFromCloud = await this.api.getSchema();
+      const schema1 = schemaFromCloud;
+      const schema2 = graphql.buildSchema(graphql.print(localSchema));
+      const diffOutput = await core.diff(schema1, schema2);
+      if (diffOutput.length > 0) {
+        return false;
+      } else {
+        return true;
+      }
+    }
+    fetchCollections() {
+      return this.schema.getCollections();
+    }
+    async renameDocument({ collection, relativePath: relativePath2, newRelativePath }) {
+      await this.api.request(
+        `#graphql
+              mutation RenameDocument($collection: String!, $relativePath: String! $newRelativePath: String!) {
+                updateDocument(collection: $collection, relativePath: $relativePath, params: {relativePath: $newRelativePath}){
+    __typename
+  }
+              }
+            `,
+        { variables: { collection, relativePath: relativePath2, newRelativePath } }
+      );
+      if (this.searchClient) {
+        const { document: doc } = await this.fetchDocument(
+          collection.name,
+          newRelativePath
+        );
+        const processed = processDocumentForIndexing(
+          doc["_values"],
+          `${collection.path}/${newRelativePath}`,
+          collection,
+          this.maxSearchIndexFieldLength
+        );
+        await this.searchClient.put([processed]);
+        await this.searchClient.del([`${collection.name}:${relativePath2}`]);
+      }
+    }
+    async deleteDocument({
+      collection,
+      relativePath: relativePath2
+    }) {
+      var _a;
+      await this.api.request(
+        `#graphql
+      mutation DeleteDocument($collection: String!, $relativePath: String!  ){
+  deleteDocument(collection: $collection, relativePath: $relativePath){
+    __typename
+  }
+}`,
+        { variables: { collection, relativePath: relativePath2 } }
+      );
+      await ((_a = this.searchClient) == null ? void 0 : _a.del([`${collection}:${relativePath2}`]));
+    }
+    async fetchCollection(collectionName, includeDocuments, folder = "", after, sortKey, order, filterArgs) {
+      let filter = null;
+      const filterField = filterArgs == null ? void 0 : filterArgs.filterField;
+      if (filterField) {
+        filter = {
+          [collectionName]: {
+            [filterField]: {}
+          }
+        };
+      }
+      if (filterField && (filterArgs == null ? void 0 : filterArgs.startsWith)) {
+        filter[collectionName][filterField] = {
+          ...filter[collectionName][filterField] || {},
+          startsWith: filterArgs.startsWith
+        };
+      }
+      if (filterField && (filterArgs == null ? void 0 : filterArgs.before)) {
+        filter[collectionName][filterField] = {
+          ...filter[collectionName][filterField] || {},
+          before: filterArgs.before
+        };
+      }
+      if (filterField && (filterArgs == null ? void 0 : filterArgs.after)) {
+        filter[collectionName][filterField] = {
+          ...filter[collectionName][filterField] || {},
+          after: filterArgs.after
+        };
+      }
+      if (filterField && (filterArgs == null ? void 0 : filterArgs.booleanEquals) !== null && (filterArgs == null ? void 0 : filterArgs.booleanEquals) !== void 0) {
+        filter[collectionName][filterField] = {
+          ...filter[collectionName][filterField] || {},
+          eq: filterArgs.booleanEquals
+        };
+      }
+      if (includeDocuments === true) {
+        const sort = sortKey || this.schema.getIsTitleFieldName(collectionName);
+        const response = order === "asc" ? await this.api.request(
+          `#graphql
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String, $filter: DocumentFilter, $folder: String){
+        collection(collection: $collection){
+          name
+          label
+          format
+          templates
+          documents(sort: $sort, after: $after, first: $limit, filter: $filter, folder: $folder) @include(if: $includeDocuments) {
+            totalCount
+            pageInfo {
+              hasPreviousPage
+              hasNextPage
+              startCursor
+              endCursor
+            }
+            edges {
+              node {
+                __typename
+                ... on Folder {
+                    name
+                    path
+                }
+                ... on Document {
+                  _sys {
+                    title
+                    template
+                    breadcrumbs
+                    path
+                    basename
+                    relativePath
+                    filename
+                    extension
+                    hasReferences
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`,
+          {
+            variables: {
+              collection: collectionName,
+              includeDocuments,
+              folder,
+              sort,
+              limit: 50,
+              after,
+              filter
+            }
+          }
+        ) : await this.api.request(
+          `#graphql
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String, $filter: DocumentFilter, $folder: String) {
+        collection(collection: $collection){
+          name
+          label
+          format
+          templates
+          documents(sort: $sort, before: $after, last: $limit, filter: $filter, folder: $folder) @include(if: $includeDocuments) {
+            totalCount
+            pageInfo {
+              hasPreviousPage
+              hasNextPage
+              startCursor
+              endCursor
+            }
+            edges {
+              node {
+                __typename
+                ... on Folder {
+                    name
+                    path
+                }
+                ... on Document {
+                  _sys {
+                    title
+                    template
+                    breadcrumbs
+                    path
+                    basename
+                    relativePath
+                    filename
+                    extension
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`,
+          {
+            variables: {
+              collection: collectionName,
+              includeDocuments,
+              folder,
+              sort,
+              limit: 50,
+              after,
+              filter
+            }
+          }
+        );
+        return response.collection;
+      } else {
+        try {
+          const collection = this.schema.getCollection(collectionName);
+          return collection;
+        } catch (e) {
+          console.error(
+            `[TinaAdminAPI] Unable to fetchCollection(): ${e.message}`
+          );
+          return void 0;
+        }
+      }
+    }
+    async fetchDocument(collectionName, relativePath2, values = true) {
+      let query;
+      if (values) {
+        query = `#graphql
+        query($collection: String!, $relativePath: String!) {
+          document(collection:$collection, relativePath:$relativePath) {
+            ... on Document {
+              _values
+              _sys {
+                hasReferences
+              }
+            }
+          }
+        }`;
+      } else {
+        query = `#graphql
+        query($collection: String!, $relativePath: String!) {
+          document(collection:$collection, relativePath:$relativePath) {
+            __typename
+            ... on Document {
+              _sys {
+                title
+                template
+                breadcrumbs
+                path
+                basename
+                relativePath
+                filename
+                extension
+              }
+            }
+          }
+        }`;
+      }
+      const response = await this.api.request(query, {
+        variables: { collection: collectionName, relativePath: relativePath2 }
+      });
+      return response;
+    }
+    async createDocument(collection, relativePath2, params) {
+      const response = await this.api.request(
+        `#graphql
+      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
+        createDocument(
+          collection: $collection,
+          relativePath: $relativePath,
+          params: $params
+        ){__typename}
+      }`,
+        {
+          variables: {
+            collection: collection.name,
+            relativePath: relativePath2,
+            params
+          }
+        }
+      );
+      if (this.searchClient) {
+        const { document: doc } = await this.fetchDocument(
+          collection.name,
+          relativePath2
+        );
+        const processed = processDocumentForIndexing(
+          doc["_values"],
+          `${collection.path}/${relativePath2}`,
+          collection,
+          this.maxSearchIndexFieldLength
+        );
+        await this.searchClient.put([processed]);
+      }
+      return response;
+    }
+    async updateDocument(collection, relativePath2, params) {
+      const response = await this.api.request(
+        `#graphql
+      mutation($collection: String!, $relativePath: String!, $params: DocumentUpdateMutation!) {
+        updateDocument(
+          collection: $collection,
+          relativePath: $relativePath,
+          params: $params
+        ){__typename}
+      }`,
+        {
+          variables: {
+            collection: collection.name,
+            relativePath: relativePath2,
+            params
+          }
+        }
+      );
+      if (this.searchClient) {
+        const { document: doc } = await this.fetchDocument(
+          collection.name,
+          relativePath2
+        );
+        const processed = processDocumentForIndexing(
+          doc["_values"],
+          `${collection.path}/${relativePath2}`,
+          collection,
+          this.maxSearchIndexFieldLength
+        );
+        await this.searchClient.put([processed]);
+      }
+      return response;
+    }
+    async createFolder(collection, folderName) {
+      return this.api.request(
+        `#graphql
+      mutation($collection: String!, $folderName: String!) {
+        createFolder(
+          collection: $collection,
+          relativePath: $folderName
+        ){__typename}
+      }`,
+        {
+          variables: {
+            collection,
+            folderName
+          }
+        }
+      );
+    }
+  }
   const createClient = ({
     clientId,
     isLocalClient = true,
@@ -29949,348 +31445,21 @@ mutation addPendingDocumentMutation(
       return false;
     }
   }
-  class TinaAdminApi {
-    constructor(cms) {
-      var _a, _b, _c, _d;
-      this.maxSearchIndexFieldLength = 100;
-      this.api = cms.api.tina;
-      this.schema = cms.api.tina.schema;
-      if (cms.api.search && ((_a = cms.api.search) == null ? void 0 : _a.supportsClientSideIndexing())) {
-        this.searchClient = cms.api.searchClient;
-        this.maxSearchIndexFieldLength = ((_d = (_c = (_b = this.schema.config) == null ? void 0 : _b.config) == null ? void 0 : _c.search) == null ? void 0 : _d.maxSearchIndexFieldLength) || 100;
-      }
-    }
-    async isAuthenticated() {
-      return await this.api.authProvider.isAuthenticated();
-    }
-    async checkGraphqlSchema({ localSchema }) {
-      const schemaFromCloud = await this.api.getSchema();
-      const schema1 = schemaFromCloud;
-      const schema2 = graphql.buildSchema(graphql.print(localSchema));
-      const diffOutput = await core.diff(schema1, schema2);
-      if (diffOutput.length > 0) {
-        return false;
-      } else {
-        return true;
-      }
-    }
-    fetchCollections() {
-      return this.schema.getCollections();
-    }
-    async renameDocument({ collection, relativePath: relativePath2, newRelativePath }) {
-      await this.api.request(
-        `#graphql
-              mutation RenameDocument($collection: String!, $relativePath: String! $newRelativePath: String!) {
-                updateDocument(collection: $collection, relativePath: $relativePath, params: {relativePath: $newRelativePath}){
-    __typename
-  }
-              }
-            `,
-        { variables: { collection, relativePath: relativePath2, newRelativePath } }
-      );
-      if (this.searchClient) {
-        const { document: doc } = await this.fetchDocument(
-          collection.name,
-          newRelativePath
-        );
-        const processed = processDocumentForIndexing(
-          doc["_values"],
-          `${collection.path}/${newRelativePath}`,
-          collection,
-          this.maxSearchIndexFieldLength
-        );
-        await this.searchClient.put([processed]);
-        await this.searchClient.del([`${collection.name}:${relativePath2}`]);
-      }
-    }
-    async deleteDocument({
-      collection,
-      relativePath: relativePath2
-    }) {
-      var _a;
-      await this.api.request(
-        `#graphql
-      mutation DeleteDocument($collection: String!, $relativePath: String!  ){
-  deleteDocument(collection: $collection, relativePath: $relativePath){
-    __typename
-  }
-}`,
-        { variables: { collection, relativePath: relativePath2 } }
-      );
-      await ((_a = this.searchClient) == null ? void 0 : _a.del([`${collection}:${relativePath2}`]));
-    }
-    async fetchCollection(collectionName, includeDocuments, folder = "", after, sortKey, order, filterArgs) {
-      let filter = null;
-      const filterField = filterArgs == null ? void 0 : filterArgs.filterField;
-      if (filterField) {
-        filter = {
-          [collectionName]: {
-            [filterField]: {}
-          }
-        };
-      }
-      if (filterField && (filterArgs == null ? void 0 : filterArgs.startsWith)) {
-        filter[collectionName][filterField] = {
-          ...filter[collectionName][filterField] || {},
-          startsWith: filterArgs.startsWith
-        };
-      }
-      if (filterField && (filterArgs == null ? void 0 : filterArgs.before)) {
-        filter[collectionName][filterField] = {
-          ...filter[collectionName][filterField] || {},
-          before: filterArgs.before
-        };
-      }
-      if (filterField && (filterArgs == null ? void 0 : filterArgs.after)) {
-        filter[collectionName][filterField] = {
-          ...filter[collectionName][filterField] || {},
-          after: filterArgs.after
-        };
-      }
-      if (filterField && (filterArgs == null ? void 0 : filterArgs.booleanEquals) !== null && (filterArgs == null ? void 0 : filterArgs.booleanEquals) !== void 0) {
-        filter[collectionName][filterField] = {
-          ...filter[collectionName][filterField] || {},
-          eq: filterArgs.booleanEquals
-        };
-      }
-      if (includeDocuments === true) {
-        const sort = sortKey || this.schema.getIsTitleFieldName(collectionName);
-        const response = order === "asc" ? await this.api.request(
-          `#graphql
-      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String, $filter: DocumentFilter, $folder: String){
-        collection(collection: $collection){
-          name
-          label
-          format
-          templates
-          documents(sort: $sort, after: $after, first: $limit, filter: $filter, folder: $folder) @include(if: $includeDocuments) {
-            totalCount
-            pageInfo {
-              hasPreviousPage
-              hasNextPage
-              startCursor
-              endCursor
-            }
-            edges {
-              node {
-                __typename
-                ... on Folder {
-                    name
-                    path
-                }
-                ... on Document {
-                  _sys {
-                    title
-                    template
-                    breadcrumbs
-                    path
-                    basename
-                    relativePath
-                    filename
-                    extension
-                  }
-                }
-              }
-            }
-          }
-        }
-      }`,
-          {
-            variables: {
-              collection: collectionName,
-              includeDocuments,
-              folder,
-              sort,
-              limit: 50,
-              after,
-              filter
-            }
-          }
-        ) : await this.api.request(
-          `#graphql
-      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String, $filter: DocumentFilter, $folder: String) {
-        collection(collection: $collection){
-          name
-          label
-          format
-          templates
-          documents(sort: $sort, before: $after, last: $limit, filter: $filter, folder: $folder) @include(if: $includeDocuments) {
-            totalCount
-            pageInfo {
-              hasPreviousPage
-              hasNextPage
-              startCursor
-              endCursor
-            }
-            edges {
-              node {
-                __typename
-                ... on Folder {
-                    name
-                    path
-                }
-                ... on Document {
-                  _sys {
-                    title
-                    template
-                    breadcrumbs
-                    path
-                    basename
-                    relativePath
-                    filename
-                    extension
-                  }
-                }
-              }
-            }
-          }
-        }
-      }`,
-          {
-            variables: {
-              collection: collectionName,
-              includeDocuments,
-              folder,
-              sort,
-              limit: 50,
-              after,
-              filter
-            }
-          }
-        );
-        return response.collection;
-      } else {
-        try {
-          const collection = this.schema.getCollection(collectionName);
-          return collection;
-        } catch (e) {
-          console.error(
-            `[TinaAdminAPI] Unable to fetchCollection(): ${e.message}`
-          );
-          return void 0;
-        }
-      }
-    }
-    async fetchDocument(collectionName, relativePath2, values = true) {
-      let query;
-      if (values) {
-        query = `#graphql
-        query($collection: String!, $relativePath: String!) {
-          document(collection:$collection, relativePath:$relativePath) {
-            ... on Document {
-              _values
-            }
-          }
-        }`;
-      } else {
-        query = `#graphql
-        query($collection: String!, $relativePath: String!) {
-          document(collection:$collection, relativePath:$relativePath) {
-            __typename
-            ... on Document {
-              _sys {
-                title
-                template
-                breadcrumbs
-                path
-                basename
-                relativePath
-                filename
-                extension
-              }
-            }
-          }
-        }`;
-      }
-      const response = await this.api.request(query, {
-        variables: { collection: collectionName, relativePath: relativePath2 }
-      });
-      return response;
-    }
-    async createDocument(collection, relativePath2, params) {
-      const response = await this.api.request(
-        `#graphql
-      mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
-        createDocument(
-          collection: $collection,
-          relativePath: $relativePath,
-          params: $params
-        ){__typename}
-      }`,
-        {
-          variables: {
-            collection: collection.name,
-            relativePath: relativePath2,
-            params
-          }
-        }
-      );
-      if (this.searchClient) {
-        const { document: doc } = await this.fetchDocument(
-          collection.name,
-          relativePath2
-        );
-        const processed = processDocumentForIndexing(
-          doc["_values"],
-          `${collection.path}/${relativePath2}`,
-          collection,
-          this.maxSearchIndexFieldLength
-        );
-        await this.searchClient.put([processed]);
-      }
-      return response;
-    }
-    async updateDocument(collection, relativePath2, params) {
-      const response = await this.api.request(
-        `#graphql
-      mutation($collection: String!, $relativePath: String!, $params: DocumentUpdateMutation!) {
-        updateDocument(
-          collection: $collection,
-          relativePath: $relativePath,
-          params: $params
-        ){__typename}
-      }`,
-        {
-          variables: {
-            collection: collection.name,
-            relativePath: relativePath2,
-            params
-          }
-        }
-      );
-      if (this.searchClient) {
-        const { document: doc } = await this.fetchDocument(
-          collection.name,
-          relativePath2
-        );
-        const processed = processDocumentForIndexing(
-          doc["_values"],
-          `${collection.path}/${relativePath2}`,
-          collection,
-          this.maxSearchIndexFieldLength
-        );
-        await this.searchClient.put([processed]);
+  const TINA_AUTH_CONFIG = "tina_auth_config";
+  const useTinaAuthRedirect = () => {
+    React.useEffect(() => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const config = {
+        code: urlParams.get("code") || "",
+        scope: urlParams.get("scope") || "email",
+        state: urlParams.get("state")
+      };
+      if (!config.code) {
+        return;
       }
-      return response;
-    }
-    async createFolder(collection, folderName) {
-      return this.api.request(
-        `#graphql
-      mutation($collection: String!, $folderName: String!) {
-        createFolder(
-          collection: $collection,
-          relativePath: $folderName
-        ){__typename}
-      }`,
-        {
-          variables: {
-            collection,
-            folderName
-          }
-        }
-      );
-    }
-  }
+      localStorage[TINA_AUTH_CONFIG] = JSON.stringify(config);
+    }, []);
+  };
   function sleep(ms) {
     return new Promise((resolve) => setTimeout(resolve, ms));
   }
@@ -30627,6 +31796,9 @@ mutation addPendingDocumentMutation(
             cms.flags.set("branch-switcher", true);
             client.usingEditorialWorkflow = true;
             client.protectedBranches = project.protectedBranches;
+            if (!project.metadata[currentBranch]) {
+              setCurrentBranch(project.defaultBranch || "main");
+            }
           }
         });
       };
@@ -30639,7 +31811,7 @@ mutation addPendingDocumentMutation(
         }
       });
       return unsubscribe;
-    }, [isTinaCloud, cms]);
+    }, [currentBranch, isTinaCloud, cms]);
     return /* @__PURE__ */ React.createElement(SessionProvider, { basePath: "/api/tina/auth" }, /* @__PURE__ */ React.createElement(
       BranchDataProvider,
       {
@@ -31492,6 +32664,35 @@ This will work when developing locally but NOT when deployed to production.
   }) => {
     return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-gray-100" }, /* @__PURE__ */ React.createElement("div", { className: "text-red-500 text-4xl mb-6 flex items-center" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-12 h-auto fill-current text-red-400 opacity-70 mr-1" }), " ", title), /* @__PURE__ */ React.createElement("p", { className: "text-gray-700 text-xl mb-8" }, errorMessage), /* @__PURE__ */ React.createElement(Button$1, { variant: "danger", onClick: () => window.location.reload() }, /* @__PURE__ */ React.createElement(BiSync, { className: "w-7 h-auto fill-current opacity-70 mr-1" }), " Reload"));
   };
+  const isValidSortKey = (sortKey, collection) => {
+    if (collection.fields) {
+      const sortKeys = collection.fields.map((x) => x.name);
+      return sortKeys.includes(sortKey);
+    } else if (collection.templates) {
+      const collectionMap = {};
+      const conflictedFields = /* @__PURE__ */ new Set();
+      for (const template of collection.templates) {
+        for (const field of template.fields) {
+          if (collectionMap[field.name]) {
+            if (collectionMap[field.name].type !== field.type) {
+              conflictedFields.add(field.name);
+            }
+          } else {
+            collectionMap[field.name] = field;
+          }
+        }
+      }
+      for (const key in conflictedFields) {
+        delete collectionMap[key];
+      }
+      for (const key in collectionMap) {
+        if (key === sortKey) {
+          return true;
+        }
+      }
+      return false;
+    }
+  };
   const useGetCollection = (cms, collectionName, includeDocuments = true, folder, after = "", sortKey, filterArgs) => {
     const api = new TinaAdminApi(cms);
     const schema = cms.api.tina.schema;
@@ -31503,10 +32704,9 @@ This will work when developing locally but NOT when deployed to production.
     React.useEffect(() => {
       let cancelled = false;
       const fetchCollection = async () => {
-        var _a;
         if (await api.isAuthenticated() && !folder.loading && !cancelled) {
           const { name, order } = JSON.parse(sortKey || "{}");
-          const validSortKey = ((_a = collectionExtra.fields) == null ? void 0 : _a.map((x) => x.name).includes(name)) ? name : void 0;
+          const validSortKey = isValidSortKey(name, collectionExtra) ? name : void 0;
           try {
             const collection2 = await api.fetchCollection(
               collectionName,
@@ -31802,6 +33002,7 @@ This will work when developing locally but NOT when deployed to production.
     const [vars, setVars] = React.useState({
       collection: collectionName,
       relativePath: "",
+      relativePathWithoutExtension: "",
       newRelativePath: "",
       filterField: "",
       folderName: "",
@@ -31843,6 +33044,7 @@ This will work when developing locally but NOT when deployed to production.
         ...old,
         collection: collectionName,
         relativePath: "",
+        relativePathWithoutExtension: "",
         newRelativePath: "",
         filterField: "",
         startsWith: "",
@@ -31868,6 +33070,7 @@ This will work when developing locally but NOT when deployed to production.
             collectionName === vars.collection ? vars : {
               collection: collectionName,
               relativePath: "",
+              relativePathWithoutExtension: "",
               newRelativePath: "",
               filterField: "",
               startsWith: "",
@@ -31905,6 +33108,23 @@ This will work when developing locally but NOT when deployed to production.
             DeleteModal,
             {
               filename: vars.relativePath,
+              checkRefsFunc: async () => {
+                var _a2, _b2;
+                try {
+                  const doc = await admin.fetchDocument(
+                    collection.name,
+                    vars.relativePath,
+                    true
+                  );
+                  return (_b2 = (_a2 = doc == null ? void 0 : doc.document) == null ? void 0 : _a2._sys) == null ? void 0 : _b2.hasReferences;
+                } catch (error) {
+                  cms.alerts.error(
+                    "Document was not found, ask a developer for help or check the console for an error message"
+                  );
+                  console.error(error);
+                  throw error;
+                }
+              },
               deleteFunc: async () => {
                 try {
                   await admin.deleteDocument(vars);
@@ -31913,6 +33133,12 @@ This will work when developing locally but NOT when deployed to production.
                   );
                   reFetchCollection();
                 } catch (error) {
+                  if (error.message.indexOf("has references")) {
+                    cms.alerts.error(
+                      error.message.split("\n	").filter(Boolean)[1]
+                    );
+                    return;
+                  }
                   cms.alerts.warn(
                     "Document was not deleted, ask a developer for help or check the console for an error message"
                   );
@@ -31932,7 +33158,9 @@ This will work when developing locally but NOT when deployed to production.
               safeSubmit: async () => {
                 try {
                   await admin.deleteDocument(vars);
-                  cms.alerts.info("Document was successfully deleted");
+                  cms.alerts.info(
+                    "Document was successfully deleted"
+                  );
                   reFetchCollection();
                 } catch (error) {
                   cms.alerts.warn(
@@ -31946,7 +33174,7 @@ This will work when developing locally but NOT when deployed to production.
           ), renameModalOpen && /* @__PURE__ */ React.createElement(
             RenameModal,
             {
-              filename: vars.relativePath,
+              filename: vars.relativePathWithoutExtension,
               newRelativePath: vars.newRelativePath,
               setNewRelativePath: (newRelativePath) => {
                 setVars((vars2) => {
@@ -31961,9 +33189,17 @@ This will work when developing locally but NOT when deployed to production.
                     relativePath: vars.relativePath,
                     newRelativePath
                   });
-                  cms.alerts.info("Document was successfully renamed");
+                  cms.alerts.info(
+                    "Document was successfully renamed"
+                  );
                   reFetchCollection();
                 } catch (error) {
+                  if (error.message.indexOf("has references")) {
+                    cms.alerts.error(
+                      error.message.split("\n	").filter(Boolean)[1]
+                    );
+                    return;
+                  }
                   cms.alerts.warn(
                     "Document was not renamed, ask a developer for help or check the console for an error message"
                   );
@@ -32055,7 +33291,9 @@ This will work when developing locally but NOT when deployed to production.
                 name: "sort",
                 value: sortKey,
                 onChange: (e) => {
-                  const val = JSON.parse(e.target.value);
+                  const val = JSON.parse(
+                    e.target.value
+                  );
                   setEndCursor("");
                   setPrevCursors([]);
                   window == null ? void 0 : window.localStorage.setItem(
@@ -32261,6 +33499,9 @@ This will work when developing locally but NOT when deployed to production.
                         setVars((old) => ({
                           ...old,
                           collection: collectionName,
+                          relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
+                            "/"
+                          ),
                           relativePath: document2.node._sys.breadcrumbs.join(
                             "/"
                           ) + document2.node._sys.extension,
@@ -32283,6 +33524,9 @@ This will work when developing locally but NOT when deployed to production.
                         setVars((old) => ({
                           ...old,
                           collection: collectionName,
+                          relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
+                            "/"
+                          ),
                           relativePath: document2.node._sys.breadcrumbs.join(
                             "/"
                           ) + document2.node._sys.extension,
@@ -32437,8 +33681,19 @@ This will work when developing locally but NOT when deployed to production.
   const NoDocumentsPlaceholder = () => {
     return /* @__PURE__ */ React.createElement("div", { className: "text-center px-5 py-3 flex flex-col items-center justify-center shadow border border-gray-100 bg-gray-50 border-b border-gray-200 w-full max-w-full rounded-lg" }, /* @__PURE__ */ React.createElement("p", { className: "text-base italic font-medium text-gray-300" }, "No documents found."));
   };
-  const DeleteModal = ({ close: close2, deleteFunc, filename }) => {
-    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 ${filename}?`)), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
+  const DeleteModal = ({
+    close: close2,
+    deleteFunc,
+    checkRefsFunc,
+    filename
+  }) => {
+    const [hasRefs, setHasRefs] = React.useState();
+    React.useEffect(() => {
+      checkRefsFunc().then((result) => {
+        setHasRefs(result);
+      });
+    }, [filename, checkRefsFunc]);
+    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 ${filename}?${hasRefs ? " References to this document will also be deleted." : ""}`)), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
       Button$1,
       {
         style: { flexGrow: 3 },
@@ -32484,7 +33739,7 @@ This will work when developing locally but NOT when deployed to production.
     newRelativePath,
     setNewRelativePath
   }) => {
-    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Rename ", filename), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", { className: "mb-4" }, "Are you sure you want to rename ", /* @__PURE__ */ React.createElement("strong", null, filename), "? TinaCMS uses the filename as the ID; renaming this file could result in unresolved references."), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Rename ", filename), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", { className: "mb-4" }, "Are you sure you want to rename ", /* @__PURE__ */ React.createElement("strong", null, filename), "?"), /* @__PURE__ */ React.createElement(
       BaseTextField,
       {
         placeholder: "Enter a new name for the document's file",
@@ -32499,7 +33754,8 @@ This will work when developing locally but NOT when deployed to production.
         onClick: async () => {
           await renameFunc();
           close2();
-        }
+        },
+        disabled: !newRelativePath || newRelativePath === filename
       },
       "Rename"
     ))));
@@ -32826,7 +34082,10 @@ This will work when developing locally but NOT when deployed to production.
       const fetchDocument = async () => {
         if (api.isAuthenticated()) {
           try {
-            const response = await api.fetchDocument(collectionName, relativePath2);
+            const response = await api.fetchDocument(
+              collectionName,
+              relativePath2
+            );
             setDocument(response.document);
           } catch (error2) {
             cms.alerts.error(
@@ -33170,15 +34429,24 @@ This will work when developing locally but NOT when deployed to production.
           }
         }
         if (state === "creatingPR") {
-          const foo = await tinaApi.createPullRequest({
-            baseBranch,
-            branch,
-            title: `${branch.replace("tina/", "").replace("-", " ")} (PR from TinaCMS)`
-          });
-          console.log("PR created", foo);
-          cms.alerts.success("Pull request created.");
-          localStorage.setItem("tina.createBranchState", "done");
-          setState("done");
+          try {
+            const foo = await tinaApi.createPullRequest({
+              baseBranch,
+              branch,
+              title: `${branch.replace("tina/", "").replace("-", " ")} (PR from TinaCMS)`
+            });
+            console.log("PR created", foo);
+            cms.alerts.success("Pull request created.");
+            localStorage.setItem("tina.createBranchState", "done");
+            setState("done");
+          } catch (e) {
+            console.error(e);
+            cms.alerts.error("Failed to create PR");
+            setErrorMessage(
+              "Failed to create PR, please try again. If the problem persists please contact support."
+            );
+            setState("error");
+          }
         }
         if (state === "done") {
           window.location.href = back;
@@ -33805,6 +35073,7 @@ This will work when developing locally but NOT when deployed to production.
   exports2.useScreenPlugin = useScreenPlugin;
   exports2.useTinaAuthRedirect = useTinaAuthRedirect;
   exports2.wrapFieldWithError = wrapFieldWithError;
+  exports2.wrapFieldWithNoHeader = wrapFieldWithNoHeader;
   exports2.wrapFieldsWithMeta = wrapFieldsWithMeta;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 });