tinacms 2.0.0 → 2.1.1

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/plate-headless"), require("@monaco-editor/react"), require("slate-react"), require("@headlessui/react"), require("slate"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("@radix-ui/react-popover"), require("react-color"), require("color-string"), require("react-dropzone"), require("lodash.get"), require("moment"), require("date-fns"), require("is-hotkey"), require("@floating-ui/dom"), require("@react-hook/window-size"), require("graphql"), require("graphql-tag"), require("@tinacms/schema-tools"), require("yup"), require("@graphql-inspector/core"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/plate-headless", "@monaco-editor/react", "slate-react", "@headlessui/react", "slate", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "@radix-ui/react-popover", "react-color", "color-string", "react-dropzone", "lodash.get", "moment", "date-fns", "is-hotkey", "@floating-ui/dom", "@react-hook/window-size", "graphql", "graphql-tag", "@tinacms/schema-tools", "yup", "@graphql-inspector/core", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, zod, React, reactDom, plateHeadless, MonacoEditor, slateReact, react, slate, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, Popover$1, pkg$1, pkg, dropzone, get, moment, dateFns, isHotkey, dom, windowSize, graphql, gql, schemaTools, yup, core, reactRouterDom, mdx) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/plate-headless"), require("@monaco-editor/react"), require("slate-react"), require("@headlessui/react"), require("slate"), require("final-form-arrays"), require("final-form-set-field-data"), require("final-form"), require("react-final-form"), require("prop-types"), require("react-beautiful-dnd"), require("@radix-ui/react-popover"), require("react-color"), require("color-string"), require("react-dropzone"), require("@radix-ui/react-slot"), require("class-variance-authority"), require("clsx"), require("tailwind-merge"), require("cmdk"), require("lucide-react"), require("lodash.get"), require("moment"), require("date-fns"), require("is-hotkey"), require("@floating-ui/dom"), require("@react-hook/window-size"), require("graphql"), require("graphql-tag"), require("@tinacms/schema-tools"), require("yup"), require("@graphql-inspector/core"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/plate-headless", "@monaco-editor/react", "slate-react", "@headlessui/react", "slate", "final-form-arrays", "final-form-set-field-data", "final-form", "react-final-form", "prop-types", "react-beautiful-dnd", "@radix-ui/react-popover", "react-color", "color-string", "react-dropzone", "@radix-ui/react-slot", "class-variance-authority", "clsx", "tailwind-merge", "cmdk", "lucide-react", "lodash.get", "moment", "date-fns", "is-hotkey", "@floating-ui/dom", "@react-hook/window-size", "graphql", "graphql-tag", "@tinacms/schema-tools", "yup", "@graphql-inspector/core", "react-router-dom", "@tinacms/mdx"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, zod, React, reactDom, plateHeadless, MonacoEditor, slateReact, react, slate, arrayMutators, setFieldData, finalForm, reactFinalForm, PropTypes, reactBeautifulDnd, PopoverPrimitive, pkg$1, pkg, dropzone, reactSlot, classVarianceAuthority, clsx, tailwindMerge, cmdk, lucideReact, get, moment, dateFns, isHotkey, dom, windowSize, graphql, gql, schemaTools, yup, core, reactRouterDom, mdx) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -25,7 +25,7 @@ var __publicField = (obj, key, value) => {
     return Object.freeze(n);
   }
   const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-  const Popover__namespace = /* @__PURE__ */ _interopNamespaceDefault(Popover$1);
+  const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
   const pkg__namespace$1 = /* @__PURE__ */ _interopNamespaceDefault(pkg$1);
   const pkg__namespace = /* @__PURE__ */ _interopNamespaceDefault(pkg);
   const dropzone__namespace = /* @__PURE__ */ _interopNamespaceDefault(dropzone);
@@ -2428,7 +2428,7 @@ var __publicField = (obj, key, value) => {
     Component: PropTypes.any.isRequired,
     children: PropTypes.any
   };
-  const Button = ({
+  const Button$1 = ({
     variant = "secondary",
     as: Tag2 = "button",
     size = "medium",
@@ -2532,8 +2532,8 @@ var __publicField = (obj, key, value) => {
     return classes.filter(Boolean).join(" ");
   }
   const OverflowMenu$1 = ({ toolbarItems, className = "w-full" }) => {
-    return /* @__PURE__ */ React.createElement(Popover__namespace.Root, null, /* @__PURE__ */ React.createElement(
-      Popover__namespace.Trigger,
+    return /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Root, null, /* @__PURE__ */ React.createElement(
+      PopoverPrimitive__namespace.Trigger,
       {
         className: `cursor-pointer relative justify-center inline-flex items-center p-3 text-sm font-medium focus:outline-1 focus:outline-blue-200 pointer-events-auto ${open ? `text-blue-400` : `text-gray-300 hover:text-blue-500`} ${className}}`
       },
@@ -2556,7 +2556,7 @@ var __publicField = (obj, key, value) => {
           }
         )
       )
-    ), /* @__PURE__ */ React.createElement(Popover__namespace.Portal, null, /* @__PURE__ */ React.createElement(Popover__namespace.Content, { style: { zIndex: 2e4 }, align: "end" }, /* @__PURE__ */ React.createElement("div", { className: "mt-0 -mr-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1" }, toolbarItems.map((toolbarItem) => {
+    ), /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Content, { style: { zIndex: 2e4 }, align: "end" }, /* @__PURE__ */ React.createElement("div", { className: "mt-0 -mr-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1" }, toolbarItems.map((toolbarItem) => {
       return /* @__PURE__ */ React.createElement(
         "span",
         {
@@ -2967,7 +2967,7 @@ var __publicField = (obj, key, value) => {
   }) => {
     const [open2, setOpen] = React__namespace.useState(false);
     return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
-      Button,
+      Button$1,
       {
         onClick: () => {
           setOpen((p) => !p);
@@ -2979,8 +2979,8 @@ var __publicField = (obj, key, value) => {
     ), open2 && /* @__PURE__ */ React__namespace.createElement(ResetModal, { reset, close: () => setOpen(false) }));
   };
   const ResetModal = ({ close: close2, reset }) => {
-    return /* @__PURE__ */ React__namespace.createElement(Modal, null, /* @__PURE__ */ React__namespace.createElement(ModalPopup, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: close2 }, "Reset"), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__namespace.createElement("p", null, "Are you sure you want to reset all changes?")), /* @__PURE__ */ React__namespace.createElement(ModalActions, null, /* @__PURE__ */ React__namespace.createElement(Button, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
-      Button,
+    return /* @__PURE__ */ React__namespace.createElement(Modal, null, /* @__PURE__ */ React__namespace.createElement(ModalPopup, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: close2 }, "Reset"), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__namespace.createElement("p", null, "Are you sure you want to reset all changes?")), /* @__PURE__ */ React__namespace.createElement(ModalActions, null, /* @__PURE__ */ React__namespace.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
+      Button$1,
       {
         style: { flexGrow: 3 },
         variant: "primary",
@@ -3111,6 +3111,12 @@ var __publicField = (obj, key, value) => {
       ...props
     }
   );
+  function IoMdArrowDropdown(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M128 192l128 128 128-128z" }, "child": [] }] })(props);
+  }
+  function IoMdArrowDropup(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M128 320l128-128 128 128z" }, "child": [] }] })(props);
+  }
   function IoMdClose(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z" }, "child": [] }] })(props);
   }
@@ -3282,7 +3288,7 @@ var __publicField = (obj, key, value) => {
       !colorRGBA ? "Click to add color" : ColorFormatter[colorFormat].getLabel(colorRGBA)
     )
   );
-  const Popover = ({
+  const Popover$1 = ({
     triggerBoundingBox,
     openTop,
     className = "",
@@ -3410,7 +3416,7 @@ var __publicField = (obj, key, value) => {
         colorFormat: getColorFormat
       }
     ), displayColorPicker && /* @__PURE__ */ React__namespace.createElement(FormPortal, null, ({ zIndexShift }) => /* @__PURE__ */ React__namespace.createElement(
-      Popover,
+      Popover$1,
       {
         openTop,
         triggerBoundingBox,
@@ -3699,7 +3705,18 @@ var __publicField = (obj, key, value) => {
     "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
     "application/msword",
     "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    "image/*"
+    "application/postscript",
+    "model/fbx",
+    "model/gltf+json",
+    "model/ply",
+    "model/u3d+mesh",
+    "model/vnd.usdz+zip",
+    "application/x-indesign",
+    "application/vnd.apple.mpegurl",
+    "application/dash+xml",
+    "application/mxf",
+    "image/*",
+    "video/*"
   ];
   const DEFAULT_MEDIA_UPLOAD_TYPES = supportedFileTypes.join(",");
   const dropzoneAcceptFromString = (str) => {
@@ -3780,6 +3797,128 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ React__namespace.createElement(IconButton, { variant: "white", className: "flex-none", onClick }, /* @__PURE__ */ React__namespace.createElement(TrashIcon, { className: "w-7 h-auto" }));
   };
   const ImageLoadingIndicator = () => /* @__PURE__ */ React__namespace.createElement("div", { className: "p-4 w-full min-h-[96px] flex flex-col justify-center items-center" }, /* @__PURE__ */ React__namespace.createElement(LoadingDots, null));
+  function cn(...inputs) {
+    return tailwindMerge.twMerge(clsx.clsx(inputs));
+  }
+  const buttonVariants = classVarianceAuthority.cva(
+    "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    {
+      variants: {
+        variant: {
+          outline: "border border-gray-200 bg-white hover:bg-white hover:text-accent-foreground"
+        },
+        size: {
+          default: "h-10 px-4 py-2",
+          sm: "h-9 rounded-md px-3",
+          lg: "h-11 rounded-md px-8",
+          icon: "h-10 w-10"
+        }
+      },
+      defaultVariants: {
+        variant: "outline",
+        size: "default"
+      }
+    }
+  );
+  const Button = React__namespace.forwardRef(
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+      const Comp = asChild ? reactSlot.Slot : "button";
+      return /* @__PURE__ */ React__namespace.createElement(
+        Comp,
+        {
+          className: cn(buttonVariants({ variant, size, className })),
+          ref,
+          ...props
+        }
+      );
+    }
+  );
+  Button.displayName = "Button";
+  const Command = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement(
+    cmdk.Command,
+    {
+      ref,
+      className: cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-popover-foreground",
+        className
+      ),
+      ...props
+    }
+  ));
+  Command.displayName = cmdk.Command.displayName;
+  const CommandInput = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "" }, /* @__PURE__ */ React__namespace.createElement(lucideReact.Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ React__namespace.createElement(
+    cmdk.Command.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )));
+  CommandInput.displayName = cmdk.Command.Input.displayName;
+  const CommandList = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement(
+    cmdk.Command.List,
+    {
+      ref,
+      className: cn("overflow-x-hidden", className),
+      ...props
+    }
+  ));
+  CommandList.displayName = cmdk.Command.List.displayName;
+  const CommandEmpty = React__namespace.forwardRef((props, ref) => /* @__PURE__ */ React__namespace.createElement(
+    cmdk.Command.Empty,
+    {
+      ref,
+      className: "py-6 text-center text-sm",
+      ...props
+    }
+  ));
+  CommandEmpty.displayName = cmdk.Command.Empty.displayName;
+  const CommandGroup = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement(
+    cmdk.Command.Group,
+    {
+      ref,
+      className: cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  ));
+  CommandGroup.displayName = cmdk.Command.Group.displayName;
+  const CommandItem = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement(
+    cmdk.Command.Item,
+    {
+      ref,
+      className: cn(
+        "hover:bg-slate-100	relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+        className
+      ),
+      ...props
+    }
+  ));
+  CommandItem.displayName = cmdk.Command.Item.displayName;
+  const Popover = PopoverPrimitive__namespace.Root;
+  const PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+  const PopoverContent = React__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React__namespace.createElement(
+    PopoverPrimitive__namespace.Content,
+    {
+      ref,
+      style: { zIndex: 9999 },
+      align,
+      sideOffset,
+      side: "bottom",
+      className: cn(
+        "rounded-md border bg-white p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "max-h-[30vh] overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  )));
+  PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
   const useGetOptionSets = (cms, collections) => {
     const [optionSets, setOptionSets] = React__namespace.useState([]);
     const [loading, setLoading] = React__namespace.useState(true);
@@ -3799,8 +3938,9 @@ var __publicField = (obj, key, value) => {
                         id,
                       }
                       ...on Document {
+                        _values
                         _internalSys: _sys {
-                          title
+                          filename
                         }
                       }
                     }
@@ -3834,41 +3974,78 @@ var __publicField = (obj, key, value) => {
     }, [cms, collections]);
     return { optionSets, loading };
   };
-  const ReferenceSelect = ({
+  const getFilename = (optionSets, value) => {
+    const nodes = optionSets.flatMap(
+      (optionSet) => optionSet.edges.map((edge) => edge.node)
+    );
+    const node = nodes.find((node2) => node2.id === value);
+    return node ? node._internalSys.filename : null;
+  };
+  const ComboboxDemo = ({
     cms,
     input,
     field
   }) => {
+    const [open2, setOpen] = React__namespace.useState(false);
+    const [value, setValue] = React__namespace.useState(input.value);
+    const [displayText, setDisplayText] = React__namespace.useState(null);
     const { optionSets, loading } = useGetOptionSets(cms, field.collections);
-    const ref = React__namespace.useRef(null);
     React__namespace.useEffect(() => {
-      if (ref.current && field.experimental_focusIntent) {
-        ref.current.focus();
-      }
-    }, [field.experimental_focusIntent, ref]);
+      setDisplayText(getFilename(optionSets, value));
+      input.onChange(value);
+    }, [value, input, optionSets]);
     if (loading === true) {
       return /* @__PURE__ */ React__namespace.createElement(LoadingDots, { color: "var(--tina-color-primary)" });
     }
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
-      "select",
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(Popover, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React__namespace.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
+      Button,
       {
-        ref,
-        id: input.name,
-        value: input.value,
-        onChange: input.onChange,
-        className: selectFieldClasses,
-        ...input
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open2,
+        className: "w-52 justify-between"
       },
-      /* @__PURE__ */ React__namespace.createElement("option", { value: "" }, "Choose an option"),
-      optionSets.length > 0 && optionSets.map(({ collection, edges }) => /* @__PURE__ */ React__namespace.createElement("optgroup", { key: `${collection}-group`, label: collection }, edges.map(
-        ({
-          node: {
-            id,
-            _internalSys: { title }
-          }
-        }) => /* @__PURE__ */ React__namespace.createElement("option", { key: `${id}-option`, value: id }, title || id)
+      /* @__PURE__ */ React__namespace.createElement("p", { className: "truncate" }, displayText ?? "Choose an option..."),
+      open2 ? /* @__PURE__ */ React__namespace.createElement(IoMdArrowDropup, { size: 20 }) : /* @__PURE__ */ React__namespace.createElement(IoMdArrowDropdown, { size: 20 })
+    )), /* @__PURE__ */ React__namespace.createElement(PopoverContent, { className: "p-0 relative" }, /* @__PURE__ */ React__namespace.createElement(
+      Command,
+      {
+        filter: (value2, search) => {
+          if (value2.includes(search))
+            return 1;
+          return 0;
+        }
+      },
+      /* @__PURE__ */ React__namespace.createElement(CommandInput, { placeholder: "Search reference..." }),
+      /* @__PURE__ */ React__namespace.createElement(CommandEmpty, null, "No reference found"),
+      /* @__PURE__ */ React__namespace.createElement(CommandList, null, optionSets.length > 0 && optionSets.map(({ collection, edges }) => /* @__PURE__ */ React__namespace.createElement(
+        CommandGroup,
+        {
+          key: `${collection}-group`,
+          heading: collection
+        },
+        /* @__PURE__ */ React__namespace.createElement(CommandList, null, edges.map(
+          ({
+            node: {
+              id,
+              _internalSys: { filename },
+              _values: { title, name }
+            }
+          }) => /* @__PURE__ */ React__namespace.createElement(
+            CommandItem,
+            {
+              key: `${id}-option`,
+              value: id || title,
+              onSelect: () => {
+                setValue(id);
+                setOpen(false);
+              }
+            },
+            /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "font-semibold text-sm" }, title || name || id), (title || name) && /* @__PURE__ */ React__namespace.createElement("span", { className: "text-x" }, filename))
+          )
+        ))
       )))
-    ), /* @__PURE__ */ React__namespace.createElement(MdKeyboardArrowDown, { className: "absolute top-1/2 right-3 w-6 h-auto -translate-y-1/2 text-gray-300 group-hover:text-blue-500 transition duration-150 ease-out" }));
+    ))));
   };
   const useGetNode = (cms, id) => {
     const [document2, setDocument] = React__namespace.useState(
@@ -3933,7 +4110,7 @@ var __publicField = (obj, key, value) => {
       "a",
       {
         href: `${tinaPreview ? `/${tinaPreview}/index.html#` : "/admin#"}/collections/${document2._sys.collection.name}/${document2._sys.breadcrumbs.join("/")}`,
-        className: "text-gray-700 hover:text-blue-500 flex items-center uppercase text-sm mt-2 mb-2 leading-none"
+        className: "text-gray-700 hover:text-blue-500 inline-flex items-center uppercase text-sm mt-2 mb-2 leading-none"
       },
       /* @__PURE__ */ React__namespace.createElement(BiEdit, { className: "h-5 w-auto opacity-80 mr-2" }),
       "Edit in CMS"
@@ -3941,7 +4118,7 @@ var __publicField = (obj, key, value) => {
   };
   const Reference = ({ input, field }) => {
     const cms = useCMS();
-    return /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group" }, /* @__PURE__ */ React__namespace.createElement(ReferenceSelect, { cms, input, field })), /* @__PURE__ */ React__namespace.createElement(ReferenceLink, { cms, input }));
+    return /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group" }, /* @__PURE__ */ React__namespace.createElement(ComboboxDemo, { cms, input, field })), /* @__PURE__ */ React__namespace.createElement(ReferenceLink, { cms, input }));
   };
   const ButtonToggle = ({
     input,
@@ -6217,21 +6394,21 @@ var __publicField = (obj, key, value) => {
       return parsedDate;
     }
     getClassName() {
-      let cn = "rdt";
+      let cn2 = "rdt";
       let props = this.props;
       let propCn = props.className;
       if (Array.isArray(propCn)) {
-        cn += " " + propCn.join(" ");
+        cn2 += " " + propCn.join(" ");
       } else if (propCn) {
-        cn += " " + propCn;
+        cn2 += " " + propCn;
       }
       if (!props.input) {
-        cn += " rdtStatic";
+        cn2 += " rdtStatic";
       }
       if (this.isOpen()) {
-        cn += " rdtOpen";
+        cn2 += " rdtOpen";
       }
-      return cn;
+      return cn2;
     }
     isOpen() {
       return !this.props.input || (this.props.open === void 0 ? this.state.open : this.props.open);
@@ -6705,7 +6882,7 @@ var __publicField = (obj, key, value) => {
         }
       }
     ), /* @__PURE__ */ React__namespace.createElement(
-      Button,
+      Button$1,
       {
         variant: "secondary",
         disabled: password === void 0 && confirmPassword === void 0,
@@ -6865,7 +7042,7 @@ var __publicField = (obj, key, value) => {
       },
       "Learn more about moving to production with Tina Cloud."
     )), /* @__PURE__ */ React__namespace.createElement("p", null, /* @__PURE__ */ React__namespace.createElement(
-      Button,
+      Button$1,
       {
         href: "https://tina.io/docs/tina-cloud/",
         target: "_blank",
@@ -6886,7 +7063,7 @@ var __publicField = (obj, key, value) => {
           chooseBranch(branchName);
         }
       }
-    ) : /* @__PURE__ */ React__namespace.createElement("div", { className: "px-6 py-8 w-full h-full flex flex-col items-center justify-center" }, /* @__PURE__ */ React__namespace.createElement("p", { className: "text-base mb-4 text-center" }, "An error occurred while retrieving the branch list."), /* @__PURE__ */ React__namespace.createElement(Button, { className: "mb-4", onClick: refreshBranchList }, "Try again ", /* @__PURE__ */ React__namespace.createElement(BiRefresh, { className: "w-6 h-full ml-1 opacity-70" }))))));
+    ) : /* @__PURE__ */ React__namespace.createElement("div", { className: "px-6 py-8 w-full h-full flex flex-col items-center justify-center" }, /* @__PURE__ */ React__namespace.createElement("p", { className: "text-base mb-4 text-center" }, "An error occurred while retrieving the branch list."), /* @__PURE__ */ React__namespace.createElement(Button$1, { className: "mb-4", onClick: refreshBranchList }, "Try again ", /* @__PURE__ */ React__namespace.createElement(BiRefresh, { className: "w-6 h-full ml-1 opacity-70" }))))));
   };
   const getFilteredBranchList$1 = (branchList, filter, currentBranchName) => {
     const filteredBranchList = branchList.filter(
@@ -6971,7 +7148,7 @@ var __publicField = (obj, key, value) => {
         onChange: (e) => setNewBranchName(e.target.value)
       }
     ), /* @__PURE__ */ React__namespace.createElement(
-      Button,
+      Button$1,
       {
         className: "flex-0 flex items-center gap-2 whitespace-nowrap",
         size: "medium",
@@ -7101,7 +7278,7 @@ var __publicField = (obj, key, value) => {
       },
       "Learn more about moving to production with Tina Cloud."
     )), /* @__PURE__ */ React__namespace.createElement("p", null, /* @__PURE__ */ React__namespace.createElement(
-      Button,
+      Button$1,
       {
         href: "https://tina.io/docs/tina-cloud/",
         target: "_blank",
@@ -7129,7 +7306,7 @@ var __publicField = (obj, key, value) => {
           chooseBranch(branchName);
         }
       }
-    ) : /* @__PURE__ */ React__namespace.createElement("div", { className: "px-6 py-8 w-full h-full flex flex-col items-center justify-center" }, /* @__PURE__ */ React__namespace.createElement("p", { className: "text-base mb-4 text-center" }, "An error occurred while retrieving the branch list."), /* @__PURE__ */ React__namespace.createElement(Button, { className: "mb-4", onClick: refreshBranchList }, "Try again ", /* @__PURE__ */ React__namespace.createElement(BiRefresh, { className: "w-6 h-full ml-1 opacity-70" }))))));
+    ) : /* @__PURE__ */ React__namespace.createElement("div", { className: "px-6 py-8 w-full h-full flex flex-col items-center justify-center" }, /* @__PURE__ */ React__namespace.createElement("p", { className: "text-base mb-4 text-center" }, "An error occurred while retrieving the branch list."), /* @__PURE__ */ React__namespace.createElement(Button$1, { className: "mb-4", onClick: refreshBranchList }, "Try again ", /* @__PURE__ */ React__namespace.createElement(BiRefresh, { className: "w-6 h-full ml-1 opacity-70" }))))));
   };
   const getFilteredBranchList = (branchList, search, currentBranchName, filter = "all") => {
     const filteredBranchList = branchList.filter(
@@ -7183,7 +7360,7 @@ var __publicField = (obj, key, value) => {
         onChange: (e) => setBranchName(e.target.value)
       }
     ))), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full flex justify-between gap-4 items-center" }, /* @__PURE__ */ React__namespace.createElement(
-      Button,
+      Button$1,
       {
         style: { flexGrow: 1 },
         onClick: () => {
@@ -7192,7 +7369,7 @@ var __publicField = (obj, key, value) => {
       },
       "Cancel"
     ), /* @__PURE__ */ React__namespace.createElement(
-      Button,
+      Button$1,
       {
         variant: "primary",
         type: "submit",
@@ -7293,7 +7470,7 @@ var __publicField = (obj, key, value) => {
           }
         ))),
         /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center" }, indexingStatus === "complete" && !isCurrentBranch && /* @__PURE__ */ React__namespace.createElement(
-          Button,
+          Button$1,
           {
             variant: "white",
             size: "custom",
@@ -8264,7 +8441,7 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ React__namespace.createElement(Emoji$1, { className: "pb-5" }, "🔎"),
     /* @__PURE__ */ React__namespace.createElement("p", { className: "block pb-5" }, "Looks like there's ", /* @__PURE__ */ React__namespace.createElement("br", null), "nothing to edit on ", /* @__PURE__ */ React__namespace.createElement("br", null), "this page."),
     /* @__PURE__ */ React__namespace.createElement("p", { className: "block" }, /* @__PURE__ */ React__namespace.createElement(
-      Button,
+      Button$1,
       {
         href: "https://tina.io/docs/tinacms-context/",
         target: "_blank",
@@ -8783,7 +8960,7 @@ var __publicField = (obj, key, value) => {
         /* @__PURE__ */ React__namespace.createElement("span", { className: "w-full block text-gray-300 text-xs mt-0.5" }, time)
       ));
     }).flat())), loading && /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm text-gray-400 text-center" }, "Loading..."), error && /* @__PURE__ */ React__namespace.createElement("div", null, "Error: ", error.message), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center flex-1" }, /* @__PURE__ */ React__namespace.createElement(
-      Button,
+      Button$1,
       {
         onClick: () => {
           setExistingEvents(events);
@@ -9333,7 +9510,7 @@ var __publicField = (obj, key, value) => {
             )
           },
           /* @__PURE__ */ React__namespace.createElement("div", { className: "absolute top-8 right-0 transform translate-x-full overflow-hidden" }, /* @__PURE__ */ React__namespace.createElement(
-            Button,
+            Button$1,
             {
               rounded: "right",
               variant: "secondary",
@@ -9407,7 +9584,7 @@ var __publicField = (obj, key, value) => {
     const branch = (_h = (_g = cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.branch;
     const previewUrl = typeof previewFunction === "function" ? (_i = previewFunction({ branch })) == null ? void 0 : _i.url : null;
     return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-grow-0 w-full overflow-visible z-20" }, isLocalMode && /* @__PURE__ */ React__namespace.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React__namespace.createElement(BillingWarning, null), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-4 -mb-14 w-full flex gap-3 items-center justify-between pointer-events-none" }, displayMenuButton && /* @__PURE__ */ React__namespace.createElement(
-      Button,
+      Button$1,
       {
         rounded: "right",
         variant: "white",
@@ -9433,7 +9610,7 @@ var __publicField = (obj, key, value) => {
         className: `flex items-center pointer-events-auto transition-opacity duration-150 ease-in-out -mr-px`
       },
       /* @__PURE__ */ React__namespace.createElement(
-        Button,
+        Button$1,
         {
           rounded: "left",
           variant: "white",
@@ -9443,7 +9620,7 @@ var __publicField = (obj, key, value) => {
         },
         /* @__PURE__ */ React__namespace.createElement(MdOutlineArrowBackIos, { className: "h-[18px] w-auto -mr-1 text-blue-500" })
       ),
-      /* @__PURE__ */ React__namespace.createElement(Button, { rounded: "custom", variant: "white", onClick: toggleFullscreen }, displayState === "fullscreen" ? (
+      /* @__PURE__ */ React__namespace.createElement(Button$1, { rounded: "custom", variant: "white", onClick: toggleFullscreen }, displayState === "fullscreen" ? (
         // BiCollapseAlt
         /* @__PURE__ */ React__namespace.createElement(
           "svg",
@@ -9512,7 +9689,7 @@ var __publicField = (obj, key, value) => {
   const EditButton = ({}) => {
     const { displayState, toggleSidebarOpen } = React__namespace.useContext(SidebarContext);
     return /* @__PURE__ */ React__namespace.createElement(
-      Button,
+      Button$1,
       {
         rounded: "right",
         variant: "primary",
@@ -9598,7 +9775,7 @@ var __publicField = (obj, key, value) => {
     hasPrev,
     variant = "white"
   }) {
-    return /* @__PURE__ */ React.createElement("div", { className: "w-full flex flex-shrink-0 justify-end gap-2 items-center" }, /* @__PURE__ */ React.createElement(Button, { variant, disabled: !hasPrev, onClick: navigatePrev }, /* @__PURE__ */ React.createElement(BiLeftArrowAlt, { className: "w-6 h-full mr-2 opacity-70" }), " Previous"), /* @__PURE__ */ React.createElement(Button, { variant, disabled: !hasNext, onClick: navigateNext }, "Next ", /* @__PURE__ */ React.createElement(BiRightArrowAlt, { className: "w-6 h-full ml-2 opacity-70" })));
+    return /* @__PURE__ */ React.createElement("div", { className: "w-full flex flex-shrink-0 justify-end gap-2 items-center" }, /* @__PURE__ */ React.createElement(Button$1, { variant, disabled: !hasPrev, onClick: navigatePrev }, /* @__PURE__ */ React.createElement(BiLeftArrowAlt, { className: "w-6 h-full mr-2 opacity-70" }), " Previous"), /* @__PURE__ */ React.createElement(Button$1, { variant, disabled: !hasNext, onClick: navigateNext }, "Next ", /* @__PURE__ */ React.createElement(BiRightArrowAlt, { className: "w-6 h-full ml-2 opacity-70" })));
   }
   function ListMediaItem({ item, onClick, active }) {
     let FileIcon = BiFile;
@@ -9733,8 +9910,8 @@ var __publicField = (obj, key, value) => {
     deleteFunc,
     filename
   }) => {
-    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Delete ", filename), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", null, "Are you sure you want to delete ", /* @__PURE__ */ React.createElement("strong", null, filename), "?")), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
-      Button,
+    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Delete ", filename), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", null, "Are you sure you want to delete ", /* @__PURE__ */ React.createElement("strong", null, filename), "?")), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
+      Button$1,
       {
         style: { flexGrow: 3 },
         variant: "danger",
@@ -9756,8 +9933,8 @@ var __publicField = (obj, key, value) => {
         required: true,
         onChange: (e) => setFolderName(e.target.value)
       }
-    )), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
-      Button,
+    )), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
+      Button$1,
       {
         disabled: !folderName,
         style: { flexGrow: 3 },
@@ -10065,7 +10242,7 @@ var __publicField = (obj, key, value) => {
         close: () => setNewFolderModalOpen(false)
       }
     ), /* @__PURE__ */ React.createElement(MediaPickerWrap, null, /* @__PURE__ */ React.createElement(SyncStatusContainer, null, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center bg-gray-50 border-b border-gray-150 gap-4 py-3 px-5 shadow-sm flex-shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 items-center gap-4" }, /* @__PURE__ */ React.createElement(ViewModeToggle, { viewMode, setViewMode }), /* @__PURE__ */ React.createElement(Breadcrumb$1, { directory, setDirectory })), cms.media.store.isStatic ? null : /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-4" }, /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         busy: false,
         variant: "white",
@@ -10075,7 +10252,7 @@ var __publicField = (obj, key, value) => {
       "Refresh",
       /* @__PURE__ */ React.createElement(IoMdRefresh, { className: "w-6 h-full ml-2 opacity-70 text-blue-500" })
     ), /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         busy: false,
         variant: "white",
@@ -10167,7 +10344,7 @@ var __publicField = (obj, key, value) => {
           alt: activeItem.filename
         }
       )) : /* @__PURE__ */ React.createElement("span", { className: "p-3 border border-gray-100 rounded-md overflow-hidden bg-gray-50 shadow" }, /* @__PURE__ */ React.createElement(BiFile, { className: "w-14 h-auto fill-gray-300" })), /* @__PURE__ */ React.createElement("div", { className: "grow h-full w-full shrink flex flex-col gap-3 items-start justify-start" }, /* @__PURE__ */ React.createElement(CopyField, { value: absoluteImgURL(activeItem.src), label: "URL" })), /* @__PURE__ */ React.createElement("div", { className: "shrink-0 w-full flex flex-col justify-end items-start" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full gap-3" }, selectMediaItem && /* @__PURE__ */ React.createElement(
-        Button,
+        Button$1,
         {
           size: "medium",
           variant: "primary",
@@ -10177,7 +10354,7 @@ var __publicField = (obj, key, value) => {
         "Insert",
         /* @__PURE__ */ React.createElement(BiArrowToBottom, { className: "ml-1 -mr-0.5 w-6 h-auto text-white opacity-70" })
       ), allowDelete && /* @__PURE__ */ React.createElement(
-        Button,
+        Button$1,
         {
           variant: "white",
           size: "medium",
@@ -10191,7 +10368,7 @@ var __publicField = (obj, key, value) => {
   };
   const UploadButton = ({ onClick, uploading }) => {
     return /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         variant: "primary",
         size: "custom",
@@ -10413,7 +10590,7 @@ var __publicField = (obj, key, value) => {
         required: true
       }
     )), result && /* @__PURE__ */ React.createElement("div", { className: "text-center text-sm text-gray-500" }, result), err && /* @__PURE__ */ React.createElement("div", { className: "text-center text-sm text-red-500" }, err), /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         onClick: updatePassword,
         disabled: err,
@@ -10765,7 +10942,7 @@ var __publicField = (obj, key, value) => {
         " ",
         "Error"
       ), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("div", { className: "tina-prose" }, /* @__PURE__ */ React.createElement(AlertMessage, null))), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }), /* @__PURE__ */ React.createElement(
-        Button,
+        Button$1,
         {
           style: { flexGrow: 1 },
           onClick: () => {
@@ -11064,7 +11241,7 @@ var __publicField = (obj, key, value) => {
         className: `w-full bg-white flex items-center gap-2 -mb-px border-b border-gray-100 py-3 pr-4 pl-20 xl:pl-4`
       },
       /* @__PURE__ */ React__namespace.createElement(
-        Button,
+        Button$1,
         {
           variant: isProtected ? "primary" : "white",
           size: "small",
@@ -11086,7 +11263,7 @@ var __publicField = (obj, key, value) => {
         )
       ),
       previewUrl && /* @__PURE__ */ React__namespace.createElement(
-        Button,
+        Button$1,
         {
           variant: "white",
           size: "small",
@@ -11302,7 +11479,7 @@ var __publicField = (obj, key, value) => {
           },
           tinaForm.buttons.reset
         ), /* @__PURE__ */ React__namespace.createElement(
-          Button,
+          Button$1,
           {
             onClick: safeHandleSubmit,
             disabled: !canSubmit,
@@ -11429,8 +11606,8 @@ var __publicField = (obj, key, value) => {
           setNewBranchName(formatBranchName(e.target.value));
         }
       }
-    ), error && /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-2 text-sm text-red-700" }, error)), /* @__PURE__ */ React__namespace.createElement(ModalActions, null, /* @__PURE__ */ React__namespace.createElement(Button, { style: { flexGrow: 1 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
-      Button,
+    ), error && /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-2 text-sm text-red-700" }, error)), /* @__PURE__ */ React__namespace.createElement(ModalActions, null, /* @__PURE__ */ React__namespace.createElement(Button$1, { style: { flexGrow: 1 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
+      Button$1,
       {
         variant: "primary",
         style: { flexGrow: 2 },
@@ -12406,7 +12583,7 @@ var __publicField = (obj, key, value) => {
       props.onClose();
     }, [editor, formValues]);
     const UpdateLink = React.useCallback(
-      () => /* @__PURE__ */ React.createElement(Button, { variant: "primary", onClick: handleUpdate }, "Update Link"),
+      () => /* @__PURE__ */ React.createElement(Button$1, { variant: "primary", onClick: handleUpdate }, "Update Link"),
       [handleUpdate]
     );
     return /* @__PURE__ */ React.createElement(
@@ -12770,6 +12947,7 @@ var __publicField = (obj, key, value) => {
   const EMBED_ICON_WIDTH = 85;
   function Toolbar({
     templates,
+    toolbarOverride,
     tinaForm
   }) {
     const { setRawMode } = useEditorContext();
@@ -12785,8 +12963,8 @@ var __publicField = (obj, key, value) => {
     const codeBlockActive = helpers.isNodeActive(editor, plateHeadless.ELEMENT_CODE_BLOCK);
     const blockQuoteActive = helpers.isNodeActive(editor, plateHeadless.ELEMENT_BLOCKQUOTE);
     const isImgActive = helpers.isNodeActive(editor, ELEMENT_IMG);
-    const toolbarItems = [
-      {
+    const toolbarItemLookup = {
+      heading: {
         tinaForm,
         name: "heading",
         label: "Heading",
@@ -12807,19 +12985,19 @@ var __publicField = (obj, key, value) => {
           item.render
         ))
       },
-      {
+      link: {
         tinaForm,
         name: "link",
         label: "Link",
         active: isLinkActive2
       },
-      {
+      image: {
         tinaForm,
         name: "image",
         label: "Image",
         active: isImgActive
       },
-      {
+      quote: {
         tinaForm,
         name: "quote",
         label: "Quote",
@@ -12830,7 +13008,7 @@ var __publicField = (obj, key, value) => {
           plateHeadless.toggleNodeType(editor, { activeType: plateHeadless.ELEMENT_BLOCKQUOTE });
         }
       },
-      {
+      ul: {
         tinaForm,
         name: "ul",
         label: "Bullet List",
@@ -12841,7 +13019,7 @@ var __publicField = (obj, key, value) => {
           plateHeadless.toggleList(editor, { type: plateHeadless.ELEMENT_UL });
         }
       },
-      {
+      ol: {
         tinaForm,
         name: "ol",
         label: "List",
@@ -12852,7 +13030,7 @@ var __publicField = (obj, key, value) => {
           plateHeadless.toggleList(editor, { type: plateHeadless.ELEMENT_OL });
         }
       },
-      {
+      code: {
         tinaForm,
         name: "code",
         label: "Code",
@@ -12863,7 +13041,7 @@ var __publicField = (obj, key, value) => {
           plateHeadless.toggleMark(editor, { key: plateHeadless.MARK_CODE });
         }
       },
-      {
+      codeBlock: {
         tinaForm,
         name: "codeBlock",
         label: "Code Block",
@@ -12874,7 +13052,7 @@ var __publicField = (obj, key, value) => {
           insertEmptyCodeBlock(editor);
         }
       },
-      {
+      bold: {
         tinaForm,
         name: "bold",
         label: "Bold",
@@ -12885,7 +13063,7 @@ var __publicField = (obj, key, value) => {
           plateHeadless.toggleMark(editor, { key: plateHeadless.MARK_BOLD });
         }
       },
-      {
+      italic: {
         tinaForm,
         name: "italic",
         label: "Italic",
@@ -12896,14 +13074,15 @@ var __publicField = (obj, key, value) => {
           plateHeadless.toggleMark(editor, { key: plateHeadless.MARK_ITALIC });
         }
       },
-      {
+      raw: {
         tinaForm,
         name: "raw",
         label: "Raw",
         active: false,
         onMouseDown: () => setRawMode(true)
       }
-    ];
+    };
+    const toolbarItems = toolbarOverride === void 0 ? Object.values(toolbarItemLookup) : toolbarOverride.map((item) => toolbarItemLookup[item]).filter((item) => item !== void 0);
     const [itemsShown, setItemsShown] = React__namespace.useState(toolbarItems.length);
     useResize(toolbarRef, (entry) => {
       const width = entry.target.getBoundingClientRect().width;
@@ -13048,10 +13227,11 @@ var __publicField = (obj, key, value) => {
     ))));
   }
   const RichEditor = (props) => {
+    var _a;
     const initialValue = React.useMemo(
       () => {
-        var _a, _b;
-        return ((_b = (_a = props.input.value) == null ? void 0 : _a.children) == null ? void 0 : _b.length) ? props.input.value.children.map(helpers.normalize) : [{ type: "p", children: [{ type: "text", text: "" }] }];
+        var _a2, _b;
+        return ((_b = (_a2 = props.input.value) == null ? void 0 : _a2.children) == null ? void 0 : _b.length) ? props.input.value.children.map(helpers.normalize) : [{ type: "p", children: [{ type: "text", text: "" }] }];
       },
       []
     );
@@ -13079,8 +13259,8 @@ var __publicField = (obj, key, value) => {
     React.useEffect(() => {
       if (ref.current) {
         setTimeout(() => {
-          var _a;
-          const plateElement = (_a = ref.current) == null ? void 0 : _a.querySelector(
+          var _a2;
+          const plateElement = (_a2 = ref.current) == null ? void 0 : _a2.querySelector(
             '[role="textbox"]'
           );
           if (props.field.experimental_focusIntent && plateElement) {
@@ -13106,6 +13286,7 @@ var __publicField = (obj, key, value) => {
           Toolbar,
           {
             tinaForm: props.tinaForm,
+            toolbarOverride: (_a = props.field) == null ? void 0 : _a.toolbarOverride,
             templates: props.field.templates,
             inlineOnly: false
           }
@@ -13115,38 +13296,36 @@ var __publicField = (obj, key, value) => {
   };
   const MdxFieldPlugin = {
     name: "rich-text",
-    Component: wrapFieldsWithMeta(
-      (props) => {
-        const [rawMode, setRawMode] = React.useState(false);
-        const [key, setKey] = React.useState(0);
-        React.useMemo(() => {
-          const { reset } = props.form;
-          props.form.reset = (initialValues) => {
-            setKey((key2) => key2 + 1);
-            return reset(initialValues);
-          };
-        }, []);
-        return /* @__PURE__ */ React.createElement(
-          EditorContext.Provider,
+    Component: wrapFieldsWithMeta((props) => {
+      const [rawMode, setRawMode] = React.useState(false);
+      const [key, setKey] = React.useState(0);
+      React.useMemo(() => {
+        const { reset } = props.form;
+        props.form.reset = (initialValues) => {
+          setKey((key2) => key2 + 1);
+          return reset(initialValues);
+        };
+      }, []);
+      return /* @__PURE__ */ React.createElement(
+        EditorContext.Provider,
+        {
+          key,
+          value: {
+            fieldName: props.field.name,
+            templates: props.field.templates,
+            rawMode,
+            setRawMode
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
           {
-            key,
-            value: {
-              fieldName: props.field.name,
-              templates: props.field.templates,
-              rawMode,
-              setRawMode
-            }
+            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-md px-3 py-2"
           },
-          /* @__PURE__ */ React.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-md px-3 py-2"
-            },
-            /* @__PURE__ */ React.createElement(RichEditor, { ...props })
-          )
-        );
-      }
-    )
+          /* @__PURE__ */ React.createElement(RichEditor, { ...props })
+        )
+      );
+    })
   };
   const MdxFieldPluginExtendible = {
     name: "rich-text",
@@ -13157,37 +13336,35 @@ var __publicField = (obj, key, value) => {
         return void 0;
       }
     },
-    Component: wrapFieldsWithMeta(
-      (props) => {
-        const [key, setKey] = React.useState(0);
-        React.useMemo(() => {
-          const { reset } = props.form;
-          props.form.reset = (initialValues) => {
-            setKey((key2) => key2 + 1);
-            return reset(initialValues);
-          };
-        }, []);
-        return /* @__PURE__ */ React.createElement(
-          EditorContext.Provider,
+    Component: wrapFieldsWithMeta((props) => {
+      const [key, setKey] = React.useState(0);
+      React.useMemo(() => {
+        const { reset } = props.form;
+        props.form.reset = (initialValues) => {
+          setKey((key2) => key2 + 1);
+          return reset(initialValues);
+        };
+      }, []);
+      return /* @__PURE__ */ React.createElement(
+        EditorContext.Provider,
+        {
+          key,
+          value: {
+            fieldName: props.field.name,
+            templates: props.field.templates,
+            rawMode: props.rawMode,
+            setRawMode: props.setRawMode
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          "div",
           {
-            key,
-            value: {
-              fieldName: props.field.name,
-              templates: props.field.templates,
-              rawMode: props.rawMode,
-              setRawMode: props.setRawMode
-            }
+            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-md px-3 py-2"
           },
-          /* @__PURE__ */ React.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-md px-3 py-2"
-            },
-            props.rawMode ? props.rawEditor : /* @__PURE__ */ React.createElement(RichEditor, { ...props })
-          )
-        );
-      }
-    )
+          props.rawMode ? props.rawEditor : /* @__PURE__ */ React.createElement(RichEditor, { ...props })
+        )
+      );
+    })
   };
   class FormMetaPlugin {
     constructor(options) {
@@ -27506,7 +27683,7 @@ mutation addPendingDocumentMutation(
       }
     }, [action, setSubmitting, mounted]);
     return /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         "data-test": name.replace(/\s/g, "-").toLowerCase(),
         variant: primary ? "primary" : "secondary",
@@ -28880,7 +29057,7 @@ This will work when developing locally but NOT when deployed to production.
           )
         },
         /* @__PURE__ */ React.createElement("div", { className: "absolute top-8 right-0 transform translate-x-full overflow-hidden" }, /* @__PURE__ */ React.createElement(
-          Button,
+          Button$1,
           {
             rounded: "right",
             variant: "secondary",
@@ -28914,7 +29091,7 @@ This will work when developing locally but NOT when deployed to production.
         }
       )
     )), !renderDesktopNav && /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         rounded: "right",
         variant: "secondary",
@@ -29111,7 +29288,7 @@ This will work when developing locally but NOT when deployed to production.
     title = "Error",
     errorMessage = "It looks like something went wrong."
   }) => {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-gray-100" }, /* @__PURE__ */ React.createElement("div", { className: "text-red-500 text-4xl mb-6 flex items-center" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-12 h-auto fill-current text-red-400 opacity-70 mr-1" }), " ", title), /* @__PURE__ */ React.createElement("p", { className: "text-gray-700 text-xl mb-8" }, errorMessage), /* @__PURE__ */ React.createElement(Button, { variant: "danger", onClick: () => window.location.reload() }, /* @__PURE__ */ React.createElement(BiSync, { className: "w-7 h-auto fill-current opacity-70 mr-1" }), " Reload"));
+    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-gray-100" }, /* @__PURE__ */ React.createElement("div", { className: "text-red-500 text-4xl mb-6 flex items-center" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-12 h-auto fill-current text-red-400 opacity-70 mr-1" }), " ", title), /* @__PURE__ */ React.createElement("p", { className: "text-gray-700 text-xl mb-8" }, errorMessage), /* @__PURE__ */ React.createElement(Button$1, { variant: "danger", onClick: () => window.location.reload() }, /* @__PURE__ */ React.createElement(BiSync, { className: "w-7 h-auto fill-current opacity-70 mr-1" }), " Reload"));
   };
   const useGetCollection = (cms, collectionName, includeDocuments = true, folder, after = "", sortKey, filterArgs) => {
     const api = new TinaAdminApi(cms);
@@ -29976,7 +30153,7 @@ This will work when developing locally but NOT when deployed to production.
         }
       }
     )), /* @__PURE__ */ React.createElement("div", { className: "flex w-full md:w-auto gap-3" }, /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         onClick: () => {
           setSearch(searchInput);
@@ -29988,7 +30165,7 @@ This will work when developing locally but NOT when deployed to production.
       "Search ",
       /* @__PURE__ */ React.createElement(BiSearch, { className: "w-5 h-full ml-1.5 opacity-70" })
     ), search && searchLoaded && /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         onClick: () => {
           setSearch("");
@@ -30058,8 +30235,8 @@ This will work when developing locally but NOT when deployed to production.
     return /* @__PURE__ */ React.createElement("div", { className: "text-center px-5 py-3 flex flex-col items-center justify-center shadow border border-gray-100 bg-gray-50 border-b border-gray-200 w-full max-w-full rounded-lg" }, /* @__PURE__ */ React.createElement("p", { className: "text-base italic font-medium text-gray-300" }, "No documents found."));
   };
   const DeleteModal = ({ close: close2, deleteFunc, filename }) => {
-    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Delete ", filename), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", null, `Are you sure you want to delete ${filename}?`)), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
-      Button,
+    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Delete ", filename), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", null, `Are you sure you want to delete ${filename}?`)), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
+      Button$1,
       {
         style: { flexGrow: 3 },
         variant: "danger",
@@ -30084,8 +30261,8 @@ This will work when developing locally but NOT when deployed to production.
         value: folderName,
         onChange: (event) => setFolderName(event.target.value)
       }
-    ))), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
-      Button,
+    ))), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
+      Button$1,
       {
         style: { flexGrow: 3 },
         variant: "primary",
@@ -30111,8 +30288,8 @@ This will work when developing locally but NOT when deployed to production.
         value: newRelativePath,
         onChange: (event) => setNewRelativePath(event.target.value)
       }
-    ))), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
-      Button,
+    ))), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
+      Button$1,
       {
         style: { flexGrow: 3 },
         variant: "primary",
@@ -30910,7 +31087,7 @@ This will work when developing locally but NOT when deployed to production.
       }
     }, [cms, JSON.stringify(schemaJson || {}), url]);
     return /* @__PURE__ */ React.createElement(React.Fragment, null, schemaMissingError ? /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, null, "Branch Not Found"), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("div", { className: "tina-prose" }, "The current branch (", /* @__PURE__ */ React.createElement("span", { className: "font-bold" }, currentBranch), ") has either been merged or deleted.")), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement("div", { className: "flex-1" }), /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         style: { flexGrow: 1 },
         className: "w-full",
@@ -31221,7 +31398,7 @@ This will work when developing locally but NOT when deployed to production.
   exports2.BranchDataProvider = BranchDataProvider;
   exports2.BranchSwitcher = BranchSwitcher;
   exports2.BranchSwitcherPlugin = BranchSwitcherPlugin;
-  exports2.Button = Button;
+  exports2.Button = Button$1;
   exports2.ButtonToggle = ButtonToggle;
   exports2.ButtonToggleField = ButtonToggleField;
   exports2.ButtonToggleFieldPlugin = ButtonToggleFieldPlugin;