tinacms 3.3.0 → 3.3.2

package/dist/index.js

@@ -9,9 +9,6 @@ import { z } from "zod";
 import * as React from "react";
 import React__default, { useState, useCallback, useContext, createContext, forwardRef, useRef, useReducer, useMemo, useEffect, useLayoutEffect, Component, memo, useDebugValue, useId, startTransition, useImperativeHandle } from "react";
 import ReactDOM, { createPortal } from "react-dom";
-import { createForm, FORM_ERROR, getIn } from "final-form";
-import arrayMutators from "final-form-arrays";
-import setFieldData from "final-form-set-field-data";
 import { withRef as withRef$1, cn as cn$2, withCn, createPrimitiveElement, withVariants, withProps, useComposedRef as useComposedRef$1, PortalBody } from "@udecode/cn";
 import { HEADING_KEYS as HEADING_KEYS$1, HEADING_LEVELS as HEADING_LEVELS$1 } from "@udecode/plate-heading";
 import { isHotkey } from "is-hotkey";
@@ -37,6 +34,9 @@ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { createForm, FORM_ERROR, getIn } from "final-form";
+import arrayMutators from "final-form-arrays";
+import setFieldData from "final-form-set-field-data";
 import { Field, Form as Form$1 } from "react-final-form";
 import PropTypes from "prop-types";
 import { twMerge } from "tailwind-merge";
@@ -869,1028 +869,458 @@ function useEvent(eventType) {
     subscribe: (callback) => cms.events.subscribe(eventType, callback)
   };
 }
-class Form {
-  constructor({
-    id: id2,
-    label,
-    fields,
-    actions,
-    buttons,
-    global: global2,
-    reset: reset2,
-    loadInitialValues,
-    onChange,
-    queries,
-    ...options
-  }) {
-    __publicField(this, "__type");
-    __publicField(this, "id");
-    __publicField(this, "label");
-    __publicField(this, "fields");
-    __publicField(this, "finalForm");
-    __publicField(this, "actions");
-    __publicField(this, "buttons");
-    __publicField(this, "queries");
-    __publicField(this, "global", null);
-    __publicField(this, "loading", false);
-    /**
-     * @deprecated
-     * Misleading name as per https://github.com/tinacms/tinacms/issues/5686#issuecomment-2899840518
-     * Use path property instead.
-     */
-    __publicField(this, "relativePath");
-    /**
-     * Where to save the form within the content directory on next submission.
-     */
-    __publicField(this, "path");
-    __publicField(this, "crudType");
-    __publicField(this, "beforeSubmit");
-    /**
-     * Subscribes to changes to the form. The subscriber will only be called when
-     * values specified in subscription change. A form can have many subscribers.
-     */
-    __publicField(this, "subscribe", (cb, options) => {
-      return this.finalForm.subscribe(cb, options);
-    });
-    __publicField(this, "onSubmit");
-    __publicField(this, "handleSubmit", async (values, form, cb) => {
-      var _a2;
-      try {
-        const valOverride = await ((_a2 = this.beforeSubmit) == null ? void 0 : _a2.call(this, values));
-        if (valOverride) {
-          for (const [key, value] of Object.entries(valOverride)) {
-            form.change(key, value);
-          }
-        }
-        const response = await this.onSubmit(valOverride || values, form, cb);
-        form.initialize(values);
-        return response;
-      } catch (error2) {
-        return { [FORM_ERROR]: error2 };
-      }
-    });
-    /**
-     * Submits the form if there are currently no validation errors. It may
-     * return undefined or a Promise depending on the nature of the onSubmit
-     * configuration value given to the form when it was created.
-     */
-    __publicField(this, "submit", () => {
-      return this.finalForm.submit();
-    });
-    const initialValues = options.initialValues || {};
-    this.__type = options.__type || "form";
-    this.id = id2;
-    this.label = label;
-    this.global = global2;
-    this.fields = fields || [];
-    this.onSubmit = options.onSubmit;
-    this.queries = queries || [];
-    this.crudType = options.crudType || "update";
-    this.relativePath = options.relativePath || id2;
-    this.path = options.path || id2;
-    this.finalForm = createForm({
-      ...options,
-      initialValues,
-      onSubmit: this.handleSubmit,
-      mutators: {
-        ...arrayMutators,
-        setFieldData,
-        ...options.mutators
+function wrapFieldsWithMeta(Field2) {
+  return (props) => {
+    return /* @__PURE__ */ React.createElement(
+      FieldMeta,
+      {
+        name: props.input.name,
+        label: props.field.label,
+        description: props.field.description,
+        error: props.meta.error,
+        index: props.index,
+        tinaForm: props.tinaForm,
+        field: props.field
+      },
+      /* @__PURE__ */ React.createElement(Field2, { ...props })
+    );
+  };
+}
+function wrapFieldWithNoHeader(Field2) {
+  return (props) => {
+    return /* @__PURE__ */ React.createElement(
+      FieldMeta,
+      {
+        name: props.input.name,
+        label: false,
+        description: "",
+        error: props.meta.error,
+        index: props.index,
+        tinaForm: props.tinaForm
+      },
+      /* @__PURE__ */ React.createElement(Field2, { ...props })
+    );
+  };
+}
+function wrapFieldWithError(Field2) {
+  return (props) => {
+    return /* @__PURE__ */ React.createElement(
+      FieldMeta,
+      {
+        name: props.input.name,
+        label: false,
+        description: props.field.description,
+        error: props.meta.error,
+        index: props.index,
+        tinaForm: props.tinaForm
+      },
+      /* @__PURE__ */ React.createElement(Field2, { ...props })
+    );
+  };
+}
+const FieldMeta = ({
+  name,
+  label,
+  description,
+  error: error2,
+  margin = true,
+  children,
+  index,
+  tinaForm,
+  field,
+  ...props
+}) => {
+  const { dispatch: setHoveredField } = useEvent("field:hover");
+  const { dispatch: setFocusedField } = useEvent("field:focus");
+  return /* @__PURE__ */ React.createElement(
+    FieldWrapper,
+    {
+      margin,
+      field,
+      onMouseOver: () => setHoveredField({ id: tinaForm.id, fieldName: name }),
+      onMouseOut: () => setHoveredField({ id: null, fieldName: null }),
+      onClick: () => setFocusedField({ id: tinaForm.id, fieldName: name }),
+      style: { zIndex: index ? 1e3 - index : void 0 },
+      ...props
+    },
+    (label !== false || description) && /* @__PURE__ */ React.createElement(FieldLabel, { name }, label !== false && /* @__PURE__ */ React.createElement(React.Fragment, null, label || name), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description)),
+    children,
+    error2 && typeof error2 === "string" && /* @__PURE__ */ React.createElement(FieldError, null, error2)
+  );
+};
+const FieldWrapper = ({
+  margin,
+  children,
+  field,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `relative w-full px-2 ${margin ? "mb-5 last:mb-0" : ""} ${(field == null ? void 0 : field.width) === "half" ? "@sm:w-1/2" : ""}`,
+      ...props
+    },
+    children
+  );
+};
+const FieldLabel = ({
+  children,
+  className,
+  name,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      htmlFor: name,
+      className: `block font-sans text-xs font-semibold text-gray-700 whitespace-normal mb-2 ${className}`,
+      ...props
+    },
+    children
+  );
+};
+const FieldDescription = ({
+  children,
+  className,
+  ...props
+}) => {
+  if (typeof children === "string") {
+    return /* @__PURE__ */ React.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 }
       }
-    });
-    this._reset = reset2;
-    this.actions = actions || [];
-    this.buttons = buttons || {
-      save: "Save",
-      reset: "Reset"
-    };
-    this.updateFields(this.fields);
-    if (loadInitialValues) {
-      this.loading = true;
-      loadInitialValues().then((initialValues2) => {
-        this.updateInitialValues(initialValues2);
-      }).finally(() => {
-        this.loading = false;
-      });
-    }
-    if (onChange) {
-      let firstUpdate = true;
-      this.subscribe(
-        (formState) => {
-          if (firstUpdate) {
-            firstUpdate = false;
-          } else {
-            onChange(formState);
-          }
-        },
-        { values: true, ...(options == null ? void 0 : options.extraSubscribeValues) || {} }
-      );
-    }
+    );
   }
-  /**
-   * A unique identifier for Forms.
-   *
-   * @deprecated use id instead
-   */
-  get name() {
-    return void 0;
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: `block font-sans text-xs italic font-light text-gray-400 pt-0.5 whitespace-normal m-0 ${className}`,
+      ...props
+    },
+    children
+  );
+};
+const FieldError = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: `block font-sans text-xs font-normal text-red-500 pt-3 animate-slide-in whitespace-normal m-0  ${className}`,
+      ...props
+    },
+    children
+  );
+};
+const EditorContext$1 = React__default.createContext({
+  fieldName: "",
+  rawMode: false,
+  setRawMode: () => {
+  },
+  templates: []
+});
+const useEditorContext = () => {
+  return React__default.useContext(EditorContext$1);
+};
+const useTemplates = () => {
+  return React__default.useContext(EditorContext$1);
+};
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var direction_1 = direction;
+var RTL = "֑-߿יִ-﷽ﹰ-ﻼ";
+var LTR = "A-Za-zÀ-ÖØ-öø-ʸ̀-֐ࠀ-῿‎Ⰰ-﬜︀-﹯﻽-￿";
+var rtl = new RegExp("^[^" + LTR + "]*[" + RTL + "]");
+var ltr = new RegExp("^[^" + RTL + "]*[" + LTR + "]");
+function direction(value) {
+  value = String(value || "");
+  if (rtl.test(value)) {
+    return "rtl";
   }
-  /**
-   * Returns the current values of the form.
-   *
-   * if the form is still loading it returns `undefined`.
-   */
-  get values() {
-    if (this.loading) {
-      return void 0;
+  if (ltr.test(value)) {
+    return "ltr";
+  }
+  return "neutral";
+}
+const getDirection = /* @__PURE__ */ getDefaultExportFromCjs(direction_1);
+function isObject$e(value) {
+  var type = typeof value;
+  return value != null && (type == "object" || type == "function");
+}
+var isObject_1 = isObject$e;
+var freeGlobal$1 = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+var _freeGlobal = freeGlobal$1;
+var freeGlobal = _freeGlobal;
+var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+var root$9 = freeGlobal || freeSelf || Function("return this")();
+var _root = root$9;
+var root$8 = _root;
+var now$1 = function() {
+  return root$8.Date.now();
+};
+var now_1 = now$1;
+var reWhitespace = /\s/;
+function trimmedEndIndex$1(string3) {
+  var index = string3.length;
+  while (index-- && reWhitespace.test(string3.charAt(index))) {
+  }
+  return index;
+}
+var _trimmedEndIndex = trimmedEndIndex$1;
+var trimmedEndIndex = _trimmedEndIndex;
+var reTrimStart = /^\s+/;
+function baseTrim$1(string3) {
+  return string3 ? string3.slice(0, trimmedEndIndex(string3) + 1).replace(reTrimStart, "") : string3;
+}
+var _baseTrim = baseTrim$1;
+var root$7 = _root;
+var Symbol$7 = root$7.Symbol;
+var _Symbol = Symbol$7;
+var Symbol$6 = _Symbol;
+var objectProto$f = Object.prototype;
+var hasOwnProperty$c = objectProto$f.hasOwnProperty;
+var nativeObjectToString$1 = objectProto$f.toString;
+var symToStringTag$1 = Symbol$6 ? Symbol$6.toStringTag : void 0;
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty$c.call(value, symToStringTag$1), tag = value[symToStringTag$1];
+  try {
+    value[symToStringTag$1] = void 0;
+    var unmasked = true;
+  } catch (e3) {
+  }
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
     }
-    return this.finalForm.getState().values || this.initialValues;
   }
-  /**
-   * The values the form was initialized with.
-   */
-  get initialValues() {
-    return this.finalForm.getState().initialValues;
+  return result;
+}
+var _getRawTag = getRawTag$1;
+var objectProto$e = Object.prototype;
+var nativeObjectToString = objectProto$e.toString;
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
+var _objectToString = objectToString$1;
+var Symbol$5 = _Symbol, getRawTag = _getRawTag, objectToString = _objectToString;
+var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
+var symToStringTag = Symbol$5 ? Symbol$5.toStringTag : void 0;
+function baseGetTag$6(value) {
+  if (value == null) {
+    return value === void 0 ? undefinedTag : nullTag;
   }
-  get pristine() {
-    return this.finalForm.getState().pristine;
+  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+}
+var _baseGetTag = baseGetTag$6;
+function isObjectLike$9(value) {
+  return value != null && typeof value == "object";
+}
+var isObjectLike_1 = isObjectLike$9;
+var baseGetTag$5 = _baseGetTag, isObjectLike$8 = isObjectLike_1;
+var symbolTag$3 = "[object Symbol]";
+function isSymbol$4(value) {
+  return typeof value == "symbol" || isObjectLike$8(value) && baseGetTag$5(value) == symbolTag$3;
+}
+var isSymbol_1 = isSymbol$4;
+var baseTrim = _baseTrim, isObject$d = isObject_1, isSymbol$3 = isSymbol_1;
+var NAN = 0 / 0;
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+var reIsBinary = /^0b[01]+$/i;
+var reIsOctal = /^0o[0-7]+$/i;
+var freeParseInt = parseInt;
+function toNumber$1(value) {
+  if (typeof value == "number") {
+    return value;
   }
-  get dirty() {
-    return this.finalForm.getState().dirty;
+  if (isSymbol$3(value)) {
+    return NAN;
   }
-  get submitting() {
-    return this.finalForm.getState().submitting;
+  if (isObject$d(value)) {
+    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+    value = isObject$d(other) ? other + "" : other;
   }
-  get valid() {
-    return this.finalForm.getState().valid;
+  if (typeof value != "string") {
+    return value === 0 ? value : +value;
   }
-  /**
-   * Resets the values back to the initial values the form was initialized with.
-   * Or empties all the values if the form was not initialized.
-   */
-  async reset() {
-    if (this._reset) {
-      await this._reset();
-    }
-    this.finalForm.reset();
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+}
+var toNumber_1 = toNumber$1;
+var isObject$c = isObject_1, now = now_1, toNumber = toNumber_1;
+var FUNC_ERROR_TEXT$3 = "Expected a function";
+var nativeMax$1 = Math.max, nativeMin = Math.min;
+function debounce$1(func, wait, options) {
+  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+  if (typeof func != "function") {
+    throw new TypeError(FUNC_ERROR_TEXT$3);
   }
-  /**
-   * @deprecated Unnecessary indirection
-   */
-  updateFields(fields) {
-    this.fields = fields;
+  wait = toNumber(wait) || 0;
+  if (isObject$c(options)) {
+    leading = !!options.leading;
+    maxing = "maxWait" in options;
+    maxWait = maxing ? nativeMax$1(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
   }
-  /**
-   * Changes the value of the given field.
-   *
-   * @param name
-   * @param value
-   */
-  change(name, value) {
-    return this.finalForm.change(name, value);
+  function invokeFunc(time2) {
+    var args = lastArgs, thisArg = lastThis;
+    lastArgs = lastThis = void 0;
+    lastInvokeTime = time2;
+    result = func.apply(thisArg, args);
+    return result;
   }
-  get mutators() {
-    return this.finalForm.mutators;
+  function leadingEdge(time2) {
+    lastInvokeTime = time2;
+    timerId = setTimeout(timerExpired, wait);
+    return leading ? invokeFunc(time2) : result;
   }
-  addQuery(queryId) {
-    this.queries = [...this.queries.filter((id2) => id2 !== queryId), queryId];
+  function remainingWait(time2) {
+    var timeSinceLastCall = time2 - lastCallTime, timeSinceLastInvoke = time2 - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
+    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
   }
-  removeQuery(queryId) {
-    this.queries = this.queries.filter((id2) => id2 !== queryId);
+  function shouldInvoke(time2) {
+    var timeSinceLastCall = time2 - lastCallTime, timeSinceLastInvoke = time2 - lastInvokeTime;
+    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
   }
-  /**
-   * Updates multiple fields in the form.
-   *
-   * The updates are batched so that it only triggers one `onChange` event.
-   *
-   * In order to prevent disruptions to the user's editing experience this
-   * function will _not_ update the value of any field that is currently
-   * being edited.
-   *
-   * @param values
-   */
-  updateValues(values) {
-    this.finalForm.batch(() => {
-      const activePath = this.finalForm.getState().active;
-      if (!activePath) {
-        updateEverything(this.finalForm, values);
-      } else {
-        updateSelectively(this.finalForm, values);
-      }
-    });
+  function timerExpired() {
+    var time2 = now();
+    if (shouldInvoke(time2)) {
+      return trailingEdge(time2);
+    }
+    timerId = setTimeout(timerExpired, remainingWait(time2));
   }
-  /**
-   * Replaces the initialValues of the form without deleting the current values.
-   *
-   * This function is helpful when the initialValues are loaded asynchronously.
-   *
-   * @param initialValues
-   */
-  updateInitialValues(initialValues) {
-    this.finalForm.batch(() => {
-      const values = this.values || {};
-      this.finalForm.initialize(initialValues);
-      const activePath = this.finalForm.getState().active;
-      if (!activePath) {
-        updateEverything(this.finalForm, values);
-      } else {
-        updateSelectively(this.finalForm, values);
-      }
-    });
-  }
-  /**
-   * Based on field's name this function will
-   * return an array of fields for the give form along
-   * with the path that it was found at top nearest
-   * object-like group
-   *
-   * So if you have a field named blocks.3.title
-   * It will return the fields from the 3rd "block"
-   * along with the path it was found at
-   * fields: [{type: 'string', name: 'title'}, ... other fields]
-   * activePath: ['blocks', '3']
-   */
-  getActiveField(fieldName) {
-    if (!fieldName) {
-      return this;
+  function trailingEdge(time2) {
+    timerId = void 0;
+    if (trailing && lastArgs) {
+      return invokeFunc(time2);
     }
-    const result = this.getFieldGroup({
-      formOrObjectField: this,
-      values: this.finalForm.getState().values,
-      namePathIndex: 0,
-      namePath: fieldName.split(".")
-    });
+    lastArgs = lastThis = void 0;
     return result;
   }
-  getFieldGroup({
-    formOrObjectField,
-    values = {},
-    namePathIndex,
-    namePath
-  }) {
-    const name = namePath[namePathIndex];
-    const field = formOrObjectField.fields.find((field2) => field2.name === name);
-    const value = values[name];
-    const isLastItem = namePathIndex === namePath.length - 1;
-    if (!field) {
-      return {
-        ...formOrObjectField,
-        fields: formOrObjectField.fields.map((field2) => {
-          return {
-            ...field2,
-            name: [...namePath, field2.name].join(".")
-          };
-        })
-      };
-    } else {
-      if (field.type === "object") {
-        if (field.templates) {
-          if (field.list) {
-            if (isLastItem) {
-              return formOrObjectField;
-            } else {
-              const namePathIndexForListItem = namePathIndex + 1;
-              const index = namePath[namePathIndexForListItem];
-              const listItemValue = value[index];
-              const template = field.templates[listItemValue._template];
-              const templateName = [
-                ...namePath.slice(0, namePathIndexForListItem),
-                index
-              ].join(".");
-              const isLastItem2 = namePathIndexForListItem === namePath.length - 1;
-              if (!isLastItem2) {
-                return this.getFieldGroup({
-                  formOrObjectField: template,
-                  values: listItemValue,
-                  namePath,
-                  namePathIndex: namePathIndex + 2
-                });
-              }
-              if (!template) {
-                console.error({ field, value });
-                throw new Error(
-                  `Expected template value for field ${field.name}`
-                );
-              }
-              return {
-                ...template,
-                name: templateName,
-                fields: template.fields.map((field2) => {
-                  return {
-                    ...field2,
-                    name: [templateName, field2.name].join(".")
-                  };
-                })
-              };
-            }
-          }
-        } else {
-          if (field.list) {
-            const namePathIndexForListItem = namePathIndex + 1;
-            const index = namePath[namePathIndexForListItem];
-            const listItemValue = value[index];
-            const fieldName = [
-              ...namePath.slice(0, namePathIndexForListItem),
-              index
-            ].join(".");
-            const isLastItem2 = namePathIndexForListItem === namePath.length - 1;
-            if (!isLastItem2) {
-              if (field.fields) {
-                return this.getFieldGroup({
-                  formOrObjectField: field,
-                  values: listItemValue,
-                  namePath,
-                  namePathIndex: namePathIndex + 2
-                });
-              }
-            }
-            return {
-              ...field,
-              name: fieldName,
-              fields: field.fields.map((field2) => {
-                return {
-                  ...field2,
-                  name: [fieldName, field2.name].join(".")
-                };
-              })
-            };
-          } else {
-            const fieldName = [...namePath.slice(0, namePathIndex + 1)].join(
-              "."
-            );
-            const isLastItem2 = namePathIndex === namePath.length - 1;
-            if (!isLastItem2) {
-              return this.getFieldGroup({
-                formOrObjectField: field,
-                values: value,
-                namePath,
-                namePathIndex: namePathIndex + 1
-              });
-            }
-            return {
-              ...field,
-              name: fieldName,
-              fields: field.fields.map((field2) => {
-                return {
-                  ...field2,
-                  name: [fieldName, field2.name].join(".")
-                };
-              })
-            };
-          }
-        }
-      } else if (field.type === "rich-text") {
-        if (isLastItem) {
-          return {
-            ...formOrObjectField,
-            fields: formOrObjectField.fields.map((field2) => {
-              return {
-                ...field2,
-                name: [...namePath.slice(0, namePathIndex), field2.name].join(
-                  "."
-                )
-              };
-            })
-          };
-        } else {
-          const childrenIndex = namePath.findIndex(
-            (value2) => value2 === "children"
-          );
-          const propsIndex = namePath.slice(childrenIndex).findIndex((value2) => value2 === "props") + childrenIndex;
-          const itemName = namePath.slice(childrenIndex, propsIndex).join(".");
-          const item = getIn(value, itemName);
-          const props = item.props;
-          const templateString = item.name;
-          const currentPathIndex = namePathIndex + Math.max(propsIndex, 3);
-          const isLastItem2 = currentPathIndex + 1 === namePath.length;
-          const template = field.templates.find(
-            (t2) => t2.name === templateString
-          );
-          const templateName = namePath.slice(0, currentPathIndex + 2).join(".");
-          if ((item == null ? void 0 : item.type) === "img") {
-            const imageName = namePath.slice(0, currentPathIndex + 2).join(".");
-            return {
-              ...formOrObjectField,
-              // name: [formOrObjectField.name, 'img'].join('.'),
-              name: [imageName].join("."),
-              fields: [
-                {
-                  type: "image",
-                  // label: 'URL',
-                  name: [templateName, "url"].join("."),
-                  component: "image"
-                },
-                {
-                  type: "string",
-                  label: "Alt",
-                  name: [templateName.replace(/\.props$/, ""), "alt"].join("."),
-                  component: "text"
-                },
-                {
-                  type: "string",
-                  label: "Caption",
-                  name: [templateName.replace(/\.props$/, ""), "caption"].join(
-                    "."
-                  ),
-                  component: "text"
-                }
-              ]
-            };
-          }
-          if (!isLastItem2) {
-            return this.getFieldGroup({
-              formOrObjectField: template,
-              values: props,
-              namePath,
-              namePathIndex: namePathIndex + Math.max(4, childrenIndex + propsIndex)
-            });
-          }
-          if (!template) {
-            throw new Error(`Expected template value for field ${item.name}`);
-          }
-          return {
-            ...template,
-            name: templateName,
-            fields: template.fields.map((field2) => {
-              return {
-                ...field2,
-                name: [templateName, field2.name].join(".")
-              };
-            })
-          };
-        }
-      } else {
-        const fieldName = [...namePath.slice(0, namePathIndex)].join(".");
-        if (!fieldName) {
-          return formOrObjectField;
-        }
-        return {
-          ...formOrObjectField,
-          name: fieldName,
-          fields: formOrObjectField.fields.map((field2) => {
-            return {
-              ...field2,
-              name: [fieldName, field2.name].join(".")
-            };
-          })
-        };
-      }
+  function cancel() {
+    if (timerId !== void 0) {
+      clearTimeout(timerId);
     }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = void 0;
   }
-}
-function updateEverything(form, values) {
-  Object.entries(values).forEach(([path3, value]) => {
-    form.change(path3, value);
-  });
-}
-function updateSelectively(form, values, prefix) {
-  const activePath = form.getState().active;
-  Object.entries(values).forEach(([name, value]) => {
-    const path3 = prefix ? `${prefix}.${name}` : name;
-    if (typeof value === "object") {
-      if (typeof activePath === "string" && activePath.startsWith(path3)) {
-        updateSelectively(form, value, path3);
-      } else {
-        form.change(path3, value);
+  function flush() {
+    return timerId === void 0 ? result : trailingEdge(now());
+  }
+  function debounced() {
+    var time2 = now(), isInvoking = shouldInvoke(time2);
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time2;
+    if (isInvoking) {
+      if (timerId === void 0) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
       }
-    } else if (path3 !== activePath) {
-      form.change(path3, value);
     }
-  });
-}
-function usePlugins(plugins2) {
-  const cms = useCMS$1();
-  let pluginArray;
-  if (Array.isArray(plugins2)) {
-    pluginArray = plugins2;
-  } else {
-    pluginArray = [plugins2];
+    if (timerId === void 0) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
   }
-  React.useEffect(() => {
-    pluginArray.forEach((plugin) => {
-      if (plugin) {
-        cms.plugins.add(plugin);
-      }
-    });
-    return () => {
-      pluginArray.forEach((plugin) => {
-        if (plugin) {
-          cms.plugins.remove(plugin);
-        }
-      });
-    };
-  }, [cms.plugins, ...pluginArray]);
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
 }
-function useSubscribable(subscribable, cb) {
-  const [, s2] = React.useState(0);
-  React.useEffect(() => {
-    return subscribable.subscribe(() => {
-      s2((x) => x + 1);
-      if (cb)
-        cb();
-    });
+var debounce_1 = debounce$1;
+const debounce$2 = /* @__PURE__ */ getDefaultExportFromCjs(debounce_1);
+var debounce = debounce_1, isObject$b = isObject_1;
+var FUNC_ERROR_TEXT$2 = "Expected a function";
+function throttle(func, wait, options) {
+  var leading = true, trailing = true;
+  if (typeof func != "function") {
+    throw new TypeError(FUNC_ERROR_TEXT$2);
+  }
+  if (isObject$b(options)) {
+    leading = "leading" in options ? !!options.leading : leading;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    "leading": leading,
+    "maxWait": wait,
+    "trailing": trailing
   });
 }
-function wrapFieldsWithMeta(Field2) {
-  return (props) => {
-    return /* @__PURE__ */ React.createElement(
-      FieldMeta,
-      {
-        name: props.input.name,
-        label: props.field.label,
-        description: props.field.description,
-        error: props.meta.error,
-        index: props.index,
-        tinaForm: props.tinaForm,
-        field: props.field,
-        focusIntent: props.field.focusIntent,
-        hoverIntent: props.field.hoverIntent
-      },
-      /* @__PURE__ */ React.createElement(Field2, { ...props })
-    );
-  };
-}
-function wrapFieldWithNoHeader(Field2) {
-  return (props) => {
-    return /* @__PURE__ */ React.createElement(
-      FieldMeta,
-      {
-        name: props.input.name,
-        label: false,
-        description: "",
-        error: props.meta.error,
-        index: props.index,
-        tinaForm: props.tinaForm,
-        focusIntent: props.field.focusIntent,
-        hoverIntent: props.field.hoverIntent
-      },
-      /* @__PURE__ */ React.createElement(Field2, { ...props })
-    );
-  };
-}
-function wrapFieldWithError(Field2) {
-  return (props) => {
-    return /* @__PURE__ */ React.createElement(
-      FieldMeta,
-      {
-        name: props.input.name,
-        label: false,
-        description: props.field.description,
-        error: props.meta.error,
-        index: props.index,
-        tinaForm: props.tinaForm,
-        focusIntent: props.field.focusIntent,
-        hoverIntent: props.field.hoverIntent
-      },
-      /* @__PURE__ */ React.createElement(Field2, { ...props })
-    );
-  };
-}
-const FieldMeta = ({
-  name,
-  label,
-  description,
-  error: error2,
-  margin = true,
-  children,
-  index,
-  tinaForm,
-  field,
-  focusIntent,
-  hoverIntent,
-  ...props
-}) => {
-  const cms = useCMS$1();
-  const { dispatch: setHoveredField } = useEvent("field:hover");
-  const { dispatch: setFocusedField } = useEvent("field:focus");
-  const isActive = !!focusIntent;
-  const isHovering = !!hoverIntent;
-  const handleClick = () => {
-    const existingForm = cms.state.forms.find(
-      (form) => form.tinaForm.id === tinaForm.id
-    );
-    const isAlreadyActive = (existingForm == null ? void 0 : existingForm.activeFieldName) === name;
-    if (isAlreadyActive) {
-      return;
-    }
-    setFocusedField({ id: tinaForm.id, fieldName: name });
-    cms.dispatch({
-      type: "forms:set-active-field-name",
-      value: { formId: tinaForm.id, fieldName: name }
-    });
-  };
-  return /* @__PURE__ */ React.createElement(
-    FieldWrapper,
-    {
-      margin,
-      field,
-      onMouseOver: () => setHoveredField({ id: tinaForm.id, fieldName: name }),
-      onMouseOut: () => setHoveredField({ id: null, fieldName: null }),
-      onClick: handleClick,
-      style: { zIndex: index ? 1e3 - index : void 0 },
-      "data-tina-field-active": isActive ? "true" : void 0,
-      "data-tina-field-hovering": isHovering ? "true" : void 0,
-      ...props
-    },
-    (label !== false || description) && /* @__PURE__ */ React.createElement(FieldLabel, { name }, label !== false && /* @__PURE__ */ React.createElement(React.Fragment, null, label || name), description && /* @__PURE__ */ React.createElement(FieldDescription, null, description)),
-    children,
-    error2 && typeof error2 === "string" && /* @__PURE__ */ React.createElement(FieldError, null, error2)
-  );
-};
-const FieldWrapper = ({
-  margin,
-  children,
-  field,
-  "data-tina-field-active": dataActive,
-  "data-tina-field-hovering": dataHovering,
-  ...props
-}) => {
-  const isActive = dataActive === "true";
-  const isHovering = dataHovering === "true";
-  const getFieldStateClasses = () => {
-    const elements = ["input", "textarea", "select", ".ProseMirror"];
-    const buildClasses = (color) => {
-      return elements.map(
-        (el) => `[&_${el}]:!border-${color} [&_${el}]:!ring-2 [&_${el}]:!ring-${color}/20`
-      ).join(" ");
-    };
-    if (isActive) {
-      return buildClasses("tina-orange-dark");
+var throttle_1 = throttle;
+const throttle$1 = /* @__PURE__ */ getDefaultExportFromCjs(throttle_1);
+const t$2 = (t2) => "object" == typeof t2 && null != t2 && 1 === t2.nodeType, e$3 = (t2, e3) => (!e3 || "hidden" !== t2) && ("visible" !== t2 && "clip" !== t2), n$3 = (t2, n2) => {
+  if (t2.clientHeight < t2.scrollHeight || t2.clientWidth < t2.scrollWidth) {
+    const o3 = getComputedStyle(t2, null);
+    return e$3(o3.overflowY, n2) || e$3(o3.overflowX, n2) || ((t3) => {
+      const e3 = ((t4) => {
+        if (!t4.ownerDocument || !t4.ownerDocument.defaultView)
+          return null;
+        try {
+          return t4.ownerDocument.defaultView.frameElement;
+        } catch (t5) {
+          return null;
+        }
+      })(t3);
+      return !!e3 && (e3.clientHeight < t3.scrollHeight || e3.clientWidth < t3.scrollWidth);
+    })(t2);
+  }
+  return false;
+}, o$3 = (t2, e3, n2, o3, l2, r2, i2, s2) => r2 < t2 && i2 > e3 || r2 > t2 && i2 < e3 ? 0 : r2 <= t2 && s2 <= n2 || i2 >= e3 && s2 >= n2 ? r2 - t2 - o3 : i2 > e3 && s2 < n2 || r2 < t2 && s2 > n2 ? i2 - e3 + l2 : 0, l$2 = (t2) => {
+  const e3 = t2.parentElement;
+  return null == e3 ? t2.getRootNode().host || null : e3;
+}, r$3 = (e3, r2) => {
+  var i2, s2, d2, h;
+  if ("undefined" == typeof document)
+    return [];
+  const { scrollMode: c2, block: f2, inline: u2, boundary: a2, skipOverflowHiddenElements: g } = r2, p2 = "function" == typeof a2 ? a2 : (t2) => t2 !== a2;
+  if (!t$2(e3))
+    throw new TypeError("Invalid target");
+  const m = document.scrollingElement || document.documentElement, w2 = [];
+  let W = e3;
+  for (; t$2(W) && p2(W); ) {
+    if (W = l$2(W), W === m) {
+      w2.push(W);
+      break;
     }
-    if (isHovering) {
-      return buildClasses("blue-500");
+    null != W && W === document.body && n$3(W) && !n$3(document.documentElement) || null != W && n$3(W, g) && w2.push(W);
+  }
+  const b = null != (s2 = null == (i2 = window.visualViewport) ? void 0 : i2.width) ? s2 : innerWidth, H = null != (h = null == (d2 = window.visualViewport) ? void 0 : d2.height) ? h : innerHeight, { scrollX: y, scrollY: M } = window, { height: v, width: E, top: x, right: C, bottom: I, left: R } = e3.getBoundingClientRect(), { top: T, right: B, bottom: F, left: V } = ((t2) => {
+    const e4 = window.getComputedStyle(t2);
+    return { top: parseFloat(e4.scrollMarginTop) || 0, right: parseFloat(e4.scrollMarginRight) || 0, bottom: parseFloat(e4.scrollMarginBottom) || 0, left: parseFloat(e4.scrollMarginLeft) || 0 };
+  })(e3);
+  let k = "start" === f2 || "nearest" === f2 ? x - T : "end" === f2 ? I + F : x + v / 2 - T + F, D = "center" === u2 ? R + E / 2 - V + B : "end" === u2 ? C + B : R - V;
+  const L = [];
+  for (let t2 = 0; t2 < w2.length; t2++) {
+    const e4 = w2[t2], { height: l2, width: r3, top: i3, right: s3, bottom: d3, left: h2 } = e4.getBoundingClientRect();
+    if ("if-needed" === c2 && x >= 0 && R >= 0 && I <= H && C <= b && (e4 === m && !n$3(e4) || x >= i3 && I <= d3 && R >= h2 && C <= s3))
+      return L;
+    const a3 = getComputedStyle(e4), g2 = parseInt(a3.borderLeftWidth, 10), p3 = parseInt(a3.borderTopWidth, 10), W2 = parseInt(a3.borderRightWidth, 10), T2 = parseInt(a3.borderBottomWidth, 10);
+    let B2 = 0, F2 = 0;
+    const V2 = "offsetWidth" in e4 ? e4.offsetWidth - e4.clientWidth - g2 - W2 : 0, S = "offsetHeight" in e4 ? e4.offsetHeight - e4.clientHeight - p3 - T2 : 0, X2 = "offsetWidth" in e4 ? 0 === e4.offsetWidth ? 0 : r3 / e4.offsetWidth : 0, Y = "offsetHeight" in e4 ? 0 === e4.offsetHeight ? 0 : l2 / e4.offsetHeight : 0;
+    if (m === e4)
+      B2 = "start" === f2 ? k : "end" === f2 ? k - H : "nearest" === f2 ? o$3(M, M + H, H, p3, T2, M + k, M + k + v, v) : k - H / 2, F2 = "start" === u2 ? D : "center" === u2 ? D - b / 2 : "end" === u2 ? D - b : o$3(y, y + b, b, g2, W2, y + D, y + D + E, E), B2 = Math.max(0, B2 + M), F2 = Math.max(0, F2 + y);
+    else {
+      B2 = "start" === f2 ? k - i3 - p3 : "end" === f2 ? k - d3 + T2 + S : "nearest" === f2 ? o$3(i3, d3, l2, p3, T2 + S, k, k + v, v) : k - (i3 + l2 / 2) + S / 2, F2 = "start" === u2 ? D - h2 - g2 : "center" === u2 ? D - (h2 + r3 / 2) + V2 / 2 : "end" === u2 ? D - s3 + W2 + V2 : o$3(h2, s3, r3, g2, W2 + V2, D, D + E, E);
+      const { scrollLeft: t3, scrollTop: n2 } = e4;
+      B2 = 0 === Y ? 0 : Math.max(0, Math.min(n2 + B2 / Y, e4.scrollHeight - l2 / Y + S)), F2 = 0 === X2 ? 0 : Math.max(0, Math.min(t3 + F2 / X2, e4.scrollWidth - r3 / X2 + V2)), k += n2 - B2, D += t3 - F2;
     }
-    return "";
-  };
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `relative w-full px-2 ${margin ? "mb-5 last:mb-0" : ""} ${(field == null ? void 0 : field.width) === "half" ? "@sm:w-1/2" : ""} ${getFieldStateClasses()}`,
-      "data-tina-field-active": dataActive,
-      "data-tina-field-hovering": dataHovering,
-      ...props
-    },
-    children
-  );
-};
-const FieldLabel = ({
-  children,
-  className,
-  name,
-  ...props
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    "label",
-    {
-      htmlFor: name,
-      className: `block font-sans text-xs font-semibold text-gray-700 whitespace-normal mb-2 ${className}`,
-      ...props
-    },
-    children
-  );
-};
-const FieldDescription = ({
-  children,
-  className,
-  ...props
-}) => {
-  if (typeof children === "string") {
-    return /* @__PURE__ */ React.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.createElement(
-    "span",
-    {
-      className: `block font-sans text-xs italic font-light text-gray-400 pt-0.5 whitespace-normal m-0 ${className}`,
-      ...props
-    },
-    children
-  );
-};
-const FieldError = ({
-  children,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: `block font-sans text-xs font-normal text-red-500 pt-3 animate-slide-in whitespace-normal m-0  ${className}`,
-      ...props
-    },
-    children
-  );
-};
-const EditorContext$1 = React__default.createContext({
-  fieldName: "",
-  rawMode: false,
-  setRawMode: () => {
-  },
-  templates: []
-});
-const useEditorContext = () => {
-  return React__default.useContext(EditorContext$1);
-};
-const useTemplates = () => {
-  return React__default.useContext(EditorContext$1);
-};
-var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-function getDefaultExportFromCjs(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
-}
-var direction_1 = direction;
-var RTL = "֑-߿יִ-﷽ﹰ-ﻼ";
-var LTR = "A-Za-zÀ-ÖØ-öø-ʸ̀-֐ࠀ-῿‎Ⰰ-﬜︀-﹯﻽-￿";
-var rtl = new RegExp("^[^" + LTR + "]*[" + RTL + "]");
-var ltr = new RegExp("^[^" + RTL + "]*[" + LTR + "]");
-function direction(value) {
-  value = String(value || "");
-  if (rtl.test(value)) {
-    return "rtl";
-  }
-  if (ltr.test(value)) {
-    return "ltr";
-  }
-  return "neutral";
-}
-const getDirection = /* @__PURE__ */ getDefaultExportFromCjs(direction_1);
-function isObject$e(value) {
-  var type = typeof value;
-  return value != null && (type == "object" || type == "function");
-}
-var isObject_1 = isObject$e;
-var freeGlobal$1 = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-var _freeGlobal = freeGlobal$1;
-var freeGlobal = _freeGlobal;
-var freeSelf = typeof self == "object" && self && self.Object === Object && self;
-var root$9 = freeGlobal || freeSelf || Function("return this")();
-var _root = root$9;
-var root$8 = _root;
-var now$1 = function() {
-  return root$8.Date.now();
-};
-var now_1 = now$1;
-var reWhitespace = /\s/;
-function trimmedEndIndex$1(string3) {
-  var index = string3.length;
-  while (index-- && reWhitespace.test(string3.charAt(index))) {
-  }
-  return index;
-}
-var _trimmedEndIndex = trimmedEndIndex$1;
-var trimmedEndIndex = _trimmedEndIndex;
-var reTrimStart = /^\s+/;
-function baseTrim$1(string3) {
-  return string3 ? string3.slice(0, trimmedEndIndex(string3) + 1).replace(reTrimStart, "") : string3;
-}
-var _baseTrim = baseTrim$1;
-var root$7 = _root;
-var Symbol$7 = root$7.Symbol;
-var _Symbol = Symbol$7;
-var Symbol$6 = _Symbol;
-var objectProto$f = Object.prototype;
-var hasOwnProperty$c = objectProto$f.hasOwnProperty;
-var nativeObjectToString$1 = objectProto$f.toString;
-var symToStringTag$1 = Symbol$6 ? Symbol$6.toStringTag : void 0;
-function getRawTag$1(value) {
-  var isOwn = hasOwnProperty$c.call(value, symToStringTag$1), tag = value[symToStringTag$1];
-  try {
-    value[symToStringTag$1] = void 0;
-    var unmasked = true;
-  } catch (e3) {
-  }
-  var result = nativeObjectToString$1.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag$1] = tag;
-    } else {
-      delete value[symToStringTag$1];
-    }
-  }
-  return result;
-}
-var _getRawTag = getRawTag$1;
-var objectProto$e = Object.prototype;
-var nativeObjectToString = objectProto$e.toString;
-function objectToString$1(value) {
-  return nativeObjectToString.call(value);
-}
-var _objectToString = objectToString$1;
-var Symbol$5 = _Symbol, getRawTag = _getRawTag, objectToString = _objectToString;
-var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
-var symToStringTag = Symbol$5 ? Symbol$5.toStringTag : void 0;
-function baseGetTag$6(value) {
-  if (value == null) {
-    return value === void 0 ? undefinedTag : nullTag;
-  }
-  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
-}
-var _baseGetTag = baseGetTag$6;
-function isObjectLike$9(value) {
-  return value != null && typeof value == "object";
-}
-var isObjectLike_1 = isObjectLike$9;
-var baseGetTag$5 = _baseGetTag, isObjectLike$8 = isObjectLike_1;
-var symbolTag$3 = "[object Symbol]";
-function isSymbol$4(value) {
-  return typeof value == "symbol" || isObjectLike$8(value) && baseGetTag$5(value) == symbolTag$3;
-}
-var isSymbol_1 = isSymbol$4;
-var baseTrim = _baseTrim, isObject$d = isObject_1, isSymbol$3 = isSymbol_1;
-var NAN = 0 / 0;
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-var reIsBinary = /^0b[01]+$/i;
-var reIsOctal = /^0o[0-7]+$/i;
-var freeParseInt = parseInt;
-function toNumber$1(value) {
-  if (typeof value == "number") {
-    return value;
-  }
-  if (isSymbol$3(value)) {
-    return NAN;
-  }
-  if (isObject$d(value)) {
-    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
-    value = isObject$d(other) ? other + "" : other;
-  }
-  if (typeof value != "string") {
-    return value === 0 ? value : +value;
-  }
-  value = baseTrim(value);
-  var isBinary = reIsBinary.test(value);
-  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
-}
-var toNumber_1 = toNumber$1;
-var isObject$c = isObject_1, now = now_1, toNumber = toNumber_1;
-var FUNC_ERROR_TEXT$3 = "Expected a function";
-var nativeMax$1 = Math.max, nativeMin = Math.min;
-function debounce$1(func, wait, options) {
-  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
-  if (typeof func != "function") {
-    throw new TypeError(FUNC_ERROR_TEXT$3);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject$c(options)) {
-    leading = !!options.leading;
-    maxing = "maxWait" in options;
-    maxWait = maxing ? nativeMax$1(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = "trailing" in options ? !!options.trailing : trailing;
-  }
-  function invokeFunc(time2) {
-    var args = lastArgs, thisArg = lastThis;
-    lastArgs = lastThis = void 0;
-    lastInvokeTime = time2;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-  function leadingEdge(time2) {
-    lastInvokeTime = time2;
-    timerId = setTimeout(timerExpired, wait);
-    return leading ? invokeFunc(time2) : result;
-  }
-  function remainingWait(time2) {
-    var timeSinceLastCall = time2 - lastCallTime, timeSinceLastInvoke = time2 - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
-    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
-  }
-  function shouldInvoke(time2) {
-    var timeSinceLastCall = time2 - lastCallTime, timeSinceLastInvoke = time2 - lastInvokeTime;
-    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
-  }
-  function timerExpired() {
-    var time2 = now();
-    if (shouldInvoke(time2)) {
-      return trailingEdge(time2);
-    }
-    timerId = setTimeout(timerExpired, remainingWait(time2));
-  }
-  function trailingEdge(time2) {
-    timerId = void 0;
-    if (trailing && lastArgs) {
-      return invokeFunc(time2);
-    }
-    lastArgs = lastThis = void 0;
-    return result;
-  }
-  function cancel() {
-    if (timerId !== void 0) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = void 0;
-  }
-  function flush() {
-    return timerId === void 0 ? result : trailingEdge(now());
-  }
-  function debounced() {
-    var time2 = now(), isInvoking = shouldInvoke(time2);
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time2;
-    if (isInvoking) {
-      if (timerId === void 0) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        clearTimeout(timerId);
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === void 0) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
-var debounce_1 = debounce$1;
-const debounce$2 = /* @__PURE__ */ getDefaultExportFromCjs(debounce_1);
-var debounce = debounce_1, isObject$b = isObject_1;
-var FUNC_ERROR_TEXT$2 = "Expected a function";
-function throttle(func, wait, options) {
-  var leading = true, trailing = true;
-  if (typeof func != "function") {
-    throw new TypeError(FUNC_ERROR_TEXT$2);
-  }
-  if (isObject$b(options)) {
-    leading = "leading" in options ? !!options.leading : leading;
-    trailing = "trailing" in options ? !!options.trailing : trailing;
-  }
-  return debounce(func, wait, {
-    "leading": leading,
-    "maxWait": wait,
-    "trailing": trailing
-  });
-}
-var throttle_1 = throttle;
-const throttle$1 = /* @__PURE__ */ getDefaultExportFromCjs(throttle_1);
-const t$2 = (t2) => "object" == typeof t2 && null != t2 && 1 === t2.nodeType, e$3 = (t2, e3) => (!e3 || "hidden" !== t2) && ("visible" !== t2 && "clip" !== t2), n$3 = (t2, n2) => {
-  if (t2.clientHeight < t2.scrollHeight || t2.clientWidth < t2.scrollWidth) {
-    const o3 = getComputedStyle(t2, null);
-    return e$3(o3.overflowY, n2) || e$3(o3.overflowX, n2) || ((t3) => {
-      const e3 = ((t4) => {
-        if (!t4.ownerDocument || !t4.ownerDocument.defaultView)
-          return null;
-        try {
-          return t4.ownerDocument.defaultView.frameElement;
-        } catch (t5) {
-          return null;
-        }
-      })(t3);
-      return !!e3 && (e3.clientHeight < t3.scrollHeight || e3.clientWidth < t3.scrollWidth);
-    })(t2);
-  }
-  return false;
-}, o$3 = (t2, e3, n2, o3, l2, r2, i2, s2) => r2 < t2 && i2 > e3 || r2 > t2 && i2 < e3 ? 0 : r2 <= t2 && s2 <= n2 || i2 >= e3 && s2 >= n2 ? r2 - t2 - o3 : i2 > e3 && s2 < n2 || r2 < t2 && s2 > n2 ? i2 - e3 + l2 : 0, l$2 = (t2) => {
-  const e3 = t2.parentElement;
-  return null == e3 ? t2.getRootNode().host || null : e3;
-}, r$3 = (e3, r2) => {
-  var i2, s2, d2, h;
-  if ("undefined" == typeof document)
-    return [];
-  const { scrollMode: c2, block: f2, inline: u2, boundary: a2, skipOverflowHiddenElements: g } = r2, p2 = "function" == typeof a2 ? a2 : (t2) => t2 !== a2;
-  if (!t$2(e3))
-    throw new TypeError("Invalid target");
-  const m = document.scrollingElement || document.documentElement, w2 = [];
-  let W = e3;
-  for (; t$2(W) && p2(W); ) {
-    if (W = l$2(W), W === m) {
-      w2.push(W);
-      break;
-    }
-    null != W && W === document.body && n$3(W) && !n$3(document.documentElement) || null != W && n$3(W, g) && w2.push(W);
-  }
-  const b = null != (s2 = null == (i2 = window.visualViewport) ? void 0 : i2.width) ? s2 : innerWidth, H = null != (h = null == (d2 = window.visualViewport) ? void 0 : d2.height) ? h : innerHeight, { scrollX: y, scrollY: M } = window, { height: v, width: E, top: x, right: C, bottom: I, left: R } = e3.getBoundingClientRect(), { top: T, right: B, bottom: F, left: V } = ((t2) => {
-    const e4 = window.getComputedStyle(t2);
-    return { top: parseFloat(e4.scrollMarginTop) || 0, right: parseFloat(e4.scrollMarginRight) || 0, bottom: parseFloat(e4.scrollMarginBottom) || 0, left: parseFloat(e4.scrollMarginLeft) || 0 };
-  })(e3);
-  let k = "start" === f2 || "nearest" === f2 ? x - T : "end" === f2 ? I + F : x + v / 2 - T + F, D = "center" === u2 ? R + E / 2 - V + B : "end" === u2 ? C + B : R - V;
-  const L = [];
-  for (let t2 = 0; t2 < w2.length; t2++) {
-    const e4 = w2[t2], { height: l2, width: r3, top: i3, right: s3, bottom: d3, left: h2 } = e4.getBoundingClientRect();
-    if ("if-needed" === c2 && x >= 0 && R >= 0 && I <= H && C <= b && (e4 === m && !n$3(e4) || x >= i3 && I <= d3 && R >= h2 && C <= s3))
-      return L;
-    const a3 = getComputedStyle(e4), g2 = parseInt(a3.borderLeftWidth, 10), p3 = parseInt(a3.borderTopWidth, 10), W2 = parseInt(a3.borderRightWidth, 10), T2 = parseInt(a3.borderBottomWidth, 10);
-    let B2 = 0, F2 = 0;
-    const V2 = "offsetWidth" in e4 ? e4.offsetWidth - e4.clientWidth - g2 - W2 : 0, S = "offsetHeight" in e4 ? e4.offsetHeight - e4.clientHeight - p3 - T2 : 0, X2 = "offsetWidth" in e4 ? 0 === e4.offsetWidth ? 0 : r3 / e4.offsetWidth : 0, Y = "offsetHeight" in e4 ? 0 === e4.offsetHeight ? 0 : l2 / e4.offsetHeight : 0;
-    if (m === e4)
-      B2 = "start" === f2 ? k : "end" === f2 ? k - H : "nearest" === f2 ? o$3(M, M + H, H, p3, T2, M + k, M + k + v, v) : k - H / 2, F2 = "start" === u2 ? D : "center" === u2 ? D - b / 2 : "end" === u2 ? D - b : o$3(y, y + b, b, g2, W2, y + D, y + D + E, E), B2 = Math.max(0, B2 + M), F2 = Math.max(0, F2 + y);
-    else {
-      B2 = "start" === f2 ? k - i3 - p3 : "end" === f2 ? k - d3 + T2 + S : "nearest" === f2 ? o$3(i3, d3, l2, p3, T2 + S, k, k + v, v) : k - (i3 + l2 / 2) + S / 2, F2 = "start" === u2 ? D - h2 - g2 : "center" === u2 ? D - (h2 + r3 / 2) + V2 / 2 : "end" === u2 ? D - s3 + W2 + V2 : o$3(h2, s3, r3, g2, W2 + V2, D, D + E, E);
-      const { scrollLeft: t3, scrollTop: n2 } = e4;
-      B2 = 0 === Y ? 0 : Math.max(0, Math.min(n2 + B2 / Y, e4.scrollHeight - l2 / Y + S)), F2 = 0 === X2 ? 0 : Math.max(0, Math.min(t3 + F2 / X2, e4.scrollWidth - r3 / X2 + V2)), k += n2 - B2, D += t3 - F2;
-    }
-    L.push({ el: e4, top: B2, left: F2 });
-  }
-  return L;
+    L.push({ el: e4, top: B2, left: F2 });
+  }
+  return L;
 };
 const o$2 = (t2) => false === t2 ? { block: "end", inline: "nearest" } : ((t3) => t3 === Object(t3) && 0 !== Object.keys(t3).length)(t2) ? t2 : { block: "start", inline: "nearest" };
 function e$2(e3, r2) {
@@ -37895,408 +37325,929 @@ const TableElement = withHOC(
     if (readOnly || !selected) {
       return content;
     }
-    return /* @__PURE__ */ React__default.createElement(TableFloatingToolbar, null, content);
-  })
-);
-const TableFloatingToolbar = withRef$1(
-  ({ children, ...props }, ref) => {
-    const { tf } = useEditorPlugin(TablePlugin);
-    const element = useElement();
-    const { props: buttonProps } = useRemoveNodeButton({ element });
-    const collapsed = useEditorSelector(
-      (editor) => !editor.api.isExpanded(),
-      []
-    );
-    const { canMerge, canSplit } = useTableMergeState();
-    return /* @__PURE__ */ React__default.createElement(Popover$3, { open: canMerge || canSplit || collapsed, modal: false }, /* @__PURE__ */ React__default.createElement(PopoverAnchor, { asChild: true }, children), /* @__PURE__ */ React__default.createElement(
-      PopoverContent$2,
-      {
-        ref,
-        asChild: true,
-        onOpenAutoFocus: (e3) => e3.preventDefault(),
-        contentEditable: false,
-        ...props
-      },
-      /* @__PURE__ */ React__default.createElement(
-        Toolbar,
-        {
-          className: "scrollbar-hide flex w-auto max-w-[80vw] flex-row overflow-x-auto rounded-md border bg-popover p-1 shadow-md print:hidden",
-          contentEditable: false
-        },
-        /* @__PURE__ */ React__default.createElement(ToolbarGroup, null, /* @__PURE__ */ React__default.createElement(ColorDropdownMenu, { tooltip: "Background color" }, /* @__PURE__ */ React__default.createElement(PaintBucketIcon, null)), canMerge && /* @__PURE__ */ React__default.createElement(
-          ToolbarButton,
-          {
-            onClick: () => tf.table.merge(),
-            onMouseDown: (e3) => e3.preventDefault(),
-            tooltip: "Merge cells"
-          },
-          /* @__PURE__ */ React__default.createElement(CombineIcon, null)
-        ), canSplit && /* @__PURE__ */ React__default.createElement(
-          ToolbarButton,
-          {
-            onClick: () => tf.table.split(),
-            onMouseDown: (e3) => e3.preventDefault(),
-            tooltip: "Split cell"
-          },
-          /* @__PURE__ */ React__default.createElement(SquareSplitHorizontalIcon, null)
-        ), /* @__PURE__ */ React__default.createElement(DropdownMenu$1, { modal: false }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement(ToolbarButton, { tooltip: "Cell borders" }, /* @__PURE__ */ React__default.createElement(Grid2X2Icon, null))), /* @__PURE__ */ React__default.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React__default.createElement(TableBordersDropdownMenuContent, null))), collapsed && /* @__PURE__ */ React__default.createElement(ToolbarGroup, null, /* @__PURE__ */ React__default.createElement(ToolbarButton, { tooltip: "Delete table", ...buttonProps }, /* @__PURE__ */ React__default.createElement(Trash2Icon, null)))),
-        collapsed && /* @__PURE__ */ React__default.createElement(ToolbarGroup, null, /* @__PURE__ */ React__default.createElement(
-          ToolbarButton,
-          {
-            onClick: () => {
-              tf.insert.tableRow({ before: true });
-            },
-            onMouseDown: (e3) => e3.preventDefault(),
-            tooltip: "Insert row before"
-          },
-          /* @__PURE__ */ React__default.createElement(ArrowUp, null)
-        ), /* @__PURE__ */ React__default.createElement(
-          ToolbarButton,
-          {
-            onClick: () => {
-              tf.insert.tableRow();
-            },
-            onMouseDown: (e3) => e3.preventDefault(),
-            tooltip: "Insert row after"
-          },
-          /* @__PURE__ */ React__default.createElement(ArrowDown, null)
-        ), /* @__PURE__ */ React__default.createElement(
-          ToolbarButton,
-          {
-            onClick: () => {
-              tf.remove.tableRow();
-            },
-            onMouseDown: (e3) => e3.preventDefault(),
-            tooltip: "Delete row"
-          },
-          /* @__PURE__ */ React__default.createElement(XIcon, null)
-        )),
-        collapsed && /* @__PURE__ */ React__default.createElement(ToolbarGroup, null, /* @__PURE__ */ React__default.createElement(
-          ToolbarButton,
-          {
-            onClick: () => {
-              tf.insert.tableColumn({ before: true });
-            },
-            onMouseDown: (e3) => e3.preventDefault(),
-            tooltip: "Insert column before"
-          },
-          /* @__PURE__ */ React__default.createElement(ArrowLeft, null)
-        ), /* @__PURE__ */ React__default.createElement(
-          ToolbarButton,
-          {
-            onClick: () => {
-              tf.insert.tableColumn();
-            },
-            onMouseDown: (e3) => e3.preventDefault(),
-            tooltip: "Insert column after"
-          },
-          /* @__PURE__ */ React__default.createElement(ArrowRight, null)
-        ), /* @__PURE__ */ React__default.createElement(
-          ToolbarButton,
-          {
-            onClick: () => {
-              tf.remove.tableColumn();
-            },
-            onMouseDown: (e3) => e3.preventDefault(),
-            tooltip: "Delete column"
-          },
-          /* @__PURE__ */ React__default.createElement(XIcon, null)
-        ))
-      )
-    ));
+    return /* @__PURE__ */ React__default.createElement(TableFloatingToolbar, null, content);
+  })
+);
+const TableFloatingToolbar = withRef$1(
+  ({ children, ...props }, ref) => {
+    const { tf } = useEditorPlugin(TablePlugin);
+    const element = useElement();
+    const { props: buttonProps } = useRemoveNodeButton({ element });
+    const collapsed = useEditorSelector(
+      (editor) => !editor.api.isExpanded(),
+      []
+    );
+    const { canMerge, canSplit } = useTableMergeState();
+    return /* @__PURE__ */ React__default.createElement(Popover$3, { open: canMerge || canSplit || collapsed, modal: false }, /* @__PURE__ */ React__default.createElement(PopoverAnchor, { asChild: true }, children), /* @__PURE__ */ React__default.createElement(
+      PopoverContent$2,
+      {
+        ref,
+        asChild: true,
+        onOpenAutoFocus: (e3) => e3.preventDefault(),
+        contentEditable: false,
+        ...props
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Toolbar,
+        {
+          className: "scrollbar-hide flex w-auto max-w-[80vw] flex-row overflow-x-auto rounded-md border bg-popover p-1 shadow-md print:hidden",
+          contentEditable: false
+        },
+        /* @__PURE__ */ React__default.createElement(ToolbarGroup, null, /* @__PURE__ */ React__default.createElement(ColorDropdownMenu, { tooltip: "Background color" }, /* @__PURE__ */ React__default.createElement(PaintBucketIcon, null)), canMerge && /* @__PURE__ */ React__default.createElement(
+          ToolbarButton,
+          {
+            onClick: () => tf.table.merge(),
+            onMouseDown: (e3) => e3.preventDefault(),
+            tooltip: "Merge cells"
+          },
+          /* @__PURE__ */ React__default.createElement(CombineIcon, null)
+        ), canSplit && /* @__PURE__ */ React__default.createElement(
+          ToolbarButton,
+          {
+            onClick: () => tf.table.split(),
+            onMouseDown: (e3) => e3.preventDefault(),
+            tooltip: "Split cell"
+          },
+          /* @__PURE__ */ React__default.createElement(SquareSplitHorizontalIcon, null)
+        ), /* @__PURE__ */ React__default.createElement(DropdownMenu$1, { modal: false }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement(ToolbarButton, { tooltip: "Cell borders" }, /* @__PURE__ */ React__default.createElement(Grid2X2Icon, null))), /* @__PURE__ */ React__default.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React__default.createElement(TableBordersDropdownMenuContent, null))), collapsed && /* @__PURE__ */ React__default.createElement(ToolbarGroup, null, /* @__PURE__ */ React__default.createElement(ToolbarButton, { tooltip: "Delete table", ...buttonProps }, /* @__PURE__ */ React__default.createElement(Trash2Icon, null)))),
+        collapsed && /* @__PURE__ */ React__default.createElement(ToolbarGroup, null, /* @__PURE__ */ React__default.createElement(
+          ToolbarButton,
+          {
+            onClick: () => {
+              tf.insert.tableRow({ before: true });
+            },
+            onMouseDown: (e3) => e3.preventDefault(),
+            tooltip: "Insert row before"
+          },
+          /* @__PURE__ */ React__default.createElement(ArrowUp, null)
+        ), /* @__PURE__ */ React__default.createElement(
+          ToolbarButton,
+          {
+            onClick: () => {
+              tf.insert.tableRow();
+            },
+            onMouseDown: (e3) => e3.preventDefault(),
+            tooltip: "Insert row after"
+          },
+          /* @__PURE__ */ React__default.createElement(ArrowDown, null)
+        ), /* @__PURE__ */ React__default.createElement(
+          ToolbarButton,
+          {
+            onClick: () => {
+              tf.remove.tableRow();
+            },
+            onMouseDown: (e3) => e3.preventDefault(),
+            tooltip: "Delete row"
+          },
+          /* @__PURE__ */ React__default.createElement(XIcon, null)
+        )),
+        collapsed && /* @__PURE__ */ React__default.createElement(ToolbarGroup, null, /* @__PURE__ */ React__default.createElement(
+          ToolbarButton,
+          {
+            onClick: () => {
+              tf.insert.tableColumn({ before: true });
+            },
+            onMouseDown: (e3) => e3.preventDefault(),
+            tooltip: "Insert column before"
+          },
+          /* @__PURE__ */ React__default.createElement(ArrowLeft, null)
+        ), /* @__PURE__ */ React__default.createElement(
+          ToolbarButton,
+          {
+            onClick: () => {
+              tf.insert.tableColumn();
+            },
+            onMouseDown: (e3) => e3.preventDefault(),
+            tooltip: "Insert column after"
+          },
+          /* @__PURE__ */ React__default.createElement(ArrowRight, null)
+        ), /* @__PURE__ */ React__default.createElement(
+          ToolbarButton,
+          {
+            onClick: () => {
+              tf.remove.tableColumn();
+            },
+            onMouseDown: (e3) => e3.preventDefault(),
+            tooltip: "Delete column"
+          },
+          /* @__PURE__ */ React__default.createElement(XIcon, null)
+        ))
+      )
+    ));
+  }
+);
+const TableBordersDropdownMenuContent = withRef$1((props, ref) => {
+  const editor = useEditorRef();
+  const {
+    getOnSelectTableBorder,
+    hasBottomBorder,
+    hasLeftBorder,
+    hasNoBorders,
+    hasOuterBorders,
+    hasRightBorder,
+    hasTopBorder
+  } = useTableBordersDropdownMenuContentState();
+  return /* @__PURE__ */ React__default.createElement(
+    DropdownMenuContent$1,
+    {
+      ref,
+      className: cn$2("min-w-[220px]"),
+      onCloseAutoFocus: (e3) => {
+        e3.preventDefault();
+        editor.tf.focus();
+      },
+      align: "start",
+      side: "right",
+      sideOffset: 0,
+      ...props
+    },
+    /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasTopBorder,
+        onCheckedChange: getOnSelectTableBorder("top")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "Top Border")
+    ), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasRightBorder,
+        onCheckedChange: getOnSelectTableBorder("right")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "Right Border")
+    ), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasBottomBorder,
+        onCheckedChange: getOnSelectTableBorder("bottom")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "Bottom Border")
+    ), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasLeftBorder,
+        onCheckedChange: getOnSelectTableBorder("left")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "Left Border")
+    )),
+    /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasNoBorders,
+        onCheckedChange: getOnSelectTableBorder("none")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "No Border")
+    ), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasOuterBorders,
+        onCheckedChange: getOnSelectTableBorder("outer")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "Outside Borders")
+    ))
+  );
+});
+function ColorDropdownMenu({ children, tooltip }) {
+  const [open, setOpen] = useState(false);
+  const editor = useEditorRef();
+  const selectedCells = usePluginOption(TablePlugin, "selectedCells");
+  useCallback(
+    (color) => {
+      setOpen(false);
+      setCellBackground(editor, { color, selectedCells: selectedCells ?? [] });
+    },
+    [selectedCells, editor]
+  );
+  const onClearColor = useCallback(() => {
+    setOpen(false);
+    setCellBackground(editor, {
+      color: null,
+      selectedCells: selectedCells ?? []
+    });
+  }, [selectedCells, editor]);
+  return /* @__PURE__ */ React__default.createElement(DropdownMenu$1, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement(ToolbarButton, { tooltip }, children)), /* @__PURE__ */ React__default.createElement(DropdownMenuContent$1, { align: "start" }, /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(DropdownMenuItem$1, { className: "p-2", onClick: onClearColor }, /* @__PURE__ */ React__default.createElement(EraserIcon, null), /* @__PURE__ */ React__default.createElement("span", null, "Clear")))));
+}
+const TableRowElement = withRef$1(
+  ({ children, className, ...props }, ref) => {
+    const selected = useSelected();
+    return /* @__PURE__ */ React__default.createElement(
+      PlateElement,
+      {
+        as: "tr",
+        className: cn$2(className, "group/row"),
+        "data-selected": selected ? "true" : void 0,
+        ...props
+      },
+      children
+    );
+  }
+);
+function classNames$1(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const uuid = () => {
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(
+    /[018]/g,
+    (c2) => (c2 ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c2 / 4).toString(16)
+  );
+};
+const blockClasses = "mt-0.5";
+const headerClasses = "font-normal";
+const Components = () => {
+  return {
+    [SlashInputPlugin.key]: SlashInputElement,
+    [HEADING_KEYS$1.h1]: ({
+      attributes,
+      editor,
+      element,
+      className,
+      ...props
+    }) => /* @__PURE__ */ React__default.createElement(
+      "h1",
+      {
+        ...attributes,
+        ...props,
+        className: classNames$1(
+          headerClasses,
+          blockClasses,
+          className,
+          "text-4xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
+        )
+      }
+    ),
+    [HEADING_KEYS$1.h2]: ({
+      attributes,
+      editor,
+      element,
+      className,
+      ...props
+    }) => /* @__PURE__ */ React__default.createElement(
+      "h2",
+      {
+        ...attributes,
+        ...props,
+        className: classNames$1(
+          headerClasses,
+          blockClasses,
+          className,
+          "text-3xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
+        )
+      }
+    ),
+    [HEADING_KEYS$1.h3]: ({
+      attributes,
+      editor,
+      element,
+      className,
+      ...props
+    }) => /* @__PURE__ */ React__default.createElement(
+      "h3",
+      {
+        ...attributes,
+        ...props,
+        className: classNames$1(
+          headerClasses,
+          blockClasses,
+          className,
+          "text-2xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
+        )
+      }
+    ),
+    [HEADING_KEYS$1.h4]: ({
+      attributes,
+      editor,
+      element,
+      className,
+      ...props
+    }) => /* @__PURE__ */ React__default.createElement(
+      "h4",
+      {
+        ...attributes,
+        ...props,
+        className: classNames$1(
+          headerClasses,
+          blockClasses,
+          className,
+          "text-xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
+        )
+      }
+    ),
+    /** Tailwind prose doesn't style h5 and h6 elements */
+    [HEADING_KEYS$1.h5]: ({
+      attributes,
+      editor,
+      element,
+      className,
+      ...props
+    }) => /* @__PURE__ */ React__default.createElement(
+      "h5",
+      {
+        ...attributes,
+        ...props,
+        className: classNames$1(
+          headerClasses,
+          blockClasses,
+          className,
+          "text-lg mb-4 last:mb-0 mt-6 first:mt-0"
+        ),
+        style: { fontFamily: "'Libre Baskerville', serif", fontWeight: "400" }
+      }
+    ),
+    [HEADING_KEYS$1.h6]: ({
+      attributes,
+      editor,
+      element,
+      className,
+      ...props
+    }) => /* @__PURE__ */ React__default.createElement(
+      "h6",
+      {
+        ...attributes,
+        ...props,
+        className: classNames$1(
+          headerClasses,
+          blockClasses,
+          className,
+          "text-base mb-4 last:mb-0 mt-6 first:mt-0"
+        ),
+        style: { fontFamily: "'Libre Baskerville', serif", fontWeight: "400" }
+      }
+    ),
+    [ParagraphPlugin.key]: ParagraphElement,
+    [BlockquotePlugin.key]: BlockquoteElement,
+    [CodeBlockPlugin.key]: CodeBlockElement,
+    [CodeLinePlugin.key]: CodeLineElement,
+    [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,
+    html: ({ attributes, editor, element, children, className }) => {
+      return /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          ...attributes,
+          className: classNames$1(
+            "font-mono text-sm bg-green-100 cursor-not-allowed mb-4",
+            className
+          )
+        },
+        children,
+        element.value
+      );
+    },
+    html_inline: ({ attributes, editor, element, children, className }) => {
+      return /* @__PURE__ */ React__default.createElement(
+        "span",
+        {
+          ...attributes,
+          className: classNames$1(
+            "font-mono bg-green-100 cursor-not-allowed",
+            className
+          )
+        },
+        children,
+        element.value
+      );
+    },
+    [BulletedListPlugin.key]: withProps(ListElement, { variant: "ul" }),
+    [NumberedListPlugin.key]: withProps(ListElement, { variant: "ol" }),
+    [ListItemPlugin.key]: withProps(PlateElement, { as: "li" }),
+    [LinkPlugin.key]: LinkElement,
+    [CodePlugin.key]: CodeLeaf,
+    [UnderlinePlugin.key]: withProps(PlateLeaf, { as: "u" }),
+    [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: "s" }),
+    [ItalicPlugin.key]: withProps(PlateLeaf, { as: "em" }),
+    [BoldPlugin.key]: withProps(PlateLeaf, { as: "strong" }),
+    [HorizontalRulePlugin.key]: HrElement,
+    [TableCellHeaderPlugin.key]: TableCellHeaderElement,
+    [TableCellPlugin.key]: TableCellElement,
+    [TablePlugin.key]: TableElement,
+    [TableRowPlugin.key]: TableRowElement
+  };
+};
+class Form {
+  constructor({
+    id: id2,
+    label,
+    fields,
+    actions,
+    buttons,
+    global: global2,
+    reset: reset2,
+    loadInitialValues,
+    onChange,
+    queries,
+    ...options
+  }) {
+    __publicField(this, "__type");
+    __publicField(this, "id");
+    __publicField(this, "label");
+    __publicField(this, "fields");
+    __publicField(this, "finalForm");
+    __publicField(this, "actions");
+    __publicField(this, "buttons");
+    __publicField(this, "queries");
+    __publicField(this, "global", null);
+    __publicField(this, "loading", false);
+    /**
+     * @deprecated
+     * Misleading name as per https://github.com/tinacms/tinacms/issues/5686#issuecomment-2899840518
+     * Use path property instead.
+     */
+    __publicField(this, "relativePath");
+    /**
+     * Where to save the form within the content directory on next submission.
+     */
+    __publicField(this, "path");
+    __publicField(this, "crudType");
+    __publicField(this, "beforeSubmit");
+    /**
+     * Subscribes to changes to the form. The subscriber will only be called when
+     * values specified in subscription change. A form can have many subscribers.
+     */
+    __publicField(this, "subscribe", (cb, options) => {
+      return this.finalForm.subscribe(cb, options);
+    });
+    __publicField(this, "onSubmit");
+    __publicField(this, "handleSubmit", async (values, form, cb) => {
+      var _a2;
+      try {
+        const valOverride = await ((_a2 = this.beforeSubmit) == null ? void 0 : _a2.call(this, values));
+        if (valOverride) {
+          for (const [key, value] of Object.entries(valOverride)) {
+            form.change(key, value);
+          }
+        }
+        const response = await this.onSubmit(valOverride || values, form, cb);
+        form.initialize(values);
+        return response;
+      } catch (error2) {
+        return { [FORM_ERROR]: error2 };
+      }
+    });
+    /**
+     * Submits the form if there are currently no validation errors. It may
+     * return undefined or a Promise depending on the nature of the onSubmit
+     * configuration value given to the form when it was created.
+     */
+    __publicField(this, "submit", () => {
+      return this.finalForm.submit();
+    });
+    const initialValues = options.initialValues || {};
+    this.__type = options.__type || "form";
+    this.id = id2;
+    this.label = label;
+    this.global = global2;
+    this.fields = fields || [];
+    this.onSubmit = options.onSubmit;
+    this.queries = queries || [];
+    this.crudType = options.crudType || "update";
+    this.relativePath = options.relativePath || id2;
+    this.path = options.path || id2;
+    this.finalForm = createForm({
+      ...options,
+      initialValues,
+      onSubmit: this.handleSubmit,
+      mutators: {
+        ...arrayMutators,
+        setFieldData,
+        ...options.mutators
+      }
+    });
+    this._reset = reset2;
+    this.actions = actions || [];
+    this.buttons = buttons || {
+      save: "Save",
+      reset: "Reset"
+    };
+    this.updateFields(this.fields);
+    if (loadInitialValues) {
+      this.loading = true;
+      loadInitialValues().then((initialValues2) => {
+        this.updateInitialValues(initialValues2);
+      }).finally(() => {
+        this.loading = false;
+      });
+    }
+    if (onChange) {
+      let firstUpdate = true;
+      this.subscribe(
+        (formState) => {
+          if (firstUpdate) {
+            firstUpdate = false;
+          } else {
+            onChange(formState);
+          }
+        },
+        { values: true, ...(options == null ? void 0 : options.extraSubscribeValues) || {} }
+      );
+    }
+  }
+  /**
+   * A unique identifier for Forms.
+   *
+   * @deprecated use id instead
+   */
+  get name() {
+    return void 0;
+  }
+  /**
+   * Returns the current values of the form.
+   *
+   * if the form is still loading it returns `undefined`.
+   */
+  get values() {
+    if (this.loading) {
+      return void 0;
+    }
+    return this.finalForm.getState().values || this.initialValues;
+  }
+  /**
+   * The values the form was initialized with.
+   */
+  get initialValues() {
+    return this.finalForm.getState().initialValues;
+  }
+  get pristine() {
+    return this.finalForm.getState().pristine;
+  }
+  get dirty() {
+    return this.finalForm.getState().dirty;
+  }
+  get submitting() {
+    return this.finalForm.getState().submitting;
+  }
+  get valid() {
+    return this.finalForm.getState().valid;
+  }
+  /**
+   * Resets the values back to the initial values the form was initialized with.
+   * Or empties all the values if the form was not initialized.
+   */
+  async reset() {
+    if (this._reset) {
+      await this._reset();
+    }
+    this.finalForm.reset();
+  }
+  /**
+   * @deprecated Unnecessary indirection
+   */
+  updateFields(fields) {
+    this.fields = fields;
+  }
+  /**
+   * Changes the value of the given field.
+   *
+   * @param name
+   * @param value
+   */
+  change(name, value) {
+    return this.finalForm.change(name, value);
+  }
+  get mutators() {
+    return this.finalForm.mutators;
+  }
+  addQuery(queryId) {
+    this.queries = [...this.queries.filter((id2) => id2 !== queryId), queryId];
+  }
+  removeQuery(queryId) {
+    this.queries = this.queries.filter((id2) => id2 !== queryId);
+  }
+  /**
+   * Updates multiple fields in the form.
+   *
+   * The updates are batched so that it only triggers one `onChange` event.
+   *
+   * In order to prevent disruptions to the user's editing experience this
+   * function will _not_ update the value of any field that is currently
+   * being edited.
+   *
+   * @param values
+   */
+  updateValues(values) {
+    this.finalForm.batch(() => {
+      const activePath = this.finalForm.getState().active;
+      if (!activePath) {
+        updateEverything(this.finalForm, values);
+      } else {
+        updateSelectively(this.finalForm, values);
+      }
+    });
+  }
+  /**
+   * Replaces the initialValues of the form without deleting the current values.
+   *
+   * This function is helpful when the initialValues are loaded asynchronously.
+   *
+   * @param initialValues
+   */
+  updateInitialValues(initialValues) {
+    this.finalForm.batch(() => {
+      const values = this.values || {};
+      this.finalForm.initialize(initialValues);
+      const activePath = this.finalForm.getState().active;
+      if (!activePath) {
+        updateEverything(this.finalForm, values);
+      } else {
+        updateSelectively(this.finalForm, values);
+      }
+    });
+  }
+  /**
+   * Based on field's name this function will
+   * return an array of fields for the give form along
+   * with the path that it was found at top nearest
+   * object-like group
+   *
+   * So if you have a field named blocks.3.title
+   * It will return the fields from the 3rd "block"
+   * along with the path it was found at
+   * fields: [{type: 'string', name: 'title'}, ... other fields]
+   * activePath: ['blocks', '3']
+   */
+  getActiveField(fieldName) {
+    if (!fieldName) {
+      return this;
+    }
+    const result = this.getFieldGroup({
+      formOrObjectField: this,
+      values: this.finalForm.getState().values,
+      namePathIndex: 0,
+      namePath: fieldName.split(".")
+    });
+    return result;
+  }
+  getFieldGroup({
+    formOrObjectField,
+    values = {},
+    namePathIndex,
+    namePath
+  }) {
+    const name = namePath[namePathIndex];
+    const field = formOrObjectField.fields.find((field2) => field2.name === name);
+    const value = values[name];
+    const isLastItem = namePathIndex === namePath.length - 1;
+    if (!field) {
+      return {
+        ...formOrObjectField,
+        fields: formOrObjectField.fields.map((field2) => {
+          return {
+            ...field2,
+            name: [...namePath, field2.name].join(".")
+          };
+        })
+      };
+    } else {
+      if (field.type === "object") {
+        if (field.templates) {
+          if (field.list) {
+            if (isLastItem) {
+              return formOrObjectField;
+            } else {
+              const namePathIndexForListItem = namePathIndex + 1;
+              const index = namePath[namePathIndexForListItem];
+              const listItemValue = value[index];
+              const template = field.templates[listItemValue._template];
+              const templateName = [
+                ...namePath.slice(0, namePathIndexForListItem),
+                index
+              ].join(".");
+              const isLastItem2 = namePathIndexForListItem === namePath.length - 1;
+              if (!isLastItem2) {
+                return this.getFieldGroup({
+                  formOrObjectField: template,
+                  values: listItemValue,
+                  namePath,
+                  namePathIndex: namePathIndex + 2
+                });
+              }
+              if (!template) {
+                console.error({ field, value });
+                throw new Error(
+                  `Expected template value for field ${field.name}`
+                );
+              }
+              return {
+                ...template,
+                name: templateName,
+                fields: template.fields.map((field2) => {
+                  return {
+                    ...field2,
+                    name: [templateName, field2.name].join(".")
+                  };
+                })
+              };
+            }
+          }
+        } else {
+          if (field.list) {
+            const namePathIndexForListItem = namePathIndex + 1;
+            const index = namePath[namePathIndexForListItem];
+            const listItemValue = value[index];
+            const fieldName = [
+              ...namePath.slice(0, namePathIndexForListItem),
+              index
+            ].join(".");
+            const isLastItem2 = namePathIndexForListItem === namePath.length - 1;
+            if (!isLastItem2) {
+              if (field.fields) {
+                return this.getFieldGroup({
+                  formOrObjectField: field,
+                  values: listItemValue,
+                  namePath,
+                  namePathIndex: namePathIndex + 2
+                });
+              }
+            }
+            return {
+              ...field,
+              name: fieldName,
+              fields: field.fields.map((field2) => {
+                return {
+                  ...field2,
+                  name: [fieldName, field2.name].join(".")
+                };
+              })
+            };
+          } else {
+            const fieldName = [...namePath.slice(0, namePathIndex + 1)].join(
+              "."
+            );
+            const isLastItem2 = namePathIndex === namePath.length - 1;
+            if (!isLastItem2) {
+              return this.getFieldGroup({
+                formOrObjectField: field,
+                values: value,
+                namePath,
+                namePathIndex: namePathIndex + 1
+              });
+            }
+            return {
+              ...field,
+              name: fieldName,
+              fields: field.fields.map((field2) => {
+                return {
+                  ...field2,
+                  name: [fieldName, field2.name].join(".")
+                };
+              })
+            };
+          }
+        }
+      } else if (field.type === "rich-text") {
+        if (isLastItem) {
+          return {
+            ...formOrObjectField,
+            fields: formOrObjectField.fields.map((field2) => {
+              return {
+                ...field2,
+                name: [...namePath.slice(0, namePathIndex), field2.name].join(
+                  "."
+                )
+              };
+            })
+          };
+        } else {
+          const childrenIndex = namePath.findIndex(
+            (value2) => value2 === "children"
+          );
+          const propsIndex = namePath.slice(childrenIndex).findIndex((value2) => value2 === "props") + childrenIndex;
+          const itemName = namePath.slice(childrenIndex, propsIndex).join(".");
+          const item = getIn(value, itemName);
+          const props = item.props;
+          const templateString = item.name;
+          const currentPathIndex = namePathIndex + Math.max(propsIndex, 3);
+          const isLastItem2 = currentPathIndex + 1 === namePath.length;
+          const template = field.templates.find(
+            (t2) => t2.name === templateString
+          );
+          const templateName = namePath.slice(0, currentPathIndex + 2).join(".");
+          if ((item == null ? void 0 : item.type) === "img") {
+            const imageName = namePath.slice(0, currentPathIndex + 2).join(".");
+            return {
+              ...formOrObjectField,
+              // name: [formOrObjectField.name, 'img'].join('.'),
+              name: [imageName].join("."),
+              fields: [
+                {
+                  type: "image",
+                  // label: 'URL',
+                  name: [templateName, "url"].join("."),
+                  component: "image"
+                },
+                {
+                  type: "string",
+                  label: "Alt",
+                  name: [templateName.replace(/\.props$/, ""), "alt"].join("."),
+                  component: "text"
+                },
+                {
+                  type: "string",
+                  label: "Caption",
+                  name: [templateName.replace(/\.props$/, ""), "caption"].join(
+                    "."
+                  ),
+                  component: "text"
+                }
+              ]
+            };
+          }
+          if (!isLastItem2) {
+            return this.getFieldGroup({
+              formOrObjectField: template,
+              values: props,
+              namePath,
+              namePathIndex: namePathIndex + Math.max(4, childrenIndex + propsIndex)
+            });
+          }
+          if (!template) {
+            throw new Error(`Expected template value for field ${item.name}`);
+          }
+          return {
+            ...template,
+            name: templateName,
+            fields: template.fields.map((field2) => {
+              return {
+                ...field2,
+                name: [templateName, field2.name].join(".")
+              };
+            })
+          };
+        }
+      } else {
+        const fieldName = [...namePath.slice(0, namePathIndex)].join(".");
+        if (!fieldName) {
+          return formOrObjectField;
+        }
+        return {
+          ...formOrObjectField,
+          name: fieldName,
+          fields: formOrObjectField.fields.map((field2) => {
+            return {
+              ...field2,
+              name: [fieldName, field2.name].join(".")
+            };
+          })
+        };
+      }
+    }
   }
-);
-const TableBordersDropdownMenuContent = withRef$1((props, ref) => {
-  const editor = useEditorRef();
-  const {
-    getOnSelectTableBorder,
-    hasBottomBorder,
-    hasLeftBorder,
-    hasNoBorders,
-    hasOuterBorders,
-    hasRightBorder,
-    hasTopBorder
-  } = useTableBordersDropdownMenuContentState();
-  return /* @__PURE__ */ React__default.createElement(
-    DropdownMenuContent$1,
-    {
-      ref,
-      className: cn$2("min-w-[220px]"),
-      onCloseAutoFocus: (e3) => {
-        e3.preventDefault();
-        editor.tf.focus();
-      },
-      align: "start",
-      side: "right",
-      sideOffset: 0,
-      ...props
-    },
-    /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasTopBorder,
-        onCheckedChange: getOnSelectTableBorder("top")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "Top Border")
-    ), /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasRightBorder,
-        onCheckedChange: getOnSelectTableBorder("right")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "Right Border")
-    ), /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasBottomBorder,
-        onCheckedChange: getOnSelectTableBorder("bottom")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "Bottom Border")
-    ), /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasLeftBorder,
-        onCheckedChange: getOnSelectTableBorder("left")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "Left Border")
-    )),
-    /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasNoBorders,
-        onCheckedChange: getOnSelectTableBorder("none")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "No Border")
-    ), /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasOuterBorders,
-        onCheckedChange: getOnSelectTableBorder("outer")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "Outside Borders")
-    ))
-  );
-});
-function ColorDropdownMenu({ children, tooltip }) {
-  const [open, setOpen] = useState(false);
-  const editor = useEditorRef();
-  const selectedCells = usePluginOption(TablePlugin, "selectedCells");
-  useCallback(
-    (color) => {
-      setOpen(false);
-      setCellBackground(editor, { color, selectedCells: selectedCells ?? [] });
-    },
-    [selectedCells, editor]
-  );
-  const onClearColor = useCallback(() => {
-    setOpen(false);
-    setCellBackground(editor, {
-      color: null,
-      selectedCells: selectedCells ?? []
-    });
-  }, [selectedCells, editor]);
-  return /* @__PURE__ */ React__default.createElement(DropdownMenu$1, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement(ToolbarButton, { tooltip }, children)), /* @__PURE__ */ React__default.createElement(DropdownMenuContent$1, { align: "start" }, /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(DropdownMenuItem$1, { className: "p-2", onClick: onClearColor }, /* @__PURE__ */ React__default.createElement(EraserIcon, null), /* @__PURE__ */ React__default.createElement("span", null, "Clear")))));
 }
-const TableRowElement = withRef$1(
-  ({ children, className, ...props }, ref) => {
-    const selected = useSelected();
-    return /* @__PURE__ */ React__default.createElement(
-      PlateElement,
-      {
-        as: "tr",
-        className: cn$2(className, "group/row"),
-        "data-selected": selected ? "true" : void 0,
-        ...props
-      },
-      children
-    );
-  }
-);
-function classNames$1(...classes) {
-  return classes.filter(Boolean).join(" ");
+function updateEverything(form, values) {
+  Object.entries(values).forEach(([path3, value]) => {
+    form.change(path3, value);
+  });
 }
-const uuid = () => {
-  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(
-    /[018]/g,
-    (c2) => (c2 ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c2 / 4).toString(16)
-  );
-};
-const blockClasses = "mt-0.5";
-const headerClasses = "font-normal";
-const Components = () => {
-  return {
-    [SlashInputPlugin.key]: SlashInputElement,
-    [HEADING_KEYS$1.h1]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h1",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-4xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    [HEADING_KEYS$1.h2]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h2",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-3xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    [HEADING_KEYS$1.h3]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h3",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-2xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    [HEADING_KEYS$1.h4]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h4",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    /** Tailwind prose doesn't style h5 and h6 elements */
-    [HEADING_KEYS$1.h5]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h5",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-lg mb-4 last:mb-0 mt-6 first:mt-0"
-        ),
-        style: { fontFamily: "'Libre Baskerville', serif", fontWeight: "400" }
+function updateSelectively(form, values, prefix) {
+  const activePath = form.getState().active;
+  Object.entries(values).forEach(([name, value]) => {
+    const path3 = prefix ? `${prefix}.${name}` : name;
+    if (typeof value === "object") {
+      if (typeof activePath === "string" && activePath.startsWith(path3)) {
+        updateSelectively(form, value, path3);
+      } else {
+        form.change(path3, value);
       }
-    ),
-    [HEADING_KEYS$1.h6]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h6",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-base mb-4 last:mb-0 mt-6 first:mt-0"
-        ),
-        style: { fontFamily: "'Libre Baskerville', serif", fontWeight: "400" }
+    } else if (path3 !== activePath) {
+      form.change(path3, value);
+    }
+  });
+}
+function usePlugins(plugins2) {
+  const cms = useCMS$1();
+  let pluginArray;
+  if (Array.isArray(plugins2)) {
+    pluginArray = plugins2;
+  } else {
+    pluginArray = [plugins2];
+  }
+  React.useEffect(() => {
+    pluginArray.forEach((plugin) => {
+      if (plugin) {
+        cms.plugins.add(plugin);
       }
-    ),
-    [ParagraphPlugin.key]: ParagraphElement,
-    [BlockquotePlugin.key]: BlockquoteElement,
-    [CodeBlockPlugin.key]: CodeBlockElement,
-    [CodeLinePlugin.key]: CodeLineElement,
-    [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,
-    html: ({ attributes, editor, element, children, className }) => {
-      return /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          ...attributes,
-          className: classNames$1(
-            "font-mono text-sm bg-green-100 cursor-not-allowed mb-4",
-            className
-          )
-        },
-        children,
-        element.value
-      );
-    },
-    html_inline: ({ attributes, editor, element, children, className }) => {
-      return /* @__PURE__ */ React__default.createElement(
-        "span",
-        {
-          ...attributes,
-          className: classNames$1(
-            "font-mono bg-green-100 cursor-not-allowed",
-            className
-          )
-        },
-        children,
-        element.value
-      );
-    },
-    [BulletedListPlugin.key]: withProps(ListElement, { variant: "ul" }),
-    [NumberedListPlugin.key]: withProps(ListElement, { variant: "ol" }),
-    [ListItemPlugin.key]: withProps(PlateElement, { as: "li" }),
-    [LinkPlugin.key]: LinkElement,
-    [CodePlugin.key]: CodeLeaf,
-    [UnderlinePlugin.key]: withProps(PlateLeaf, { as: "u" }),
-    [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: "s" }),
-    [ItalicPlugin.key]: withProps(PlateLeaf, { as: "em" }),
-    [BoldPlugin.key]: withProps(PlateLeaf, { as: "strong" }),
-    [HorizontalRulePlugin.key]: HrElement,
-    [TableCellHeaderPlugin.key]: TableCellHeaderElement,
-    [TableCellPlugin.key]: TableCellElement,
-    [TablePlugin.key]: TableElement,
-    [TableRowPlugin.key]: TableRowElement
-  };
-};
+    });
+    return () => {
+      pluginArray.forEach((plugin) => {
+        if (plugin) {
+          cms.plugins.remove(plugin);
+        }
+      });
+    };
+  }, [cms.plugins, ...pluginArray]);
+}
+function useSubscribable(subscribable, cb) {
+  const [, s2] = React.useState(0);
+  React.useEffect(() => {
+    return subscribable.subscribe(() => {
+      s2((x) => x + 1);
+      if (cb)
+        cb();
+    });
+  });
+}
 function FieldsBuilder({
   form,
   fields,
   activeFieldName,
-  hoveringFieldName,
   padding = false
 }) {
   const cms = useCMS$1();
@@ -38314,7 +38265,6 @@ function FieldsBuilder({
         key: field.name,
         field,
         activeFieldName,
-        hoveringFieldName,
         form,
         fieldPlugins,
         index
@@ -38327,8 +38277,7 @@ const InnerField = ({
   form,
   fieldPlugins,
   index,
-  activeFieldName,
-  hoveringFieldName
+  activeFieldName
 }) => {
   React.useEffect(() => {
     form.mutators.setFieldData(field.name, {
@@ -38351,9 +38300,6 @@ const InnerField = ({
     format2 = plugin.format;
   }
   let isActiveField = field.name === activeFieldName;
-  const isHoveringField = field.name === hoveringFieldName;
-  const focusIntent = isActiveField;
-  const hoverIntent = isHoveringField;
   if (field.list && field.type === "string") {
     if (activeFieldName) {
       const activeFieldNameArray = activeFieldName.split(".");
@@ -38387,11 +38333,7 @@ const InnerField = ({
             ...fieldProps,
             form: form.finalForm,
             tinaForm: form,
-            field: {
-              ...field,
-              focusIntent,
-              hoverIntent
-            }
+            field: { ...field, experimental_focusIntent: isActiveField }
           }
         );
       }
@@ -38400,14 +38342,10 @@ const InnerField = ({
           plugin.Component,
           {
             ...fieldProps,
-            focusIntent,
+            experimental_focusIntent: isActiveField,
             form: form.finalForm,
             tinaForm: form,
-            field: {
-              ...field,
-              focusIntent,
-              hoverIntent
-            },
+            field: { ...field, experimental_focusIntent: isActiveField },
             index
           }
         );
@@ -39472,7 +39410,7 @@ function AiFillWarning(props) {
 function AiOutlineLoading(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }, "child": [] }] })(props);
 }
-const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-tina-orange-dark focus-visible:ring-0 focus:outline-none focus:ring-2 block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
+const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
 const disabledClasses$1 = "opacity-50 pointer-events-none cursor-not-allowed";
 const BaseTextField = React.forwardRef(({ className, disabled, ...rest }, ref) => {
   return /* @__PURE__ */ React.createElement(
@@ -39490,7 +39428,7 @@ const TextArea = React.forwardRef(({ ...props }, ref) => {
     "textarea",
     {
       ...props,
-      className: "shadow-inner text-base px-3 py-2 text-gray-600 resize-y focus:shadow-outline focus:outline-none focus:border-tina-orange-dark block w-full border border-gray-200 focus:text-gray-900 rounded",
+      className: "shadow-inner text-base px-3 py-2 text-gray-600 resize-y focus:shadow-outline focus:border-blue-500 block w-full border border-gray-200 focus:text-gray-900 rounded",
       ref,
       style: { minHeight: "160px" }
     }
@@ -39949,7 +39887,7 @@ const Toggle = ({
     /* @__PURE__ */ React.createElement("div", { className: "relative w-[48px] h-7 rounded-3xl bg-white shadow-inner border border-gray-200 pointer-events-none -ml-0.5" }, /* @__PURE__ */ React.createElement(
       "span",
       {
-        className: `absolute rounded-3xl left-0.5 top-1/2 w-[22px] h-[22px] shadow border transition-all ease-out duration-150 ${checked ? "bg-tina-orange border-tina-orange-dark" : "bg-gray-250 border-gray-300"}`,
+        className: `absolute rounded-3xl left-0.5 top-1/2 w-[22px] h-[22px] shadow border transition-all ease-out duration-150 ${checked ? "bg-blue-500 border-blue-600" : "bg-gray-250 border-gray-300"}`,
         style: {
           transform: `translate3d(${checked ? "20px" : "0"}, -50%, 0)`
         }
@@ -40023,7 +39961,7 @@ function MdOutlinePhotoLibrary(props) {
 function MdOutlinePerson(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }, "child": [] }] })(props);
 }
-const selectFieldClasses = "shadow appearance-none h-full bg-white block pl-3 pr-8 py-2 truncate w-full text-base cursor-pointer border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-tina-orange-dark focus:border-tina-orange-dark sm:text-sm rounded";
+const selectFieldClasses = "shadow appearance-none h-full bg-white block pl-3 pr-8 py-2 truncate w-full text-base cursor-pointer border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded";
 const Select$1 = ({
   input,
   field,
@@ -40033,12 +39971,10 @@ const Select$1 = ({
   const selectOptions = options || field.options;
   const ref = React.useRef(null);
   React.useEffect(() => {
-    const focusIntent = field == null ? void 0 : field.focusIntent;
-    const shouldFocus = !!focusIntent;
-    if (ref.current && shouldFocus) {
+    if (ref.current && (field == null ? void 0 : field.experimental_focusIntent)) {
       ref.current.focus();
     }
-  }, [field == null ? void 0 : field.focusIntent, ref]);
+  }, [field == null ? void 0 : field.experimental_focusIntent, ref]);
   return /* @__PURE__ */ React.createElement("div", { className: "relative group w-full h-fit md:w-auto" }, /* @__PURE__ */ React.createElement(
     "select",
     {
@@ -40120,7 +40056,7 @@ const RadioOption = ({ checked, htmlFor, children, ...props }) => /* @__PURE__ *
   /* @__PURE__ */ React.createElement(
     "span",
     {
-      className: `relative h-[19px] w-[19px] rounded border text-indigo-600 focus:ring-indigo-500 transition ease-out duration-150 ${checked ? "border-tina-orange-dark bg-tina-orange shadow-sm group-hover:bg-tina-orange group-hover:border-tina-orange-dark" : "border-gray-200 bg-white shadow-inner group-hover:bg-gray-100"}`
+      className: `relative h-[19px] w-[19px] rounded border text-indigo-600 focus:ring-indigo-500 transition ease-out duration-150 ${checked ? "border-blue-500 bg-blue-500 shadow-sm group-hover:bg-blue-400 group-hover:border-blue-400" : "border-gray-200 bg-white shadow-inner group-hover:bg-gray-100"}`
     },
     /* @__PURE__ */ React.createElement(
       BiCheck,
@@ -40181,7 +40117,7 @@ const CheckboxGroup = ({
       /* @__PURE__ */ React.createElement(
         "span",
         {
-          className: `relative h-[18px] w-[18px] rounded border text-indigo-600 focus:ring-indigo-500 transition ease-out duration-150 ${checked ? "border-tina-orange-dark bg-tina-orange shadow-sm group-hover:bg-tina-orange group-hover:border-tina-orange-dark" : "border-gray-200 bg-white shadow-inner group-hover:bg-gray-100"}`
+          className: `relative h-[18px] w-[18px] rounded border text-indigo-600 focus:ring-indigo-500 transition ease-out duration-150 ${checked ? "border-blue-500 bg-blue-500 shadow-sm group-hover:bg-blue-400 group-hover:border-blue-400" : "border-gray-200 bg-white shadow-inner group-hover:bg-gray-100"}`
         },
         /* @__PURE__ */ React.createElement(
           BiCheck,
@@ -40312,7 +40248,7 @@ const ImageUpload = React.forwardRef(({ onDrop, onClear, onClick, value, src, lo
     /* @__PURE__ */ React.createElement(
       "button",
       {
-        className: "flex-shrink min-w-0 focus-within:shadow-outline focus-within:border-tina-orange-dark rounded outline-none overflow-visible cursor-pointer border-none hover:opacity-60 transition ease-out duration-100",
+        className: "flex-shrink min-w-0 focus-within:shadow-outline focus-within:border-blue-500 rounded outline-none overflow-visible cursor-pointer border-none hover:opacity-60 transition ease-out duration-100",
         onClick,
         ref
       },
@@ -40813,7 +40749,7 @@ function toProps(option) {
     return option;
   return { value: option, label: option };
 }
-const passwordFieldClasses = "shadow-inner focus:shadow-outline focus:border-tina-orange-dark focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
+const passwordFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
 const disabledClasses = "opacity-50 pointer-events-none cursor-not-allowed";
 const errorClasses = "border-red-500 focus:border-red-500 focus:shadow-outline-red";
 const BasePasswordField = React.forwardRef(({ className, disabled, error: error2, ...rest }, ref) => {
@@ -41186,7 +41122,7 @@ const Header = ({ onClick, children }) => {
     "button",
     {
       onClick,
-      className: "group px-4 py-3 bg-white hover:bg-gray-50 shadow focus:shadow-outline focus:border-tina-orange-dark w-full border border-gray-100 hover:border-gray-200 text-gray-500 hover:text-tina-orange-dark focus:text-tina-orange-dark rounded flex justify-between items-center gap-2"
+      className: "group px-4 py-3 bg-white hover:bg-gray-50 shadow focus:shadow-outline focus:border-blue-500 w-full border border-gray-100 hover:border-gray-200 text-gray-500 hover:text-blue-400 focus:text-blue-500 rounded flex justify-between items-center gap-2"
     },
     /* @__PURE__ */ React.createElement("span", { className: "text-left text-base font-medium overflow-hidden text-ellipsis whitespace-nowrap flex-1" }, children),
     " ",
@@ -41338,7 +41274,7 @@ const BlockSelectorBig = ({
         "input",
         {
           type: "text",
-          className: "shadow-inner focus:shadow-outline focus:border-tina-orange-dark focus:outline-none block text-sm pl-2.5 pr-8 py-1.5 text-gray-600 w-full bg-white border border-gray-200 focus:text-gray-900 rounded placeholder-gray-400 hover:placeholder-gray-600 transition-all ease-out duration-150",
+          className: "shadow-inner focus:shadow-outline focus:border-blue-400 focus:outline-none block text-sm pl-2.5 pr-8 py-1.5 text-gray-600 w-full bg-white border border-gray-200 focus:text-gray-900 rounded placeholder-gray-400 hover:placeholder-gray-600 transition-all ease-out duration-150",
           onClick: (event) => {
             event.stopPropagation();
             event.preventDefault();
@@ -41791,12 +41727,10 @@ const ImageField = wrapFieldsWithMeta(
       onClear = () => props.input.onChange("");
     }
     React.useEffect(() => {
-      const focusIntent = props.field.focusIntent;
-      const shouldFocus = !!focusIntent;
-      if (ref.current && shouldFocus) {
+      if (ref.current && props.field.experimental_focusIntent) {
         ref.current.focus();
       }
-    }, [props.field.focusIntent, ref]);
+    }, [props.field.experimental_focusIntent, ref]);
     async function onChange(media) {
       var _a2, _b;
       if (media) {
@@ -41922,14 +41856,12 @@ const RadioGroupFieldPlugin = {
 const TextareaField = wrapFieldsWithMeta((props) => {
   const ref = React.useRef(null);
   React.useEffect(() => {
-    const focusIntent = props.field.focusIntent;
-    const shouldFocus = !!focusIntent;
-    if (ref.current && shouldFocus) {
+    if (ref.current && props.field.experimental_focusIntent) {
       const el = ref.current;
       el.focus();
       el.setSelectionRange(el.value.length, el.value.length);
     }
-  }, [props.field.focusIntent, ref]);
+  }, [props.field.experimental_focusIntent, ref]);
   return /* @__PURE__ */ React.createElement(TextArea, { ref, ...props.input });
 });
 const TextareaFieldPlugin = {
@@ -41990,12 +41922,10 @@ const TextField = wrapFieldsWithMeta(
     var _a2;
     const ref = React.useRef(null);
     React.useEffect(() => {
-      const focusIntent = props.field.focusIntent;
-      const shouldFocus = !!focusIntent;
-      if (ref.current && shouldFocus) {
+      if (ref.current && props.field.experimental_focusIntent) {
         ref.current.focus();
       }
-    }, [props.field.focusIntent, ref]);
+    }, [props.field.experimental_focusIntent, ref]);
     return /* @__PURE__ */ React.createElement(
       BaseTextField,
       {
@@ -42055,12 +41985,10 @@ const TagsField = wrapFieldsWithMeta(({ input, field, form, tinaForm }) => {
   const items2 = input.value || [];
   const ref = React.useRef(null);
   React.useEffect(() => {
-    const focusIntent = field.focusIntent;
-    const shouldFocus = !!focusIntent;
-    if (ref.current && shouldFocus) {
+    if (ref.current && field.experimental_focusIntent) {
       ref.current.focus();
     }
-  }, [field.focusIntent, ref]);
+  }, [field.experimental_focusIntent, ref]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement(
     BaseTextField,
     {
@@ -43459,11 +43387,11 @@ const DateField = wrapFieldsWithMeta(
     const granularity = timeFormat ? "minute" : "day";
     const inputRef = React__default.useRef(null);
     React__default.useEffect(() => {
-      if (inputRef.current && rest.focusIntent) {
+      if (inputRef.current && rest.experimental_focusIntent) {
         inputRef.current.focus();
         inputRef.current.open();
       }
-    }, [rest.focusIntent]);
+    }, [rest.experimental_focusIntent]);
     const getTimeFormat = useCallback(() => {
       if (timeFormat === false) {
         return;
@@ -44078,9 +44006,20 @@ const EditoralBranchSwitcher = ({
   ) : /* @__PURE__ */ React.createElement("div", { className: "px-6 py-8 w-full h-full flex flex-col items-center justify-center" }, /* @__PURE__ */ React.createElement("p", { className: "text-base mb-4 text-center" }, "An error occurred while retrieving the branch list."), /* @__PURE__ */ React.createElement(Button$2, { className: "mb-4", onClick: refreshBranchList }, "Try again ", /* @__PURE__ */ React.createElement(BiRefresh, { className: "w-6 h-full ml-1 opacity-70" }))))));
 };
 const getFilteredBranchList = (branchList, search, currentBranchName, filter2 = "all") => {
-  const filteredBranchList = branchList.filter(
-    (branch) => !search || branch.name.includes(search) || branch.name === currentBranchName
-  ).filter((branch) => {
+  const filteredBranchList = branchList.filter((branch) => {
+    if (!search)
+      return true;
+    if (branch.name === currentBranchName)
+      return true;
+    const searchLower = search.toLowerCase();
+    const nameMatch = branch.name.toLowerCase().includes(searchLower);
+    let prMatch = false;
+    if (branch.githubPullRequestUrl) {
+      const prId = extractPullRequestId(branch.githubPullRequestUrl);
+      prMatch = prId.toLowerCase().includes(searchLower);
+    }
+    return nameMatch || prMatch;
+  }).filter((branch) => {
     if (branch.protected)
       return true;
     if (filter2 === "all")
@@ -44184,7 +44123,7 @@ const BranchSelector = ({
   ), /* @__PURE__ */ React.createElement("div", { className: "block relative group h-fit mb-auto" }, /* @__PURE__ */ React.createElement(
     BaseTextField,
     {
-      placeholder: "Search",
+      placeholder: "Branch name or PR #",
       value: search,
       onChange: (e3) => setSearch(e3.target.value)
     }
@@ -46593,7 +46532,7 @@ const NavProvider = ({
   };
   return /* @__PURE__ */ React__default.createElement(NavContext.Provider, { value }, children);
 };
-const version$1 = "3.3.0";
+const version$1 = "3.3.2";
 const VersionInfo = () => {
   var _a2, _b, _c, _d, _e, _f;
   const cms = useCMS();
@@ -48053,25 +47992,6 @@ class TinaCMS extends CMS {
     });
   }
 }
-const ACTION_TYPES = {
-  FORMS_ADD: "forms:add",
-  FORMS_REMOVE: "forms:remove",
-  FORMS_CLEAR: "forms:clear",
-  FORMS_SET_ACTIVE_FORM_ID: "forms:set-active-form-id",
-  FORMS_SET_ACTIVE_FIELD_NAME: "forms:set-active-field-name",
-  FORMS_SET_HOVERED_FIELD_NAME: "forms:set-hovered-field-name",
-  FORM_LISTS_ADD: "form-lists:add",
-  FORM_LISTS_REMOVE: "form-lists:remove",
-  FORM_LISTS_CLEAR: "form-lists:clear",
-  SET_EDIT_MODE: "set-edit-mode",
-  INCREMENT_OPERATION_INDEX: "increment-operation-index",
-  SET_QUICK_EDITING_SUPPORTED: "set-quick-editing-supported",
-  SET_QUICK_EDITING_ENABLED: "set-quick-editing-enabled",
-  TOGGLE_QUICK_EDITING_ENABLED: "toggle-quick-editing-enabled",
-  TOGGLE_EDIT_STATE: "toggle-edit-state",
-  SIDEBAR_SET_DISPLAY_STATE: "sidebar:set-display-state",
-  SIDEBAR_SET_LOADING_STATE: "sidebar:set-loading-state"
-};
 const initialState = (cms) => {
   var _a2;
   return {
@@ -48087,24 +48007,24 @@ const initialState = (cms) => {
 };
 function tinaReducer(state, action) {
   switch (action.type) {
-    case ACTION_TYPES.SET_QUICK_EDITING_SUPPORTED:
+    case "set-quick-editing-supported":
       return {
         ...state,
         quickEditSupported: action.value
       };
-    case ACTION_TYPES.SET_EDIT_MODE:
+    case "set-edit-mode":
       return { ...state, editingMode: action.value };
-    case ACTION_TYPES.FORMS_ADD:
+    case "forms:add":
       if (state.forms.find((f2) => f2.tinaForm.id === action.value.id)) {
         return state;
       }
       return { ...state, forms: [...state.forms, { tinaForm: action.value }] };
-    case ACTION_TYPES.FORMS_REMOVE:
+    case "forms:remove":
       return {
         ...state,
         forms: state.forms.filter((form) => form.tinaForm.id !== action.value)
       };
-    case ACTION_TYPES.FORM_LISTS_CLEAR: {
+    case "form-lists:clear": {
       return {
         ...state,
         quickEditSupported: false,
@@ -48114,7 +48034,7 @@ function tinaReducer(state, action) {
         forms: []
       };
     }
-    case ACTION_TYPES.FORM_LISTS_ADD: {
+    case "form-lists:add": {
       let formListItemExists = false;
       const nextFormLists = state.formLists.map((formList) => {
         if (formList.id === action.value.id) {
@@ -48153,7 +48073,7 @@ function tinaReducer(state, action) {
         isLoadingContent: false
       };
     }
-    case ACTION_TYPES.FORM_LISTS_REMOVE: {
+    case "form-lists:remove": {
       const nextFormLists = state.formLists.filter(
         ({ id: id2 }) => id2 !== action.value
       );
@@ -48177,7 +48097,7 @@ function tinaReducer(state, action) {
         formLists: nextFormLists
       };
     }
-    case ACTION_TYPES.FORMS_SET_ACTIVE_FORM_ID:
+    case "forms:set-active-form-id":
       if (action.value !== state.activeFormId) {
         const newActiveForm = state.forms.find(
           (form) => form.tinaForm.id === action.value
@@ -48194,7 +48114,7 @@ function tinaReducer(state, action) {
         };
       }
       return state;
-    case ACTION_TYPES.FORMS_SET_ACTIVE_FIELD_NAME:
+    case "forms:set-active-field-name":
       if (state.activeFormId === action.value.formId) {
         const existingForm = state.forms.find(
           (form) => form.tinaForm.id === action.value.formId
@@ -48207,8 +48127,7 @@ function tinaReducer(state, action) {
         if (form.tinaForm.id === action.value.formId) {
           return {
             tinaForm: form.tinaForm,
-            activeFieldName: action.value.fieldName,
-            hoveringFieldName: null
+            activeFieldName: action.value.fieldName
           };
         }
         return form;
@@ -48224,49 +48143,13 @@ function tinaReducer(state, action) {
         forms,
         activeFormId: action.value.formId
       };
-    case ACTION_TYPES.FORMS_SET_HOVERED_FIELD_NAME:
-      const hoveredForms = state.forms.map((form) => {
-        if (form.tinaForm.id === action.value.formId) {
-          const activeFieldName = form.activeFieldName;
-          const hoveredFieldName = action.value.fieldName;
-          if (activeFieldName && hoveredFieldName) {
-            if (activeFieldName === hoveredFieldName) {
-              return {
-                ...form,
-                hoveringFieldName: null
-              };
-            }
-            const isChildOfActive = hoveredFieldName.startsWith(
-              activeFieldName + "."
-            );
-            const activePathParts = activeFieldName.split(".");
-            const hoveredPathParts = hoveredFieldName.split(".");
-            const isSibling = activePathParts.length === hoveredPathParts.length && activePathParts.slice(0, -1).join(".") === hoveredPathParts.slice(0, -1).join(".");
-            if (!isChildOfActive && !isSibling) {
-              return {
-                ...form,
-                hoveringFieldName: null
-              };
-            }
-          }
-          return {
-            ...form,
-            hoveringFieldName: hoveredFieldName
-          };
-        }
-        return form;
-      });
-      return {
-        ...state,
-        forms: hoveredForms
-      };
-    case ACTION_TYPES.TOGGLE_EDIT_STATE: {
+    case "toggle-edit-state": {
       return state.sidebarDisplayState === "closed" ? { ...state, sidebarDisplayState: "open" } : {
         ...state,
         sidebarDisplayState: "closed"
       };
     }
-    case ACTION_TYPES.SIDEBAR_SET_DISPLAY_STATE: {
+    case "sidebar:set-display-state": {
       if (action.value === "openOrFull") {
         if (state.sidebarDisplayState === "closed") {
           return {
@@ -48284,7 +48167,7 @@ function tinaReducer(state, action) {
       }
       return { ...state, sidebarDisplayState: action.value };
     }
-    case ACTION_TYPES.SIDEBAR_SET_LOADING_STATE: {
+    case "sidebar:set-loading-state": {
       return { ...state, isLoadingContent: action.value };
     }
     default:
@@ -48553,12 +48436,10 @@ const AboveViewportIndicator = () => {
 const BelowViewportIndicator = () => {
   return /* @__PURE__ */ React.createElement(IndicatorWrap, { position: "bottom" }, /* @__PURE__ */ React.createElement(ArrowWrap, null, /* @__PURE__ */ React.createElement(ChevronDownIcon, { className: "w-8 h-auto" })));
 };
-const useScrollToFocusedField = (enabled) => {
+const useScrollToFocusedField = () => {
   const { subscribe } = useEvent("field:focus");
-  React.useEffect(() => {
-    if (!enabled)
-      return;
-    return subscribe(({ fieldName }) => {
+  React.useEffect(
+    () => subscribe(({ fieldName }) => {
       const ele = document.querySelector(
         `[data-tinafield="${fieldName}"]`
       );
@@ -48594,41 +48475,17 @@ const useScrollToFocusedField = (enabled) => {
           });
         }
       }
-    });
-  }, [enabled, subscribe]);
+    })
+  );
 };
-const FieldIndicator = ({
-  eventType,
-  checkFocusedAttribute = false,
-  scrollToField = false
-}) => {
-  const [fieldName, setFieldName] = React.useState(null);
+const ActiveFieldIndicator = () => {
+  const [activeFieldName, setActiveFieldName] = React.useState(
+    null
+  );
   const [display, setDisplay] = React.useState(false);
   const [position, setPosition] = React.useState(false);
   const [iframePosition, setIframePosition] = React.useState({ left: 0 });
-  const [isFocused2, setIsFocused] = React.useState(false);
-  const activeEle = useFieldReference(fieldName);
-  const { subscribe: subscribeFocus } = useEvent("field:focus");
-  const { subscribe: subscribeHover } = useEvent("field:hover");
-  React.useEffect(() => {
-    const subscribe = eventType === "field:focus" ? subscribeFocus : subscribeHover;
-    return subscribe(({ fieldName: eventFieldName, id: id2 }) => {
-      setFieldName(`${id2}#${eventFieldName}`);
-      if (eventType === "field:focus" && checkFocusedAttribute) {
-        setIsFocused(true);
-      }
-    });
-  }, [eventType, subscribeFocus, subscribeHover, checkFocusedAttribute]);
-  React.useEffect(() => {
-    if (!checkFocusedAttribute)
-      return;
-    if (activeEle) {
-      const hasFocusedAttr = activeEle.hasAttribute("data-tina-field-focused");
-      setIsFocused(hasFocusedAttr);
-    } else {
-      setIsFocused(false);
-    }
-  }, [activeEle, fieldName, checkFocusedAttribute]);
+  const activeEle = useFieldReference(activeFieldName);
   React.useEffect(() => {
     let displayTimeout;
     if (activeEle) {
@@ -48657,7 +48514,13 @@ const FieldIndicator = ({
       window.removeEventListener("scroll", rerender);
     };
   }, []);
-  useScrollToFocusedField(scrollToField);
+  const { subscribe } = useEvent("field:hover");
+  React.useEffect(
+    () => subscribe(({ fieldName, id: id2 }) => {
+      setActiveFieldName(`${id2}#${fieldName}`);
+    })
+  );
+  useScrollToFocusedField();
   if (!display)
     return null;
   const eleTopY = position.top + window.scrollY;
@@ -48670,7 +48533,6 @@ const FieldIndicator = ({
   if (eleBottomY < viewportTopY) {
     return /* @__PURE__ */ React.createElement(AboveViewportIndicator, null);
   }
-  const outlineColor = checkFocusedAttribute && isFocused2 ? "2px dashed #C2410C" : "2px dashed var(--tina-color-indicator)";
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -48681,7 +48543,7 @@ const FieldIndicator = ({
         left: position.left + window.scrollX + iframePosition.left,
         width: position.width,
         height: position.height,
-        outline: outlineColor,
+        outline: "2px dashed var(--tina-color-indicator)",
         borderRadius: "var(--tina-radius-small)",
         transition: display ? activeEle ? `opacity 300ms ease-out` : `opacity 150ms ease-in` : `none`,
         opacity: activeEle && display ? 0.8 : 0
@@ -48689,15 +48551,6 @@ const FieldIndicator = ({
     }
   );
 };
-const ActiveFieldIndicator = () => /* @__PURE__ */ React.createElement(
-  FieldIndicator,
-  {
-    eventType: "field:focus",
-    checkFocusedAttribute: true,
-    scrollToField: true
-  }
-);
-const HoveredFieldIndicator = () => /* @__PURE__ */ React.createElement(FieldIndicator, { eventType: "field:hover" });
 const TinaUI = ({ children, position }) => {
   const cms = useCMS();
   const [resizingSidebar, setResizingSidebar] = React.useState(false);
@@ -48709,7 +48562,7 @@ const TinaUI = ({ children, position }) => {
       position,
       sidebar: cms.sidebar
     }
-  ), /* @__PURE__ */ React.createElement(ActiveFieldIndicator, null), /* @__PURE__ */ React.createElement(HoveredFieldIndicator, null), /* @__PURE__ */ React.createElement("div", { className: `${resizingSidebar ? "pointer-events-none" : ""}` }, children)));
+  ), /* @__PURE__ */ React.createElement(ActiveFieldIndicator, null), /* @__PURE__ */ React.createElement("div", { className: `${resizingSidebar ? "pointer-events-none" : ""}` }, children)));
 };
 const TinaProvider = ({
   cms,
@@ -64685,7 +64538,6 @@ const FormBuilder = ({
         {
           form: tinaForm,
           activeFieldName: form.activeFieldName,
-          hoveringFieldName: form.hoveringFieldName,
           fields: fieldGroup.fields
         }
       ) : /* @__PURE__ */ React.createElement(NoFieldsPlaceholder, null))), !hideFooter && /* @__PURE__ */ React.createElement("div", { className: "relative flex-none w-full h-16 px-6 bg-white border-t border-gray-100 flex items-center justify-end" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 w-full justify-end gap-2	flex items-center max-w-form" }, tinaForm.reset && /* @__PURE__ */ React.createElement(
@@ -64858,7 +64710,7 @@ const ImgEmbed = ({
       "button",
       {
         type: "button",
-        className: `flex-shrink min-w-0 focus-within:shadow-outline focus-within:border-tina-orange-dark rounded outline-none overflow-visible cursor-pointer border-none hover:opacity-60 transition ease-out duration-100 ${selected ? "shadow-outline border-tina-orange-dark" : ""}`,
+        className: `flex-shrink min-w-0 focus-within:shadow-outline focus-within:border-blue-500 rounded outline-none overflow-visible cursor-pointer border-none hover:opacity-60 transition ease-out duration-100 ${selected ? "shadow-outline border-blue-500" : ""}`,
         onClick: handleSelect
       },
       isImage(element.url) ? /* @__PURE__ */ React__default.createElement(StyledImage, { src: element.url }) : /* @__PURE__ */ React__default.createElement(StyledFile, { src: element.url })
@@ -65114,7 +64966,7 @@ const DotMenu = ({ onOpen, onRemove }) => {
     PopoverButton,
     {
       as: "span",
-      className: "cursor-pointer h-full relative inline-flex items-center px-1 py-0.5 rounded-r border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-tina-orange-dark focus:border-tina-orange-dark"
+      className: "cursor-pointer h-full relative inline-flex items-center px-1 py-0.5 rounded-r border border-gray-200 bg-white text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
     },
     /* @__PURE__ */ React__default.createElement(EllipsisIcon, { title: "Open options" })
   ), /* @__PURE__ */ React__default.createElement(
@@ -119036,13 +118888,13 @@ const RichEditor = ({ input, tinaForm, field }) => {
         const plateElement = (_a3 = ref.current) == null ? void 0 : _a3.querySelector(
           '[role="textbox"]'
         );
-        if (field.focusIntent && plateElement) {
+        if (field.experimental_focusIntent && plateElement) {
           if (plateElement)
             plateElement.focus();
         }
       }, 100);
     }
-  }, [field.focusIntent, ref]);
+  }, [field.experimental_focusIntent, ref]);
   return /* @__PURE__ */ React__default.createElement("div", { ref }, /* @__PURE__ */ React__default.createElement(
     Plate,
     {
@@ -119133,7 +118985,7 @@ const MdxFieldPluginExtendible = {
       /* @__PURE__ */ React__default.createElement(
         "div",
         {
-          className: "min-h-[100px] max-w-full tina-prose relative shadow-inner focus-within:shadow-outline focus-within:border-tina-orange-dark block w-full bg-white border border-gray-200 text-gray-600 focus-within:text-gray-900 rounded pt-0 py-2"
+          className: "min-h-[100px] max-w-full tina-prose relative shadow-inner focus-within:shadow-outline focus-within:border-blue-500 block w-full bg-white border border-gray-200 text-gray-600 focus-within:text-gray-900 rounded pt-0 py-2"
         },
         props.rawMode ? props.rawEditor : /* @__PURE__ */ React__default.createElement(RichEditor, { ...props })
       )
@@ -122598,7 +122450,7 @@ const RenderForm$1 = ({
   mutationInfo,
   customDefaults
 }) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const navigate = useNavigate();
   const [formIsPristine, setFormIsPristine] = useState(true);
   const schema = cms.api.tina.schema;
@@ -122628,10 +122480,11 @@ const RenderForm$1 = ({
   const defaultItem2 = customDefaults || // @ts-ignore internal types aren't up to date
   ((_d = template.ui) == null ? void 0 : _d.defaultItem) || // @ts-ignore
   (template == null ? void 0 : template.defaultItem) || {};
+  const fileReadOnly = (_f = (_e = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _e.filename) == null ? void 0 : _f.readonly;
   const filenameField = {
     name: "filename",
     label: "Filename",
-    component: slugFunction ? wrapFieldsWithMeta(({ field, input, meta }) => {
+    component: slugFunction && !fileReadOnly ? wrapFieldsWithMeta(({ field, input, meta }) => {
       var _a3, _b2;
       return /* @__PURE__ */ React__default.createElement(
         FilenameInput,
@@ -122641,8 +122494,8 @@ const RenderForm$1 = ({
         }
       );
     }) : "text",
-    disabled: (_f = (_e = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _e.filename) == null ? void 0 : _f.readonly,
-    description: ((_h = (_g = collection.ui) == null ? void 0 : _g.filename) == null ? void 0 : _h.description) ? /* @__PURE__ */ React__default.createElement(
+    disabled: (_h = (_g = schemaCollection == null ? void 0 : schemaCollection.ui) == null ? void 0 : _g.filename) == null ? void 0 : _h.readonly,
+    description: ((_j = (_i = collection.ui) == null ? void 0 : _i.filename) == null ? void 0 : _j.description) ? /* @__PURE__ */ React__default.createElement(
       "span",
       {
         dangerouslySetInnerHTML: { __html: collection.ui.filename.description }