tinacms 3.1.2 → 3.2.0

package/dist/index.js

@@ -9,6 +9,9 @@ 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 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";
@@ -22,7 +25,7 @@ import { Command as Command$2 } from "cmdk";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { PopoverAnchor } from "@radix-ui/react-popover";
-import { createSlatePlugin as createSlatePlugin$1, someHtmlElement, findHtmlParentElement, createTSlatePlugin as createTSlatePlugin$1, RangeApi as RangeApi$1, TextApi as TextApi$1, HtmlPlugin as HtmlPlugin$1, NodeApi as NodeApi$1, ElementApi as ElementApi$1, Hotkeys, isHotkey as isHotkey$1, isUrl as isUrl$1, getEditorPlugin as getEditorPlugin$1, bindFirst as bindFirst$1, sanitizeUrl, PathApi as PathApi$1, isDefined as isDefined$1, PointApi as PointApi$1, BaseParagraphPlugin as BaseParagraphPlugin$1, match as match$3, deleteMerge, getPluginTypes, queryNode as queryNode$1, isType, getInjectMatch as getInjectMatch$1, traverseHtmlElements, isHtmlBlockElement as isHtmlBlockElement$1, postCleanHtml, mergeProps } from "@udecode/plate";
+import { createSlatePlugin as createSlatePlugin$1, someHtmlElement, findHtmlParentElement, createTSlatePlugin as createTSlatePlugin$1, RangeApi as RangeApi$1, TextApi as TextApi$1, HtmlPlugin as HtmlPlugin$1, NodeApi as NodeApi$1, ElementApi as ElementApi$1, Hotkeys, isHotkey as isHotkey$1, isUrl as isUrl$1, getEditorPlugin as getEditorPlugin$1, bindFirst as bindFirst$1, sanitizeUrl, PathApi as PathApi$1, isDefined as isDefined$1, PointApi as PointApi$1, BaseParagraphPlugin as BaseParagraphPlugin$1, match as match$2, deleteMerge, getPluginTypes, queryNode as queryNode$1, isType, getInjectMatch as getInjectMatch$1, traverseHtmlElements, isHtmlBlockElement as isHtmlBlockElement$1, postCleanHtml, mergeProps } from "@udecode/plate";
 import { useComboboxContext, Combobox as Combobox$1, useComboboxStore, ComboboxProvider, Portal, ComboboxPopover, ComboboxItem } from "@ariakit/react";
 import { withTriggerCombobox, filterWords } from "@udecode/plate-combobox";
 import { BaseResetNodePlugin as BaseResetNodePlugin$1 } from "@udecode/plate-reset-node";
@@ -34,9 +37,6 @@ 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";
@@ -61,7 +61,7 @@ import moment from "moment";
 import "moment-timezone";
 import { DayPicker } from "react-day-picker";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { formatDistanceToNow as formatDistanceToNow$1 } from "date-fns";
+import { formatDistanceToNow } from "date-fns";
 import { TinaSchema, addNamespaceToSchema, parseURL, resolveForm, normalizePath, canonicalPath, validateSchema } from "@tinacms/schema-tools";
 import { NAMER, resolveField } from "@tinacms/schema-tools";
 import gql from "graphql-tag";
@@ -869,788 +869,1369 @@ function useEvent(eventType) {
     subscribe: (callback) => cms.events.subscribe(eventType, callback)
   };
 }
-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
-      },
-      /* @__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,
-  ...props
-}) => {
-  const { dispatch: setHoveredField } = useEvent("field:hover");
-  const { dispatch: setFocusedField } = useEvent("field:focus");
-  return /* @__PURE__ */ React.createElement(
-    FieldWrapper,
-    {
-      margin,
-      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,
-  ...props
-}) => {
-  return /* @__PURE__ */ React.createElement("div", { className: `relative ${margin ? `mb-5 last:mb-0` : ``}`, ...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 }
+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 };
       }
-    );
-  }
-  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))) {
+    });
+    /**
+     * 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) || {} }
+      );
+    }
   }
-  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) {
+  /**
+   * A unique identifier for Forms.
+   *
+   * @deprecated use id instead
+   */
+  get name() {
+    return void 0;
   }
-  var result = nativeObjectToString$1.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag$1] = tag;
-    } else {
-      delete value[symToStringTag$1];
+  /**
+   * 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;
   }
-  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;
+  /**
+   * The values the form was initialized with.
+   */
+  get initialValues() {
+    return this.finalForm.getState().initialValues;
   }
-  if (isSymbol$3(value)) {
-    return NAN;
+  get pristine() {
+    return this.finalForm.getState().pristine;
   }
-  if (isObject$d(value)) {
-    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
-    value = isObject$d(other) ? other + "" : other;
+  get dirty() {
+    return this.finalForm.getState().dirty;
   }
-  if (typeof value != "string") {
-    return value === 0 ? value : +value;
+  get submitting() {
+    return this.finalForm.getState().submitting;
   }
-  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);
+  get valid() {
+    return this.finalForm.getState().valid;
   }
-  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;
+  /**
+   * 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();
   }
-  function invokeFunc(time2) {
-    var args = lastArgs, thisArg = lastThis;
-    lastArgs = lastThis = void 0;
-    lastInvokeTime = time2;
-    result = func.apply(thisArg, args);
-    return result;
+  /**
+   * @deprecated Unnecessary indirection
+   */
+  updateFields(fields) {
+    this.fields = fields;
   }
-  function leadingEdge(time2) {
-    lastInvokeTime = time2;
-    timerId = setTimeout(timerExpired, wait);
-    return leading ? invokeFunc(time2) : result;
+  /**
+   * Changes the value of the given field.
+   *
+   * @param name
+   * @param value
+   */
+  change(name, value) {
+    return this.finalForm.change(name, value);
   }
-  function remainingWait(time2) {
-    var timeSinceLastCall = time2 - lastCallTime, timeSinceLastInvoke = time2 - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
-    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+  get mutators() {
+    return this.finalForm.mutators;
   }
-  function shouldInvoke(time2) {
-    var timeSinceLastCall = time2 - lastCallTime, timeSinceLastInvoke = time2 - lastInvokeTime;
-    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+  addQuery(queryId) {
+    this.queries = [...this.queries.filter((id2) => id2 !== queryId), queryId];
   }
-  function timerExpired() {
-    var time2 = now();
-    if (shouldInvoke(time2)) {
-      return trailingEdge(time2);
-    }
-    timerId = setTimeout(timerExpired, remainingWait(time2));
+  removeQuery(queryId) {
+    this.queries = this.queries.filter((id2) => id2 !== queryId);
   }
-  function trailingEdge(time2) {
-    timerId = void 0;
-    if (trailing && lastArgs) {
-      return invokeFunc(time2);
-    }
-    lastArgs = lastThis = void 0;
-    return result;
+  /**
+   * 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 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);
+  /**
+   * 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;
     }
-    if (timerId === void 0) {
-      timerId = setTimeout(timerExpired, wait);
-    }
+    const result = this.getFieldGroup({
+      formOrObjectField: this,
+      values: this.finalForm.getState().values,
+      namePathIndex: 0,
+      namePath: fieldName.split(".")
+    });
     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;
+  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(".")
+                };
+              })
+            };
+          }
         }
-      })(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;
-};
-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) {
-  if (!e3.isConnected || !((t2) => {
-    let o3 = t2;
-    for (; o3 && o3.parentNode; ) {
-      if (o3.parentNode === document)
-        return true;
-      o3 = o3.parentNode instanceof ShadowRoot ? o3.parentNode.host : o3.parentNode;
+      } 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(".")
+            };
+          })
+        };
+      }
     }
-    return false;
-  })(e3))
-    return;
-  const n2 = ((t2) => {
-    const o3 = window.getComputedStyle(t2);
-    return { top: parseFloat(o3.scrollMarginTop) || 0, right: parseFloat(o3.scrollMarginRight) || 0, bottom: parseFloat(o3.scrollMarginBottom) || 0, left: parseFloat(o3.scrollMarginLeft) || 0 };
-  })(e3);
-  if (((t2) => "object" == typeof t2 && "function" == typeof t2.behavior)(r2))
-    return r2.behavior(r$3(e3, r2));
-  const l2 = "boolean" == typeof r2 || null == r2 ? void 0 : r2.behavior;
-  for (const { el: a2, top: i2, left: s2 } of r$3(e3, o$2(r2))) {
-    const t2 = i2 - n2.top + n2.bottom, o3 = s2 - n2.left + n2.right;
-    a2.scroll({ top: t2, left: o3, behavior: l2 });
   }
 }
-/*!
- * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-function isObject$a(o3) {
-  return Object.prototype.toString.call(o3) === "[object Object]";
+function updateEverything(form, values) {
+  Object.entries(values).forEach(([path3, value]) => {
+    form.change(path3, value);
+  });
 }
-function isPlainObject$5(o3) {
-  var ctor, prot;
-  if (isObject$a(o3) === false)
-    return false;
-  ctor = o3.constructor;
-  if (ctor === void 0)
-    return true;
-  prot = ctor.prototype;
-  if (isObject$a(prot) === false)
-    return false;
-  if (prot.hasOwnProperty("isPrototypeOf") === false) {
-    return false;
-  }
-  return true;
+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);
+      }
+    } else if (path3 !== activePath) {
+      form.change(path3, value);
+    }
+  });
 }
-var NOTHING = Symbol.for("immer-nothing");
-var DRAFTABLE = Symbol.for("immer-draftable");
-var DRAFT_STATE = Symbol.for("immer-state");
-var errors = process.env.NODE_ENV !== "production" ? [
-  // All error codes, starting by 0:
-  function(plugin) {
-    return `The plugin for '${plugin}' has not been loaded into Immer. To enable the plugin, import and call \`enable${plugin}()\` when initializing your application.`;
-  },
-  function(thing) {
-    return `produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '${thing}'`;
-  },
-  "This object has been frozen and should not be mutated",
-  function(data) {
-    return "Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? " + data;
-  },
-  "An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.",
-  "Immer forbids circular references",
-  "The first or second argument to `produce` must be a function",
-  "The third argument to `produce` must be a function or undefined",
-  "First argument to `createDraft` must be a plain object, an array, or an immerable object",
-  "First argument to `finishDraft` must be a draft returned by `createDraft`",
-  function(thing) {
-    return `'current' expects a draft, got: ${thing}`;
-  },
-  "Object.defineProperty() cannot be used on an Immer draft",
-  "Object.setPrototypeOf() cannot be used on an Immer draft",
-  "Immer only supports deleting array indices",
-  "Immer only supports setting array indices and the 'length' property",
-  function(thing) {
-    return `'original' expects a draft, got: ${thing}`;
-  }
-  // Note: if more errors are added, the errorOffset in Patches.ts should be increased
-  // See Patches.ts for additional errors
-] : [];
-function die(error2, ...args) {
-  if (process.env.NODE_ENV !== "production") {
-    const e3 = errors[error2];
-    const msg2 = typeof e3 === "function" ? e3.apply(null, args) : e3;
-    throw new Error(`[Immer] ${msg2}`);
+function usePlugins(plugins2) {
+  const cms = useCMS$1();
+  let pluginArray;
+  if (Array.isArray(plugins2)) {
+    pluginArray = plugins2;
+  } else {
+    pluginArray = [plugins2];
   }
-  throw new Error(
-    `[Immer] minified error nr: ${error2}. Full error at: https://bit.ly/3cXEKWf`
-  );
+  React.useEffect(() => {
+    pluginArray.forEach((plugin) => {
+      if (plugin) {
+        cms.plugins.add(plugin);
+      }
+    });
+    return () => {
+      pluginArray.forEach((plugin) => {
+        if (plugin) {
+          cms.plugins.remove(plugin);
+        }
+      });
+    };
+  }, [cms.plugins, ...pluginArray]);
 }
-var getPrototypeOf = Object.getPrototypeOf;
-function isDraft$1(value) {
-  return !!value && !!value[DRAFT_STATE];
+function useSubscribable(subscribable, cb) {
+  const [, s2] = React.useState(0);
+  React.useEffect(() => {
+    return subscribable.subscribe(() => {
+      s2((x) => x + 1);
+      if (cb)
+        cb();
+    });
+  });
 }
-function isDraftable$1(value) {
-  var _a2;
-  if (!value)
-    return false;
-  return isPlainObject$4(value) || Array.isArray(value) || !!value[DRAFTABLE] || !!((_a2 = value.constructor) == null ? void 0 : _a2[DRAFTABLE]) || isMap$2(value) || isSet$2(value);
+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 })
+    );
+  };
 }
-var objectCtorString$1 = Object.prototype.constructor.toString();
-function isPlainObject$4(value) {
-  if (!value || typeof value !== "object")
-    return false;
-  const proto = getPrototypeOf(value);
-  if (proto === null) {
-    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;
+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 each(obj, iter) {
-  if (getArchtype(obj) === 0) {
-    Reflect.ownKeys(obj).forEach((key) => {
-      iter(key, obj[key], obj);
+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 }
     });
-  } else {
-    obj.forEach((entry, index) => iter(index, entry, obj));
+  };
+  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");
+    }
+    if (isHovering) {
+      return buildClasses("blue-500");
+    }
+    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;
 }
-function getArchtype(thing) {
-  const state = thing[DRAFT_STATE];
-  return state ? state.type_ : Array.isArray(thing) ? 1 : isMap$2(thing) ? 2 : isSet$2(thing) ? 3 : 0;
-}
-function has$2(thing, prop2) {
-  return getArchtype(thing) === 2 ? thing.has(prop2) : Object.prototype.hasOwnProperty.call(thing, prop2);
-}
-function set$3(thing, propOrOldValue, value) {
-  const t2 = getArchtype(thing);
-  if (t2 === 2)
-    thing.set(propOrOldValue, value);
-  else if (t2 === 3) {
-    thing.add(value);
-  } else
-    thing[propOrOldValue] = value;
-}
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
+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";
 }
-function isMap$2(target) {
-  return target instanceof Map;
+const getDirection = /* @__PURE__ */ getDefaultExportFromCjs(direction_1);
+function isObject$e(value) {
+  var type = typeof value;
+  return value != null && (type == "object" || type == "function");
 }
-function isSet$2(target) {
-  return target instanceof Set;
+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;
 }
-function latest$1(state) {
-  return state.copy_ || state.base_;
+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;
 }
-function shallowCopy$1(base, strict) {
-  if (isMap$2(base)) {
-    return new Map(base);
-  }
-  if (isSet$2(base)) {
-    return new Set(base);
+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) {
   }
-  if (Array.isArray(base))
-    return Array.prototype.slice.call(base);
-  const isPlain = isPlainObject$4(base);
-  if (strict === true || strict === "class_only" && !isPlain) {
-    const descriptors = Object.getOwnPropertyDescriptors(base);
-    delete descriptors[DRAFT_STATE];
-    let keys2 = Reflect.ownKeys(descriptors);
-    for (let i2 = 0; i2 < keys2.length; i2++) {
-      const key = keys2[i2];
-      const desc = descriptors[key];
-      if (desc.writable === false) {
-        desc.writable = true;
-        desc.configurable = true;
-      }
-      if (desc.get || desc.set)
-        descriptors[key] = {
-          configurable: true,
-          writable: true,
-          // could live with !!desc.set as well here...
-          enumerable: desc.enumerable,
-          value: base[key]
-        };
-    }
-    return Object.create(getPrototypeOf(base), descriptors);
-  } else {
-    const proto = getPrototypeOf(base);
-    if (proto !== null && isPlain) {
-      return { ...base };
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
     }
-    const obj = Object.create(proto);
-    return Object.assign(obj, base);
-  }
-}
-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.freeze(obj);
-  if (deep)
-    Object.entries(obj).forEach(([key, value]) => freeze$1(value, true));
-  return obj;
-}
-function dontMutateFrozenCollections() {
-  die(2);
+  return result;
 }
-function isFrozen(obj) {
-  return Object.isFrozen(obj);
+var _getRawTag = getRawTag$1;
+var objectProto$e = Object.prototype;
+var nativeObjectToString = objectProto$e.toString;
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
 }
-var plugins = {};
-function getPlugin(pluginKey) {
-  const plugin = plugins[pluginKey];
-  if (!plugin) {
-    die(0, pluginKey);
+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 plugin;
+  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
 }
-var currentScope;
-function getCurrentScope() {
-  return currentScope;
+var _baseGetTag = baseGetTag$6;
+function isObjectLike$9(value) {
+  return value != null && typeof value == "object";
 }
-function createScope(parent_, immer_) {
-  return {
-    drafts_: [],
-    parent_,
-    immer_,
-    // Whenever the modified draft contains a draft from another scope, we
-    // need to prevent auto-freezing so the unowned draft can be finalized.
-    canAutoFreeze_: true,
-    unfinalizedDrafts_: 0
-  };
+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;
 }
-function usePatchesInScope(scope, patchListener) {
-  if (patchListener) {
-    getPlugin("Patches");
-    scope.patches_ = [];
-    scope.inversePatches_ = [];
-    scope.patchListener_ = patchListener;
+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;
   }
-}
-function revokeScope(scope) {
-  leaveScope(scope);
-  scope.drafts_.forEach(revokeDraft);
-  scope.drafts_ = null;
-}
-function leaveScope(scope) {
-  if (scope === currentScope) {
-    currentScope = scope.parent_;
+  if (isSymbol$3(value)) {
+    return NAN;
   }
-}
-function enterScope(immer2) {
-  return currentScope = createScope(currentScope, immer2);
-}
-function revokeDraft(draft) {
-  const state = draft[DRAFT_STATE];
-  if (state.type_ === 0 || state.type_ === 1)
-    state.revoke_();
-  else
-    state.revoked_ = true;
-}
-function processResult(result, scope) {
-  scope.unfinalizedDrafts_ = scope.drafts_.length;
-  const baseDraft = scope.drafts_[0];
-  const isReplaced = result !== void 0 && result !== baseDraft;
-  if (isReplaced) {
-    if (baseDraft[DRAFT_STATE].modified_) {
-      revokeScope(scope);
-      die(4);
-    }
-    if (isDraftable$1(result)) {
-      result = finalize(scope, result);
-      if (!scope.parent_)
-        maybeFreeze(scope, result);
-    }
-    if (scope.patches_) {
-      getPlugin("Patches").generateReplacementPatches_(
-        baseDraft[DRAFT_STATE].base_,
-        result,
-        scope.patches_,
-        scope.inversePatches_
-      );
-    }
-  } else {
-    result = finalize(scope, baseDraft, []);
+  if (isObject$d(value)) {
+    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+    value = isObject$d(other) ? other + "" : other;
   }
-  revokeScope(scope);
-  if (scope.patches_) {
-    scope.patchListener_(scope.patches_, scope.inversePatches_);
+  if (typeof value != "string") {
+    return value === 0 ? value : +value;
   }
-  return result !== NOTHING ? result : void 0;
+  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;
 }
-function finalize(rootScope, value, path3) {
-  if (isFrozen(value))
-    return value;
-  const state = value[DRAFT_STATE];
-  if (!state) {
-    each(
-      value,
-      (key, childValue) => finalizeProperty(rootScope, state, value, key, childValue, path3)
-    );
-    return 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);
   }
-  if (state.scope_ !== rootScope)
-    return value;
-  if (!state.modified_) {
-    maybeFreeze(rootScope, state.base_, true);
-    return state.base_;
+  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;
   }
-  if (!state.finalized_) {
-    state.finalized_ = true;
-    state.scope_.unfinalizedDrafts_--;
-    const result = state.copy_;
-    let resultEach = result;
-    let isSet2 = false;
-    if (state.type_ === 3) {
-      resultEach = new Set(result);
-      result.clear();
-      isSet2 = true;
+  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);
     }
-    each(
-      resultEach,
-      (key, childValue) => finalizeProperty(rootScope, state, result, key, childValue, path3, isSet2)
-    );
-    maybeFreeze(rootScope, result, false);
-    if (path3 && rootScope.patches_) {
-      getPlugin("Patches").generatePatches_(
-        state,
-        path3,
-        rootScope.patches_,
-        rootScope.inversePatches_
-      );
+    timerId = setTimeout(timerExpired, remainingWait(time2));
+  }
+  function trailingEdge(time2) {
+    timerId = void 0;
+    if (trailing && lastArgs) {
+      return invokeFunc(time2);
     }
+    lastArgs = lastThis = void 0;
+    return result;
   }
-  return state.copy_;
-}
-function finalizeProperty(rootScope, parentState, targetObject, prop2, childValue, rootPath, targetIsSet) {
+  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;
+};
+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) {
+  if (!e3.isConnected || !((t2) => {
+    let o3 = t2;
+    for (; o3 && o3.parentNode; ) {
+      if (o3.parentNode === document)
+        return true;
+      o3 = o3.parentNode instanceof ShadowRoot ? o3.parentNode.host : o3.parentNode;
+    }
+    return false;
+  })(e3))
+    return;
+  const n2 = ((t2) => {
+    const o3 = window.getComputedStyle(t2);
+    return { top: parseFloat(o3.scrollMarginTop) || 0, right: parseFloat(o3.scrollMarginRight) || 0, bottom: parseFloat(o3.scrollMarginBottom) || 0, left: parseFloat(o3.scrollMarginLeft) || 0 };
+  })(e3);
+  if (((t2) => "object" == typeof t2 && "function" == typeof t2.behavior)(r2))
+    return r2.behavior(r$3(e3, r2));
+  const l2 = "boolean" == typeof r2 || null == r2 ? void 0 : r2.behavior;
+  for (const { el: a2, top: i2, left: s2 } of r$3(e3, o$2(r2))) {
+    const t2 = i2 - n2.top + n2.bottom, o3 = s2 - n2.left + n2.right;
+    a2.scroll({ top: t2, left: o3, behavior: l2 });
+  }
+}
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
+function isObject$a(o3) {
+  return Object.prototype.toString.call(o3) === "[object Object]";
+}
+function isPlainObject$5(o3) {
+  var ctor, prot;
+  if (isObject$a(o3) === false)
+    return false;
+  ctor = o3.constructor;
+  if (ctor === void 0)
+    return true;
+  prot = ctor.prototype;
+  if (isObject$a(prot) === false)
+    return false;
+  if (prot.hasOwnProperty("isPrototypeOf") === false) {
+    return false;
+  }
+  return true;
+}
+var NOTHING = Symbol.for("immer-nothing");
+var DRAFTABLE = Symbol.for("immer-draftable");
+var DRAFT_STATE = Symbol.for("immer-state");
+var errors = process.env.NODE_ENV !== "production" ? [
+  // All error codes, starting by 0:
+  function(plugin) {
+    return `The plugin for '${plugin}' has not been loaded into Immer. To enable the plugin, import and call \`enable${plugin}()\` when initializing your application.`;
+  },
+  function(thing) {
+    return `produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '${thing}'`;
+  },
+  "This object has been frozen and should not be mutated",
+  function(data) {
+    return "Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? " + data;
+  },
+  "An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.",
+  "Immer forbids circular references",
+  "The first or second argument to `produce` must be a function",
+  "The third argument to `produce` must be a function or undefined",
+  "First argument to `createDraft` must be a plain object, an array, or an immerable object",
+  "First argument to `finishDraft` must be a draft returned by `createDraft`",
+  function(thing) {
+    return `'current' expects a draft, got: ${thing}`;
+  },
+  "Object.defineProperty() cannot be used on an Immer draft",
+  "Object.setPrototypeOf() cannot be used on an Immer draft",
+  "Immer only supports deleting array indices",
+  "Immer only supports setting array indices and the 'length' property",
+  function(thing) {
+    return `'original' expects a draft, got: ${thing}`;
+  }
+  // Note: if more errors are added, the errorOffset in Patches.ts should be increased
+  // See Patches.ts for additional errors
+] : [];
+function die(error2, ...args) {
+  if (process.env.NODE_ENV !== "production") {
+    const e3 = errors[error2];
+    const msg2 = typeof e3 === "function" ? e3.apply(null, args) : e3;
+    throw new Error(`[Immer] ${msg2}`);
+  }
+  throw new Error(
+    `[Immer] minified error nr: ${error2}. Full error at: https://bit.ly/3cXEKWf`
+  );
+}
+var getPrototypeOf = Object.getPrototypeOf;
+function isDraft$1(value) {
+  return !!value && !!value[DRAFT_STATE];
+}
+function isDraftable$1(value) {
+  var _a2;
+  if (!value)
+    return false;
+  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();
+function isPlainObject$4(value) {
+  if (!value || typeof value !== "object")
+    return false;
+  const proto = getPrototypeOf(value);
+  if (proto === null) {
+    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;
+}
+function each(obj, iter) {
+  if (getArchtype(obj) === 0) {
+    Reflect.ownKeys(obj).forEach((key) => {
+      iter(key, obj[key], obj);
+    });
+  } else {
+    obj.forEach((entry, index) => iter(index, entry, obj));
+  }
+}
+function getArchtype(thing) {
+  const state = thing[DRAFT_STATE];
+  return state ? state.type_ : Array.isArray(thing) ? 1 : isMap$2(thing) ? 2 : isSet$2(thing) ? 3 : 0;
+}
+function has$2(thing, prop2) {
+  return getArchtype(thing) === 2 ? thing.has(prop2) : Object.prototype.hasOwnProperty.call(thing, prop2);
+}
+function set$3(thing, propOrOldValue, value) {
+  const t2 = getArchtype(thing);
+  if (t2 === 2)
+    thing.set(propOrOldValue, value);
+  else if (t2 === 3) {
+    thing.add(value);
+  } else
+    thing[propOrOldValue] = value;
+}
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+function isMap$2(target) {
+  return target instanceof Map;
+}
+function isSet$2(target) {
+  return target instanceof Set;
+}
+function latest$1(state) {
+  return state.copy_ || state.base_;
+}
+function shallowCopy$1(base, strict) {
+  if (isMap$2(base)) {
+    return new Map(base);
+  }
+  if (isSet$2(base)) {
+    return new Set(base);
+  }
+  if (Array.isArray(base))
+    return Array.prototype.slice.call(base);
+  const isPlain = isPlainObject$4(base);
+  if (strict === true || strict === "class_only" && !isPlain) {
+    const descriptors = Object.getOwnPropertyDescriptors(base);
+    delete descriptors[DRAFT_STATE];
+    let keys2 = Reflect.ownKeys(descriptors);
+    for (let i2 = 0; i2 < keys2.length; i2++) {
+      const key = keys2[i2];
+      const desc = descriptors[key];
+      if (desc.writable === false) {
+        desc.writable = true;
+        desc.configurable = true;
+      }
+      if (desc.get || desc.set)
+        descriptors[key] = {
+          configurable: true,
+          writable: true,
+          // could live with !!desc.set as well here...
+          enumerable: desc.enumerable,
+          value: base[key]
+        };
+    }
+    return Object.create(getPrototypeOf(base), descriptors);
+  } else {
+    const proto = getPrototypeOf(base);
+    if (proto !== null && isPlain) {
+      return { ...base };
+    }
+    const obj = Object.create(proto);
+    return Object.assign(obj, base);
+  }
+}
+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.freeze(obj);
+  if (deep)
+    Object.entries(obj).forEach(([key, value]) => freeze$1(value, true));
+  return obj;
+}
+function dontMutateFrozenCollections() {
+  die(2);
+}
+function isFrozen(obj) {
+  return Object.isFrozen(obj);
+}
+var plugins = {};
+function getPlugin(pluginKey) {
+  const plugin = plugins[pluginKey];
+  if (!plugin) {
+    die(0, pluginKey);
+  }
+  return plugin;
+}
+var currentScope;
+function getCurrentScope() {
+  return currentScope;
+}
+function createScope(parent_, immer_) {
+  return {
+    drafts_: [],
+    parent_,
+    immer_,
+    // Whenever the modified draft contains a draft from another scope, we
+    // need to prevent auto-freezing so the unowned draft can be finalized.
+    canAutoFreeze_: true,
+    unfinalizedDrafts_: 0
+  };
+}
+function usePatchesInScope(scope, patchListener) {
+  if (patchListener) {
+    getPlugin("Patches");
+    scope.patches_ = [];
+    scope.inversePatches_ = [];
+    scope.patchListener_ = patchListener;
+  }
+}
+function revokeScope(scope) {
+  leaveScope(scope);
+  scope.drafts_.forEach(revokeDraft);
+  scope.drafts_ = null;
+}
+function leaveScope(scope) {
+  if (scope === currentScope) {
+    currentScope = scope.parent_;
+  }
+}
+function enterScope(immer2) {
+  return currentScope = createScope(currentScope, immer2);
+}
+function revokeDraft(draft) {
+  const state = draft[DRAFT_STATE];
+  if (state.type_ === 0 || state.type_ === 1)
+    state.revoke_();
+  else
+    state.revoked_ = true;
+}
+function processResult(result, scope) {
+  scope.unfinalizedDrafts_ = scope.drafts_.length;
+  const baseDraft = scope.drafts_[0];
+  const isReplaced = result !== void 0 && result !== baseDraft;
+  if (isReplaced) {
+    if (baseDraft[DRAFT_STATE].modified_) {
+      revokeScope(scope);
+      die(4);
+    }
+    if (isDraftable$1(result)) {
+      result = finalize(scope, result);
+      if (!scope.parent_)
+        maybeFreeze(scope, result);
+    }
+    if (scope.patches_) {
+      getPlugin("Patches").generateReplacementPatches_(
+        baseDraft[DRAFT_STATE].base_,
+        result,
+        scope.patches_,
+        scope.inversePatches_
+      );
+    }
+  } else {
+    result = finalize(scope, baseDraft, []);
+  }
+  revokeScope(scope);
+  if (scope.patches_) {
+    scope.patchListener_(scope.patches_, scope.inversePatches_);
+  }
+  return result !== NOTHING ? result : void 0;
+}
+function finalize(rootScope, value, path3) {
+  if (isFrozen(value))
+    return value;
+  const state = value[DRAFT_STATE];
+  if (!state) {
+    each(
+      value,
+      (key, childValue) => finalizeProperty(rootScope, state, value, key, childValue, path3)
+    );
+    return value;
+  }
+  if (state.scope_ !== rootScope)
+    return value;
+  if (!state.modified_) {
+    maybeFreeze(rootScope, state.base_, true);
+    return state.base_;
+  }
+  if (!state.finalized_) {
+    state.finalized_ = true;
+    state.scope_.unfinalizedDrafts_--;
+    const result = state.copy_;
+    let resultEach = result;
+    let isSet2 = false;
+    if (state.type_ === 3) {
+      resultEach = new Set(result);
+      result.clear();
+      isSet2 = true;
+    }
+    each(
+      resultEach,
+      (key, childValue) => finalizeProperty(rootScope, state, result, key, childValue, path3, isSet2)
+    );
+    maybeFreeze(rootScope, result, false);
+    if (path3 && rootScope.patches_) {
+      getPlugin("Patches").generatePatches_(
+        state,
+        path3,
+        rootScope.patches_,
+        rootScope.inversePatches_
+      );
+    }
+  }
+  return state.copy_;
+}
+function finalizeProperty(rootScope, parentState, targetObject, prop2, childValue, rootPath, targetIsSet) {
   if (process.env.NODE_ENV !== "production" && childValue === targetObject)
     die(5);
   if (isDraft$1(childValue)) {
@@ -2345,21 +2926,21 @@ var Path = {
     return p2;
   }
 };
-function _typeof$4(o3) {
+function _typeof$3(o3) {
   "@babel/helpers - typeof";
-  return _typeof$4 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o4) {
+  return _typeof$3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o4) {
     return typeof o4;
   } : function(o4) {
     return o4 && "function" == typeof Symbol && o4.constructor === Symbol && o4 !== Symbol.prototype ? "symbol" : typeof o4;
-  }, _typeof$4(o3);
+  }, _typeof$3(o3);
 }
 function _toPrimitive$4(input, hint) {
-  if (_typeof$4(input) !== "object" || input === null)
+  if (_typeof$3(input) !== "object" || input === null)
     return input;
   var prim = input[Symbol.toPrimitive];
   if (prim !== void 0) {
     var res = prim.call(input, hint || "default");
-    if (_typeof$4(res) !== "object")
+    if (_typeof$3(res) !== "object")
       return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -2367,7 +2948,7 @@ function _toPrimitive$4(input, hint) {
 }
 function _toPropertyKey$4(arg) {
   var key = _toPrimitive$4(arg, "string");
-  return _typeof$4(key) === "symbol" ? key : String(key);
+  return _typeof$3(key) === "symbol" ? key : String(key);
 }
 function _defineProperty$5(obj, key, value) {
   key = _toPropertyKey$4(key);
@@ -7697,21 +8278,21 @@ typeof navigator !== "undefined" && /Safari/.test(navigator.userAgent) && /Versi
 var HAS_BEFORE_INPUT_SUPPORT = (!IS_CHROME_LEGACY || !IS_ANDROID_CHROME_LEGACY) && !IS_EDGE_LEGACY && // globalThis is undefined in older browsers
 typeof globalThis !== "undefined" && globalThis.InputEvent && // @ts-ignore The `getTargetRanges` property isn't recognized.
 typeof globalThis.InputEvent.prototype.getTargetRanges === "function";
-function _typeof$3(o3) {
+function _typeof$2(o3) {
   "@babel/helpers - typeof";
-  return _typeof$3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o4) {
+  return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o4) {
     return typeof o4;
   } : function(o4) {
     return o4 && "function" == typeof Symbol && o4.constructor === Symbol && o4 !== Symbol.prototype ? "symbol" : typeof o4;
-  }, _typeof$3(o3);
+  }, _typeof$2(o3);
 }
 function _toPrimitive$3(input, hint) {
-  if (_typeof$3(input) !== "object" || input === null)
+  if (_typeof$2(input) !== "object" || input === null)
     return input;
   var prim = input[Symbol.toPrimitive];
   if (prim !== void 0) {
     var res = prim.call(input, hint || "default");
-    if (_typeof$3(res) !== "object")
+    if (_typeof$2(res) !== "object")
       return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -7719,7 +8300,7 @@ function _toPrimitive$3(input, hint) {
 }
 function _toPropertyKey$3(arg) {
   var key = _toPrimitive$3(arg, "string");
-  return _typeof$3(key) === "symbol" ? key : String(key);
+  return _typeof$2(key) === "symbol" ? key : String(key);
 }
 function _defineProperty$4(obj, key, value) {
   key = _toPropertyKey$3(key);
@@ -9640,21 +10221,21 @@ function _objectWithoutProperties$1(source2, excluded) {
   }
   return target;
 }
-function _typeof$2(o3) {
+function _typeof$1(o3) {
   "@babel/helpers - typeof";
-  return _typeof$2 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o4) {
+  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o4) {
     return typeof o4;
   } : function(o4) {
     return o4 && "function" == typeof Symbol && o4.constructor === Symbol && o4 !== Symbol.prototype ? "symbol" : typeof o4;
-  }, _typeof$2(o3);
+  }, _typeof$1(o3);
 }
 function _toPrimitive$2(input, hint) {
-  if (_typeof$2(input) !== "object" || input === null)
+  if (_typeof$1(input) !== "object" || input === null)
     return input;
   var prim = input[Symbol.toPrimitive];
   if (prim !== void 0) {
     var res = prim.call(input, hint || "default");
-    if (_typeof$2(res) !== "object")
+    if (_typeof$1(res) !== "object")
       return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -9662,7 +10243,7 @@ function _toPrimitive$2(input, hint) {
 }
 function _toPropertyKey$2(arg) {
   var key = _toPrimitive$2(arg, "string");
-  return _typeof$2(key) === "symbol" ? key : String(key);
+  return _typeof$1(key) === "symbol" ? key : String(key);
 }
 function _defineProperty$3(obj, key, value) {
   key = _toPropertyKey$2(key);
@@ -19131,7 +19712,7 @@ var isBlock = (editor, value) => ElementApi.isElement(value) && isBlock$1(editor
 function castArray2(value) {
   return Array.isArray(value) ? value : [value];
 }
-var match$2 = (obj, path22, predicate) => {
+var match$1 = (obj, path22, predicate) => {
   if (!predicate)
     return true;
   if (typeof predicate === "object") {
@@ -19167,7 +19748,7 @@ var getMatch = (editor, { id: id2, block: block2, empty, match: matchObjOrFn, te
   }
   if (typeof matchObjOrFn === "object") {
     hasMatch = true;
-    matchFn = combineMatch(matchFn, (n2, p2) => match$2(n2, p2, matchObjOrFn));
+    matchFn = combineMatch(matchFn, (n2, p2) => match$1(n2, p2, matchObjOrFn));
   } else if (typeof matchObjOrFn === "function") {
     hasMatch = true;
     matchFn = combineMatch(matchFn, matchObjOrFn);
@@ -19384,7 +19965,7 @@ var descendant = (editor, options) => {
       pass: ([n2]) => voids ? false : editor.api.isVoid(n2)
     });
     for (const [node22, path22] of nodeEntries) {
-      if (match$2(node22, path22, _match)) {
+      if (match$1(node22, path22, _match)) {
         return [node22, at2.concat(path22)];
       }
     }
@@ -19623,10 +20204,10 @@ function e2(e3, r2) {
     a2.scroll({ top: t2, left: o3, behavior: l2 });
   }
 }
-var defaultOptions$1 = {
+var defaultOptions = {
   scrollMode: "if-needed"
 };
-function scrollIntoView(editor, target, options = defaultOptions$1) {
+function scrollIntoView(editor, target, options = defaultOptions) {
   requestAnimationFrame(() => {
     let domRange;
     if (PointApi.isPoint(target)) {
@@ -21686,21 +22267,21 @@ function omitBy(object, predicate) {
 }
 var omitBy_1 = omitBy;
 const omitBy$1 = /* @__PURE__ */ getDefaultExportFromCjs(omitBy_1);
-function _typeof$1(o3) {
+function _typeof(o3) {
   "@babel/helpers - typeof";
-  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o4) {
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o4) {
     return typeof o4;
   } : function(o4) {
     return o4 && "function" == typeof Symbol && o4.constructor === Symbol && o4 !== Symbol.prototype ? "symbol" : typeof o4;
-  }, _typeof$1(o3);
+  }, _typeof(o3);
 }
 function _toPrimitive$1(input, hint) {
-  if (_typeof$1(input) !== "object" || input === null)
+  if (_typeof(input) !== "object" || input === null)
     return input;
   var prim = input[Symbol.toPrimitive];
   if (prim !== void 0) {
     var res = prim.call(input, hint || "default");
-    if (_typeof$1(res) !== "object")
+    if (_typeof(res) !== "object")
       return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
@@ -21708,7 +22289,7 @@ function _toPrimitive$1(input, hint) {
 }
 function _toPropertyKey$1(arg) {
   var key = _toPrimitive$1(arg, "string");
-  return _typeof$1(key) === "symbol" ? key : String(key);
+  return _typeof(key) === "symbol" ? key : String(key);
 }
 function _defineProperty$1(obj, key, value) {
   key = _toPropertyKey$1(key);
@@ -28659,7 +29240,7 @@ var getTodoListItemEntry = (editor, { at: at2 = editor.selection } = {}) => {
     }
   }
 };
-var hasListChild = (editor, node3) => node3.children.some((n2) => match$3(n2, [], { type: getListTypes(editor) }));
+var hasListChild = (editor, node3) => node3.children.some((n2) => match$2(n2, [], { type: getListTypes(editor) }));
 var isAcrossListItems = (editor, at2 = editor.selection) => {
   if (!at2 || RangeApi$1.isCollapsed(at2)) {
     return false;
@@ -28685,7 +29266,7 @@ var moveListItemDown = (editor, { list, listItem }) => {
   if (previousSiblingItem) {
     const [previousNode, previousPath] = previousSiblingItem;
     const sublist = previousNode.children.find(
-      (n2) => match$3(n2, [], { type: getListTypes(editor) })
+      (n2) => match$2(n2, [], { type: getListTypes(editor) })
     );
     const newPath = previousPath.concat(
       sublist ? [1, sublist.children.length] : [1]
@@ -29764,10 +30345,10 @@ var normalizeListItem = (editor, {
     );
     return true;
   }
-  if (editor.api.isBlock(firstLiChildNode) && !match$3(firstLiChildNode, [], {
+  if (editor.api.isBlock(firstLiChildNode) && !match$2(firstLiChildNode, [], {
     type: editor.getType(BaseListItemContentPlugin)
   })) {
-    if (match$3(firstLiChildNode, [], {
+    if (match$2(firstLiChildNode, [], {
       type: getListTypes(editor)
     })) {
       const parent3 = editor.api.parent(listItem[1]);
@@ -29843,7 +30424,7 @@ var normalizeListItem = (editor, {
 var normalizeNestedList = (editor, { nestedListItem }) => {
   const [, path3] = nestedListItem;
   const parentNode = editor.api.parent(path3);
-  const hasParentList = parentNode && match$3(parentNode[0], [], { type: getListTypes(editor) });
+  const hasParentList = parentNode && match$2(parentNode[0], [], { type: getListTypes(editor) });
   if (!hasParentList) {
     return false;
   }
@@ -29887,7 +30468,7 @@ var withNormalizeList = ({
           );
         }
       }
-      if (match$3(node3, [], { type: getListTypes(editor) })) {
+      if (match$2(node3, [], { type: getListTypes(editor) })) {
         if (node3.children.length === 0 || !node3.children.some((item) => item.type === liType)) {
           return editor.tf.removeNodes({ at: path3 });
         }
@@ -37355,830 +37936,309 @@ const TableFloatingToolbar = withRef$1(
         ), /* @__PURE__ */ React__default.createElement(
           ToolbarButton,
           {
-            onClick: () => {
-              tf.remove.tableColumn();
-            },
-            onMouseDown: (e3) => e3.preventDefault(),
-            tooltip: "Delete column"
-          },
-          /* @__PURE__ */ React__default.createElement(XIcon, null)
-        ))
-      )
-    ));
-  }
-);
-const TableBordersDropdownMenuContent = withRef$1((props, ref) => {
-  const editor = useEditorRef();
-  const {
-    getOnSelectTableBorder,
-    hasBottomBorder,
-    hasLeftBorder,
-    hasNoBorders,
-    hasOuterBorders,
-    hasRightBorder,
-    hasTopBorder
-  } = useTableBordersDropdownMenuContentState();
-  return /* @__PURE__ */ React__default.createElement(
-    DropdownMenuContent$1,
-    {
-      ref,
-      className: cn$2("min-w-[220px]"),
-      onCloseAutoFocus: (e3) => {
-        e3.preventDefault();
-        editor.tf.focus();
-      },
-      align: "start",
-      side: "right",
-      sideOffset: 0,
-      ...props
-    },
-    /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasTopBorder,
-        onCheckedChange: getOnSelectTableBorder("top")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "Top Border")
-    ), /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasRightBorder,
-        onCheckedChange: getOnSelectTableBorder("right")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "Right Border")
-    ), /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasBottomBorder,
-        onCheckedChange: getOnSelectTableBorder("bottom")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "Bottom Border")
-    ), /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasLeftBorder,
-        onCheckedChange: getOnSelectTableBorder("left")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "Left Border")
-    )),
-    /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasNoBorders,
-        onCheckedChange: getOnSelectTableBorder("none")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "No Border")
-    ), /* @__PURE__ */ React__default.createElement(
-      DropdownMenuCheckboxItem,
-      {
-        checked: hasOuterBorders,
-        onCheckedChange: getOnSelectTableBorder("outer")
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, "Outside Borders")
-    ))
-  );
-});
-function ColorDropdownMenu({ children, tooltip }) {
-  const [open, setOpen] = useState(false);
-  const editor = useEditorRef();
-  const selectedCells = usePluginOption(TablePlugin, "selectedCells");
-  useCallback(
-    (color) => {
-      setOpen(false);
-      setCellBackground(editor, { color, selectedCells: selectedCells ?? [] });
-    },
-    [selectedCells, editor]
-  );
-  const onClearColor = useCallback(() => {
-    setOpen(false);
-    setCellBackground(editor, {
-      color: null,
-      selectedCells: selectedCells ?? []
-    });
-  }, [selectedCells, editor]);
-  return /* @__PURE__ */ React__default.createElement(DropdownMenu$1, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement(ToolbarButton, { tooltip }, children)), /* @__PURE__ */ React__default.createElement(DropdownMenuContent$1, { align: "start" }, /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(DropdownMenuItem$1, { className: "p-2", onClick: onClearColor }, /* @__PURE__ */ React__default.createElement(EraserIcon, null), /* @__PURE__ */ React__default.createElement("span", null, "Clear")))));
-}
-const TableRowElement = withRef$1(
-  ({ children, className, ...props }, ref) => {
-    const selected = useSelected();
-    return /* @__PURE__ */ React__default.createElement(
-      PlateElement,
-      {
-        as: "tr",
-        className: cn$2(className, "group/row"),
-        "data-selected": selected ? "true" : void 0,
-        ...props
-      },
-      children
-    );
-  }
-);
-function classNames$1(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-const uuid = () => {
-  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(
-    /[018]/g,
-    (c2) => (c2 ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c2 / 4).toString(16)
-  );
-};
-const blockClasses = "mt-0.5";
-const headerClasses = "font-normal";
-const Components = () => {
-  return {
-    [SlashInputPlugin.key]: SlashInputElement,
-    [HEADING_KEYS$1.h1]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h1",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-4xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    [HEADING_KEYS$1.h2]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h2",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-3xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    [HEADING_KEYS$1.h3]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h3",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-2xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    [HEADING_KEYS$1.h4]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h4",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-xl mb-4 last:mb-0 mt-6 first:mt-0 font-libre-baskerville"
-        )
-      }
-    ),
-    /** Tailwind prose doesn't style h5 and h6 elements */
-    [HEADING_KEYS$1.h5]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h5",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-lg mb-4 last:mb-0 mt-6 first:mt-0"
-        ),
-        style: { fontFamily: "'Libre Baskerville', serif", fontWeight: "400" }
-      }
-    ),
-    [HEADING_KEYS$1.h6]: ({
-      attributes,
-      editor,
-      element,
-      className,
-      ...props
-    }) => /* @__PURE__ */ React__default.createElement(
-      "h6",
-      {
-        ...attributes,
-        ...props,
-        className: classNames$1(
-          headerClasses,
-          blockClasses,
-          className,
-          "text-base mb-4 last:mb-0 mt-6 first:mt-0"
-        ),
-        style: { fontFamily: "'Libre Baskerville', serif", fontWeight: "400" }
-      }
-    ),
-    [ParagraphPlugin.key]: ParagraphElement,
-    [BlockquotePlugin.key]: BlockquoteElement,
-    [CodeBlockPlugin.key]: CodeBlockElement,
-    [CodeLinePlugin.key]: CodeLineElement,
-    [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,
-    html: ({ attributes, editor, element, children, className }) => {
-      return /* @__PURE__ */ React__default.createElement(
-        "div",
-        {
-          ...attributes,
-          className: classNames$1(
-            "font-mono text-sm bg-green-100 cursor-not-allowed mb-4",
-            className
-          )
-        },
-        children,
-        element.value
-      );
-    },
-    html_inline: ({ attributes, editor, element, children, className }) => {
-      return /* @__PURE__ */ React__default.createElement(
-        "span",
-        {
-          ...attributes,
-          className: classNames$1(
-            "font-mono bg-green-100 cursor-not-allowed",
-            className
-          )
-        },
-        children,
-        element.value
-      );
-    },
-    [BulletedListPlugin.key]: withProps(ListElement, { variant: "ul" }),
-    [NumberedListPlugin.key]: withProps(ListElement, { variant: "ol" }),
-    [ListItemPlugin.key]: withProps(PlateElement, { as: "li" }),
-    [LinkPlugin.key]: LinkElement,
-    [CodePlugin.key]: CodeLeaf,
-    [UnderlinePlugin.key]: withProps(PlateLeaf, { as: "u" }),
-    [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: "s" }),
-    [ItalicPlugin.key]: withProps(PlateLeaf, { as: "em" }),
-    [BoldPlugin.key]: withProps(PlateLeaf, { as: "strong" }),
-    [HorizontalRulePlugin.key]: HrElement,
-    [TableCellHeaderPlugin.key]: TableCellHeaderElement,
-    [TableCellPlugin.key]: TableCellElement,
-    [TablePlugin.key]: TableElement,
-    [TableRowPlugin.key]: TableRowElement
-  };
-};
-class Form {
-  constructor({
-    id: id2,
-    label,
-    fields,
-    actions,
-    buttons,
-    global: global2,
-    reset: reset2,
-    loadInitialValues,
-    onChange,
-    queries,
-    ...options
-  }) {
-    __publicField(this, "__type");
-    __publicField(this, "id");
-    __publicField(this, "label");
-    __publicField(this, "fields");
-    __publicField(this, "finalForm");
-    __publicField(this, "actions");
-    __publicField(this, "buttons");
-    __publicField(this, "queries");
-    __publicField(this, "global", null);
-    __publicField(this, "loading", false);
-    /**
-     * @deprecated
-     * Misleading name as per https://github.com/tinacms/tinacms/issues/5686#issuecomment-2899840518
-     * Use path property instead.
-     */
-    __publicField(this, "relativePath");
-    /**
-     * Where to save the form within the content directory on next submission.
-     */
-    __publicField(this, "path");
-    __publicField(this, "crudType");
-    __publicField(this, "beforeSubmit");
-    /**
-     * Subscribes to changes to the form. The subscriber will only be called when
-     * values specified in subscription change. A form can have many subscribers.
-     */
-    __publicField(this, "subscribe", (cb, options) => {
-      return this.finalForm.subscribe(cb, options);
-    });
-    __publicField(this, "onSubmit");
-    __publicField(this, "handleSubmit", async (values, form, cb) => {
-      var _a2;
-      try {
-        const valOverride = await ((_a2 = this.beforeSubmit) == null ? void 0 : _a2.call(this, values));
-        if (valOverride) {
-          for (const [key, value] of Object.entries(valOverride)) {
-            form.change(key, value);
-          }
-        }
-        const response = await this.onSubmit(valOverride || values, form, cb);
-        form.initialize(values);
-        return response;
-      } catch (error2) {
-        return { [FORM_ERROR]: error2 };
-      }
-    });
-    /**
-     * Submits the form if there are currently no validation errors. It may
-     * return undefined or a Promise depending on the nature of the onSubmit
-     * configuration value given to the form when it was created.
-     */
-    __publicField(this, "submit", () => {
-      return this.finalForm.submit();
-    });
-    const initialValues = options.initialValues || {};
-    this.__type = options.__type || "form";
-    this.id = id2;
-    this.label = label;
-    this.global = global2;
-    this.fields = fields || [];
-    this.onSubmit = options.onSubmit;
-    this.queries = queries || [];
-    this.crudType = options.crudType || "update";
-    this.relativePath = options.relativePath || id2;
-    this.path = options.path || id2;
-    this.finalForm = createForm({
-      ...options,
-      initialValues,
-      onSubmit: this.handleSubmit,
-      mutators: {
-        ...arrayMutators,
-        setFieldData,
-        ...options.mutators
-      }
-    });
-    this._reset = reset2;
-    this.actions = actions || [];
-    this.buttons = buttons || {
-      save: "Save",
-      reset: "Reset"
-    };
-    this.updateFields(this.fields);
-    if (loadInitialValues) {
-      this.loading = true;
-      loadInitialValues().then((initialValues2) => {
-        this.updateInitialValues(initialValues2);
-      }).finally(() => {
-        this.loading = false;
-      });
-    }
-    if (onChange) {
-      let firstUpdate = true;
-      this.subscribe(
-        (formState) => {
-          if (firstUpdate) {
-            firstUpdate = false;
-          } else {
-            onChange(formState);
-          }
-        },
-        { values: true, ...(options == null ? void 0 : options.extraSubscribeValues) || {} }
-      );
-    }
-  }
-  /**
-   * A unique identifier for Forms.
-   *
-   * @deprecated use id instead
-   */
-  get name() {
-    return void 0;
-  }
-  /**
-   * Returns the current values of the form.
-   *
-   * if the form is still loading it returns `undefined`.
-   */
-  get values() {
-    if (this.loading) {
-      return void 0;
-    }
-    return this.finalForm.getState().values || this.initialValues;
-  }
-  /**
-   * The values the form was initialized with.
-   */
-  get initialValues() {
-    return this.finalForm.getState().initialValues;
-  }
-  get pristine() {
-    return this.finalForm.getState().pristine;
-  }
-  get dirty() {
-    return this.finalForm.getState().dirty;
-  }
-  get submitting() {
-    return this.finalForm.getState().submitting;
-  }
-  get valid() {
-    return this.finalForm.getState().valid;
-  }
-  /**
-   * Resets the values back to the initial values the form was initialized with.
-   * Or empties all the values if the form was not initialized.
-   */
-  async reset() {
-    if (this._reset) {
-      await this._reset();
-    }
-    this.finalForm.reset();
-  }
-  /**
-   * @deprecated Unnecessary indirection
-   */
-  updateFields(fields) {
-    this.fields = fields;
-  }
-  /**
-   * Changes the value of the given field.
-   *
-   * @param name
-   * @param value
-   */
-  change(name, value) {
-    return this.finalForm.change(name, value);
-  }
-  get mutators() {
-    return this.finalForm.mutators;
-  }
-  addQuery(queryId) {
-    this.queries = [...this.queries.filter((id2) => id2 !== queryId), queryId];
-  }
-  removeQuery(queryId) {
-    this.queries = this.queries.filter((id2) => id2 !== queryId);
-  }
-  /**
-   * Updates multiple fields in the form.
-   *
-   * The updates are batched so that it only triggers one `onChange` event.
-   *
-   * In order to prevent disruptions to the user's editing experience this
-   * function will _not_ update the value of any field that is currently
-   * being edited.
-   *
-   * @param values
-   */
-  updateValues(values) {
-    this.finalForm.batch(() => {
-      const activePath = this.finalForm.getState().active;
-      if (!activePath) {
-        updateEverything(this.finalForm, values);
-      } else {
-        updateSelectively(this.finalForm, values);
-      }
-    });
-  }
-  /**
-   * Replaces the initialValues of the form without deleting the current values.
-   *
-   * This function is helpful when the initialValues are loaded asynchronously.
-   *
-   * @param initialValues
-   */
-  updateInitialValues(initialValues) {
-    this.finalForm.batch(() => {
-      const values = this.values || {};
-      this.finalForm.initialize(initialValues);
-      const activePath = this.finalForm.getState().active;
-      if (!activePath) {
-        updateEverything(this.finalForm, values);
-      } else {
-        updateSelectively(this.finalForm, values);
-      }
-    });
-  }
-  /**
-   * Based on field's name this function will
-   * return an array of fields for the give form along
-   * with the path that it was found at top nearest
-   * object-like group
-   *
-   * So if you have a field named blocks.3.title
-   * It will return the fields from the 3rd "block"
-   * along with the path it was found at
-   * fields: [{type: 'string', name: 'title'}, ... other fields]
-   * activePath: ['blocks', '3']
-   */
-  getActiveField(fieldName) {
-    if (!fieldName) {
-      return this;
-    }
-    const result = this.getFieldGroup({
-      formOrObjectField: this,
-      values: this.finalForm.getState().values,
-      namePathIndex: 0,
-      namePath: fieldName.split(".")
-    });
-    return result;
-  }
-  getFieldGroup({
-    formOrObjectField,
-    values = {},
-    namePathIndex,
-    namePath
-  }) {
-    const name = namePath[namePathIndex];
-    const field = formOrObjectField.fields.find((field2) => field2.name === name);
-    const value = values[name];
-    const isLastItem = namePathIndex === namePath.length - 1;
-    if (!field) {
-      return {
-        ...formOrObjectField,
-        fields: formOrObjectField.fields.map((field2) => {
-          return {
-            ...field2,
-            name: [...namePath, field2.name].join(".")
-          };
-        })
-      };
-    } else {
-      if (field.type === "object") {
-        if (field.templates) {
-          if (field.list) {
-            if (isLastItem) {
-              return formOrObjectField;
-            } else {
-              const namePathIndexForListItem = namePathIndex + 1;
-              const index = namePath[namePathIndexForListItem];
-              const listItemValue = value[index];
-              const template = field.templates[listItemValue._template];
-              const templateName = [
-                ...namePath.slice(0, namePathIndexForListItem),
-                index
-              ].join(".");
-              const isLastItem2 = namePathIndexForListItem === namePath.length - 1;
-              if (!isLastItem2) {
-                return this.getFieldGroup({
-                  formOrObjectField: template,
-                  values: listItemValue,
-                  namePath,
-                  namePathIndex: namePathIndex + 2
-                });
-              }
-              if (!template) {
-                console.error({ field, value });
-                throw new Error(
-                  `Expected template value for field ${field.name}`
-                );
-              }
-              return {
-                ...template,
-                name: templateName,
-                fields: template.fields.map((field2) => {
-                  return {
-                    ...field2,
-                    name: [templateName, field2.name].join(".")
-                  };
-                })
-              };
-            }
-          }
-        } else {
-          if (field.list) {
-            const namePathIndexForListItem = namePathIndex + 1;
-            const index = namePath[namePathIndexForListItem];
-            const listItemValue = value[index];
-            const fieldName = [
-              ...namePath.slice(0, namePathIndexForListItem),
-              index
-            ].join(".");
-            const isLastItem2 = namePathIndexForListItem === namePath.length - 1;
-            if (!isLastItem2) {
-              if (field.fields) {
-                return this.getFieldGroup({
-                  formOrObjectField: field,
-                  values: listItemValue,
-                  namePath,
-                  namePathIndex: namePathIndex + 2
-                });
-              }
-            }
-            return {
-              ...field,
-              name: fieldName,
-              fields: field.fields.map((field2) => {
-                return {
-                  ...field2,
-                  name: [fieldName, field2.name].join(".")
-                };
-              })
-            };
-          } else {
-            const fieldName = [...namePath.slice(0, namePathIndex + 1)].join(
-              "."
-            );
-            const isLastItem2 = namePathIndex === namePath.length - 1;
-            if (!isLastItem2) {
-              return this.getFieldGroup({
-                formOrObjectField: field,
-                values: value,
-                namePath,
-                namePathIndex: namePathIndex + 1
-              });
-            }
-            return {
-              ...field,
-              name: fieldName,
-              fields: field.fields.map((field2) => {
-                return {
-                  ...field2,
-                  name: [fieldName, field2.name].join(".")
-                };
-              })
-            };
-          }
-        }
-      } else if (field.type === "rich-text") {
-        if (isLastItem) {
-          return {
-            ...formOrObjectField,
-            fields: formOrObjectField.fields.map((field2) => {
-              return {
-                ...field2,
-                name: [...namePath.slice(0, namePathIndex), field2.name].join(
-                  "."
-                )
-              };
-            })
-          };
-        } else {
-          const childrenIndex = namePath.findIndex(
-            (value2) => value2 === "children"
-          );
-          const propsIndex = namePath.slice(childrenIndex).findIndex((value2) => value2 === "props") + childrenIndex;
-          const itemName = namePath.slice(childrenIndex, propsIndex).join(".");
-          const item = getIn(value, itemName);
-          const props = item.props;
-          const templateString = item.name;
-          const currentPathIndex = namePathIndex + Math.max(propsIndex, 3);
-          const isLastItem2 = currentPathIndex + 1 === namePath.length;
-          const template = field.templates.find(
-            (t2) => t2.name === templateString
-          );
-          const templateName = namePath.slice(0, currentPathIndex + 2).join(".");
-          if ((item == null ? void 0 : item.type) === "img") {
-            const imageName = namePath.slice(0, currentPathIndex + 2).join(".");
-            return {
-              ...formOrObjectField,
-              // name: [formOrObjectField.name, 'img'].join('.'),
-              name: [imageName].join("."),
-              fields: [
-                {
-                  type: "image",
-                  // label: 'URL',
-                  name: [templateName, "url"].join("."),
-                  component: "image"
-                },
-                {
-                  type: "string",
-                  label: "Alt",
-                  name: [templateName.replace(/\.props$/, ""), "alt"].join("."),
-                  component: "text"
-                },
-                {
-                  type: "string",
-                  label: "Caption",
-                  name: [templateName.replace(/\.props$/, ""), "caption"].join(
-                    "."
-                  ),
-                  component: "text"
-                }
-              ]
-            };
-          }
-          if (!isLastItem2) {
-            return this.getFieldGroup({
-              formOrObjectField: template,
-              values: props,
-              namePath,
-              namePathIndex: namePathIndex + Math.max(4, childrenIndex + propsIndex)
-            });
-          }
-          if (!template) {
-            throw new Error(`Expected template value for field ${item.name}`);
-          }
-          return {
-            ...template,
-            name: templateName,
-            fields: template.fields.map((field2) => {
-              return {
-                ...field2,
-                name: [templateName, field2.name].join(".")
-              };
-            })
-          };
-        }
-      } else {
-        const fieldName = [...namePath.slice(0, namePathIndex)].join(".");
-        if (!fieldName) {
-          return formOrObjectField;
-        }
-        return {
-          ...formOrObjectField,
-          name: fieldName,
-          fields: formOrObjectField.fields.map((field2) => {
-            return {
-              ...field2,
-              name: [fieldName, field2.name].join(".")
-            };
-          })
-        };
-      }
-    }
+            onClick: () => {
+              tf.remove.tableColumn();
+            },
+            onMouseDown: (e3) => e3.preventDefault(),
+            tooltip: "Delete column"
+          },
+          /* @__PURE__ */ React__default.createElement(XIcon, null)
+        ))
+      )
+    ));
   }
+);
+const TableBordersDropdownMenuContent = withRef$1((props, ref) => {
+  const editor = useEditorRef();
+  const {
+    getOnSelectTableBorder,
+    hasBottomBorder,
+    hasLeftBorder,
+    hasNoBorders,
+    hasOuterBorders,
+    hasRightBorder,
+    hasTopBorder
+  } = useTableBordersDropdownMenuContentState();
+  return /* @__PURE__ */ React__default.createElement(
+    DropdownMenuContent$1,
+    {
+      ref,
+      className: cn$2("min-w-[220px]"),
+      onCloseAutoFocus: (e3) => {
+        e3.preventDefault();
+        editor.tf.focus();
+      },
+      align: "start",
+      side: "right",
+      sideOffset: 0,
+      ...props
+    },
+    /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasTopBorder,
+        onCheckedChange: getOnSelectTableBorder("top")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "Top Border")
+    ), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasRightBorder,
+        onCheckedChange: getOnSelectTableBorder("right")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "Right Border")
+    ), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasBottomBorder,
+        onCheckedChange: getOnSelectTableBorder("bottom")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "Bottom Border")
+    ), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasLeftBorder,
+        onCheckedChange: getOnSelectTableBorder("left")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "Left Border")
+    )),
+    /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasNoBorders,
+        onCheckedChange: getOnSelectTableBorder("none")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "No Border")
+    ), /* @__PURE__ */ React__default.createElement(
+      DropdownMenuCheckboxItem,
+      {
+        checked: hasOuterBorders,
+        onCheckedChange: getOnSelectTableBorder("outer")
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, "Outside Borders")
+    ))
+  );
+});
+function ColorDropdownMenu({ children, tooltip }) {
+  const [open, setOpen] = useState(false);
+  const editor = useEditorRef();
+  const selectedCells = usePluginOption(TablePlugin, "selectedCells");
+  useCallback(
+    (color) => {
+      setOpen(false);
+      setCellBackground(editor, { color, selectedCells: selectedCells ?? [] });
+    },
+    [selectedCells, editor]
+  );
+  const onClearColor = useCallback(() => {
+    setOpen(false);
+    setCellBackground(editor, {
+      color: null,
+      selectedCells: selectedCells ?? []
+    });
+  }, [selectedCells, editor]);
+  return /* @__PURE__ */ React__default.createElement(DropdownMenu$1, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger$1, { asChild: true }, /* @__PURE__ */ React__default.createElement(ToolbarButton, { tooltip }, children)), /* @__PURE__ */ React__default.createElement(DropdownMenuContent$1, { align: "start" }, /* @__PURE__ */ React__default.createElement(DropdownMenuGroup, null, /* @__PURE__ */ React__default.createElement(DropdownMenuItem$1, { className: "p-2", onClick: onClearColor }, /* @__PURE__ */ React__default.createElement(EraserIcon, null), /* @__PURE__ */ React__default.createElement("span", null, "Clear")))));
 }
-function updateEverything(form, values) {
-  Object.entries(values).forEach(([path3, value]) => {
-    form.change(path3, value);
-  });
+const TableRowElement = withRef$1(
+  ({ children, className, ...props }, ref) => {
+    const selected = useSelected();
+    return /* @__PURE__ */ React__default.createElement(
+      PlateElement,
+      {
+        as: "tr",
+        className: cn$2(className, "group/row"),
+        "data-selected": selected ? "true" : void 0,
+        ...props
+      },
+      children
+    );
+  }
+);
+function classNames$1(...classes) {
+  return classes.filter(Boolean).join(" ");
 }
-function 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);
+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"
+        )
       }
-    } 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);
+    ),
+    [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"
+        )
       }
-    });
-    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();
-    });
-  });
-}
+    ),
+    [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
+  };
+};
 function FieldsBuilder({
   form,
   fields,
   activeFieldName,
+  hoveringFieldName,
   padding = false
 }) {
   const cms = useCMS$1();
@@ -38189,13 +38249,14 @@ function FieldsBuilder({
   }, [setFieldPlugins]);
   React.useEffect(() => updateFieldPlugins(), []);
   useEventSubscription("plugin:add:field", () => updateFieldPlugins(), []);
-  return /* @__PURE__ */ React.createElement(FieldsGroup, { padding }, fields.map((field, index) => {
+  return /* @__PURE__ */ React.createElement(FieldsGroup, null, fields.map((field, index) => {
     return /* @__PURE__ */ React.createElement(
       InnerField,
       {
         key: field.name,
         field,
         activeFieldName,
+        hoveringFieldName,
         form,
         fieldPlugins,
         index
@@ -38208,7 +38269,8 @@ const InnerField = ({
   form,
   fieldPlugins,
   index,
-  activeFieldName
+  activeFieldName,
+  hoveringFieldName
 }) => {
   React.useEffect(() => {
     form.mutators.setFieldData(field.name, {
@@ -38231,6 +38293,9 @@ 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(".");
@@ -38245,6 +38310,7 @@ const InnerField = ({
     {
       name: field.name,
       key: field.name,
+      className: "w-full",
       isEqual: (a2, b) => isEqual(field, a2, b),
       type,
       parse: parse2 ? (value, name) => parse2(value, name, field) : void 0,
@@ -38263,7 +38329,11 @@ const InnerField = ({
             ...fieldProps,
             form: form.finalForm,
             tinaForm: form,
-            field: { ...field, experimental_focusIntent: isActiveField }
+            field: {
+              ...field,
+              focusIntent,
+              hoverIntent
+            }
           }
         );
       }
@@ -38272,10 +38342,14 @@ const InnerField = ({
           plugin.Component,
           {
             ...fieldProps,
-            experimental_focusIntent: isActiveField,
+            focusIntent,
             form: form.finalForm,
             tinaForm: form,
-            field: { ...field, experimental_focusIntent: isActiveField },
+            field: {
+              ...field,
+              focusIntent,
+              hoverIntent
+            },
             index
           }
         );
@@ -38285,13 +38359,12 @@ const InnerField = ({
   );
 };
 const FieldsGroup = ({
-  padding,
   children
 }) => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: `relative block w-full h-full whitespace-nowrap overflow-x-visible ${padding ? `pb-5` : ``}`
+      className: `relative flex flex-wrap w-full h-full whitespace-nowrap overflow-x-visible`
     },
     children
   );
@@ -39341,7 +39414,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-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 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 disabledClasses$1 = "opacity-50 pointer-events-none cursor-not-allowed";
 const BaseTextField = React.forwardRef(({ className, disabled, ...rest }, ref) => {
   return /* @__PURE__ */ React.createElement(
@@ -39359,7 +39432,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:border-blue-500 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:outline-none focus:border-tina-orange-dark block w-full border border-gray-200 focus:text-gray-900 rounded",
       ref,
       style: { minHeight: "160px" }
     }
@@ -39818,7 +39891,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-blue-500 border-blue-600" : "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-tina-orange border-tina-orange-dark" : "bg-gray-250 border-gray-300"}`,
         style: {
           transform: `translate3d(${checked ? "20px" : "0"}, -50%, 0)`
         }
@@ -39892,7 +39965,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-blue-500 focus:border-blue-500 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-tina-orange-dark focus:border-tina-orange-dark sm:text-sm rounded";
 const Select$1 = ({
   input,
   field,
@@ -39902,11 +39975,13 @@ const Select$1 = ({
   const selectOptions = options || field.options;
   const ref = React.useRef(null);
   React.useEffect(() => {
-    if (ref.current && (field == null ? void 0 : field.experimental_focusIntent)) {
+    const focusIntent = field == null ? void 0 : field.focusIntent;
+    const shouldFocus = !!focusIntent;
+    if (ref.current && shouldFocus) {
       ref.current.focus();
     }
-  }, [field == null ? void 0 : field.experimental_focusIntent, ref]);
-  return /* @__PURE__ */ React.createElement("div", { className: "relative group w-full h-full md:w-auto" }, /* @__PURE__ */ React.createElement(
+  }, [field == null ? void 0 : field.focusIntent, ref]);
+  return /* @__PURE__ */ React.createElement("div", { className: "relative group w-full h-fit md:w-auto" }, /* @__PURE__ */ React.createElement(
     "select",
     {
       id: input.name,
@@ -39987,7 +40062,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-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"}`
+      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"}`
     },
     /* @__PURE__ */ React.createElement(
       BiCheck,
@@ -40048,7 +40123,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-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"}`
+          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"}`
         },
         /* @__PURE__ */ React.createElement(
           BiCheck,
@@ -40179,7 +40254,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-blue-500 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-tina-orange-dark rounded outline-none overflow-visible cursor-pointer border-none hover:opacity-60 transition ease-out duration-100",
         onClick,
         ref
       },
@@ -40680,7 +40755,7 @@ function toProps(option) {
     return option;
   return { value: option, label: option };
 }
-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 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 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) => {
@@ -41053,7 +41128,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-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"
+      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"
     },
     /* @__PURE__ */ React.createElement("span", { className: "text-left text-base font-medium overflow-hidden text-ellipsis whitespace-nowrap flex-1" }, children),
     " ",
@@ -41205,7 +41280,7 @@ const BlockSelectorBig = ({
         "input",
         {
           type: "text",
-          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",
+          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",
           onClick: (event) => {
             event.stopPropagation();
             event.preventDefault();
@@ -41658,10 +41733,12 @@ const ImageField = wrapFieldsWithMeta(
       onClear = () => props.input.onChange("");
     }
     React.useEffect(() => {
-      if (ref.current && props.field.experimental_focusIntent) {
+      const focusIntent = props.field.focusIntent;
+      const shouldFocus = !!focusIntent;
+      if (ref.current && shouldFocus) {
         ref.current.focus();
       }
-    }, [props.field.experimental_focusIntent, ref]);
+    }, [props.field.focusIntent, ref]);
     async function onChange(media) {
       var _a2, _b;
       if (media) {
@@ -41787,12 +41864,14 @@ const RadioGroupFieldPlugin = {
 const TextareaField = wrapFieldsWithMeta((props) => {
   const ref = React.useRef(null);
   React.useEffect(() => {
-    if (ref.current && props.field.experimental_focusIntent) {
+    const focusIntent = props.field.focusIntent;
+    const shouldFocus = !!focusIntent;
+    if (ref.current && shouldFocus) {
       const el = ref.current;
       el.focus();
       el.setSelectionRange(el.value.length, el.value.length);
     }
-  }, [props.field.experimental_focusIntent, ref]);
+  }, [props.field.focusIntent, ref]);
   return /* @__PURE__ */ React.createElement(TextArea, { ref, ...props.input });
 });
 const TextareaFieldPlugin = {
@@ -41853,10 +41932,12 @@ const TextField = wrapFieldsWithMeta(
     var _a2;
     const ref = React.useRef(null);
     React.useEffect(() => {
-      if (ref.current && props.field.experimental_focusIntent) {
+      const focusIntent = props.field.focusIntent;
+      const shouldFocus = !!focusIntent;
+      if (ref.current && shouldFocus) {
         ref.current.focus();
       }
-    }, [props.field.experimental_focusIntent, ref]);
+    }, [props.field.focusIntent, ref]);
     return /* @__PURE__ */ React.createElement(
       BaseTextField,
       {
@@ -41916,10 +41997,12 @@ const TagsField = wrapFieldsWithMeta(({ input, field, form, tinaForm }) => {
   const items2 = input.value || [];
   const ref = React.useRef(null);
   React.useEffect(() => {
-    if (ref.current && field.experimental_focusIntent) {
+    const focusIntent = field.focusIntent;
+    const shouldFocus = !!focusIntent;
+    if (ref.current && shouldFocus) {
       ref.current.focus();
     }
-  }, [field.experimental_focusIntent, ref]);
+  }, [field.focusIntent, ref]);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement(
     BaseTextField,
     {
@@ -42070,66 +42153,63 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
 )));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 function buildFormatLongFn(args) {
-  return function() {
-    var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var width = options.width ? String(options.width) : args.defaultWidth;
-    var format2 = args.formats[width] || args.formats[args.defaultWidth];
+  return (options = {}) => {
+    const width = options.width ? String(options.width) : args.defaultWidth;
+    const format2 = args.formats[width] || args.formats[args.defaultWidth];
     return format2;
   };
 }
 function buildLocalizeFn(args) {
-  return function(dirtyIndex, options) {
-    var context = options !== null && options !== void 0 && options.context ? String(options.context) : "standalone";
-    var valuesArray;
+  return (value, options) => {
+    const context = (options == null ? void 0 : options.context) ? String(options.context) : "standalone";
+    let valuesArray;
     if (context === "formatting" && args.formattingValues) {
-      var defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
-      var width = options !== null && options !== void 0 && options.width ? String(options.width) : defaultWidth;
+      const defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
+      const width = (options == null ? void 0 : options.width) ? String(options.width) : defaultWidth;
       valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
     } else {
-      var _defaultWidth = args.defaultWidth;
-      var _width = options !== null && options !== void 0 && options.width ? String(options.width) : args.defaultWidth;
-      valuesArray = args.values[_width] || args.values[_defaultWidth];
+      const defaultWidth = args.defaultWidth;
+      const width = (options == null ? void 0 : options.width) ? String(options.width) : args.defaultWidth;
+      valuesArray = args.values[width] || args.values[defaultWidth];
     }
-    var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex;
+    const index = args.argumentCallback ? args.argumentCallback(value) : value;
     return valuesArray[index];
   };
 }
 function buildMatchFn(args) {
-  return function(string3) {
-    var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    var width = options.width;
-    var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
-    var matchResult = string3.match(matchPattern);
+  return (string3, options = {}) => {
+    const width = options.width;
+    const matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
+    const matchResult = string3.match(matchPattern);
     if (!matchResult) {
       return null;
     }
-    var matchedString = matchResult[0];
-    var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
-    var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function(pattern) {
-      return pattern.test(matchedString);
-    }) : findKey(parsePatterns, function(pattern) {
-      return pattern.test(matchedString);
-    });
-    var value;
+    const matchedString = matchResult[0];
+    const parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
+    const key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString)) : (
+      // [TODO] -- I challenge you to fix the type
+      findKey(parsePatterns, (pattern) => pattern.test(matchedString))
+    );
+    let value;
     value = args.valueCallback ? args.valueCallback(key) : key;
-    value = options.valueCallback ? options.valueCallback(value) : value;
-    var rest = string3.slice(matchedString.length);
-    return {
-      value,
-      rest
-    };
+    value = options.valueCallback ? (
+      // [TODO] -- I challenge you to fix the type
+      options.valueCallback(value)
+    ) : value;
+    const rest = string3.slice(matchedString.length);
+    return { value, rest };
   };
 }
 function findKey(object, predicate) {
-  for (var key in object) {
-    if (object.hasOwnProperty(key) && predicate(object[key])) {
+  for (const key in object) {
+    if (Object.prototype.hasOwnProperty.call(object, key) && predicate(object[key])) {
       return key;
     }
   }
   return void 0;
 }
 function findIndex(array, predicate) {
-  for (var key = 0; key < array.length; key++) {
+  for (let key = 0; key < array.length; key++) {
     if (predicate(array[key])) {
       return key;
     }
@@ -42137,146 +42217,21 @@ function findIndex(array, predicate) {
   return void 0;
 }
 function buildMatchPatternFn(args) {
-  return function(string3) {
-    var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-    var matchResult = string3.match(args.matchPattern);
+  return (string3, options = {}) => {
+    const matchResult = string3.match(args.matchPattern);
     if (!matchResult)
       return null;
-    var matchedString = matchResult[0];
-    var parseResult = string3.match(args.parsePattern);
+    const matchedString = matchResult[0];
+    const parseResult = string3.match(args.parsePattern);
     if (!parseResult)
       return null;
-    var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
+    let value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
     value = options.valueCallback ? options.valueCallback(value) : value;
-    var rest = string3.slice(matchedString.length);
-    return {
-      value,
-      rest
-    };
+    const rest = string3.slice(matchedString.length);
+    return { value, rest };
   };
 }
-function _typeof(o3) {
-  "@babel/helpers - typeof";
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o4) {
-    return typeof o4;
-  } : function(o4) {
-    return o4 && "function" == typeof Symbol && o4.constructor === Symbol && o4 !== Symbol.prototype ? "symbol" : typeof o4;
-  }, _typeof(o3);
-}
-function requiredArgs(required, args) {
-  if (args.length < required) {
-    throw new TypeError(required + " argument" + (required > 1 ? "s" : "") + " required, but only " + args.length + " present");
-  }
-}
-function toDate(argument) {
-  requiredArgs(1, arguments);
-  var argStr = Object.prototype.toString.call(argument);
-  if (argument instanceof Date || _typeof(argument) === "object" && argStr === "[object Date]") {
-    return new Date(argument.getTime());
-  } else if (typeof argument === "number" || argStr === "[object Number]") {
-    return new Date(argument);
-  } else {
-    if ((typeof argument === "string" || argStr === "[object String]") && typeof console !== "undefined") {
-      console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments");
-      console.warn(new Error().stack);
-    }
-    return /* @__PURE__ */ new Date(NaN);
-  }
-}
-var defaultOptions = {};
-function getDefaultOptions() {
-  return defaultOptions;
-}
-function getTimezoneOffsetInMilliseconds(date) {
-  var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()));
-  utcDate.setUTCFullYear(date.getFullYear());
-  return date.getTime() - utcDate.getTime();
-}
-function compareAsc(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  var diff2 = dateLeft.getTime() - dateRight.getTime();
-  if (diff2 < 0) {
-    return -1;
-  } else if (diff2 > 0) {
-    return 1;
-  } else {
-    return diff2;
-  }
-}
-function differenceInCalendarMonths(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  var yearDiff = dateLeft.getFullYear() - dateRight.getFullYear();
-  var monthDiff = dateLeft.getMonth() - dateRight.getMonth();
-  return yearDiff * 12 + monthDiff;
-}
-function differenceInMilliseconds(dateLeft, dateRight) {
-  requiredArgs(2, arguments);
-  return toDate(dateLeft).getTime() - toDate(dateRight).getTime();
-}
-var roundingMap = {
-  ceil: Math.ceil,
-  round: Math.round,
-  floor: Math.floor,
-  trunc: function trunc(value) {
-    return value < 0 ? Math.ceil(value) : Math.floor(value);
-  }
-  // Math.trunc is not supported by IE
-};
-var defaultRoundingMethod = "trunc";
-function getRoundingMethod(method) {
-  return method ? roundingMap[method] : roundingMap[defaultRoundingMethod];
-}
-function endOfDay(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  date.setHours(23, 59, 59, 999);
-  return date;
-}
-function endOfMonth(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  var month = date.getMonth();
-  date.setFullYear(date.getFullYear(), month + 1, 0);
-  date.setHours(23, 59, 59, 999);
-  return date;
-}
-function isLastDayOfMonth(dirtyDate) {
-  requiredArgs(1, arguments);
-  var date = toDate(dirtyDate);
-  return endOfDay(date).getTime() === endOfMonth(date).getTime();
-}
-function differenceInMonths(dirtyDateLeft, dirtyDateRight) {
-  requiredArgs(2, arguments);
-  var dateLeft = toDate(dirtyDateLeft);
-  var dateRight = toDate(dirtyDateRight);
-  var sign = compareAsc(dateLeft, dateRight);
-  var difference = Math.abs(differenceInCalendarMonths(dateLeft, dateRight));
-  var result;
-  if (difference < 1) {
-    result = 0;
-  } else {
-    if (dateLeft.getMonth() === 1 && dateLeft.getDate() > 27) {
-      dateLeft.setDate(30);
-    }
-    dateLeft.setMonth(dateLeft.getMonth() - sign * difference);
-    var isLastMonthNotFull = compareAsc(dateLeft, dateRight) === -sign;
-    if (isLastDayOfMonth(toDate(dirtyDateLeft)) && difference === 1 && compareAsc(dirtyDateLeft, dateRight) === 1) {
-      isLastMonthNotFull = false;
-    }
-    result = sign * (difference - Number(isLastMonthNotFull));
-  }
-  return result === 0 ? 0 : result;
-}
-function differenceInSeconds(dateLeft, dateRight, options) {
-  requiredArgs(2, arguments);
-  var diff2 = differenceInMilliseconds(dateLeft, dateRight) / 1e3;
-  return getRoundingMethod(options === null || options === void 0 ? void 0 : options.roundingMethod)(diff2);
-}
-var formatDistanceLocale = {
+const formatDistanceLocale = {
   lessThanXSeconds: {
     one: "less than a second",
     other: "less than {{count}} seconds"
@@ -42339,9 +42294,9 @@ var formatDistanceLocale = {
     other: "almost {{count}} years"
   }
 };
-var formatDistance$1 = function formatDistance(token, count, options) {
-  var result;
-  var tokenValue = formatDistanceLocale[token];
+const formatDistance = (token, count, options) => {
+  let result;
+  const tokenValue = formatDistanceLocale[token];
   if (typeof tokenValue === "string") {
     result = tokenValue;
   } else if (count === 1) {
@@ -42349,7 +42304,7 @@ var formatDistance$1 = function formatDistance(token, count, options) {
   } else {
     result = tokenValue.other.replace("{{count}}", count.toString());
   }
-  if (options !== null && options !== void 0 && options.addSuffix) {
+  if (options == null ? void 0 : options.addSuffix) {
     if (options.comparison && options.comparison > 0) {
       return "in " + result;
     } else {
@@ -42358,41 +42313,7 @@ var formatDistance$1 = function formatDistance(token, count, options) {
   }
   return result;
 };
-const formatDistance$2 = formatDistance$1;
-var dateFormats = {
-  full: "EEEE, MMMM do, y",
-  long: "MMMM do, y",
-  medium: "MMM d, y",
-  short: "MM/dd/yyyy"
-};
-var timeFormats = {
-  full: "h:mm:ss a zzzz",
-  long: "h:mm:ss a z",
-  medium: "h:mm:ss a",
-  short: "h:mm a"
-};
-var dateTimeFormats = {
-  full: "{{date}} 'at' {{time}}",
-  long: "{{date}} 'at' {{time}}",
-  medium: "{{date}}, {{time}}",
-  short: "{{date}}, {{time}}"
-};
-var formatLong = {
-  date: buildFormatLongFn({
-    formats: dateFormats,
-    defaultWidth: "full"
-  }),
-  time: buildFormatLongFn({
-    formats: timeFormats,
-    defaultWidth: "full"
-  }),
-  dateTime: buildFormatLongFn({
-    formats: dateTimeFormats,
-    defaultWidth: "full"
-  })
-};
-const formatLong$1 = formatLong;
-var formatRelativeLocale = {
+const formatRelativeLocale = {
   lastWeek: "'last' eeee 'at' p",
   yesterday: "'yesterday at' p",
   today: "'today at' p",
@@ -42400,32 +42321,63 @@ var formatRelativeLocale = {
   nextWeek: "eeee 'at' p",
   other: "P"
 };
-var formatRelative = function formatRelative2(token, _date, _baseDate, _options) {
-  return formatRelativeLocale[token];
-};
-const formatRelative$1 = formatRelative;
-var eraValues = {
+const formatRelative = (token, _date, _baseDate, _options) => formatRelativeLocale[token];
+const eraValues = {
   narrow: ["B", "A"],
   abbreviated: ["BC", "AD"],
   wide: ["Before Christ", "Anno Domini"]
 };
-var quarterValues = {
+const quarterValues = {
   narrow: ["1", "2", "3", "4"],
   abbreviated: ["Q1", "Q2", "Q3", "Q4"],
   wide: ["1st quarter", "2nd quarter", "3rd quarter", "4th quarter"]
 };
-var monthValues = {
+const monthValues = {
   narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
-  abbreviated: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-  wide: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+  abbreviated: [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ],
+  wide: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ]
 };
-var dayValues = {
+const dayValues = {
   narrow: ["S", "M", "T", "W", "T", "F", "S"],
   short: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
   abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-  wide: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
+  wide: [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+  ]
 };
-var dayPeriodValues = {
+const dayPeriodValues = {
   narrow: {
     am: "a",
     pm: "p",
@@ -42457,7 +42409,7 @@ var dayPeriodValues = {
     night: "night"
   }
 };
-var formattingDayPeriodValues = {
+const formattingDayPeriodValues = {
   narrow: {
     am: "a",
     pm: "p",
@@ -42489,9 +42441,9 @@ var formattingDayPeriodValues = {
     night: "at night"
   }
 };
-var ordinalNumber = function ordinalNumber2(dirtyNumber, _options) {
-  var number = Number(dirtyNumber);
-  var rem100 = number % 100;
+const ordinalNumber = (dirtyNumber, _options) => {
+  const number = Number(dirtyNumber);
+  const rem100 = number % 100;
   if (rem100 > 20 || rem100 < 10) {
     switch (rem100 % 10) {
       case 1:
@@ -42504,7 +42456,7 @@ var ordinalNumber = function ordinalNumber2(dirtyNumber, _options) {
   }
   return number + "th";
 };
-var localize = {
+const localize = {
   ordinalNumber,
   era: buildLocalizeFn({
     values: eraValues,
@@ -42513,9 +42465,7 @@ var localize = {
   quarter: buildLocalizeFn({
     values: quarterValues,
     defaultWidth: "wide",
-    argumentCallback: function argumentCallback(quarter) {
-      return quarter - 1;
-    }
+    argumentCallback: (quarter) => quarter - 1
   }),
   month: buildLocalizeFn({
     values: monthValues,
@@ -42532,49 +42482,74 @@ var localize = {
     defaultFormattingWidth: "wide"
   })
 };
-const localize$1 = localize;
-var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
-var parseOrdinalNumberPattern = /\d+/i;
-var matchEraPatterns = {
+const matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
+const parseOrdinalNumberPattern = /\d+/i;
+const matchEraPatterns = {
   narrow: /^(b|a)/i,
   abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
   wide: /^(before christ|before common era|anno domini|common era)/i
 };
-var parseEraPatterns = {
+const parseEraPatterns = {
   any: [/^b/i, /^(a|c)/i]
 };
-var matchQuarterPatterns = {
+const matchQuarterPatterns = {
   narrow: /^[1234]/i,
   abbreviated: /^q[1234]/i,
   wide: /^[1234](th|st|nd|rd)? quarter/i
 };
-var parseQuarterPatterns = {
+const parseQuarterPatterns = {
   any: [/1/i, /2/i, /3/i, /4/i]
 };
-var matchMonthPatterns = {
+const matchMonthPatterns = {
   narrow: /^[jfmasond]/i,
   abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
   wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
 };
-var parseMonthPatterns = {
-  narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
-  any: [/^ja/i, /^f/i, /^mar/i, /^ap/i, /^may/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i]
+const parseMonthPatterns = {
+  narrow: [
+    /^j/i,
+    /^f/i,
+    /^m/i,
+    /^a/i,
+    /^m/i,
+    /^j/i,
+    /^j/i,
+    /^a/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i
+  ],
+  any: [
+    /^ja/i,
+    /^f/i,
+    /^mar/i,
+    /^ap/i,
+    /^may/i,
+    /^jun/i,
+    /^jul/i,
+    /^au/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i
+  ]
 };
-var matchDayPatterns = {
+const matchDayPatterns = {
   narrow: /^[smtwf]/i,
   short: /^(su|mo|tu|we|th|fr|sa)/i,
   abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
   wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
 };
-var parseDayPatterns = {
+const parseDayPatterns = {
   narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
   any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
 };
-var matchDayPeriodPatterns = {
+const matchDayPeriodPatterns = {
   narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
   any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
 };
-var parseDayPeriodPatterns = {
+const parseDayPeriodPatterns = {
   any: {
     am: /^a/i,
     pm: /^p/i,
@@ -42586,13 +42561,11 @@ var parseDayPeriodPatterns = {
     night: /night/i
   }
 };
-var match = {
+const match = {
   ordinalNumber: buildMatchPatternFn({
     matchPattern: matchOrdinalNumberPattern,
     parsePattern: parseOrdinalNumberPattern,
-    valueCallback: function valueCallback(value) {
-      return parseInt(value, 10);
-    }
+    valueCallback: (value) => parseInt(value, 10)
   }),
   era: buildMatchFn({
     matchPatterns: matchEraPatterns,
@@ -42605,9 +42578,7 @@ var match = {
     defaultMatchWidth: "wide",
     parsePatterns: parseQuarterPatterns,
     defaultParseWidth: "any",
-    valueCallback: function valueCallback2(index) {
-      return index + 1;
-    }
+    valueCallback: (index) => index + 1
   }),
   month: buildMatchFn({
     matchPatterns: matchMonthPatterns,
@@ -42628,125 +42599,50 @@ var match = {
     defaultParseWidth: "any"
   })
 };
-const match$1 = match;
-var locale = {
+const dateFormats = {
+  full: "EEEE, MMMM do, y",
+  long: "MMMM do, y",
+  medium: "MMM d, y",
+  short: "MM/dd/yyyy"
+};
+const timeFormats = {
+  full: "h:mm:ss a zzzz",
+  long: "h:mm:ss a z",
+  medium: "h:mm:ss a",
+  short: "h:mm a"
+};
+const dateTimeFormats = {
+  full: "{{date}} 'at' {{time}}",
+  long: "{{date}} 'at' {{time}}",
+  medium: "{{date}}, {{time}}",
+  short: "{{date}}, {{time}}"
+};
+const formatLong = {
+  date: buildFormatLongFn({
+    formats: dateFormats,
+    defaultWidth: "full"
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats,
+    defaultWidth: "full"
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats,
+    defaultWidth: "full"
+  })
+};
+const enUS = {
   code: "en-US",
-  formatDistance: formatDistance$2,
-  formatLong: formatLong$1,
-  formatRelative: formatRelative$1,
-  localize: localize$1,
-  match: match$1,
+  formatDistance,
+  formatLong,
+  formatRelative,
+  localize,
+  match,
   options: {
     weekStartsOn: 0,
     firstWeekContainsDate: 1
   }
 };
-const enUS = locale;
-function assign(target, object) {
-  if (target == null) {
-    throw new TypeError("assign requires that input parameter not be null or undefined");
-  }
-  for (var property2 in object) {
-    if (Object.prototype.hasOwnProperty.call(object, property2)) {
-      target[property2] = object[property2];
-    }
-  }
-  return target;
-}
-function cloneObject(object) {
-  return assign({}, object);
-}
-var MINUTES_IN_DAY = 1440;
-var MINUTES_IN_ALMOST_TWO_DAYS = 2520;
-var MINUTES_IN_MONTH = 43200;
-var MINUTES_IN_TWO_MONTHS = 86400;
-function formatDistance2(dirtyDate, dirtyBaseDate, options) {
-  var _ref, _options$locale;
-  requiredArgs(2, arguments);
-  var defaultOptions2 = getDefaultOptions();
-  var locale2 = (_ref = (_options$locale = options === null || options === void 0 ? void 0 : options.locale) !== null && _options$locale !== void 0 ? _options$locale : defaultOptions2.locale) !== null && _ref !== void 0 ? _ref : enUS;
-  if (!locale2.formatDistance) {
-    throw new RangeError("locale must contain formatDistance property");
-  }
-  var comparison = compareAsc(dirtyDate, dirtyBaseDate);
-  if (isNaN(comparison)) {
-    throw new RangeError("Invalid time value");
-  }
-  var localizeOptions = assign(cloneObject(options), {
-    addSuffix: Boolean(options === null || options === void 0 ? void 0 : options.addSuffix),
-    comparison
-  });
-  var dateLeft;
-  var dateRight;
-  if (comparison > 0) {
-    dateLeft = toDate(dirtyBaseDate);
-    dateRight = toDate(dirtyDate);
-  } else {
-    dateLeft = toDate(dirtyDate);
-    dateRight = toDate(dirtyBaseDate);
-  }
-  var seconds = differenceInSeconds(dateRight, dateLeft);
-  var offsetInSeconds = (getTimezoneOffsetInMilliseconds(dateRight) - getTimezoneOffsetInMilliseconds(dateLeft)) / 1e3;
-  var minutes = Math.round((seconds - offsetInSeconds) / 60);
-  var months;
-  if (minutes < 2) {
-    if (options !== null && options !== void 0 && options.includeSeconds) {
-      if (seconds < 5) {
-        return locale2.formatDistance("lessThanXSeconds", 5, localizeOptions);
-      } else if (seconds < 10) {
-        return locale2.formatDistance("lessThanXSeconds", 10, localizeOptions);
-      } else if (seconds < 20) {
-        return locale2.formatDistance("lessThanXSeconds", 20, localizeOptions);
-      } else if (seconds < 40) {
-        return locale2.formatDistance("halfAMinute", 0, localizeOptions);
-      } else if (seconds < 60) {
-        return locale2.formatDistance("lessThanXMinutes", 1, localizeOptions);
-      } else {
-        return locale2.formatDistance("xMinutes", 1, localizeOptions);
-      }
-    } else {
-      if (minutes === 0) {
-        return locale2.formatDistance("lessThanXMinutes", 1, localizeOptions);
-      } else {
-        return locale2.formatDistance("xMinutes", minutes, localizeOptions);
-      }
-    }
-  } else if (minutes < 45) {
-    return locale2.formatDistance("xMinutes", minutes, localizeOptions);
-  } else if (minutes < 90) {
-    return locale2.formatDistance("aboutXHours", 1, localizeOptions);
-  } else if (minutes < MINUTES_IN_DAY) {
-    var hours = Math.round(minutes / 60);
-    return locale2.formatDistance("aboutXHours", hours, localizeOptions);
-  } else if (minutes < MINUTES_IN_ALMOST_TWO_DAYS) {
-    return locale2.formatDistance("xDays", 1, localizeOptions);
-  } else if (minutes < MINUTES_IN_MONTH) {
-    var days = Math.round(minutes / MINUTES_IN_DAY);
-    return locale2.formatDistance("xDays", days, localizeOptions);
-  } else if (minutes < MINUTES_IN_TWO_MONTHS) {
-    months = Math.round(minutes / MINUTES_IN_MONTH);
-    return locale2.formatDistance("aboutXMonths", months, localizeOptions);
-  }
-  months = differenceInMonths(dateRight, dateLeft);
-  if (months < 12) {
-    var nearestMonth = Math.round(minutes / MINUTES_IN_MONTH);
-    return locale2.formatDistance("xMonths", nearestMonth, localizeOptions);
-  } else {
-    var monthsSinceStartOfYear = months % 12;
-    var years = Math.floor(months / 12);
-    if (monthsSinceStartOfYear < 3) {
-      return locale2.formatDistance("aboutXYears", years, localizeOptions);
-    } else if (monthsSinceStartOfYear < 9) {
-      return locale2.formatDistance("overXYears", years, localizeOptions);
-    } else {
-      return locale2.formatDistance("almostXYears", years + 1, localizeOptions);
-    }
-  }
-}
-function formatDistanceToNow(dirtyDate, options) {
-  requiredArgs(1, arguments);
-  return formatDistance2(dirtyDate, Date.now(), options);
-}
 const Select = SelectPrimitive.Root;
 const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React.createElement(
@@ -43382,7 +43278,7 @@ const TimePicker = React.forwardRef(
 TimePicker.displayName = "TimePicker";
 const DateTimePicker = React.forwardRef(
   ({
-    locale: locale2 = enUS,
+    locale = enUS,
     defaultPopupValue = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)),
     value,
     onChange,
@@ -43427,7 +43323,7 @@ const DateTimePicker = React.forwardRef(
       }),
       [displayDate]
     );
-    const { options, localize: localize2, formatLong: formatLong2 } = locale2;
+    const { options, localize: localize2, formatLong: formatLong2 } = locale;
     if (options && localize2 && formatLong2) {
       ({
         ...enUS,
@@ -43473,7 +43369,7 @@ const DateTimePicker = React.forwardRef(
           onSelect: handleDaySelect,
           initialMonth: value ?? defaultPopupValue,
           yearRange,
-          locale: locale2,
+          locale,
           ...props
         }
       ), granularity !== "day" && /* @__PURE__ */ React.createElement("div", { className: "border-border border-t p-3" }, /* @__PURE__ */ React.createElement(
@@ -43501,11 +43397,11 @@ const DateField = wrapFieldsWithMeta(
     const granularity = timeFormat ? "minute" : "day";
     const inputRef = React__default.useRef(null);
     React__default.useEffect(() => {
-      if (inputRef.current && rest.experimental_focusIntent) {
+      if (inputRef.current && rest.focusIntent) {
         inputRef.current.focus();
         inputRef.current.open();
       }
-    }, [rest.experimental_focusIntent]);
+    }, [rest.focusIntent]);
     const getTimeFormat = useCallback(() => {
       if (timeFormat === false) {
         return;
@@ -43521,10 +43417,11 @@ const DateField = wrapFieldsWithMeta(
       }
       return dateFormat;
     }, [dateFormat]);
-    const date = input.value ? new Date(input.value) : input.value;
+    const date = input.value ? new Date(input.value) : /* @__PURE__ */ new Date();
     return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
       DateTimePicker,
       {
+        ...rest,
         ref: inputRef,
         granularity,
         onChange: (value) => input.onChange(value ? value.toISOString() : value),
@@ -43532,7 +43429,7 @@ const DateField = wrapFieldsWithMeta(
         hourCycle: 12,
         dateFormat: getDateFormat(),
         value: date,
-        ...rest
+        locale: rest.locale ? { code: rest.locale } : void 0
       }
     ));
   }
@@ -44369,7 +44266,7 @@ const BranchItem = ({
         "Currently editing"
       )), indexingStatus !== "complete" && /* @__PURE__ */ React.createElement("div", { className: "w-fit mt-1" }, /* @__PURE__ */ React.createElement(IndexStatus, { indexingStatus: branch.indexStatus.status })))
     ),
-    /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 min-w-0" }, creatingPR ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-blue-600" }, "Creating PR"), /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight text-blue-500" }, "Please wait...")), /* @__PURE__ */ React.createElement(FaSpinner, { className: "w-3 h-auto animate-spin text-blue-500" })) : /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight whitespace-nowrap" }, formatDistanceToNow$1(new Date(branch.indexStatus.timestamp), {
+    /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 min-w-0" }, creatingPR ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-blue-600" }, "Creating PR"), /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight text-blue-500" }, "Please wait...")), /* @__PURE__ */ React.createElement(FaSpinner, { className: "w-3 h-auto animate-spin text-blue-500" })) : /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight whitespace-nowrap" }, formatDistanceToNow(new Date(branch.indexStatus.timestamp), {
       addSuffix: true
     }))),
     /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 flex", onClick: (e3) => e3.stopPropagation() }, branch.githubPullRequestUrl ? /* @__PURE__ */ React.createElement(
@@ -46634,7 +46531,7 @@ const NavProvider = ({
   };
   return /* @__PURE__ */ React__default.createElement(NavContext.Provider, { value }, children);
 };
-const version$1 = "3.1.2";
+const version$1 = "3.2.0";
 const VersionInfo = () => {
   var _a2, _b, _c, _d, _e, _f;
   const cms = useCMS();
@@ -48094,6 +47991,25 @@ 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 {
@@ -48109,24 +48025,24 @@ const initialState = (cms) => {
 };
 function tinaReducer(state, action) {
   switch (action.type) {
-    case "set-quick-editing-supported":
+    case ACTION_TYPES.SET_QUICK_EDITING_SUPPORTED:
       return {
         ...state,
         quickEditSupported: action.value
       };
-    case "set-edit-mode":
+    case ACTION_TYPES.SET_EDIT_MODE:
       return { ...state, editingMode: action.value };
-    case "forms:add":
+    case ACTION_TYPES.FORMS_ADD:
       if (state.forms.find((f2) => f2.tinaForm.id === action.value.id)) {
         return state;
       }
       return { ...state, forms: [...state.forms, { tinaForm: action.value }] };
-    case "forms:remove":
+    case ACTION_TYPES.FORMS_REMOVE:
       return {
         ...state,
         forms: state.forms.filter((form) => form.tinaForm.id !== action.value)
       };
-    case "form-lists:clear": {
+    case ACTION_TYPES.FORM_LISTS_CLEAR: {
       return {
         ...state,
         quickEditSupported: false,
@@ -48136,7 +48052,7 @@ function tinaReducer(state, action) {
         forms: []
       };
     }
-    case "form-lists:add": {
+    case ACTION_TYPES.FORM_LISTS_ADD: {
       let formListItemExists = false;
       const nextFormLists = state.formLists.map((formList) => {
         if (formList.id === action.value.id) {
@@ -48175,7 +48091,7 @@ function tinaReducer(state, action) {
         isLoadingContent: false
       };
     }
-    case "form-lists:remove": {
+    case ACTION_TYPES.FORM_LISTS_REMOVE: {
       const nextFormLists = state.formLists.filter(
         ({ id: id2 }) => id2 !== action.value
       );
@@ -48199,7 +48115,7 @@ function tinaReducer(state, action) {
         formLists: nextFormLists
       };
     }
-    case "forms:set-active-form-id":
+    case ACTION_TYPES.FORMS_SET_ACTIVE_FORM_ID:
       if (action.value !== state.activeFormId) {
         const newActiveForm = state.forms.find(
           (form) => form.tinaForm.id === action.value
@@ -48216,7 +48132,7 @@ function tinaReducer(state, action) {
         };
       }
       return state;
-    case "forms:set-active-field-name":
+    case ACTION_TYPES.FORMS_SET_ACTIVE_FIELD_NAME:
       if (state.activeFormId === action.value.formId) {
         const existingForm = state.forms.find(
           (form) => form.tinaForm.id === action.value.formId
@@ -48229,7 +48145,8 @@ function tinaReducer(state, action) {
         if (form.tinaForm.id === action.value.formId) {
           return {
             tinaForm: form.tinaForm,
-            activeFieldName: action.value.fieldName
+            activeFieldName: action.value.fieldName,
+            hoveringFieldName: null
           };
         }
         return form;
@@ -48245,13 +48162,49 @@ function tinaReducer(state, action) {
         forms,
         activeFormId: action.value.formId
       };
-    case "toggle-edit-state": {
+    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: {
       return state.sidebarDisplayState === "closed" ? { ...state, sidebarDisplayState: "open" } : {
         ...state,
         sidebarDisplayState: "closed"
       };
     }
-    case "sidebar:set-display-state": {
+    case ACTION_TYPES.SIDEBAR_SET_DISPLAY_STATE: {
       if (action.value === "openOrFull") {
         if (state.sidebarDisplayState === "closed") {
           return {
@@ -48269,7 +48222,7 @@ function tinaReducer(state, action) {
       }
       return { ...state, sidebarDisplayState: action.value };
     }
-    case "sidebar:set-loading-state": {
+    case ACTION_TYPES.SIDEBAR_SET_LOADING_STATE: {
       return { ...state, isLoadingContent: action.value };
     }
     default:
@@ -48538,10 +48491,12 @@ 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 = () => {
+const useScrollToFocusedField = (enabled) => {
   const { subscribe } = useEvent("field:focus");
-  React.useEffect(
-    () => subscribe(({ fieldName }) => {
+  React.useEffect(() => {
+    if (!enabled)
+      return;
+    return subscribe(({ fieldName }) => {
       const ele = document.querySelector(
         `[data-tinafield="${fieldName}"]`
       );
@@ -48577,17 +48532,41 @@ const useScrollToFocusedField = () => {
           });
         }
       }
-    })
-  );
+    });
+  }, [enabled, subscribe]);
 };
-const ActiveFieldIndicator = () => {
-  const [activeFieldName, setActiveFieldName] = React.useState(
-    null
-  );
+const FieldIndicator = ({
+  eventType,
+  checkFocusedAttribute = false,
+  scrollToField = false
+}) => {
+  const [fieldName, setFieldName] = React.useState(null);
   const [display, setDisplay] = React.useState(false);
   const [position, setPosition] = React.useState(false);
   const [iframePosition, setIframePosition] = React.useState({ left: 0 });
-  const activeEle = useFieldReference(activeFieldName);
+  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]);
   React.useEffect(() => {
     let displayTimeout;
     if (activeEle) {
@@ -48616,13 +48595,7 @@ const ActiveFieldIndicator = () => {
       window.removeEventListener("scroll", rerender);
     };
   }, []);
-  const { subscribe } = useEvent("field:hover");
-  React.useEffect(
-    () => subscribe(({ fieldName, id: id2 }) => {
-      setActiveFieldName(`${id2}#${fieldName}`);
-    })
-  );
-  useScrollToFocusedField();
+  useScrollToFocusedField(scrollToField);
   if (!display)
     return null;
   const eleTopY = position.top + window.scrollY;
@@ -48635,6 +48608,7 @@ const ActiveFieldIndicator = () => {
   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",
     {
@@ -48645,7 +48619,7 @@ const ActiveFieldIndicator = () => {
         left: position.left + window.scrollX + iframePosition.left,
         width: position.width,
         height: position.height,
-        outline: "2px dashed var(--tina-color-indicator)",
+        outline: outlineColor,
         borderRadius: "var(--tina-radius-small)",
         transition: display ? activeEle ? `opacity 300ms ease-out` : `opacity 150ms ease-in` : `none`,
         opacity: activeEle && display ? 0.8 : 0
@@ -48653,6 +48627,15 @@ const ActiveFieldIndicator = () => {
     }
   );
 };
+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);
@@ -48664,7 +48647,7 @@ const TinaUI = ({ children, position }) => {
       position,
       sidebar: cms.sidebar
     }
-  ), /* @__PURE__ */ React.createElement(ActiveFieldIndicator, null), /* @__PURE__ */ React.createElement("div", { className: `${resizingSidebar ? "pointer-events-none" : ""}` }, children)));
+  ), /* @__PURE__ */ React.createElement(ActiveFieldIndicator, null), /* @__PURE__ */ React.createElement(HoveredFieldIndicator, null), /* @__PURE__ */ React.createElement("div", { className: `${resizingSidebar ? "pointer-events-none" : ""}` }, children)));
 };
 const TinaProvider = ({
   cms,
@@ -64633,6 +64616,7 @@ 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(
@@ -64677,9 +64661,9 @@ const FormWrapper = ({
     "div",
     {
       "data-test": `form:${id2 == null ? void 0 : id2.replace(/\\/g, "/")}`,
-      className: "h-full overflow-y-auto max-h-full bg-gray-50"
+      className: "h-full overflow-y-auto max-h-full bg-gray-50 @container"
     },
-    /* @__PURE__ */ React.createElement("div", { className: "py-5 px-6" }, children)
+    /* @__PURE__ */ React.createElement("div", { className: "py-5 px-4" }, children)
   );
 };
 const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
@@ -64805,7 +64789,7 @@ const ImgEmbed = ({
       "button",
       {
         type: "button",
-        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" : ""}`,
+        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" : ""}`,
         onClick: handleSelect
       },
       isImage(element.url) ? /* @__PURE__ */ React__default.createElement(StyledImage, { src: element.url }) : /* @__PURE__ */ React__default.createElement(StyledFile, { src: element.url })
@@ -65061,7 +65045,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-blue-500 focus:border-blue-500"
+      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"
     },
     /* @__PURE__ */ React__default.createElement(EllipsisIcon, { title: "Open options" })
   ), /* @__PURE__ */ React__default.createElement(
@@ -66039,7 +66023,7 @@ const editorVariants = cva(
         ai: "w-full px-0 text-base md:text-sm",
         aiChat: "max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm",
         comment: cn$2("rounded-none border-none bg-transparent text-sm"),
-        default: "size-full px-2 sm:px-4 pt-2 text-base",
+        default: "size-full px-2 sm:px-4 pt-2 text-base min-h-[100px]",
         demo: "size-full px-2 sm:px-4 pt-2 text-base h-[650px]",
         fullWidth: "size-full px-2 sm:px-4 pt-4 pb-72 text-base",
         none: "",
@@ -118983,13 +118967,13 @@ const RichEditor = ({ input, tinaForm, field }) => {
         const plateElement = (_a3 = ref.current) == null ? void 0 : _a3.querySelector(
           '[role="textbox"]'
         );
-        if (field.experimental_focusIntent && plateElement) {
+        if (field.focusIntent && plateElement) {
           if (plateElement)
             plateElement.focus();
         }
       }, 100);
     }
-  }, [field.experimental_focusIntent, ref]);
+  }, [field.focusIntent, ref]);
   return /* @__PURE__ */ React__default.createElement("div", { ref }, /* @__PURE__ */ React__default.createElement(
     Plate,
     {
@@ -119080,7 +119064,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-blue-500 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-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"
         },
         props.rawMode ? props.rawEditor : /* @__PURE__ */ React__default.createElement(RichEditor, { ...props })
       )