tinacms 3.2.0 → 3.3.1

package/dist/index.js

@@ -7,11 +7,8 @@ var __publicField = (obj, key, value) => {
 var _a;
 import { z } from "zod";
 import * as React from "react";
-import React__default, { useState, useCallback, useContext, createContext, forwardRef, useRef, useReducer, useMemo, useEffect, useLayoutEffect, Component, memo as memo$1, useDebugValue, useId, startTransition, useImperativeHandle } 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) {
@@ -1995,21 +1425,29 @@ function isDraftable$1(value) {
   return isPlainObject$4(value) || Array.isArray(value) || !!value[DRAFTABLE] || !!((_a2 = value.constructor) == null ? void 0 : _a2[DRAFTABLE]) || isMap$2(value) || isSet$2(value);
 }
 var objectCtorString$1 = Object.prototype.constructor.toString();
+var cachedCtorStrings = /* @__PURE__ */ new WeakMap();
 function isPlainObject$4(value) {
   if (!value || typeof value !== "object")
     return false;
-  const proto = getPrototypeOf(value);
-  if (proto === null) {
+  const proto = Object.getPrototypeOf(value);
+  if (proto === null || proto === Object.prototype)
     return true;
-  }
   const Ctor = Object.hasOwnProperty.call(proto, "constructor") && proto.constructor;
   if (Ctor === Object)
     return true;
-  return typeof Ctor == "function" && Function.toString.call(Ctor) === objectCtorString$1;
+  if (typeof Ctor !== "function")
+    return false;
+  let ctorString = cachedCtorStrings.get(Ctor);
+  if (ctorString === void 0) {
+    ctorString = Function.toString.call(Ctor);
+    cachedCtorStrings.set(Ctor, ctorString);
+  }
+  return ctorString === objectCtorString$1;
 }
-function each(obj, iter) {
+function each(obj, iter, strict = true) {
   if (getArchtype(obj) === 0) {
-    Reflect.ownKeys(obj).forEach((key) => {
+    const keys2 = strict ? Reflect.ownKeys(obj) : Object.keys(obj);
+    keys2.forEach((key) => {
       iter(key, obj[key], obj);
     });
   } else {
@@ -2092,17 +1530,27 @@ function freeze$1(obj, deep = false) {
   if (isFrozen(obj) || isDraft$1(obj) || !isDraftable$1(obj))
     return obj;
   if (getArchtype(obj) > 1) {
-    obj.set = obj.add = obj.clear = obj.delete = dontMutateFrozenCollections;
+    Object.defineProperties(obj, {
+      set: dontMutateMethodOverride,
+      add: dontMutateMethodOverride,
+      clear: dontMutateMethodOverride,
+      delete: dontMutateMethodOverride
+    });
   }
   Object.freeze(obj);
   if (deep)
-    Object.entries(obj).forEach(([key, value]) => freeze$1(value, true));
+    Object.values(obj).forEach((value) => freeze$1(value, true));
   return obj;
 }
 function dontMutateFrozenCollections() {
   die(2);
 }
+var dontMutateMethodOverride = {
+  value: dontMutateFrozenCollections
+};
 function isFrozen(obj) {
+  if (obj === null || typeof obj !== "object")
+    return true;
   return Object.isFrozen(obj);
 }
 var plugins = {};
@@ -2190,11 +1638,13 @@ function processResult(result, scope) {
 function finalize(rootScope, value, path3) {
   if (isFrozen(value))
     return value;
+  const useStrictIteration = rootScope.immer_.shouldUseStrictIteration();
   const state = value[DRAFT_STATE];
   if (!state) {
     each(
       value,
-      (key, childValue) => finalizeProperty(rootScope, state, value, key, childValue, path3)
+      (key, childValue) => finalizeProperty(rootScope, state, value, key, childValue, path3),
+      useStrictIteration
     );
     return value;
   }
@@ -2217,7 +1667,16 @@ function finalize(rootScope, value, path3) {
     }
     each(
       resultEach,
-      (key, childValue) => finalizeProperty(rootScope, state, result, key, childValue, path3, isSet2)
+      (key, childValue) => finalizeProperty(
+        rootScope,
+        state,
+        result,
+        key,
+        childValue,
+        path3,
+        isSet2
+      ),
+      useStrictIteration
     );
     maybeFreeze(rootScope, result, false);
     if (path3 && rootScope.patches_) {
@@ -2232,6 +1691,16 @@ function finalize(rootScope, value, path3) {
   return state.copy_;
 }
 function finalizeProperty(rootScope, parentState, targetObject, prop2, childValue, rootPath, targetIsSet) {
+  if (childValue == null) {
+    return;
+  }
+  if (typeof childValue !== "object" && !targetIsSet) {
+    return;
+  }
+  const childIsFrozen = isFrozen(childValue);
+  if (childIsFrozen && !targetIsSet) {
+    return;
+  }
   if (process.env.NODE_ENV !== "production" && childValue === targetObject)
     die(5);
   if (isDraft$1(childValue)) {
@@ -2246,12 +1715,15 @@ function finalizeProperty(rootScope, parentState, targetObject, prop2, childValu
   } else if (targetIsSet) {
     targetObject.add(childValue);
   }
-  if (isDraftable$1(childValue) && !isFrozen(childValue)) {
+  if (isDraftable$1(childValue) && !childIsFrozen) {
     if (!rootScope.immer_.autoFreeze_ && rootScope.unfinalizedDrafts_ < 1) {
       return;
     }
+    if (parentState && parentState.base_ && parentState.base_[prop2] === childValue && childIsFrozen) {
+      return;
+    }
     finalize(rootScope, childValue);
-    if ((!parentState || !parentState.scope_.parent_) && typeof prop2 !== "symbol" && Object.prototype.propertyIsEnumerable.call(targetObject, prop2))
+    if ((!parentState || !parentState.scope_.parent_) && typeof prop2 !== "symbol" && (isMap$2(targetObject) ? targetObject.has(prop2) : Object.prototype.propertyIsEnumerable.call(targetObject, prop2)))
       maybeFreeze(rootScope, childValue);
   }
 }
@@ -2447,6 +1919,7 @@ var Immer2 = class {
   constructor(config) {
     this.autoFreeze_ = true;
     this.useStrictShallowCopy_ = false;
+    this.useStrictIteration_ = true;
     this.produce = (base, recipe, patchListener) => {
       if (typeof base === "function" && typeof recipe !== "function") {
         const defaultBase = recipe;
@@ -2509,6 +1982,8 @@ var Immer2 = class {
       this.setAutoFreeze(config.autoFreeze);
     if (typeof (config == null ? void 0 : config.useStrictShallowCopy) === "boolean")
       this.setUseStrictShallowCopy(config.useStrictShallowCopy);
+    if (typeof (config == null ? void 0 : config.useStrictIteration) === "boolean")
+      this.setUseStrictIteration(config.useStrictIteration);
   }
   createDraft(base) {
     if (!isDraftable$1(base))
@@ -2545,6 +2020,18 @@ var Immer2 = class {
   setUseStrictShallowCopy(value) {
     this.useStrictShallowCopy_ = value;
   }
+  /**
+   * Pass false to use faster iteration that skips non-enumerable properties
+   * but still handles symbols for compatibility.
+   *
+   * By default, strict iteration is enabled (includes all own properties).
+   */
+  setUseStrictIteration(value) {
+    this.useStrictIteration_ = value;
+  }
+  shouldUseStrictIteration() {
+    return this.useStrictIteration_;
+  }
   applyPatches(base, patches) {
     let i2;
     for (i2 = patches.length - 1; i2 >= 0; i2--) {
@@ -2583,17 +2070,23 @@ function currentImpl(value) {
     return value;
   const state = value[DRAFT_STATE];
   let copy2;
+  let strict = true;
   if (state) {
     if (!state.modified_)
       return state.base_;
     state.finalized_ = true;
     copy2 = shallowCopy$1(value, state.scope_.immer_.useStrictShallowCopy_);
+    strict = state.scope_.immer_.shouldUseStrictIteration();
   } else {
     copy2 = shallowCopy$1(value, true);
   }
-  each(copy2, (key, childValue) => {
-    set$3(copy2, key, currentImpl(childValue));
-  });
+  each(
+    copy2,
+    (key, childValue) => {
+      set$3(copy2, key, currentImpl(childValue));
+    },
+    strict
+  );
   if (state) {
     state.finalized_ = false;
   }
@@ -2601,14 +2094,8 @@ function currentImpl(value) {
 }
 var immer = new Immer2();
 var produce = immer.produce;
-immer.produceWithPatches.bind(
-  immer
-);
-immer.setAutoFreeze.bind(immer);
-immer.setUseStrictShallowCopy.bind(immer);
-immer.applyPatches.bind(immer);
-var createDraft$1 = immer.createDraft.bind(immer);
-var finishDraft = immer.finishDraft.bind(immer);
+var createDraft$1 = /* @__PURE__ */ immer.createDraft.bind(immer);
+var finishDraft = /* @__PURE__ */ immer.finishDraft.bind(immer);
 var PathRef = {
   transform(ref, op) {
     var {
@@ -10992,7 +10479,7 @@ var TextString = (props) => {
     ref
   }, initialText);
 };
-var MemoizedText$1 = /* @__PURE__ */ memo$1(/* @__PURE__ */ forwardRef((props, ref) => {
+var MemoizedText$1 = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef((props, ref) => {
   return /* @__PURE__ */ React__default.createElement("span", {
     "data-slate-string": true,
     ref
@@ -15604,8 +15091,9 @@ const devtoolsImpl = (fn, devtoolsOptions = {}) => (set2, get2, api) => {
     const r2 = set2(state, replace);
     if (!isRecording)
       return r2;
-    const inferredActionType = findCallerName(new Error().stack);
-    const action = nameOrAction === void 0 ? { type: anonymousActionType || inferredActionType || "anonymous" } : typeof nameOrAction === "string" ? { type: nameOrAction } : nameOrAction;
+    const action = nameOrAction === void 0 ? {
+      type: anonymousActionType || findCallerName(new Error().stack) || "anonymous"
+    } : typeof nameOrAction === "string" ? { type: nameOrAction } : nameOrAction;
     if (store === void 0) {
       connection == null ? void 0 : connection.send(action, get2());
       return r2;
@@ -15893,12 +15381,12 @@ const persistImpl = (config, baseOptions) => (set2, get2, api) => {
   const savedSetState = api.setState;
   api.setState = (state, replace) => {
     savedSetState(state, replace);
-    void setItem();
+    return setItem();
   };
   const configResult = config(
     (...args) => {
       set2(...args);
-      void setItem();
+      return setItem();
     },
     get2,
     api
@@ -38053,192 +37541,713 @@ const TableRowElement = withRef$1(
       children
     );
   }
-);
-function classNames$1(...classes) {
-  return classes.filter(Boolean).join(" ");
+);
+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 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 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);
       }
-    ),
-    [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();
@@ -38256,7 +38265,6 @@ function FieldsBuilder({
         key: field.name,
         field,
         activeFieldName,
-        hoveringFieldName,
         form,
         fieldPlugins,
         index
@@ -38269,8 +38277,7 @@ const InnerField = ({
   form,
   fieldPlugins,
   index,
-  activeFieldName,
-  hoveringFieldName
+  activeFieldName
 }) => {
   React.useEffect(() => {
     form.mutators.setFieldData(field.name, {
@@ -38293,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(".");
@@ -38329,11 +38333,7 @@ const InnerField = ({
             ...fieldProps,
             form: form.finalForm,
             tinaForm: form,
-            field: {
-              ...field,
-              focusIntent,
-              hoverIntent
-            }
+            field: { ...field, experimental_focusIntent: isActiveField }
           }
         );
       }
@@ -38342,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
           }
         );
@@ -39414,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(
@@ -39432,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" }
     }
@@ -39891,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)`
         }
@@ -39965,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,
@@ -39975,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",
     {
@@ -40062,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,
@@ -40123,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,
@@ -40254,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
       },
@@ -40755,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) => {
@@ -41128,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),
     " ",
@@ -41280,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();
@@ -41733,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) {
@@ -41864,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 = {
@@ -41932,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,
       {
@@ -41997,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,
     {
@@ -42921,7 +42907,10 @@ const formatCurrentDate = ({
   if (!dateFormat) {
     return format$1(displayDate, timeFormat);
   }
-  return `${format$1(displayDate, dateFormat)} ${format$1(displayDate, timeFormat)}`;
+  return `${format$1(displayDate, dateFormat)} ${format$1(
+    displayDate,
+    timeFormat
+  )}`;
 };
 function Calendar({
   className,
@@ -43323,7 +43312,8 @@ const DateTimePicker = React.forwardRef(
       }),
       [displayDate]
     );
-    const { options, localize: localize2, formatLong: formatLong2 } = locale;
+    const localeAny = locale;
+    const { options, localize: localize2, formatLong: formatLong2 } = localeAny || {};
     if (options && localize2 && formatLong2) {
       ({
         ...enUS,
@@ -43397,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;
@@ -44016,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")
@@ -44122,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)
     }
@@ -46531,7 +46532,7 @@ const NavProvider = ({
   };
   return /* @__PURE__ */ React__default.createElement(NavContext.Provider, { value }, children);
 };
-const version$1 = "3.2.0";
+const version$1 = "3.3.1";
 const VersionInfo = () => {
   var _a2, _b, _c, _d, _e, _f;
   const cms = useCMS();
@@ -47991,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 {
@@ -48025,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,
@@ -48052,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) {
@@ -48091,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
       );
@@ -48115,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
@@ -48132,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
@@ -48145,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;
@@ -48162,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 {
@@ -48222,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:
@@ -48491,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}"]`
       );
@@ -48532,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) {
@@ -48595,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;
@@ -48608,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",
     {
@@ -48619,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
@@ -48627,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);
@@ -48647,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,
@@ -52345,7 +52260,7 @@ const nld = [
   "in",
   "is",
   "ja",
-  "je ",
+  "je",
   "kan",
   "kon",
   "kunnen",
@@ -63635,195 +63550,202 @@ var __publicField2 = (obj, key, value) => {
   __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+const INDEXABLE_NODE_TYPES = ["text", "code_block", "html"];
 class StringBuilder {
   constructor(limit) {
-    __publicField2(this, "buffer");
-    __publicField2(this, "length", 0);
+    __publicField2(this, "buffer", []);
     __publicField2(this, "limit");
-    this.buffer = [];
+    __publicField2(this, "length", 0);
     this.limit = limit;
   }
   append(str) {
-    if (this.length + str.length > this.limit) {
+    if (this.length + str.length > this.limit)
       return true;
-    } else {
-      this.buffer.push(str);
-      this.length += str.length;
-      if (this.length > this.limit) {
-        return true;
-      }
-      return false;
-    }
+    this.buffer.push(str);
+    this.length += str.length;
+    return this.length > this.limit;
   }
   toString() {
     return this.buffer.join(" ");
   }
 }
-const extractText = (data, acc, indexableNodeTypes) => {
-  var _a2, _b;
-  if (data) {
-    if (indexableNodeTypes.indexOf(data.type) !== -1 && (data.text || data.value)) {
-      const tokens = tokenizeString(data.text || data.value);
-      for (const token of tokens) {
-        if (acc.append(token)) {
-          return;
-        }
-      }
+const tokenizeString = (str) => {
+  return str.split(/[\s\.,]+/).map((s2) => s2.toLowerCase()).filter((s2) => s2);
+};
+const extractText = (data, builder, nodeTypes) => {
+  var _a2;
+  if (!data)
+    return;
+  if (nodeTypes.includes(data.type ?? "") && (data.text || data.value)) {
+    const tokens = tokenizeString(data.text || data.value || "");
+    for (const token of tokens) {
+      if (builder.append(token))
+        return;
     }
-    (_b = (_a2 = data.children) == null ? void 0 : _a2.forEach) == null ? void 0 : _b.call(
-      _a2,
-      (child) => extractText(child, acc, indexableNodeTypes)
-    );
   }
+  (_a2 = data.children) == null ? void 0 : _a2.forEach((child) => extractText(child, builder, nodeTypes));
 };
-const relativePath = (path3, collection) => {
+const getRelativePath = (path3, collection) => {
   return path3.replace(/\\/g, "/").replace(collection.path, "").replace(/^\/|\/$/g, "");
 };
-const tokenizeString = (str) => {
-  return str.split(/[\s\.,]+/).map((s2) => s2.toLowerCase()).filter((s2) => s2);
-};
-const processTextFieldValue = (value, maxLen) => {
+const processTextField = (value, maxLength) => {
   const tokens = tokenizeString(value);
-  const builder = new StringBuilder(maxLen);
+  const builder = new StringBuilder(maxLength);
   for (const part of tokens) {
-    if (builder.append(part)) {
+    if (builder.append(part))
       break;
-    }
   }
   return builder.toString();
 };
+const processRichTextField = (value, maxLength) => {
+  const builder = new StringBuilder(maxLength);
+  extractText(value, builder, INDEXABLE_NODE_TYPES);
+  return builder.toString();
+};
+const processObjectField = (data, path3, collection, textIndexLength, field) => {
+  if (field.list) {
+    return data.map(
+      (obj) => processDocumentForIndexing(obj, path3, collection, textIndexLength, field)
+    );
+  }
+  return processDocumentForIndexing(
+    data,
+    path3,
+    collection,
+    textIndexLength,
+    field
+  );
+};
+const processStringField = (data, maxLength, isList) => {
+  if (isList) {
+    return data.map(
+      (value) => processTextField(value, maxLength)
+    );
+  }
+  return processTextField(data, maxLength);
+};
+const processRichTextFieldData = (data, maxLength, isList) => {
+  if (isList) {
+    return data.map(
+      (value) => processRichTextField(value, maxLength)
+    );
+  }
+  return processRichTextField(data, maxLength);
+};
 const processDocumentForIndexing = (data, path3, collection, textIndexLength, field) => {
   if (!field) {
-    const relPath = relativePath(path3, collection);
-    data["_id"] = `${collection.name}:${relPath}`;
-    data["_relativePath"] = relPath;
+    const relativePath = getRelativePath(path3, collection);
+    data["_id"] = `${collection.name}:${relativePath}`;
+    data["_relativePath"] = relativePath;
   }
-  for (const f2 of (field == null ? void 0 : field.fields) || collection.fields || []) {
+  const fields = (field == null ? void 0 : field.fields) || collection.fields || [];
+  for (const f2 of fields) {
     if (!f2.searchable) {
       delete data[f2.name];
       continue;
     }
-    const isList = f2.list;
-    if (data[f2.name]) {
-      if (f2.type === "object") {
-        if (isList) {
-          data[f2.name] = data[f2.name].map(
-            (obj) => processDocumentForIndexing(
-              obj,
-              path3,
-              collection,
-              textIndexLength,
-              f2
-            )
-          );
-        } else {
-          data[f2.name] = processDocumentForIndexing(
-            data[f2.name],
-            path3,
-            collection,
-            textIndexLength,
-            f2
-          );
-        }
-      } else if (f2.type === "string") {
-        const fieldTextIndexLength = f2.maxSearchIndexFieldLength || textIndexLength;
-        if (isList) {
-          data[f2.name] = data[f2.name].map(
-            (value) => processTextFieldValue(value, fieldTextIndexLength)
-          );
-        } else {
-          data[f2.name] = processTextFieldValue(
-            data[f2.name],
-            fieldTextIndexLength
-          );
-        }
-      } else if (f2.type === "rich-text") {
-        const fieldTextIndexLength = f2.maxSearchIndexFieldLength || textIndexLength;
-        if (isList) {
-          data[f2.name] = data[f2.name].map((value) => {
-            const acc = new StringBuilder(fieldTextIndexLength);
-            extractText(value, acc, ["text", "code_block", "html"]);
-            return acc.toString();
-          });
-        } else {
-          const acc = new StringBuilder(fieldTextIndexLength);
-          extractText(data[f2.name], acc, ["text", "code_block", "html"]);
-          data[f2.name] = acc.toString();
-        }
-      }
+    if (!data[f2.name])
+      continue;
+    const fieldMaxLength = f2.maxSearchIndexFieldLength || textIndexLength;
+    const isList = Boolean(f2.list);
+    switch (f2.type) {
+      case "object":
+        data[f2.name] = processObjectField(
+          data[f2.name],
+          path3,
+          collection,
+          textIndexLength,
+          f2
+        );
+        break;
+      case "string":
+        data[f2.name] = processStringField(
+          data[f2.name],
+          fieldMaxLength,
+          isList
+        );
+        break;
+      case "rich-text":
+        data[f2.name] = processRichTextFieldData(
+          data[f2.name],
+          fieldMaxLength,
+          isList
+        );
+        break;
     }
   }
   return data;
 };
-const memo = {};
+const stopwordCache = {};
 const lookupStopwords = (keys2, defaultStopWords = eng) => {
-  let stopwords = defaultStopWords;
-  if (keys2) {
-    if (memo[keys2.join(",")]) {
-      return memo[keys2.join(",")];
-    }
-    stopwords = [];
-    for (const key of keys2) {
-      stopwords.push(...sw[key]);
-    }
-    memo[keys2.join(",")] = stopwords;
+  if (!keys2) {
+    return defaultStopWords;
+  }
+  const cacheKey = keys2.join(",");
+  if (stopwordCache[cacheKey]) {
+    return stopwordCache[cacheKey];
   }
+  const stopwords = keys2.flatMap((key) => sw[key] || []);
+  stopwordCache[cacheKey] = stopwords;
   return stopwords;
 };
 const queryToSearchIndexQuery = (query, stopwordLanguages) => {
-  let q2;
   const parts = query.split(" ");
   const stopwords = lookupStopwords(stopwordLanguages);
   if (parts.length === 1) {
-    q2 = { AND: [parts[0]] };
-  } else {
-    q2 = {
-      AND: parts.filter(
-        (part) => part.toLowerCase() !== "and" && stopwords.indexOf(part.toLowerCase()) === -1
-      )
-    };
+    return { AND: [parts[0]] };
   }
-  return q2;
+  const filteredParts = parts.filter(
+    (part) => part.toLowerCase() !== "and" && !stopwords.includes(part.toLowerCase())
+  );
+  return { AND: filteredParts };
 };
 const optionsToSearchIndexOptions = (options) => {
-  const opt = {};
-  if (options == null ? void 0 : options.limit) {
-    opt["PAGE"] = {
+  if (!(options == null ? void 0 : options.limit))
+    return {};
+  return {
+    PAGE: {
       SIZE: options.limit,
-      NUMBER: (options == null ? void 0 : options.cursor) ? parseInt(options.cursor) : 0
-    };
-  }
-  return opt;
+      NUMBER: options.cursor ? parseInt(options.cursor) : 0
+    }
+  };
 };
 const parseSearchIndexResponse = (data, options) => {
-  const results = data["RESULT"];
-  const total = data["RESULT_LENGTH"];
-  if ((options == null ? void 0 : options.cursor) && (options == null ? void 0 : options.limit)) {
-    const prevCursor = options.cursor === "0" ? null : (parseInt(options.cursor) - 1).toString();
-    const nextCursor = total <= (parseInt(options.cursor) + 1) * options.limit ? null : (parseInt(options.cursor) + 1).toString();
-    return {
-      results,
-      total,
-      prevCursor,
-      nextCursor
-    };
-  } else if (!(options == null ? void 0 : options.cursor) && (options == null ? void 0 : options.limit)) {
-    const prevCursor = null;
-    const nextCursor = total <= options.limit ? null : "1";
+  const resultArray = (data == null ? void 0 : data.RESULT) ?? (data == null ? void 0 : data.results);
+  if (!data || !Array.isArray(resultArray)) {
     return {
-      results,
-      total,
-      prevCursor,
-      nextCursor
+      results: [],
+      total: 0,
+      prevCursor: null,
+      nextCursor: null,
+      fuzzyMatches: void 0
     };
-  } else {
+  }
+  const results = data.RESULT ?? data.results;
+  const total = data.RESULT_LENGTH ?? data.total ?? 0;
+  const fuzzyMatches = data.FUZZY_MATCHES ?? data.fuzzyMatches;
+  const nextCursor = data.NEXT_CURSOR ?? data.nextCursor;
+  const prevCursor = data.PREV_CURSOR ?? data.prevCursor;
+  if (nextCursor !== void 0 || prevCursor !== void 0) {
     return {
       results,
       total,
-      prevCursor: null,
-      nextCursor: null
+      prevCursor: prevCursor ?? null,
+      nextCursor: nextCursor ?? null,
+      fuzzyMatches
     };
   }
+  const currentPage = (options == null ? void 0 : options.cursor) ? parseInt(options.cursor) : 0;
+  const pageSize = options == null ? void 0 : options.limit;
+  const hasPreviousPage = currentPage > 0;
+  const hasNextPage = pageSize ? total > (currentPage + 1) * pageSize : false;
+  return {
+    results,
+    total,
+    prevCursor: hasPreviousPage ? (currentPage - 1).toString() : null,
+    nextCursor: hasNextPage ? (currentPage + 1).toString() : null,
+    fuzzyMatches
+  };
 };
 const CREATE_DOCUMENT_GQL = `#graphql
 mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
@@ -63879,7 +63801,7 @@ class TinaAdminApi {
   fetchCollections() {
     return this.schema.getCollections();
   }
-  async renameDocument({ collection, relativePath: relativePath2, newRelativePath }) {
+  async renameDocument({ collection, relativePath, newRelativePath }) {
     await this.api.request(
       `#graphql
               mutation RenameDocument($collection: String!, $relativePath: String! $newRelativePath: String!) {
@@ -63888,7 +63810,7 @@ class TinaAdminApi {
   }
               }
             `,
-      { variables: { collection, relativePath: relativePath2, newRelativePath } }
+      { variables: { collection, relativePath, newRelativePath } }
     );
     if (this.searchClient) {
       const { document: doc } = await this.fetchDocument(
@@ -63902,18 +63824,18 @@ class TinaAdminApi {
         this.maxSearchIndexFieldLength
       );
       await this.searchClient.put([processed]);
-      await this.searchClient.del([`${collection.name}:${relativePath2}`]);
+      await this.searchClient.del([`${collection.name}:${relativePath}`]);
     }
   }
   async deleteDocument({
     collection,
-    relativePath: relativePath2
+    relativePath
   }) {
     var _a2;
     await this.api.request(DELETE_DOCUMENT_GQL, {
-      variables: { collection, relativePath: relativePath2 }
+      variables: { collection, relativePath }
     });
-    await ((_a2 = this.searchClient) == null ? void 0 : _a2.del([`${collection}:${relativePath2}`]));
+    await ((_a2 = this.searchClient) == null ? void 0 : _a2.del([`${collection}:${relativePath}`]));
   }
   async fetchCollection(collectionName, includeDocuments, folder = "", after3, sortKey, order, filterArgs) {
     let filter2 = null;
@@ -64068,7 +63990,7 @@ class TinaAdminApi {
       }
     }
   }
-  async fetchDocument(collectionName, relativePath2, values = true) {
+  async fetchDocument(collectionName, relativePath, values = true) {
     let query;
     if (values) {
       query = `#graphql
@@ -64103,26 +64025,26 @@ class TinaAdminApi {
         }`;
     }
     const response = await this.api.request(query, {
-      variables: { collection: collectionName, relativePath: relativePath2 }
+      variables: { collection: collectionName, relativePath }
     });
     return response;
   }
-  async createDocument(collection, relativePath2, params) {
+  async createDocument(collection, relativePath, params) {
     const response = await this.api.request(CREATE_DOCUMENT_GQL, {
       variables: {
         collection: collection.name,
-        relativePath: relativePath2,
+        relativePath,
         params
       }
     });
     if (this.searchClient) {
       const { document: doc } = await this.fetchDocument(
         collection.name,
-        relativePath2
+        relativePath
       );
       const processed = processDocumentForIndexing(
         doc["_values"],
-        `${collection.path}/${relativePath2}`,
+        `${collection.path}/${relativePath}`,
         collection,
         this.maxSearchIndexFieldLength
       );
@@ -64130,22 +64052,22 @@ class TinaAdminApi {
     }
     return response;
   }
-  async updateDocument(collection, relativePath2, params) {
+  async updateDocument(collection, relativePath, params) {
     const response = await this.api.request(UPDATE_DOCUMENT_GQL, {
       variables: {
         collection: collection.name,
-        relativePath: relativePath2,
+        relativePath,
         params
       }
     });
     if (this.searchClient) {
       const { document: doc } = await this.fetchDocument(
         collection.name,
-        relativePath2
+        relativePath
       );
       const processed = processDocumentForIndexing(
         doc["_values"],
-        `${collection.path}/${relativePath2}`,
+        `${collection.path}/${relativePath}`,
         collection,
         this.maxSearchIndexFieldLength
       );
@@ -64268,7 +64190,7 @@ const CreateBranchModal = ({
       }
       const collection = tinaApi.schema.getCollectionByFullPath(path3);
       const params = tinaApi.schema.transformPayload(collection.name, values);
-      const relativePath2 = pathRelativeToCollection(collection.path, path3);
+      const relativePath = pathRelativeToCollection(collection.path, path3);
       const result = await tinaApi.executeEditorialWorkflow({
         branchName,
         baseBranch: tinaApi.branch,
@@ -64277,7 +64199,7 @@ const CreateBranchModal = ({
           query: graphql2,
           variables: {
             collection: collection.name,
-            relativePath: relativePath2,
+            relativePath,
             params
           }
         },
@@ -64309,7 +64231,7 @@ const CreateBranchModal = ({
         0
       );
       if (crudType === "create") {
-        const folderPath = relativePath2.includes("/") ? relativePath2.substring(0, relativePath2.lastIndexOf("/")) : "";
+        const folderPath = relativePath.includes("/") ? relativePath.substring(0, relativePath.lastIndexOf("/")) : "";
         window.location.hash = `#/collections/${collection.name}${folderPath ? `/${folderPath}` : ""}`;
       }
       close2();
@@ -64616,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(
@@ -64676,7 +64597,7 @@ const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React.createElem
 const CreateBranchModel = ({
   close: close2,
   safeSubmit,
-  relativePath: relativePath2,
+  relativePath,
   values,
   crudType
 }) => /* @__PURE__ */ React.createElement(
@@ -64684,7 +64605,7 @@ const CreateBranchModel = ({
   {
     close: close2,
     safeSubmit,
-    path: relativePath2,
+    path: relativePath,
     values,
     crudType
   }
@@ -64789,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 })
@@ -65045,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(
@@ -118967,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,
     {
@@ -119064,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 })
       )
@@ -119904,44 +119825,68 @@ class LocalClient extends Client {
 }
 class TinaCMSSearchClient {
   constructor(client, tinaSearchConfig) {
+    __publicField(this, "client");
+    __publicField(this, "fuzzyEnabled");
+    __publicField(this, "stopwordLanguages");
+    __publicField(this, "defaultFuzzyOptions");
     this.client = client;
-    this.tinaSearchConfig = tinaSearchConfig;
+    this.fuzzyEnabled = (tinaSearchConfig == null ? void 0 : tinaSearchConfig.fuzzyEnabled) ?? true;
+    this.stopwordLanguages = tinaSearchConfig == null ? void 0 : tinaSearchConfig.stopwordLanguages;
+    this.defaultFuzzyOptions = tinaSearchConfig == null ? void 0 : tinaSearchConfig.fuzzyOptions;
   }
-  async query(query, options) {
-    var _a2;
+  getSearchBaseUrl(useFuzzy) {
+    const version2 = useFuzzy ? "v2" : "";
+    const searchPath = version2 ? `${version2}/searchIndex` : "searchIndex";
+    return `${this.client.contentApiBase}/${searchPath}/${this.client.clientId}/${this.client.getBranch()}`;
+  }
+  buildSearchUrl(query, options, useFuzzy) {
+    const baseUrl = this.getSearchBaseUrl(useFuzzy);
+    if (useFuzzy) {
+      const params = new URLSearchParams();
+      params.set("query", query);
+      if (options == null ? void 0 : options.collection) {
+        params.set("collection", options.collection);
+      }
+      if (options == null ? void 0 : options.limit) {
+        params.set("limit", options.limit.toString());
+      }
+      if (options == null ? void 0 : options.cursor) {
+        params.set("cursor", options.cursor);
+      }
+      return `${baseUrl}?${params.toString()}`;
+    }
+    const queryWithCollection = (options == null ? void 0 : options.collection) ? `${query} AND _collection:${options.collection}` : query;
     const q2 = queryToSearchIndexQuery(
-      query,
-      (_a2 = this.tinaSearchConfig) == null ? void 0 : _a2.stopwordLanguages
+      queryWithCollection,
+      this.stopwordLanguages
     );
     const opt = optionsToSearchIndexOptions(options);
     const optionsParam = opt["PAGE"] ? `&options=${JSON.stringify(opt)}` : "";
-    const res = await this.client.authProvider.fetchWithToken(
-      `${this.client.contentApiBase}/searchIndex/${this.client.clientId}/${this.client.getBranch()}?q=${JSON.stringify(q2)}${optionsParam}`
-    );
+    return `${baseUrl}?q=${JSON.stringify(q2)}${optionsParam}`;
+  }
+  async query(query, options) {
+    const useFuzzy = (options == null ? void 0 : options.fuzzy) !== void 0 ? options.fuzzy : this.fuzzyEnabled;
+    const url = this.buildSearchUrl(query, options, useFuzzy);
+    const res = await this.client.authProvider.fetchWithToken(url);
     return parseSearchIndexResponse(await res.json(), options);
   }
   async del(ids) {
+    const baseUrl = this.getSearchBaseUrl(this.fuzzyEnabled);
     const res = await this.client.authProvider.fetchWithToken(
-      `${this.client.contentApiBase}/searchIndex/${this.client.clientId}/${this.client.getBranch()}?ids=${ids.join(",")}`,
-      {
-        method: "DELETE"
-      }
+      `${baseUrl}?ids=${ids.join(",")}`,
+      { method: "DELETE" }
     );
     if (res.status !== 200) {
       throw new Error("Failed to update search index");
     }
   }
   async put(docs) {
-    const res = await this.client.authProvider.fetchWithToken(
-      `${this.client.contentApiBase}/searchIndex/${this.client.clientId}/${this.client.getBranch()}`,
-      {
-        method: "POST",
-        body: JSON.stringify({ docs }),
-        headers: {
-          "Content-Type": "application/json"
-        }
-      }
-    );
+    const baseUrl = this.getSearchBaseUrl(this.fuzzyEnabled);
+    const res = await this.client.authProvider.fetchWithToken(baseUrl, {
+      method: "POST",
+      body: JSON.stringify({ docs }),
+      headers: { "Content-Type": "application/json" }
+    });
     if (res.status !== 200) {
       throw new Error("Failed to update search index");
     }
@@ -119949,29 +119894,62 @@ class TinaCMSSearchClient {
   supportsClientSideIndexing() {
     return true;
   }
+  getDefaultLimit() {
+    return 15;
+  }
 }
 class LocalSearchClient {
-  constructor(client) {
+  constructor(client, tinaSearchConfig) {
+    __publicField(this, "client");
+    __publicField(this, "fuzzyEnabled");
+    __publicField(this, "defaultFuzzyOptions");
     this.client = client;
+    this.fuzzyEnabled = (tinaSearchConfig == null ? void 0 : tinaSearchConfig.fuzzyEnabled) ?? true;
+    this.defaultFuzzyOptions = tinaSearchConfig == null ? void 0 : tinaSearchConfig.fuzzyOptions;
   }
-  async query(query, options) {
-    const q2 = queryToSearchIndexQuery(query);
+  getSearchBaseUrl(useFuzzy) {
+    return useFuzzy ? "http://localhost:4001/v2/searchIndex" : "http://localhost:4001/searchIndex";
+  }
+  buildSearchUrl(query, options, useFuzzy) {
+    const baseUrl = this.getSearchBaseUrl(!!useFuzzy);
+    if (useFuzzy) {
+      const params = new URLSearchParams();
+      params.set("query", query);
+      if (options == null ? void 0 : options.collection) {
+        params.set("collection", options.collection);
+      }
+      if (options == null ? void 0 : options.limit) {
+        params.set("limit", options.limit.toString());
+      }
+      if (options == null ? void 0 : options.cursor) {
+        params.set("cursor", options.cursor);
+      }
+      return `${baseUrl}?${params.toString()}`;
+    }
+    const queryWithCollection = (options == null ? void 0 : options.collection) ? `${query} AND _collection:${options.collection}` : query;
+    const q2 = queryToSearchIndexQuery(queryWithCollection);
     const opt = optionsToSearchIndexOptions(options);
     const optionsParam = opt["PAGE"] ? `&options=${JSON.stringify(opt)}` : "";
-    const res = await this.client.authProvider.fetchWithToken(
-      `http://localhost:4001/searchIndex?q=${JSON.stringify(q2)}${optionsParam}`
-    );
+    return `${baseUrl}?q=${JSON.stringify(q2)}${optionsParam}`;
+  }
+  async query(query, options) {
+    const useFuzzy = (options == null ? void 0 : options.fuzzy) !== void 0 ? options.fuzzy : this.fuzzyEnabled;
+    const url = this.buildSearchUrl(query, options, useFuzzy);
+    const res = await this.client.authProvider.fetchWithToken(url);
     return parseSearchIndexResponse(await res.json(), options);
   }
-  del(ids) {
-    return Promise.resolve(void 0);
+  del(_ids) {
+    return Promise.resolve();
   }
-  put(docs) {
-    return Promise.resolve(void 0);
+  put(_docs) {
+    return Promise.resolve();
   }
   supportsClientSideIndexing() {
     return false;
   }
+  getDefaultLimit() {
+    return 15;
+  }
 }
 function ModalBuilder(modalProps) {
   return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(ModalPopup, null, /* @__PURE__ */ React__default.createElement(ModalHeader, null, modalProps.title), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, modalProps.message && (typeof modalProps.message === "string" ? /* @__PURE__ */ React__default.createElement("p", null, modalProps.message) : modalProps.message), modalProps.error && /* @__PURE__ */ React__default.createElement(ErrorLabel, null, modalProps.error), modalProps.children), /* @__PURE__ */ React__default.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React__default.createElement(AsyncButton, { key: action.name, ...action })))));
@@ -120266,19 +120244,22 @@ const TinaCloudProvider = (props) => {
     cms.api.tina.setBranch(currentBranch);
   }
   useEffect(() => {
-    var _a3, _b2, _c2, _d, _e, _f;
+    var _a3, _b2, _c2, _d, _e, _f, _g, _h;
     let searchClient;
     if (props.isLocalClient) {
-      searchClient = new LocalSearchClient(cms.api.tina);
+      searchClient = new LocalSearchClient(
+        cms.api.tina,
+        (_b2 = (_a3 = props.schema.config) == null ? void 0 : _a3.search) == null ? void 0 : _b2.tina
+      );
     } else {
-      const hasTinaSearch = Boolean((_b2 = (_a3 = props.schema.config) == null ? void 0 : _a3.search) == null ? void 0 : _b2.tina);
+      const hasTinaSearch = Boolean((_d = (_c2 = props.schema.config) == null ? void 0 : _c2.search) == null ? void 0 : _d.tina);
       if (hasTinaSearch) {
         searchClient = new TinaCMSSearchClient(
           cms.api.tina,
-          (_d = (_c2 = props.schema.config) == null ? void 0 : _c2.search) == null ? void 0 : _d.tina
+          (_f = (_e = props.schema.config) == null ? void 0 : _e.search) == null ? void 0 : _f.tina
         );
       } else {
-        searchClient = (_f = (_e = props.schema.config) == null ? void 0 : _e.search) == null ? void 0 : _f.searchClient;
+        searchClient = (_h = (_g = props.schema.config) == null ? void 0 : _g.search) == null ? void 0 : _h.searchClient;
       }
     }
     if (searchClient) {
@@ -120412,18 +120393,18 @@ class ContentCreatorPlugin {
     this.onChange = options.onChange;
     this.initialValues = options.initialValues;
   }
-  async onSubmit({ collection, template, relativePath: relativePath2 }, cms) {
+  async onSubmit({ collection, template, relativePath }, cms) {
     try {
       const selectedCollection = this.collections.find(
         (collectionItem) => collectionItem.slug === collection
       );
       const collectionFormat = selectedCollection.format;
       const extensionLength = -1 * (collectionFormat.length + 1);
-      let relativePathWithExt = relativePath2;
-      if (relativePath2.slice(extensionLength).toLocaleLowerCase() === `.${collectionFormat}`) {
-        relativePathWithExt = `${relativePath2.slice(0, -3)}.${collectionFormat}`;
+      let relativePathWithExt = relativePath;
+      if (relativePath.slice(extensionLength).toLocaleLowerCase() === `.${collectionFormat}`) {
+        relativePathWithExt = `${relativePath.slice(0, -3)}.${collectionFormat}`;
       } else {
-        relativePathWithExt = `${relativePath2}.${collectionFormat}`;
+        relativePathWithExt = `${relativePath}.${collectionFormat}`;
       }
       const payload = {
         relativePath: relativePathWithExt,
@@ -121324,6 +121305,10 @@ const CollectionListPage = () => {
       booleanEquals: null
     }));
   }, [collectionName]);
+  useEffect(() => {
+    setEndCursor("");
+    setPrevCursors([]);
+  }, [search]);
   const tableRowStyle = "hover:bg-gray-50/50 border-b-2 border-gray-50 transition-colors duration-300";
   const tableHeadingCellStyle = "px-3 py-3 text-left text-xs font-bold text-gray-700 tracking-wider";
   const tableHeadingStyle2 = "bg-gray-100 border-b-2 border-gray-200";
@@ -121583,6 +121568,8 @@ const CollectionListPage = () => {
         ))), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-1 flex-row gap-2 items-end w-full" }, searchEnabled ? /* @__PURE__ */ React__default.createElement(
           SearchInput,
           {
+            cms,
+            collectionName,
             loading: _loading,
             search,
             setSearch,
@@ -121915,46 +121902,67 @@ const SearchInput = ({
   setSearchInput
 }) => {
   const [searchLoaded, setSearchLoaded] = useState(false);
+  const inputRef = React__default.useRef(null);
   useEffect(() => {
-    if (loading) {
+    setSearchLoaded(!loading);
+  }, [loading]);
+  const handleKeyDown = (e3) => {
+    if (e3.key === "Enter") {
+      e3.preventDefault();
+      if (searchInput.trim()) {
+        setSearch(searchInput);
+        setSearchLoaded(false);
+      }
+    }
+  };
+  const handleSubmit = (e3) => {
+    e3.preventDefault();
+    if (searchInput.trim()) {
+      setSearch(searchInput);
       setSearchLoaded(false);
-    } else {
-      setSearchLoaded(true);
     }
-  }, [loading]);
-  return /* @__PURE__ */ React__default.createElement("form", { className: "flex flex-1 flex-col gap-2 items-start w-full" }, /* @__PURE__ */ React__default.createElement("div", { className: "h-4" }), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-center w-full md:w-auto gap-3" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1 min-w-[200px] w-full md:w-auto relative" }, /* @__PURE__ */ React__default.createElement(BiSearch, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none" }), /* @__PURE__ */ React__default.createElement(
-    "input",
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    "form",
     {
-      type: "text",
-      name: "search",
-      placeholder: "Search...",
-      value: searchInput,
-      onChange: (e3) => {
-        setSearchInput(e3.target.value);
-      },
-      onKeyDown: (e3) => {
-        if (e3.key === "Enter") {
+      className: "flex flex-1 flex-col gap-2 items-start w-full",
+      onSubmit: handleSubmit
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "h-4" }),
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center w-full md:w-auto gap-3" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1 min-w-[200px] relative" }, /* @__PURE__ */ React__default.createElement(BiSearch, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none z-10" }), /* @__PURE__ */ React__default.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        name: "search",
+        placeholder: "Search...",
+        value: searchInput,
+        onChange: (e3) => setSearchInput(e3.target.value),
+        onKeyDown: handleKeyDown,
+        className: "shadow appearance-none bg-white block pl-10 pr-10 py-2 truncate w-full text-base border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded placeholder:text-gray-300 text-gray-600 focus:text-gray-900",
+        autoComplete: "off"
+      }
+    ), search && searchLoaded && /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        onClick: (e3) => {
           e3.preventDefault();
-          if (searchInput.trim()) {
-            setSearch(searchInput);
-            setSearchLoaded(false);
-          }
-        }
+          setSearch("");
+          setSearchInput("");
+        },
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors z-10"
       },
-      className: "shadow appearance-none bg-white block pl-10 pr-10 py-2 truncate w-full text-base border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded placeholder:text-gray-300 text-gray-600 focus:text-gray-900"
-    }
-  ), search && searchLoaded && /* @__PURE__ */ React__default.createElement(
-    "button",
-    {
-      onClick: (e3) => {
-        e3.preventDefault();
-        setSearch("");
-        setSearchInput("");
+      /* @__PURE__ */ React__default.createElement(BiX, { className: "w-5 h-5" })
+    )), /* @__PURE__ */ React__default.createElement(
+      Button$2,
+      {
+        variant: "primary",
+        type: "submit",
+        className: "focus:ring-0 focus:shadow-none"
       },
-      className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
-    },
-    /* @__PURE__ */ React__default.createElement(BiX, { className: "w-5 h-5" })
-  ))));
+      "Search"
+    ))
+  );
 };
 const Breadcrumb = ({ folder, navigate, collectionName }) => {
   const folderArray = folder.name.split("/");
@@ -122222,17 +122230,16 @@ const useSearchCollection = (cms, collectionName, includeDocuments = true, folde
     const searchCollection = async () => {
       if (await api.isAuthenticated() && !folder.loading && !cancelled) {
         try {
-          const response = await cms.api.search.query(
-            `${search} AND _collection:${collectionName}`,
-            {
-              limit: 15,
-              cursor: after3
-            }
-          );
+          const response = await cms.api.search.query(search, {
+            limit: 15,
+            cursor: after3,
+            collection: collectionName
+          });
+          const results = (response == null ? void 0 : response.results) ?? [];
           const docs = await Promise.allSettled(
-            response.results.map((result) => {
-              const [collection2, relativePath2] = result._id.split(":");
-              return api.fetchDocument(collection2, relativePath2, false);
+            results.map((result) => {
+              const [collection2, relativePath] = result._id.split(":");
+              return api.fetchDocument(collection2, relativePath, false);
             })
           );
           const edges2 = docs.filter((p2) => {
@@ -122240,21 +122247,22 @@ const useSearchCollection = (cms, collectionName, includeDocuments = true, folde
             return p2.status === "fulfilled" && !!((_a2 = p2.value) == null ? void 0 : _a2.document);
           }).map((result) => ({ node: result.value.document }));
           const c2 = await api.fetchCollection(collectionName, false, "");
-          setCollection({
-            format: collection.format,
-            label: collection.label,
+          const collectionData = {
+            format: c2.format,
+            label: c2.label,
             name: collectionName,
-            templates: collection.templates,
+            templates: c2.templates,
             documents: {
               pageInfo: {
-                hasNextPage: !!response.nextCursor,
-                hasPreviousPage: !!response.prevCursor,
+                hasNextPage: !!(response == null ? void 0 : response.nextCursor),
+                hasPreviousPage: !!(response == null ? void 0 : response.prevCursor),
                 startCursor: "",
-                endCursor: response.nextCursor || ""
+                endCursor: (response == null ? void 0 : response.nextCursor) || ""
               },
               edges: edges2
             }
-          });
+          };
+          setCollection(collectionData);
         } catch (error22) {
           cms.alerts.error(
             `[${error22.name}] GetCollection failed: ${error22.message}`
@@ -122357,14 +122365,14 @@ const createDocument = async (cms, collection, template, mutationInfo, folder, v
     throw new Error("Filename must be a string");
   }
   const appendFolder = folder && !filename.startsWith("/") ? `/${folder}/` : "/";
-  const relativePath2 = `${appendFolder}${filename}.${collection.format}`;
+  const relativePath = `${appendFolder}${filename}.${collection.format}`;
   const params = api.schema.transformPayload(collection.name, {
     _collection: collection.name,
     ...template && { _template: template.name },
     ...leftover
   });
   if (await api.isAuthenticated()) {
-    await api.createDocument(collection, relativePath2, params);
+    await api.createDocument(collection, relativePath, params);
   } else {
     const authMessage = `CreateDocument failed: User is no longer authenticated; please login and try again.`;
     cms.alerts.error(authMessage);
@@ -122614,7 +122622,7 @@ const RenderForm$1 = ({
     ), /* @__PURE__ */ React__default.createElement(FormStatus, { pristine: formIsPristine }))
   ), activeForm && /* @__PURE__ */ React__default.createElement(FormBuilder, { form: activeForm, onPristineChange: setFormIsPristine })));
 };
-const useGetDocument = (cms, collectionName, relativePath2) => {
+const useGetDocument = (cms, collectionName, relativePath) => {
   const api = new TinaAdminApi(cms);
   const [document2, setDocument] = useState(void 0);
   const [loading, setLoading] = useState(true);
@@ -122626,7 +122634,7 @@ const useGetDocument = (cms, collectionName, relativePath2) => {
         try {
           const response = await api.fetchDocument(
             collectionName,
-            relativePath2
+            relativePath
           );
           if (!isCancelled) {
             setDocument(response.document);
@@ -122651,19 +122659,19 @@ const useGetDocument = (cms, collectionName, relativePath2) => {
     return () => {
       isCancelled = true;
     };
-  }, [cms, collectionName, relativePath2]);
+  }, [cms, collectionName, relativePath]);
   return { document: document2, loading, error: error2 };
 };
 const GetDocument = ({
   cms,
   collectionName,
-  relativePath: relativePath2,
+  relativePath,
   children
 }) => {
   const { document: document2, loading, error: error2 } = useGetDocument(
     cms,
     collectionName,
-    relativePath2
+    relativePath
   );
   if (error2) {
     return /* @__PURE__ */ React__default.createElement(FullscreenError, null);
@@ -122686,7 +122694,7 @@ const CollectionDuplicatePage = () => {
       includeDocuments: false
     },
     (collection) => {
-      const relativePath2 = `${filename.startsWith("~/") ? filename.substring(2) : filename}.${collection.format}`;
+      const relativePath = `${filename.startsWith("~/") ? filename.substring(2) : filename}.${collection.format}`;
       const mutationInfo = {
         includeCollection: true,
         includeTemplate: !!collection.templates
@@ -122696,7 +122704,7 @@ const CollectionDuplicatePage = () => {
         {
           cms,
           collectionName: collection.name,
-          relativePath: relativePath2
+          relativePath
         },
         (document2) => {
           var _a2;
@@ -122716,11 +122724,11 @@ const CollectionDuplicatePage = () => {
     }
   ));
 };
-const updateDocument = async (cms, relativePath2, collection, mutationInfo, values) => {
+const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
   const api = new TinaAdminApi(cms);
   const params = api.schema.transformPayload(collection.name, values);
   if (await api.isAuthenticated()) {
-    await api.updateDocument(collection, relativePath2, params);
+    await api.updateDocument(collection, relativePath, params);
   } else {
     const authMessage = `UpdateDocument failed: User is no longer authenticated; please login and try again.`;
     cms.alerts.error(authMessage);
@@ -122742,7 +122750,7 @@ const CollectionUpdatePage = () => {
       includeDocuments: false
     },
     (collection) => {
-      const relativePath2 = `${resolvedFile}.${collection.format}`;
+      const relativePath = `${resolvedFile}.${collection.format}`;
       const mutationInfo = {
         includeCollection: true,
         includeTemplate: !!collection.templates
@@ -122752,7 +122760,7 @@ const CollectionUpdatePage = () => {
         {
           cms,
           collectionName: collection.name,
-          relativePath: relativePath2
+          relativePath
         },
         (document2) => /* @__PURE__ */ React__default.createElement(
           RenderForm,
@@ -122760,7 +122768,7 @@ const CollectionUpdatePage = () => {
             cms,
             document: document2,
             filename: resolvedFile,
-            relativePath: relativePath2,
+            relativePath,
             collection,
             mutationInfo
           }
@@ -122773,7 +122781,7 @@ const RenderForm = ({
   cms,
   document: document2,
   filename,
-  relativePath: relativePath2,
+  relativePath,
   collection,
   mutationInfo
 }) => {
@@ -122794,7 +122802,7 @@ const RenderForm = ({
   const form = useMemo(() => {
     return new Form({
       // id is the full document path
-      id: canonicalPath(`${schemaCollection.path}/${relativePath2}`),
+      id: canonicalPath(`${schemaCollection.path}/${relativePath}`),
       label: "form",
       fields: formInfo.fields,
       initialValues: document2._values,
@@ -122802,7 +122810,7 @@ const RenderForm = ({
         try {
           await updateDocument(
             cms,
-            relativePath2,
+            relativePath,
             collection,
             mutationInfo,
             values
@@ -122823,7 +122831,7 @@ const RenderForm = ({
         }
       }
     });
-  }, [cms, document2, relativePath2, collection, mutationInfo]);
+  }, [cms, document2, relativePath, collection, mutationInfo]);
   React__default.useEffect(() => {
     cms.dispatch({ type: "forms:add", value: form });
     cms.dispatch({ type: "forms:set-active-form-id", value: form.id });
@@ -122854,7 +122862,7 @@ const RenderForm = ({
       {
         defaultBranchName: (_a2 = cms.api.admin.api.schema.config.config.repoProvider) == null ? void 0 : _a2.defaultBranchName,
         historyUrl: (_b = cms.api.admin.api.schema.config.config.repoProvider) == null ? void 0 : _b.historyUrl,
-        contentRelativePath: relativePath2,
+        contentRelativePath: relativePath,
         tinaBranch: cms.api.admin.api.branch,
         isLocalMode: (_d = (_c = cms.api) == null ? void 0 : _c.tina) == null ? void 0 : _d.isLocalMode
       }