tinacms 2.1.0 → 2.1.1

package/dist/index.mjs

@@ -19,10 +19,16 @@ import { FORM_ERROR, createForm, getIn } from "final-form";
 import { Field, Form as Form$1 } from "react-final-form";
 import PropTypes from "prop-types";
 import { Droppable, Draggable, DragDropContext } from "react-beautiful-dnd";
-import * as Popover$1 from "@radix-ui/react-popover";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as pkg$1 from "react-color";
 import * as pkg from "color-string";
 import * as dropzone from "react-dropzone";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Command as Command$1 } from "cmdk";
+import { Search } from "lucide-react";
 import get from "lodash.get";
 import moment from "moment";
 import { formatDistanceToNow } from "date-fns";
@@ -2435,7 +2441,7 @@ TinaField.propTypes = {
   Component: PropTypes.any.isRequired,
   children: PropTypes.any
 };
-const Button = ({
+const Button$1 = ({
   variant = "secondary",
   as: Tag2 = "button",
   size = "medium",
@@ -2539,8 +2545,8 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 const OverflowMenu$1 = ({ toolbarItems, className = "w-full" }) => {
-  return /* @__PURE__ */ React__default.createElement(Popover$1.Root, null, /* @__PURE__ */ React__default.createElement(
-    Popover$1.Trigger,
+  return /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Root, null, /* @__PURE__ */ React__default.createElement(
+    PopoverPrimitive.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}}`
     },
@@ -2563,7 +2569,7 @@ const OverflowMenu$1 = ({ toolbarItems, className = "w-full" }) => {
         }
       )
     )
-  ), /* @__PURE__ */ React__default.createElement(Popover$1.Portal, null, /* @__PURE__ */ React__default.createElement(Popover$1.Content, { style: { zIndex: 2e4 }, align: "end" }, /* @__PURE__ */ React__default.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__default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Content, { style: { zIndex: 2e4 }, align: "end" }, /* @__PURE__ */ React__default.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__default.createElement(
       "span",
       {
@@ -2974,7 +2980,7 @@ const ResetForm = ({
 }) => {
   const [open2, setOpen] = React.useState(false);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       onClick: () => {
         setOpen((p) => !p);
@@ -2986,8 +2992,8 @@ const ResetForm = ({
   ), open2 && /* @__PURE__ */ React.createElement(ResetModal, { reset, close: () => setOpen(false) }));
 };
 const ResetModal = ({ close: close2, reset }) => {
-  return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Reset"), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", null, "Are you sure you want to reset all changes?")), /* @__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(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Reset"), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", null, "Are you sure you want to reset all changes?")), /* @__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",
@@ -3118,6 +3124,12 @@ const ActionButton = ({ className = "", ...props }) => /* @__PURE__ */ React.cre
     ...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);
 }
@@ -3289,7 +3301,7 @@ const Swatch = ({
     !colorRGBA ? "Click to add color" : ColorFormatter[colorFormat].getLabel(colorRGBA)
   )
 );
-const Popover = ({
+const Popover$1 = ({
   triggerBoundingBox,
   openTop,
   className = "",
@@ -3417,7 +3429,7 @@ const ColorPicker = ({
       colorFormat: getColorFormat
     }
   ), displayColorPicker && /* @__PURE__ */ React.createElement(FormPortal, null, ({ zIndexShift }) => /* @__PURE__ */ React.createElement(
-    Popover,
+    Popover$1,
     {
       openTop,
       triggerBoundingBox,
@@ -3798,6 +3810,128 @@ const DeleteImageButton = ({
   return /* @__PURE__ */ React.createElement(IconButton, { variant: "white", className: "flex-none", onClick }, /* @__PURE__ */ React.createElement(TrashIcon, { className: "w-7 h-auto" }));
 };
 const ImageLoadingIndicator = () => /* @__PURE__ */ React.createElement("div", { className: "p-4 w-full min-h-[96px] flex flex-col justify-center items-center" }, /* @__PURE__ */ React.createElement(LoadingDots, null));
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+const buttonVariants = 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.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ React.createElement(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = Command$1.displayName;
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "" }, /* @__PURE__ */ React.createElement(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ React.createElement(
+  Command$1.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 = Command$1.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  Command$1.List,
+  {
+    ref,
+    className: cn("overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = Command$1.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(
+  Command$1.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-sm",
+    ...props
+  }
+));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  Command$1.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 = Command$1.Group.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  Command$1.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 = Command$1.Item.displayName;
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
+  PopoverPrimitive.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.Content.displayName;
 const useGetOptionSets = (cms, collections) => {
   const [optionSets, setOptionSets] = React.useState([]);
   const [loading, setLoading] = React.useState(true);
@@ -3817,8 +3951,9 @@ const useGetOptionSets = (cms, collections) => {
                         id,
                       }
                       ...on Document {
+                        _values
                         _internalSys: _sys {
-                          title
+                          filename
                         }
                       }
                     }
@@ -3852,41 +3987,78 @@ const useGetOptionSets = (cms, collections) => {
   }, [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.useState(false);
+  const [value, setValue] = React.useState(input.value);
+  const [displayText, setDisplayText] = React.useState(null);
   const { optionSets, loading } = useGetOptionSets(cms, field.collections);
-  const ref = React.useRef(null);
   React.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.createElement(LoadingDots, { color: "var(--tina-color-primary)" });
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "select",
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Popover, { open: open2, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.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.createElement("option", { value: "" }, "Choose an option"),
-    optionSets.length > 0 && optionSets.map(({ collection, edges }) => /* @__PURE__ */ React.createElement("optgroup", { key: `${collection}-group`, label: collection }, edges.map(
-      ({
-        node: {
-          id,
-          _internalSys: { title }
-        }
-      }) => /* @__PURE__ */ React.createElement("option", { key: `${id}-option`, value: id }, title || id)
+    /* @__PURE__ */ React.createElement("p", { className: "truncate" }, displayText ?? "Choose an option..."),
+    open2 ? /* @__PURE__ */ React.createElement(IoMdArrowDropup, { size: 20 }) : /* @__PURE__ */ React.createElement(IoMdArrowDropdown, { size: 20 })
+  )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "p-0 relative" }, /* @__PURE__ */ React.createElement(
+    Command,
+    {
+      filter: (value2, search) => {
+        if (value2.includes(search))
+          return 1;
+        return 0;
+      }
+    },
+    /* @__PURE__ */ React.createElement(CommandInput, { placeholder: "Search reference..." }),
+    /* @__PURE__ */ React.createElement(CommandEmpty, null, "No reference found"),
+    /* @__PURE__ */ React.createElement(CommandList, null, optionSets.length > 0 && optionSets.map(({ collection, edges }) => /* @__PURE__ */ React.createElement(
+      CommandGroup,
+      {
+        key: `${collection}-group`,
+        heading: collection
+      },
+      /* @__PURE__ */ React.createElement(CommandList, null, edges.map(
+        ({
+          node: {
+            id,
+            _internalSys: { filename },
+            _values: { title, name }
+          }
+        }) => /* @__PURE__ */ React.createElement(
+          CommandItem,
+          {
+            key: `${id}-option`,
+            value: id || title,
+            onSelect: () => {
+              setValue(id);
+              setOpen(false);
+            }
+          },
+          /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("span", { className: "font-semibold text-sm" }, title || name || id), (title || name) && /* @__PURE__ */ React.createElement("span", { className: "text-x" }, filename))
+        )
+      ))
     )))
-  ), /* @__PURE__ */ React.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.useState(
@@ -3951,7 +4123,7 @@ const ReferenceLink = ({ cms, input }) => {
     "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.createElement(BiEdit, { className: "h-5 w-auto opacity-80 mr-2" }),
     "Edit in CMS"
@@ -3959,7 +4131,7 @@ const ReferenceLink = ({ cms, input }) => {
 };
 const Reference = ({ input, field }) => {
   const cms = useCMS();
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "relative group" }, /* @__PURE__ */ React.createElement(ReferenceSelect, { cms, input, field })), /* @__PURE__ */ React.createElement(ReferenceLink, { cms, input }));
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "relative group" }, /* @__PURE__ */ React.createElement(ComboboxDemo, { cms, input, field })), /* @__PURE__ */ React.createElement(ReferenceLink, { cms, input }));
 };
 const ButtonToggle = ({
   input,
@@ -6235,21 +6407,21 @@ class Datetime extends React__default.Component {
     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);
@@ -6723,7 +6895,7 @@ const PasswordFieldComponent = wrapFieldsWithMeta(({ field, form, meta, input, c
       }
     }
   ), /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       variant: "secondary",
       disabled: password === void 0 && confirmPassword === void 0,
@@ -6883,7 +7055,7 @@ const BranchSwitcherLegacy = ({
     },
     "Learn more about moving to production with Tina Cloud."
   )), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       href: "https://tina.io/docs/tina-cloud/",
       target: "_blank",
@@ -6904,7 +7076,7 @@ const BranchSwitcherLegacy = ({
         chooseBranch(branchName);
       }
     }
-  ) : /* @__PURE__ */ React.createElement("div", { className: "px-6 py-8 w-full h-full flex flex-col items-center justify-center" }, /* @__PURE__ */ React.createElement("p", { className: "text-base mb-4 text-center" }, "An error occurred while retrieving the branch list."), /* @__PURE__ */ React.createElement(Button, { className: "mb-4", onClick: refreshBranchList }, "Try again ", /* @__PURE__ */ React.createElement(BiRefresh, { className: "w-6 h-full ml-1 opacity-70" }))))));
+  ) : /* @__PURE__ */ React.createElement("div", { className: "px-6 py-8 w-full h-full flex flex-col items-center justify-center" }, /* @__PURE__ */ React.createElement("p", { className: "text-base mb-4 text-center" }, "An error occurred while retrieving the branch list."), /* @__PURE__ */ React.createElement(Button$1, { className: "mb-4", onClick: refreshBranchList }, "Try again ", /* @__PURE__ */ React.createElement(BiRefresh, { className: "w-6 h-full ml-1 opacity-70" }))))));
 };
 const getFilteredBranchList$1 = (branchList, filter, currentBranchName) => {
   const filteredBranchList = branchList.filter(
@@ -6989,7 +7161,7 @@ const CreateBranch = ({ currentBranch, newBranchName, onCreateBranch, setNewBran
       onChange: (e) => setNewBranchName(e.target.value)
     }
   ), /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       className: "flex-0 flex items-center gap-2 whitespace-nowrap",
       size: "medium",
@@ -7119,7 +7291,7 @@ const EditoralBranchSwitcher = ({
     },
     "Learn more about moving to production with Tina Cloud."
   )), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       href: "https://tina.io/docs/tina-cloud/",
       target: "_blank",
@@ -7147,7 +7319,7 @@ const EditoralBranchSwitcher = ({
         chooseBranch(branchName);
       }
     }
-  ) : /* @__PURE__ */ React.createElement("div", { className: "px-6 py-8 w-full h-full flex flex-col items-center justify-center" }, /* @__PURE__ */ React.createElement("p", { className: "text-base mb-4 text-center" }, "An error occurred while retrieving the branch list."), /* @__PURE__ */ React.createElement(Button, { className: "mb-4", onClick: refreshBranchList }, "Try again ", /* @__PURE__ */ React.createElement(BiRefresh, { className: "w-6 h-full ml-1 opacity-70" }))))));
+  ) : /* @__PURE__ */ React.createElement("div", { className: "px-6 py-8 w-full h-full flex flex-col items-center justify-center" }, /* @__PURE__ */ React.createElement("p", { className: "text-base mb-4 text-center" }, "An error occurred while retrieving the branch list."), /* @__PURE__ */ React.createElement(Button$1, { className: "mb-4", onClick: refreshBranchList }, "Try again ", /* @__PURE__ */ React.createElement(BiRefresh, { className: "w-6 h-full ml-1 opacity-70" }))))));
 };
 const getFilteredBranchList = (branchList, search, currentBranchName, filter = "all") => {
   const filteredBranchList = branchList.filter(
@@ -7201,7 +7373,7 @@ const BranchCreator = ({ setViewState, handleCreateBranch, currentBranch }) => {
       onChange: (e) => setBranchName(e.target.value)
     }
   ))), /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between gap-4 items-center" }, /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       style: { flexGrow: 1 },
       onClick: () => {
@@ -7210,7 +7382,7 @@ const BranchCreator = ({ setViewState, handleCreateBranch, currentBranch }) => {
     },
     "Cancel"
   ), /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       variant: "primary",
       type: "submit",
@@ -7311,7 +7483,7 @@ const BranchSelector = ({
         }
       ))),
       /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, indexingStatus === "complete" && !isCurrentBranch && /* @__PURE__ */ React.createElement(
-        Button,
+        Button$1,
         {
           variant: "white",
           size: "custom",
@@ -8282,7 +8454,7 @@ const NoFormsPlaceholder = () => /* @__PURE__ */ React.createElement(
   /* @__PURE__ */ React.createElement(Emoji$1, { className: "pb-5" }, "🔎"),
   /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, "Looks like there's ", /* @__PURE__ */ React.createElement("br", null), "nothing to edit on ", /* @__PURE__ */ React.createElement("br", null), "this page."),
   /* @__PURE__ */ React.createElement("p", { className: "block" }, /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       href: "https://tina.io/docs/tinacms-context/",
       target: "_blank",
@@ -8801,7 +8973,7 @@ const EventsList = ({ cms }) => {
       /* @__PURE__ */ React.createElement("span", { className: "w-full block text-gray-300 text-xs mt-0.5" }, time)
     ));
   }).flat())), loading && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-gray-400 text-center" }, "Loading..."), error && /* @__PURE__ */ React.createElement("div", null, "Error: ", error.message), /* @__PURE__ */ React.createElement("div", { className: "text-center flex-1" }, /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       onClick: () => {
         setExistingEvents(events);
@@ -9351,7 +9523,7 @@ const Sidebar$1 = ({
           )
         },
         /* @__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",
@@ -9425,7 +9597,7 @@ const SidebarHeader = ({
   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.createElement("div", { className: "flex-grow-0 w-full overflow-visible z-20" }, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "mt-4 -mb-14 w-full flex gap-3 items-center justify-between pointer-events-none" }, displayMenuButton && /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       rounded: "right",
       variant: "white",
@@ -9451,7 +9623,7 @@ const SidebarHeader = ({
       className: `flex items-center pointer-events-auto transition-opacity duration-150 ease-in-out -mr-px`
     },
     /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         rounded: "left",
         variant: "white",
@@ -9461,7 +9633,7 @@ const SidebarHeader = ({
       },
       /* @__PURE__ */ React.createElement(MdOutlineArrowBackIos, { className: "h-[18px] w-auto -mr-1 text-blue-500" })
     ),
-    /* @__PURE__ */ React.createElement(Button, { rounded: "custom", variant: "white", onClick: toggleFullscreen }, displayState === "fullscreen" ? (
+    /* @__PURE__ */ React.createElement(Button$1, { rounded: "custom", variant: "white", onClick: toggleFullscreen }, displayState === "fullscreen" ? (
       // BiCollapseAlt
       /* @__PURE__ */ React.createElement(
         "svg",
@@ -9530,7 +9702,7 @@ const SidebarCollectionLink = ({
 const EditButton = ({}) => {
   const { displayState, toggleSidebarOpen } = React.useContext(SidebarContext);
   return /* @__PURE__ */ React.createElement(
-    Button,
+    Button$1,
     {
       rounded: "right",
       variant: "primary",
@@ -9616,7 +9788,7 @@ function CursorPaginator({
   hasPrev,
   variant = "white"
 }) {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex flex-shrink-0 justify-end gap-2 items-center" }, /* @__PURE__ */ React__default.createElement(Button, { variant, disabled: !hasPrev, onClick: navigatePrev }, /* @__PURE__ */ React__default.createElement(BiLeftArrowAlt, { className: "w-6 h-full mr-2 opacity-70" }), " Previous"), /* @__PURE__ */ React__default.createElement(Button, { variant, disabled: !hasNext, onClick: navigateNext }, "Next ", /* @__PURE__ */ React__default.createElement(BiRightArrowAlt, { className: "w-6 h-full ml-2 opacity-70" })));
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex flex-shrink-0 justify-end gap-2 items-center" }, /* @__PURE__ */ React__default.createElement(Button$1, { variant, disabled: !hasPrev, onClick: navigatePrev }, /* @__PURE__ */ React__default.createElement(BiLeftArrowAlt, { className: "w-6 h-full mr-2 opacity-70" }), " Previous"), /* @__PURE__ */ React__default.createElement(Button$1, { variant, disabled: !hasNext, onClick: navigateNext }, "Next ", /* @__PURE__ */ React__default.createElement(BiRightArrowAlt, { className: "w-6 h-full ml-2 opacity-70" })));
 }
 function ListMediaItem({ item, onClick, active }) {
   let FileIcon = BiFile;
@@ -9751,8 +9923,8 @@ const DeleteModal$1 = ({
   deleteFunc,
   filename
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, { close: close2 }, "Delete ", filename), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("p", null, "Are you sure you want to delete ", /* @__PURE__ */ React__default.createElement("strong", null, filename), "?")), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
-    Button,
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, { close: close2 }, "Delete ", filename), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("p", null, "Are you sure you want to delete ", /* @__PURE__ */ React__default.createElement("strong", null, filename), "?")), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
+    Button$1,
     {
       style: { flexGrow: 3 },
       variant: "danger",
@@ -9774,8 +9946,8 @@ const NewFolderModal = ({ onSubmit, close: close2 }) => {
       required: true,
       onChange: (e) => setFolderName(e.target.value)
     }
-  )), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
-    Button,
+  )), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
+    Button$1,
     {
       disabled: !folderName,
       style: { flexGrow: 3 },
@@ -10083,7 +10255,7 @@ function MediaPicker({
       close: () => setNewFolderModalOpen(false)
     }
   ), /* @__PURE__ */ React__default.createElement(MediaPickerWrap, null, /* @__PURE__ */ React__default.createElement(SyncStatusContainer, null, /* @__PURE__ */ React__default.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__default.createElement("div", { className: "flex flex-1 items-center gap-4" }, /* @__PURE__ */ React__default.createElement(ViewModeToggle, { viewMode, setViewMode }), /* @__PURE__ */ React__default.createElement(Breadcrumb$1, { directory, setDirectory })), cms.media.store.isStatic ? null : /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-wrap items-center gap-4" }, /* @__PURE__ */ React__default.createElement(
-    Button,
+    Button$1,
     {
       busy: false,
       variant: "white",
@@ -10093,7 +10265,7 @@ function MediaPicker({
     "Refresh",
     /* @__PURE__ */ React__default.createElement(IoMdRefresh, { className: "w-6 h-full ml-2 opacity-70 text-blue-500" })
   ), /* @__PURE__ */ React__default.createElement(
-    Button,
+    Button$1,
     {
       busy: false,
       variant: "white",
@@ -10185,7 +10357,7 @@ const ActiveItemPreview = ({
         alt: activeItem.filename
       }
     )) : /* @__PURE__ */ React__default.createElement("span", { className: "p-3 border border-gray-100 rounded-md overflow-hidden bg-gray-50 shadow" }, /* @__PURE__ */ React__default.createElement(BiFile, { className: "w-14 h-auto fill-gray-300" })), /* @__PURE__ */ React__default.createElement("div", { className: "grow h-full w-full shrink flex flex-col gap-3 items-start justify-start" }, /* @__PURE__ */ React__default.createElement(CopyField, { value: absoluteImgURL(activeItem.src), label: "URL" })), /* @__PURE__ */ React__default.createElement("div", { className: "shrink-0 w-full flex flex-col justify-end items-start" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex w-full gap-3" }, selectMediaItem && /* @__PURE__ */ React__default.createElement(
-      Button,
+      Button$1,
       {
         size: "medium",
         variant: "primary",
@@ -10195,7 +10367,7 @@ const ActiveItemPreview = ({
       "Insert",
       /* @__PURE__ */ React__default.createElement(BiArrowToBottom, { className: "ml-1 -mr-0.5 w-6 h-auto text-white opacity-70" })
     ), allowDelete && /* @__PURE__ */ React__default.createElement(
-      Button,
+      Button$1,
       {
         variant: "white",
         size: "medium",
@@ -10209,7 +10381,7 @@ const ActiveItemPreview = ({
 };
 const UploadButton = ({ onClick, uploading }) => {
   return /* @__PURE__ */ React__default.createElement(
-    Button,
+    Button$1,
     {
       variant: "primary",
       size: "custom",
@@ -10431,7 +10603,7 @@ function UpdatePassword(props) {
       required: true
     }
   )), result && /* @__PURE__ */ React__default.createElement("div", { className: "text-center text-sm text-gray-500" }, result), err && /* @__PURE__ */ React__default.createElement("div", { className: "text-center text-sm text-red-500" }, err), /* @__PURE__ */ React__default.createElement(
-    Button,
+    Button$1,
     {
       onClick: updatePassword,
       disabled: err,
@@ -10783,7 +10955,7 @@ function Alerts2({ alerts }) {
       " ",
       "Error"
     ), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("div", { className: "tina-prose" }, /* @__PURE__ */ React__default.createElement(AlertMessage, null))), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1" }), /* @__PURE__ */ React__default.createElement(
-      Button,
+      Button$1,
       {
         style: { flexGrow: 1 },
         onClick: () => {
@@ -11082,7 +11254,7 @@ const BranchBanner = () => {
       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.createElement(
-      Button,
+      Button$1,
       {
         variant: isProtected ? "primary" : "white",
         size: "small",
@@ -11104,7 +11276,7 @@ const BranchBanner = () => {
       )
     ),
     previewUrl && /* @__PURE__ */ React.createElement(
-      Button,
+      Button$1,
       {
         variant: "white",
         size: "small",
@@ -11320,7 +11492,7 @@ const FormBuilder = ({
         },
         tinaForm.buttons.reset
       ), /* @__PURE__ */ React.createElement(
-        Button,
+        Button$1,
         {
           onClick: safeHandleSubmit,
           disabled: !canSubmit,
@@ -11447,8 +11619,8 @@ const CreateBranchModel = ({
         setNewBranchName(formatBranchName(e.target.value));
       }
     }
-  ), error && /* @__PURE__ */ React.createElement("div", { className: "mt-2 text-sm text-red-700" }, error)), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button, { style: { flexGrow: 1 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
-    Button,
+  ), error && /* @__PURE__ */ React.createElement("div", { className: "mt-2 text-sm text-red-700" }, error)), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 1 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
+    Button$1,
     {
       variant: "primary",
       style: { flexGrow: 2 },
@@ -12424,7 +12596,7 @@ const LinkForm = (props) => {
     props.onClose();
   }, [editor, formValues]);
   const UpdateLink = React__default.useCallback(
-    () => /* @__PURE__ */ React__default.createElement(Button, { variant: "primary", onClick: handleUpdate }, "Update Link"),
+    () => /* @__PURE__ */ React__default.createElement(Button$1, { variant: "primary", onClick: handleUpdate }, "Update Link"),
     [handleUpdate]
   );
   return /* @__PURE__ */ React__default.createElement(
@@ -27524,7 +27696,7 @@ const AsyncButton = ({ name, primary, action }) => {
     }
   }, [action, setSubmitting, mounted]);
   return /* @__PURE__ */ React__default.createElement(
-    Button,
+    Button$1,
     {
       "data-test": name.replace(/\s/g, "-").toLowerCase(),
       variant: primary ? "primary" : "secondary",
@@ -28898,7 +29070,7 @@ const Sidebar = ({ cms }) => {
         )
       },
       /* @__PURE__ */ React__default.createElement("div", { className: "absolute top-8 right-0 transform translate-x-full overflow-hidden" }, /* @__PURE__ */ React__default.createElement(
-        Button,
+        Button$1,
         {
           rounded: "right",
           variant: "secondary",
@@ -28932,7 +29104,7 @@ const Sidebar = ({ cms }) => {
       }
     )
   )), !renderDesktopNav && /* @__PURE__ */ React__default.createElement(
-    Button,
+    Button$1,
     {
       rounded: "right",
       variant: "secondary",
@@ -29129,7 +29301,7 @@ const FullscreenError = ({
   title = "Error",
   errorMessage = "It looks like something went wrong."
 }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-gray-100" }, /* @__PURE__ */ React__default.createElement("div", { className: "text-red-500 text-4xl mb-6 flex items-center" }, /* @__PURE__ */ React__default.createElement(BiError, { className: "w-12 h-auto fill-current text-red-400 opacity-70 mr-1" }), " ", title), /* @__PURE__ */ React__default.createElement("p", { className: "text-gray-700 text-xl mb-8" }, errorMessage), /* @__PURE__ */ React__default.createElement(Button, { variant: "danger", onClick: () => window.location.reload() }, /* @__PURE__ */ React__default.createElement(BiSync, { className: "w-7 h-auto fill-current opacity-70 mr-1" }), " Reload"));
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-gray-100" }, /* @__PURE__ */ React__default.createElement("div", { className: "text-red-500 text-4xl mb-6 flex items-center" }, /* @__PURE__ */ React__default.createElement(BiError, { className: "w-12 h-auto fill-current text-red-400 opacity-70 mr-1" }), " ", title), /* @__PURE__ */ React__default.createElement("p", { className: "text-gray-700 text-xl mb-8" }, errorMessage), /* @__PURE__ */ React__default.createElement(Button$1, { variant: "danger", onClick: () => window.location.reload() }, /* @__PURE__ */ React__default.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);
@@ -29994,7 +30166,7 @@ const SearchInput = ({
       }
     }
   )), /* @__PURE__ */ React__default.createElement("div", { className: "flex w-full md:w-auto gap-3" }, /* @__PURE__ */ React__default.createElement(
-    Button,
+    Button$1,
     {
       onClick: () => {
         setSearch(searchInput);
@@ -30006,7 +30178,7 @@ const SearchInput = ({
     "Search ",
     /* @__PURE__ */ React__default.createElement(BiSearch, { className: "w-5 h-full ml-1.5 opacity-70" })
   ), search && searchLoaded && /* @__PURE__ */ React__default.createElement(
-    Button,
+    Button$1,
     {
       onClick: () => {
         setSearch("");
@@ -30076,8 +30248,8 @@ const NoDocumentsPlaceholder = () => {
   return /* @__PURE__ */ React__default.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__default.createElement("p", { className: "text-base italic font-medium text-gray-300" }, "No documents found."));
 };
 const DeleteModal = ({ close: close2, deleteFunc, filename }) => {
-  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, { close: close2 }, "Delete ", filename), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("p", null, `Are you sure you want to delete ${filename}?`)), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
-    Button,
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, { close: close2 }, "Delete ", filename), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("p", null, `Are you sure you want to delete ${filename}?`)), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
+    Button$1,
     {
       style: { flexGrow: 3 },
       variant: "danger",
@@ -30102,8 +30274,8 @@ const FolderModal = ({
       value: folderName,
       onChange: (event) => setFolderName(event.target.value)
     }
-  ))), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
-    Button,
+  ))), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
+    Button$1,
     {
       style: { flexGrow: 3 },
       variant: "primary",
@@ -30129,8 +30301,8 @@ const RenameModal = ({
       value: newRelativePath,
       onChange: (event) => setNewRelativePath(event.target.value)
     }
-  ))), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
-    Button,
+  ))), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
+    Button$1,
     {
       style: { flexGrow: 3 },
       variant: "primary",
@@ -30928,7 +31100,7 @@ const CheckSchema = ({
     }
   }, [cms, JSON.stringify(schemaJson || {}), url]);
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, schemaMissingError ? /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, null, "Branch Not Found"), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement("div", { className: "tina-prose" }, "The current branch (", /* @__PURE__ */ React__default.createElement("span", { className: "font-bold" }, currentBranch), ") has either been merged or deleted.")), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1" }), /* @__PURE__ */ React__default.createElement(
-    Button,
+    Button$1,
     {
       style: { flexGrow: 1 },
       className: "w-full",
@@ -31232,7 +31404,7 @@ export {
   BranchDataProvider,
   BranchSwitcher,
   BranchSwitcherPlugin,
-  Button,
+  Button$1 as Button,
   ButtonToggle,
   ButtonToggleField,
   ButtonToggleFieldPlugin,