tinacms 0.0.0-eb519f2-20241015053224 → 0.0.0-ebe1b69-20250211022853

package/dist/index.js

@@ -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",
       {
@@ -1321,7 +1347,7 @@ var __publicField = (obj, key, value) => {
     React.useEffect(() => {
       if (mermaidRef.current) {
         mermaid.initialize({ startOnLoad: true });
-        mermaid.run();
+        mermaid.init();
       }
     }, [config]);
     return /* @__PURE__ */ React.createElement("div", { contentEditable: false, className: "border-border border-b" }, /* @__PURE__ */ React.createElement("div", { ref: mermaidRef }, /* @__PURE__ */ React.createElement("pre", { className: "mermaid not-tina-prose" }, config)));
@@ -1348,7 +1374,7 @@ flowchart TD
     --> id2(modify me to see changes!)
     id2 
     --> id3(Click the top button to preview the changes)
-    --> id4(Learn about mermaid diagrams @ mermaid.js.org)`;
+    --> id4(Learn about mermaid diagrams - mermaid.js.org)`;
   const MermaidElement = cn$1.withRef(
     ({ children, nodeProps, element, ...props }, ref) => {
       const [mermaidConfig, setMermaidConfig] = React.useState(
@@ -1364,7 +1390,7 @@ flowchart TD
         children: [{ type: "text", text: "" }]
       };
       React.useEffect(() => {
-        if (mermaid.parse(mermaidConfig, { suppressErrors: false })) {
+        if (mermaid.parse(mermaidConfig)) {
           setMermaidError(null);
         }
       }, [mermaidConfig]);
@@ -3676,7 +3702,7 @@ flowchart TD
     };
     const sizeClasses = {
       small: `text-xs h-8 px-3`,
-      medium: `text-sm h-10 px-4`,
+      medium: `text-sm h-10 px-8`,
       custom: ``
     };
     return /* @__PURE__ */ React__namespace.createElement(
@@ -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);
@@ -5270,17 +5313,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 +5347,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 +5438,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,
@@ -5710,10 +5746,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 +5828,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",
@@ -7153,244 +7198,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;
-      };
-      _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();
+  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.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",
@@ -7919,22 +7785,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 +7834,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 },
@@ -9429,6 +9289,19 @@ flowchart TD
       }
     }
   }
+  const encodeUrlIfNeeded = (url) => {
+    if (url) {
+      try {
+        const parsed = new URL(url);
+        parsed.pathname = parsed.pathname.split("/").filter((part) => part !== "").map(encodeURIComponent).join("/");
+        return parsed.toString();
+      } catch (e) {
+        return url;
+      }
+    } else {
+      return url;
+    }
+  };
   let MediaManager$1 = class MediaManager {
     constructor(store, events) {
       this.store = store;
@@ -9501,6 +9374,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) {
@@ -10308,7 +10195,7 @@ flowchart TD
       "Event Log"
     ));
   };
-  const version = "2.2.9";
+  const version = "2.6.3";
   const Nav = ({
     isLocalMode,
     className = "",
@@ -12839,15 +12726,14 @@ flowchart TD
               fields: fieldGroup.fields
             }
           ) : /* @__PURE__ */ React__namespace.createElement(NoFieldsPlaceholder, null)
-        )), !hideFooter && /* @__PURE__ */ React__namespace.createElement("div", { className: "relative flex-none w-full h-16 px-6 bg-white border-t border-gray-100	flex items-center justify-center" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1 w-full flex justify-between gap-4 items-center max-w-form" }, tinaForm.reset && /* @__PURE__ */ React__namespace.createElement(
+        )), !hideFooter && /* @__PURE__ */ React__namespace.createElement("div", { className: "relative flex-none w-full h-16 px-12 bg-white border-t border-gray-100 flex items-center justify-end" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1 w-full justify-end gap-2	flex items-center max-w-form" }, tinaForm.reset && /* @__PURE__ */ React__namespace.createElement(
           ResetForm,
           {
             pristine,
             reset: async () => {
               finalForm2.reset();
               await tinaForm.reset();
-            },
-            style: { flexGrow: 1 }
+            }
           },
           tinaForm.buttons.reset
         ), /* @__PURE__ */ React__namespace.createElement(
@@ -12856,8 +12742,7 @@ flowchart TD
             onClick: safeHandleSubmit,
             disabled: !canSubmit,
             busy: submitting,
-            variant: "primary",
-            style: { flexGrow: 3 }
+            variant: "primary"
           },
           submitting && /* @__PURE__ */ React__namespace.createElement(LoadingDots, null),
           !submitting && tinaForm.buttons.save
@@ -14427,6 +14312,7 @@ flowchart TD
       ToolbarButton,
       {
         showArrow: false,
+        "data-testid": "rich-text-editor-overflow-menu-button",
         className: "lg:min-w-[130px]",
         isDropdown: true,
         pressed: openState.open,
@@ -14480,7 +14366,17 @@ flowchart TD
   };
   const RawMarkdownToolbarButton = cn$1.withRef(({ clear, ...rest }, ref) => {
     const { props } = useRawMarkdownToolbarButton();
-    return /* @__PURE__ */ React.createElement(ToolbarButton, { ref, tooltip: "Link", ...rest, ...props }, /* @__PURE__ */ React.createElement(Icons.raw, null));
+    return /* @__PURE__ */ React.createElement(
+      ToolbarButton,
+      {
+        ref,
+        tooltip: "Link",
+        ...rest,
+        ...props,
+        "data-testid": "markdown-button"
+      },
+      /* @__PURE__ */ React.createElement(Icons.raw, null)
+    );
   });
   function TableDropdownMenu(props) {
     const tableSelected = plateCommon.useEditorSelector(
@@ -14619,7 +14515,7 @@ flowchart TD
         key: template.name,
         onMouseDown: (e) => {
           e.preventDefault();
-          close();
+          setOpen(false);
           insertMDX(editor, template);
         },
         className: ""
@@ -14705,7 +14601,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);
     }
@@ -15033,6 +14934,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);
@@ -15054,12 +14958,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: "" }] }];
       },
       []
     );
@@ -15087,7 +14991,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(() => {
@@ -15097,13 +15001,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,
       {
@@ -15111,7 +15015,7 @@ flowchart TD
         initialValue,
         plugins: plugins$2,
         onChange: (value) => {
-          props.input.onChange({
+          input.onChange({
             type: "root",
             children: value
           });
@@ -15120,12 +15024,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))
     ));
   };
@@ -30079,6 +29983,7 @@ mutation addPendingDocumentMutation(
                     relativePath
                     filename
                     extension
+                    hasReferences
                   }
                 }
               }
@@ -30170,6 +30075,9 @@ mutation addPendingDocumentMutation(
           document(collection:$collection, relativePath:$relativePath) {
             ... on Document {
               _values
+              _sys {
+                hasReferences
+              }
             }
           }
         }`;
@@ -31896,6 +31804,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);
@@ -31904,6 +31829,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"
                   );
@@ -31955,6 +31886,12 @@ This will work when developing locally but NOT when deployed to production.
                   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"
                   );
@@ -32428,8 +32365,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 },
@@ -33161,15 +33109,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;
@@ -33796,6 +33753,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" } });
 });