tinacms 2.9.1 → 2.9.4

package/dist/index.mjs

@@ -15,7 +15,7 @@ import { isHotkey } from "is-hotkey";
 import clsx$1, { clsx } from "clsx";
 import { Slot } from "@radix-ui/react-slot";
 import { isLangSupported, formatCodeBlock, insertEmptyCodeBlock, unwrapCodeBlock, isCodeBlockEmpty, isSelectionAtCodeBlockStart } from "@udecode/plate-code-block";
-import { X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, PaintBucket, Quote, ChevronRight, ChevronsUpDown, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Settings, Strikethrough, Subscript, Superscript, Table, Text as Text$2, Underline, Link2Off, Eye, SeparatorHorizontal, Moon, SunMedium, Twitter, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, LoaderCircle, TriangleAlert, EllipsisVertical, List as List$1, ListOrdered, Grid3x3Icon, Link, Unlink } from "lucide-react";
+import { X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, PaintBucket, Quote, ChevronRight, ChevronsUpDown, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Settings, Strikethrough, Subscript, Superscript, Table, Text as Text$2, Underline, Link2Off, Eye, SeparatorHorizontal, Moon, SunMedium, Twitter, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, ChevronDownIcon as ChevronDownIcon$1, LoaderCircle, TriangleAlert, EllipsisVertical, GitBranchIcon, List as List$1, ListOrdered, Grid3x3Icon, Link, Unlink } from "lucide-react";
 import mermaid from "mermaid";
 import { cva } from "class-variance-authority";
 import { Command as Command$2 } from "cmdk";
@@ -39,10 +39,10 @@ import arrayMutators from "final-form-arrays";
 import setFieldData from "final-form-set-field-data";
 import { Field, Form as Form$1 } from "react-final-form";
 import PropTypes from "prop-types";
-import * as pkg$1 from "react-color";
-import * as pkg from "color-string";
 import { twMerge } from "tailwind-merge";
 import { Droppable, Draggable, DragDropContext } from "react-beautiful-dnd";
+import * as pkg$1 from "react-color";
+import * as pkg from "color-string";
 import { buildSchema, print, getIntrospectionQuery, buildClientSchema, parse as parse$4 } from "graphql";
 import { diff as diff$1 } from "@graphql-inspector/core";
 import * as dropzone from "react-dropzone";
@@ -57,6 +57,8 @@ import { autoformatSmartQuotes, autoformatPunctuation, autoformatLegal, autoform
 import get$5 from "lodash.get";
 import moment from "moment";
 import { formatDistanceToNow as formatDistanceToNow$1 } from "date-fns";
+import DOMPurify from "dompurify";
+import { toast as toast$1, Toaster as Toaster$1 } from "sonner";
 import { TinaSchema, addNamespaceToSchema, parseURL, resolveForm, normalizePath, canonicalPath, validateSchema } from "@tinacms/schema-tools";
 import { NAMER, resolveField } from "@tinacms/schema-tools";
 import gql from "graphql-tag";
@@ -100,8 +102,14 @@ const Modal = (props) => {
     portalNode
   );
 };
-const ModalActions = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between gap-4 items-center px-5 pb-5 rounded-b-md" }, children);
+const ModalActions = ({ align = "between", children }) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `w-full flex flex-wrap-reverse justify-${align} gap-4 items-center px-5 pb-5 rounded-b-md`
+    },
+    children
+  );
 };
 const ModalBody = ({ className = "", padded = false, ...props }) => /* @__PURE__ */ React__default.createElement(
   "div",
@@ -716,12 +724,84 @@ const CircleCheck = ({ ...props }) => /* @__PURE__ */ React.createElement(
   },
   /* @__PURE__ */ React.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" })
 );
+const TinaExtendedIcon = ({ ...props }) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    viewBox: "0 0 1020 254",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M115.685 110.921C132.719 98.699 135.293 42.2913 140.63 20.6271C145.968 -1.03697 168.043 0.0618098 168.043 0.0618098C168.043 0.0618098 162.312 10.0353 164.649 17.478C166.987 24.9207 183 31.5735 183 31.5735L179.546 40.6787C179.546 40.6787 172.334 39.7562 168.043 48.3408C156.833 70.7637 176.368 136.236 176.368 136.236C176.368 136.236 145.007 180.759 145.007 214.282C145.007 235.763 155.174 253.765 155.174 253.765H140.907C140.907 253.765 119.978 228.858 115.685 216.41C111.393 203.962 113.109 191.515 113.109 191.515C113.109 191.515 90.3595 190.227 70.1863 191.515C50.0132 192.802 36.5597 210.144 34.1316 219.844C31.7036 229.544 30.6978 253.765 30.6978 253.765H19.4169C12.5507 232.576 7.09751 224.982 10.0558 214.282C18.2501 184.647 16.6405 167.839 14.7433 160.352C12.846 152.866 0 146.331 0 146.331C6.29266 133.511 16.4152 127.265 40.3455 126.708C67.9751 126.066 98.6519 123.142 115.685 110.921Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M44.113 213.041C44.113 213.041 47.0281 240.018 62.5148 253.765H75.7865C62.5148 238.73 61.0676 199.54 61.0676 199.54C54.3171 201.738 44.9715 209.607 44.113 213.041Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M290 124V153.6H261.6V195.6C261.6 205 265 208.6 277.2 208.6C281.4 208.6 286.6 208.2 291.6 207.8V237C286.2 238.2 277.4 239.6 266.4 239.6C231.6 239.6 225.2 219.6 225.2 204.2V153.6H207.2V124H225.2V106.2L259.6 90.4H261.6V124H290Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M320.581 81.2H359.781V110.4H320.581V81.2ZM302.781 153.6V124H359.581V236H323.181V153.6H302.781Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M420.022 138.8H423.622C427.222 127.6 435.022 120 457.022 120C480.022 120 497.422 131.2 497.422 158.4V236H461.022V169.2C461.022 157 454.222 151.4 443.022 151.4C430.422 151.4 423.422 157.6 423.422 172.8V236H387.022V124H420.022V138.8Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M592.605 219H590.605C584.805 229.8 571.005 238.8 554.005 238.8C529.005 238.8 516.205 226.4 516.205 207C516.205 187.8 527.605 176.6 548.805 173.2L580.405 168.2C587.405 167 589.205 163.2 589.205 159.8V157.6C589.205 152.6 585.605 146.4 573.605 146.4C563.405 146.4 557.405 151 556.805 158.8H522.005C523.405 136.2 538.805 120 572.005 120C606.805 120 624.005 134 624.005 156.4V206.8H636.605V236H592.605V219ZM589.205 192.4V183H587.205C585.205 185.2 582.405 186.8 578.005 187.8L563.205 191.4C556.605 193 553.405 196.8 553.405 203C553.405 210.4 558.205 214.2 567.805 214.2C582.005 214.2 589.205 204.4 589.205 192.4Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M726.356 200H747.356C743.756 227.8 728.556 240 700.956 240C666.356 240 650.756 219.6 650.756 180C650.756 145.8 662.756 120 700.956 120C732.956 120 743.556 137.2 746.356 160H725.156C723.156 145.4 716.156 136.6 700.956 136.6C680.956 136.6 671.356 149.8 671.356 180C671.356 208 679.356 223 700.956 223C715.956 223 724.156 214.6 726.356 200Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M846.18 139.6H848.18C851.78 128 860.38 120 874.38 120C892.98 120 900.58 132.4 900.58 158.4V236H880.58V161.6C880.58 148 877.78 138.8 865.78 138.8C854.18 138.8 847.78 148.8 847.78 167.4V236H828.18V161.6C828.18 148.2 824.98 138.8 813.58 138.8C799.78 138.8 795.18 149.8 795.18 169.2V236H775.18V124H793.98V139.6H796.38C800.58 127.2 807.78 120 821.98 120C835.38 120 842.78 126.8 846.18 139.6Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M1018.2 155H996.6C995.2 143.4 989.2 135.6 973.6 135.6C961.6 135.6 951 140.6 951 151.8C951 159.4 954.8 164.6 965.8 167.2L988.4 172.4C1009 177 1020 188 1020 205.2C1020 224.8 1007 240 975.6 240C947.8 240 931 229.6 927 205H950C953.2 219.2 961.6 224.4 976 224.4C988 224.4 999.2 220 999.2 207.2C999.2 199.6 994.4 193.8 982 190.8L955.6 184.6C940.4 181 930.6 171.2 930.6 154C930.6 134 945.8 120 974 120C1006 120 1016.4 137.8 1018.2 155Z",
+      fill: "#EC4815"
+    }
+  )
+);
 const ModalHeader = ({ children, close: close2 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "h-14 flex items-center justify-between px-5 border-b border-gray-200 m-0" }, /* @__PURE__ */ React.createElement(ModalTitle, null, children), close2 && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "h-14 flex items-center px-5 border-b border-gray-200 m-0" }, /* @__PURE__ */ React.createElement(TinaIcon, { className: "w-10 h-auto -ml-1 mr-1 my-1 fill-tina-orange" }), /* @__PURE__ */ React.createElement(ModalTitle, null, children), close2 && /* @__PURE__ */ React.createElement(
     "div",
     {
       onClick: close2,
-      className: "flex items-center fill-gray-400 cursor-pointer transition-colors duration-100 ease-out hover:fill-gray-700"
+      className: "ml-auto flex justify-self-end items-center fill-gray-400 cursor-pointer transition-colors duration-100 ease-out hover:fill-gray-700"
     },
     /* @__PURE__ */ React.createElement(CloseIcon, { className: "w-6 h-auto" })
   ));
@@ -36981,7 +37061,7 @@ const DropdownMenuLabel = withVariants(
   dropdownMenuLabelVariants,
   ["inset"]
 );
-const DropdownMenuSeparator = withCn(
+const DropdownMenuSeparator$1 = withCn(
   DropdownMenuPrimitive.Separator,
   "-mx-1 my-1 h-px bg-muted"
 );
@@ -38257,6 +38337,171 @@ TinaField.propTypes = {
   Component: PropTypes.any.isRequired,
   children: PropTypes.any
 };
+function cn$1(...inputs) {
+  return twMerge(clsx(inputs));
+}
+const Button$1 = ({
+  variant = "secondary",
+  as: Tag2 = "button",
+  size: size2 = "medium",
+  busy,
+  disabled,
+  rounded = "full",
+  children,
+  className = "",
+  ...props
+}) => {
+  const baseClasses = "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out ";
+  const variantClasses = {
+    primary: `shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark border-0`,
+    secondary: `shadow text-gray-500 hover:tina-orange-dark bg-gray-50 hover:bg-white border border-gray-100`,
+    white: `shadow text-gray-500 hover:tina-orange-dark bg-white hover:bg-gray-50 border border-gray-100`,
+    ghost: `text-gray-500 hover:tina-orange-dark hover:shadow border border-transparent border-0 hover:border hover:border-gray-200 bg-transparent`,
+    danger: `shadow text-white bg-red-500 hover:bg-red-600 focus:ring-red-500`,
+    accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`,
+    custom: ""
+  };
+  const state = busy ? `busy` : disabled ? `disabled` : `default`;
+  const stateClasses = {
+    disabled: `pointer-events-none opacity-30 cursor-not-allowed`,
+    busy: `pointer-events-none opacity-70 cursor-wait`,
+    default: ``
+  };
+  const roundedClasses = {
+    full: `rounded`,
+    left: `rounded-l`,
+    right: `rounded-r`,
+    custom: "",
+    none: ""
+  };
+  const sizeClasses = {
+    small: `text-xs h-8 px-3`,
+    medium: `text-sm h-10 px-8`,
+    custom: ``
+  };
+  return /* @__PURE__ */ React.createElement(
+    Tag2,
+    {
+      className: cn$1(
+        baseClasses,
+        variantClasses[variant],
+        sizeClasses[size2],
+        stateClasses[state],
+        roundedClasses[rounded],
+        className
+      ),
+      ...props
+    },
+    children
+  );
+};
+const IconButton = ({
+  variant = "secondary",
+  size: size2 = "medium",
+  busy,
+  disabled,
+  children,
+  className,
+  ...props
+}) => {
+  const baseClasses = "icon-parent inline-flex items-center border border-transparent text-sm font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out rounded-full";
+  const variantClasses = {
+    primary: `shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark`,
+    secondary: `shadow text-gray-500 hover:text-blue-500 bg-gray-50 hover:bg-white border border-gray-200`,
+    white: `shadow text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-200`,
+    ghost: `text-gray-500 hover:text-blue-500 hover:shadow border border-transparent hover:border-gray-200 bg-transparent`,
+    accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`
+  };
+  const state = busy ? `busy` : disabled ? `disabled` : `default`;
+  const stateClasses = {
+    disabled: `pointer-events-none	opacity-30 cursor-not-allowed`,
+    busy: `pointer-events-none opacity-70 cursor-wait`,
+    default: ``
+  };
+  const sizeClasses = {
+    small: `h-7 w-7`,
+    medium: `h-9 w-9`,
+    custom: ``
+  };
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: cn$1(
+        baseClasses,
+        variantClasses[variant],
+        sizeClasses[size2],
+        stateClasses[state],
+        className
+      ),
+      ...props
+    },
+    children
+  );
+};
+function FontLoader() {
+  React.useEffect(() => {
+    const link = document.createElement("link");
+    link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Libre+Baskerville:wght@400;500;600;700&display=swap";
+    link.rel = "stylesheet";
+    document.head.appendChild(link);
+    return () => {
+      document.head.removeChild(link);
+    };
+  }, []);
+  return null;
+}
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const OverflowMenu$1 = ({ toolbarItems: toolbarItems2, className = "w-full" }) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, toolbarItems2.length > 0 && /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Root, { open, onOpenChange: setOpen }, /* @__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}}`
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "h-5 w-5",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor"
+      },
+      /* @__PURE__ */ React__default.createElement(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+        }
+      )
+    )
+  ), /* @__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 shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1" }, toolbarItems2.map((toolbarItem) => {
+    return /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        "data-test": `${toolbarItem.name}OverflowButton`,
+        key: toolbarItem.name,
+        onMouseDown: (event) => {
+          event.preventDefault();
+          toolbarItem.onMouseDown(event);
+          setOpen(false);
+        },
+        className: classNames(
+          toolbarItem.active ? "bg-gray-50 text-blue-500" : "bg-white text-gray-600",
+          "hover:bg-gray-50 hover:text-blue-500 cursor-pointer pointer-events-auto px-4 py-2 text-sm w-full flex items-center whitespace-nowrap",
+          toolbarItem.className ?? ""
+        )
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: "mr-2 opacity-80" }, toolbarItem.Icon),
+      " ",
+      toolbarItem.label
+    );
+  }))))));
+};
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -38498,30 +38743,270 @@ function BiTrash(props) {
 function BiX(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z" }, "child": [] }] })(props);
 }
-const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
-const disabledClasses$1 = "opacity-50 pointer-events-none cursor-not-allowed";
-const BaseTextField = React.forwardRef(({ className, disabled, ...rest }, ref) => {
+function BsArrowRightShort(props) {
+  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" }, "child": [] }] })(props);
+}
+function BsCheckCircleFill(props) {
+  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }, "child": [] }] })(props);
+}
+function BsExclamationOctagonFill(props) {
+  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" }, "child": [] }] })(props);
+}
+const MessageIcon = ({
+  type = "success",
+  className = ""
+}) => {
+  const icons = {
+    success: BiCheckCircle,
+    warning: BiError,
+    error: BiError,
+    info: BiInfoCircle
+  };
+  const Icon = icons[type];
+  return /* @__PURE__ */ React__default.createElement(Icon, { className });
+};
+const Message = ({
+  children,
+  type = "success",
+  size: size2 = "medium",
+  className = "",
+  link,
+  linkLabel = "Learn More"
+}) => {
+  const containerClasses = {
+    success: "bg-gradient-to-r from-green-50 to-green-100 border-green-200",
+    warning: "bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-200",
+    error: "bg-gradient-to-r from-red-50 to-red-100 border-red-200",
+    info: "bg-gradient-to-r from-blue-50 to-blue-100 border-blue-100"
+  };
+  const textClasses = {
+    success: "text-green-700",
+    warning: "text-yellow-700",
+    error: "text-red-700",
+    info: "text-blue-700"
+  };
+  const iconClasses = {
+    success: "text-green-400",
+    warning: "text-yellow-400",
+    error: "text-red-400",
+    info: "text-blue-400"
+  };
+  const sizeClasses = {
+    small: "px-3 py-1.5 text-xs",
+    medium: "px-4 py-2.5 text-sm"
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: `rounded-lg border shadow-sm ${sizeClasses[size2]} ${containerClasses[type]} ${className}`
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement(
+      MessageIcon,
+      {
+        type,
+        className: `${size2 === "small" ? "w-5" : "w-6"} h-auto flex-shrink-0 ${iconClasses[type]}`
+      }
+    ), /* @__PURE__ */ React__default.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children)), link && /* @__PURE__ */ React__default.createElement(
+      "a",
+      {
+        href: link,
+        target: "_blank",
+        className: "flex-shrink-0 flex items-center gap-1 text-blue-600 underline decoration-blue-200 hover:text-blue-500 hover:decoration-blue-500 transition-all ease-out duration-150"
+      },
+      linkLabel,
+      " ",
+      /* @__PURE__ */ React__default.createElement(BsArrowRightShort, { className: "w-4 h-auto" })
+    ))
+  );
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
   return /* @__PURE__ */ React.createElement(
-    "input",
+    DropdownMenuPrimitive.Trigger,
     {
-      ref,
-      type: "text",
-      className: `${textFieldClasses} ${disabled ? disabledClasses$1 : ""} ${className}`,
-      ...rest
+      "data-slot": "dropdown-menu-trigger",
+      ...props
     }
   );
-});
-const TextArea = React.forwardRef(({ ...props }, ref) => {
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground 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 z-base max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ));
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
   return /* @__PURE__ */ React.createElement(
-    "textarea",
+    DropdownMenuPrimitive.Item,
     {
-      ...props,
-      className: "shadow-inner text-base px-3 py-2 text-gray-600 resize-y focus:shadow-outline focus:border-blue-500 block w-full border border-gray-200 focus:text-gray-900 rounded",
-      ref,
-      style: { minHeight: "160px" }
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer text-gray-700 hover:text-blue-500",
+        className
+      ),
+      ...props
     }
   );
-});
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+const DropdownButton = React.forwardRef(
+  ({
+    variant = "primary",
+    size: size2 = "medium",
+    busy,
+    disabled,
+    rounded = "full",
+    children,
+    className = "",
+    onMainAction,
+    items: items2,
+    showSplitButton = true,
+    ...props
+  }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    if (!onMainAction || !showSplitButton) {
+      return /* @__PURE__ */ React.createElement(DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+        Button$1,
+        {
+          variant,
+          size: size2,
+          busy,
+          disabled,
+          rounded,
+          className: cn$1("gap-2", className),
+          ...props
+        },
+        children,
+        /* @__PURE__ */ React.createElement(
+          ChevronDownIcon$1,
+          {
+            className: cn$1(
+              "h-4 w-4 transition-transform duration-200",
+              open && "rotate-180"
+            )
+          }
+        )
+      )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom", className: "z-[100000]" }, items2.map((item, index) => /* @__PURE__ */ React.createElement(
+        DropdownMenuItem,
+        {
+          key: index,
+          onClick: item.onClick,
+          disabled: item.disabled,
+          variant: item.variant
+        },
+        item.icon && item.icon,
+        item.label
+      ))));
+    }
+    return /* @__PURE__ */ React.createElement("div", { className: cn$1("inline-flex", className) }, /* @__PURE__ */ React.createElement(
+      Button$1,
+      {
+        variant,
+        size: size2,
+        busy,
+        disabled,
+        rounded: "left",
+        onClick: onMainAction,
+        className: "border-r-0 w-full",
+        ...props
+      },
+      children
+    ), /* @__PURE__ */ React.createElement(DropdownMenu, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, null, /* @__PURE__ */ React.createElement(
+      Button$1,
+      {
+        variant,
+        size: size2,
+        busy,
+        disabled,
+        rounded: "right",
+        className: "px-4 border-l",
+        style: { borderColor: "#00000030" },
+        "aria-label": "More options"
+      },
+      /* @__PURE__ */ React.createElement(
+        ChevronDownIcon$1,
+        {
+          className: cn$1(
+            "h-4 w-4 transition-transform duration-200 fill-none",
+            open && "rotate-180"
+          ),
+          style: { fill: "none" }
+        }
+      )
+    )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom" }, items2.map((item, index) => {
+      var _a2;
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, /* @__PURE__ */ React.createElement(
+        DropdownMenuItem,
+        {
+          onClick: item.onClick,
+          disabled: item.disabled,
+          variant: item.variant
+        },
+        item.icon && item.icon,
+        item.label
+      ), item.variant === "destructive" && index < items2.length - 1 && ((_a2 = items2[index + 1]) == null ? void 0 : _a2.variant) !== "destructive" && /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null));
+    }))));
+  }
+);
+DropdownButton.displayName = "DropdownButton";
+function FaCircle(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" }, "child": [] }] })(props);
+}
+function FaFile(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 384 512" }, "child": [{ "tag": "path", "attr": { "d": "M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z" }, "child": [] }] })(props);
+}
+function FaFolder(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z" }, "child": [] }] })(props);
+}
+function FaLock(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" }, "child": [] }] })(props);
+}
+function FaSpinner(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z" }, "child": [] }] })(props);
+}
+function FaUnlock(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z" }, "child": [] }] })(props);
+}
 const Dismissible = ({
   onDismiss,
   escape: escape2,
@@ -38594,6 +39079,159 @@ function useDismissible({
   }, [click, customDocument, escape2, disabled, onDismiss]);
   return area;
 }
+const FormActionMenu = ({ actions, form }) => {
+  const [actionMenuVisibility, setActionMenuVisibility] = useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MoreActionsButton, { onClick: () => setActionMenuVisibility((p2) => !p2) }), /* @__PURE__ */ React.createElement(ActionsOverlay, { open: actionMenuVisibility }, /* @__PURE__ */ React.createElement(
+    Dismissible,
+    {
+      click: true,
+      escape: true,
+      disabled: !actionMenuVisibility,
+      onDismiss: () => {
+        setActionMenuVisibility((p2) => !p2);
+      }
+    },
+    actions.map((Action, i2) => (
+      // TODO: `i` will suppress warnings but this indicates that maybe
+      //        Actions should just be componets
+      /* @__PURE__ */ React.createElement(Action, { form, key: i2 })
+    ))
+  )));
+};
+const MoreActionsButton = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
+  "button",
+  {
+    className: `h-16 w-10 self-stretch bg-transparent bg-center bg-[length:auto_18px] -mr-4 ml-2 outline-none cursor-pointer transition-opacity duration-100 ease-out flex justify-center items-center hover:bg-gray-50 hover:fill-gray-700 ${className}`,
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(EllipsisVerticalIcon, null)
+);
+const ActionsOverlay = ({ open, className = "", style = {}, ...props }) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: `min-w-[192px] rounded-3xl border border-solid border-[#efefef] block absolute bottom-5 right-5 ${open ? "opacity-100" : "opacity-0"} transition-all duration-100 ease-out origin-bottom-right shadow-[0_2px_3px_rgba(0,0,0,0.05)] bg-white overflow-hidden z-10 ${className}`,
+    style: {
+      transform: open ? "translate3d(0, -28px, 0) scale3d(1, 1, 1)" : "translate3d(0, 0, 0) scale3d(0.5, 0.5, 1)",
+      pointerEvents: open ? "all" : "none",
+      ...style
+    },
+    ...props
+  }
+);
+const ActionButton = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
+  "button",
+  {
+    className: `relative text-center text-[13px] px-3 h-10 font-normal w-full bg-none cursor-pointer outline-none border-0 transition-all duration-[150ms] ease-out hover:text-blue-500 hover:bg-gray50 [&:not(:last-child)]: border-b-[1px] border-solid border-b-[#edecf3] ${className}`,
+    ...props
+  }
+);
+const FormPortalContext = React.createContext(() => {
+  return null;
+});
+function useFormPortal() {
+  return React.useContext(FormPortalContext);
+}
+const FormPortalProvider = ({
+  children
+}) => {
+  const wrapperRef = React.useRef(null);
+  const zIndexRef = React.useRef(0);
+  const FormPortal = React.useCallback(
+    (props) => {
+      if (!wrapperRef.current)
+        return null;
+      return createPortal(
+        props.children({ zIndexShift: zIndexRef.current += 1 }),
+        wrapperRef.current
+      );
+    },
+    [wrapperRef, zIndexRef]
+  );
+  return /* @__PURE__ */ React.createElement(FormPortalContext.Provider, { value: FormPortal }, /* @__PURE__ */ React.createElement("div", { ref: wrapperRef, className: "relative w-full flex-1 overflow-hidden" }, children));
+};
+const LoadingDots = ({
+  dotSize = 8,
+  color = "white"
+}) => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color }), /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color, delay: 0.3 }), /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color, delay: 0.5 }));
+};
+const SingleDot = ({ delay = 0, color, dotSize }) => /* @__PURE__ */ React.createElement(
+  "span",
+  {
+    className: "inline-block mr-1",
+    style: {
+      animation: "loading-dots-scale-up-and-down 2s linear infinite",
+      animationDelay: `${delay}s`,
+      background: color,
+      width: dotSize,
+      height: dotSize,
+      borderRadius: dotSize
+    }
+  }
+);
+const ResetForm = ({
+  pristine,
+  reset: reset2,
+  children,
+  ...props
+}) => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Button$1,
+    {
+      onClick: () => {
+        setOpen((p2) => !p2);
+      },
+      disabled: pristine,
+      ...props
+    },
+    children
+  ), open && /* @__PURE__ */ React.createElement(ResetModal, { reset: reset2, close: () => setOpen(false) }));
+};
+const ResetModal = ({ close: close2, reset: reset2 }) => {
+  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",
+      onClick: async () => {
+        await reset2();
+        close2();
+      }
+    },
+    "Reset"
+  ))));
+};
+function AiFillWarning(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z" }, "child": [] }] })(props);
+}
+function AiOutlineLoading(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }, "child": [] }] })(props);
+}
+const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
+const disabledClasses$1 = "opacity-50 pointer-events-none cursor-not-allowed";
+const BaseTextField = React.forwardRef(({ className, disabled, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ref,
+      type: "text",
+      className: `${textFieldClasses} ${disabled ? disabledClasses$1 : ""} ${className}`,
+      ...rest
+    }
+  );
+});
+const TextArea = React.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ React.createElement(
+    "textarea",
+    {
+      ...props,
+      className: "shadow-inner text-base px-3 py-2 text-gray-600 resize-y focus:shadow-outline focus:border-blue-500 block w-full border border-gray-200 focus:text-gray-900 rounded",
+      ref,
+      style: { minHeight: "160px" }
+    }
+  );
+});
 const { get: getColor, to: toColor } = pkg;
 var ColorFormat = /* @__PURE__ */ ((ColorFormat2) => {
   ColorFormat2["Hex"] = "hex";
@@ -38915,9 +39553,6 @@ function MdOutlineSettings(props) {
 function MdOutlineClear(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" }, "child": [] }] })(props);
 }
-function MdOutlineSaveAlt(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67 2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" }, "child": [] }] })(props);
-}
 function MdOutlineCloud(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11A2.98 2.98 0 0 1 22 15c0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95A5.469 5.469 0 0 1 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96A7.49 7.49 0 0 0 12 4z" }, "child": [] }] })(props);
 }
@@ -39139,247 +39774,6 @@ const NumberInput = ({
     }
   }
 );
-function cn$1(...inputs) {
-  return twMerge(clsx(inputs));
-}
-const Button$1 = ({
-  variant = "secondary",
-  as: Tag2 = "button",
-  size: size2 = "medium",
-  busy,
-  disabled,
-  rounded = "full",
-  children,
-  className = "",
-  ...props
-}) => {
-  const baseClasses = "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out ";
-  const variantClasses = {
-    primary: `shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 border-0`,
-    secondary: `shadow text-gray-500 hover:text-blue-500 bg-gray-50 hover:bg-white border border-gray-100`,
-    white: `shadow text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-100`,
-    ghost: `text-gray-500 hover:text-blue-500 hover:shadow border border-transparent border-0 hover:border hover:border-gray-200 bg-transparent`,
-    danger: `shadow text-white bg-red-500 hover:bg-red-600 focus:ring-red-500`,
-    accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`,
-    custom: ""
-  };
-  const state = busy ? `busy` : disabled ? `disabled` : `default`;
-  const stateClasses = {
-    disabled: `pointer-events-none opacity-30 cursor-not-allowed`,
-    busy: `pointer-events-none opacity-70 cursor-wait`,
-    default: ``
-  };
-  const roundedClasses = {
-    full: `rounded`,
-    left: `rounded-l`,
-    right: `rounded-r`,
-    custom: "",
-    none: ""
-  };
-  const sizeClasses = {
-    small: `text-xs h-8 px-3`,
-    medium: `text-sm h-10 px-8`,
-    custom: ``
-  };
-  return /* @__PURE__ */ React.createElement(
-    Tag2,
-    {
-      className: cn$1(
-        baseClasses,
-        variantClasses[variant],
-        sizeClasses[size2],
-        stateClasses[state],
-        roundedClasses[rounded],
-        className
-      ),
-      ...props
-    },
-    children
-  );
-};
-const IconButton = ({
-  variant = "secondary",
-  size: size2 = "medium",
-  busy,
-  disabled,
-  children,
-  className,
-  ...props
-}) => {
-  const baseClasses = "icon-parent inline-flex items-center border border-transparent text-sm font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out rounded-full";
-  const variantClasses = {
-    primary: `shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500`,
-    secondary: `shadow text-gray-500 hover:text-blue-500 bg-gray-50 hover:bg-white border border-gray-200`,
-    white: `shadow text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-200`,
-    ghost: `text-gray-500 hover:text-blue-500 hover:shadow border border-transparent hover:border-gray-200 bg-transparent`,
-    accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`
-  };
-  const state = busy ? `busy` : disabled ? `disabled` : `default`;
-  const stateClasses = {
-    disabled: `pointer-events-none	opacity-30 cursor-not-allowed`,
-    busy: `pointer-events-none opacity-70 cursor-wait`,
-    default: ``
-  };
-  const sizeClasses = {
-    small: `h-7 w-7`,
-    medium: `h-9 w-9`,
-    custom: ``
-  };
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: cn$1(
-        baseClasses,
-        variantClasses[variant],
-        sizeClasses[size2],
-        stateClasses[state],
-        className
-      ),
-      ...props
-    },
-    children
-  );
-};
-function FontLoader() {
-  React.useEffect(() => {
-    const link = document.createElement("link");
-    link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Libre+Baskerville:wght@400;500;600;700&display=swap";
-    link.rel = "stylesheet";
-    document.head.appendChild(link);
-    return () => {
-      document.head.removeChild(link);
-    };
-  }, []);
-  return null;
-}
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-const OverflowMenu$1 = ({ toolbarItems: toolbarItems2, className = "w-full" }) => {
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, toolbarItems2.length > 0 && /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Root, { open, onOpenChange: setOpen }, /* @__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}}`
-    },
-    /* @__PURE__ */ React__default.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        className: "h-5 w-5",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor"
-      },
-      /* @__PURE__ */ React__default.createElement(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-        }
-      )
-    )
-  ), /* @__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 shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1" }, toolbarItems2.map((toolbarItem) => {
-    return /* @__PURE__ */ React__default.createElement(
-      "span",
-      {
-        "data-test": `${toolbarItem.name}OverflowButton`,
-        key: toolbarItem.name,
-        onMouseDown: (event) => {
-          event.preventDefault();
-          toolbarItem.onMouseDown(event);
-          setOpen(false);
-        },
-        className: classNames(
-          toolbarItem.active ? "bg-gray-50 text-blue-500" : "bg-white text-gray-600",
-          "hover:bg-gray-50 hover:text-blue-500 cursor-pointer pointer-events-auto px-4 py-2 text-sm w-full flex items-center whitespace-nowrap",
-          toolbarItem.className ?? ""
-        )
-      },
-      /* @__PURE__ */ React__default.createElement("div", { className: "mr-2 opacity-80" }, toolbarItem.Icon),
-      " ",
-      toolbarItem.label
-    );
-  }))))));
-};
-function BsArrowRightShort(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" }, "child": [] }] })(props);
-}
-function BsCheckCircleFill(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }, "child": [] }] })(props);
-}
-function BsExclamationOctagonFill(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" }, "child": [] }] })(props);
-}
-const MessageIcon = ({
-  type = "success",
-  className = ""
-}) => {
-  const icons = {
-    success: BiCheckCircle,
-    warning: BiError,
-    error: BiError,
-    info: BiInfoCircle
-  };
-  const Icon = icons[type];
-  return /* @__PURE__ */ React__default.createElement(Icon, { className });
-};
-const Message = ({
-  children,
-  type = "success",
-  size: size2 = "medium",
-  className = "",
-  link,
-  linkLabel = "Learn More"
-}) => {
-  const containerClasses = {
-    success: "bg-gradient-to-r from-green-50 to-green-100 border-green-200",
-    warning: "bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-200",
-    error: "bg-gradient-to-r from-red-50 to-red-100 border-red-200",
-    info: "bg-gradient-to-r from-blue-50 to-blue-100 border-blue-100"
-  };
-  const textClasses = {
-    success: "text-green-700",
-    warning: "text-yellow-700",
-    error: "text-red-700",
-    info: "text-blue-700"
-  };
-  const iconClasses = {
-    success: "text-green-400",
-    warning: "text-yellow-400",
-    error: "text-red-400",
-    info: "text-blue-400"
-  };
-  const sizeClasses = {
-    small: "px-3 py-1.5 text-xs",
-    medium: "px-4 py-2.5 text-sm"
-  };
-  return /* @__PURE__ */ React__default.createElement(
-    "div",
-    {
-      className: `rounded-lg border shadow-sm ${sizeClasses[size2]} ${containerClasses[type]} ${className}`
-    },
-    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement(
-      MessageIcon,
-      {
-        type,
-        className: `${size2 === "small" ? "w-5" : "w-6"} h-auto flex-shrink-0 ${iconClasses[type]}`
-      }
-    ), /* @__PURE__ */ React__default.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children)), link && /* @__PURE__ */ React__default.createElement(
-      "a",
-      {
-        href: link,
-        target: "_blank",
-        className: "flex-shrink-0 flex items-center gap-1 text-blue-600 underline decoration-blue-200 hover:text-blue-500 hover:decoration-blue-500 transition-all ease-out duration-150"
-      },
-      linkLabel,
-      " ",
-      /* @__PURE__ */ React__default.createElement(BsArrowRightShort, { className: "w-4 h-auto" })
-    ))
-  );
-};
 function useCMS() {
   return useCMS$1();
 }
@@ -42488,30 +42882,6 @@ const PasswordFieldPlugin = {
   },
   parse: parse$2
 };
-function AiFillWarning(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z" }, "child": [] }] })(props);
-}
-function AiOutlineLoading(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }, "child": [] }] })(props);
-}
-function FaCircle(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" }, "child": [] }] })(props);
-}
-function FaFile(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 384 512" }, "child": [{ "tag": "path", "attr": { "d": "M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z" }, "child": [] }] })(props);
-}
-function FaFolder(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z" }, "child": [] }] })(props);
-}
-function FaLock(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" }, "child": [] }] })(props);
-}
-function FaSpinner(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z" }, "child": [] }] })(props);
-}
-function FaUnlock(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z" }, "child": [] }] })(props);
-}
 function GrCircleQuestion(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "strokeWidth": "2", "d": "M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,15 L12,14 C12,13 12,12.5 13,12 C14,11.5 15,11 15,9.5 C15,8.5 14,7 12,7 C10,7 9,8.26413718 9,10 M12,16 L12,18" }, "child": [] }] })(props);
 }
@@ -43227,6 +43597,93 @@ class GlobalFormPlugin {
     };
   }
 }
+const isSafeHref = (href) => {
+  return /^https?:\/\//.test(href) && !/^javascript:/i.test(href) && !/^data:/i.test(href) && !/^vbscript:/i.test(href);
+};
+const parseUrlsInText$1 = (text) => {
+  const urlRegex = /(https?:\/\/[^\s]+|www\.[^\s]+)/g;
+  const parts = text.split(urlRegex);
+  return parts.map((part, index) => {
+    if (part.match(urlRegex)) {
+      let href = part.startsWith("http") ? part : `https://${part}`;
+      href = DOMPurify.sanitize(href, {
+        ALLOWED_URI_REGEXP: /^https?:\/\/.*/i
+      });
+      if (isSafeHref(href)) {
+        const safeText2 = DOMPurify.sanitize(part, {
+          ALLOWED_TAGS: [],
+          ALLOWED_ATTR: []
+        });
+        return /* @__PURE__ */ React__default.createElement(
+          "a",
+          {
+            key: index,
+            href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "underline hover:opacity-80",
+            onClick: (e3) => e3.stopPropagation()
+          },
+          safeText2
+        );
+      } else {
+        const safeText2 = DOMPurify.sanitize(part, {
+          ALLOWED_TAGS: [],
+          ALLOWED_ATTR: []
+        });
+        return /* @__PURE__ */ React__default.createElement("span", { key: index }, safeText2);
+      }
+    }
+    const safeText = DOMPurify.sanitize(part, {
+      ALLOWED_TAGS: [],
+      ALLOWED_ATTR: []
+    });
+    return safeText;
+  });
+};
+const toast = {
+  success: (message, options) => {
+    const content = typeof message === "string" ? parseUrlsInText$1(message) : message;
+    return toast$1.success(content, options);
+  },
+  error: (message, options) => {
+    const content = typeof message === "string" ? parseUrlsInText$1(message) : message;
+    return toast$1.error(content, options);
+  },
+  warning: (message, options) => {
+    const content = typeof message === "string" ? parseUrlsInText$1(message) : message;
+    return toast$1.warning(content, options);
+  },
+  info: (message, options) => {
+    const content = typeof message === "string" ? parseUrlsInText$1(message) : message;
+    return toast$1.info(content, options);
+  },
+  dismiss: toast$1.dismiss
+};
+const Toaster = ({ ...props }) => {
+  return /* @__PURE__ */ React__default.createElement(
+    Toaster$1,
+    {
+      className: "toaster group",
+      position: "top-left",
+      closeButton: true,
+      toastOptions: {
+        classNames: {
+          toast: "group toast group-[.toaster]:bg-white group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-gray-700",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          closeButton: "group-[.toast]:bg-white group-[.toast]:text-current group-[.toast]:border-0",
+          success: "group-[.toaster]:border-green-500 [&_[data-icon]]:text-green-500 [&_[data-content]]:text-gray-700",
+          error: "group-[.toaster]:border-red-500 [&_[data-icon]]:text-red-500 [&_[data-content]]:text-gray-700",
+          warning: "group-[.toaster]:border-yellow-500 [&_[data-icon]]:text-yellow-500 [&_[data-content]]:text-gray-700",
+          info: "group-[.toaster]:border-blue-500 [&_[data-icon]]:text-blue-500 [&_[data-content]]:text-gray-700"
+        }
+      },
+      ...props
+    }
+  );
+};
 let Alerts$1 = class Alerts {
   constructor(events2, map2 = {}) {
     this.events = events2;
@@ -43253,21 +43710,44 @@ let Alerts$1 = class Alerts {
       ...eventsToAlerts
     };
   }
-  add(level, message, timeout = 4e3) {
+  add(level, message, timeout = 8e3) {
+    let id2;
+    const toastMessage = typeof message === "string" ? message : React__default.createElement(message);
+    switch (level) {
+      case "success":
+        id2 = toast.success(toastMessage, {
+          duration: timeout
+        });
+        break;
+      case "error":
+        id2 = `${message}|${Date.now()}`;
+        break;
+      case "warn":
+        id2 = toast.warning(toastMessage, {
+          duration: timeout
+        });
+        break;
+      case "info":
+      default:
+        id2 = toast.info(toastMessage, {
+          duration: timeout
+        });
+        break;
+    }
     const alert = {
       level,
       message,
       timeout,
-      id: `${message}|${Date.now()}`
+      id: String(id2)
     };
     this.alerts.set(alert.id, alert);
     this.events.dispatch({ type: "alerts:add", alert });
-    let timeoutId = null;
     const dismiss = () => {
-      clearTimeout(timeoutId);
+      if (level !== "error") {
+        toast.dismiss(id2);
+      }
       this.dismiss(alert);
     };
-    timeoutId = level !== "error" ? setTimeout(dismiss, alert.timeout) : null;
     return dismiss;
   }
   dismiss(alert) {
@@ -44304,9 +44784,6 @@ const CopyField = ({ label, description, value }) => {
     )
   ), description && /* @__PURE__ */ React__default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, description));
 };
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 const checkerboardStyle = {
   backgroundImage: "linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%)",
   backgroundSize: "12px 12px",
@@ -45215,7 +45692,7 @@ const Callout = ({
   className = "",
   ...props
 }) => {
-  const commonAlertStyles = "ml-8 text-sm px-4 py-3 rounded-md border";
+  const commonAlertStyles = "text-sm px-4 py-3 rounded-md border";
   const styles = {
     warning: `text-amber-700 bg-amber-100 border-amber-700/20`,
     info: `text-blue-600 bg-blue-100/50 border-blue-600/20`,
@@ -45239,14 +45716,14 @@ const Callout = ({
     children
   );
 };
-const LocalWarning = () => {
+const LocalWarning = ({ className = "" }) => {
   var _a2, _b;
   const cms = useCMS$1();
   const isLocalMode = (_b = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b.isLocalMode;
   if (!isLocalMode) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(Callout, { calloutStyle: "warning", className: "w-fit" }, /* @__PURE__ */ React.createElement("a", { href: "https://tina.io/docs/r/what-is-tinacloud/", target: "_blank" }, "You are in local mode"));
+  return /* @__PURE__ */ React.createElement(Callout, { calloutStyle: "warning", className: cn("w-fit", className) }, /* @__PURE__ */ React.createElement("a", { href: "https://tina.io/docs/r/what-is-tinacloud/", target: "_blank" }, "You are in local mode"));
 };
 const BillingWarning = () => {
   var _a2;
@@ -45987,7 +46464,7 @@ function formatDistanceToNow(dirtyDate, options) {
   requiredArgs(1, arguments);
   return formatDistance2(dirtyDate, Date.now(), options);
 }
-const version$1 = "2.9.1";
+const version$1 = "2.9.4";
 const VersionInfo = () => {
   var _a2, _b, _c, _d, _e, _f;
   const cms = useCMS();
@@ -46223,7 +46700,7 @@ const Nav = ({
         toggleMenu();
       }
     },
-    /* @__PURE__ */ React.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
+    /* @__PURE__ */ React.createElement(BiMenu, { className: "h-8 w-auto text-gray-600" })
   )), /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -46244,8 +46721,8 @@ const Nav = ({
           toggleMenu();
         }
       },
-      /* @__PURE__ */ React.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
-    ), /* @__PURE__ */ React.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800/80 flex-1 gap-1" }, /* @__PURE__ */ React.createElement(TinaIcon, { className: "w-10 h-auto -ml-1 fill-orange-500" }), /* @__PURE__ */ React.createElement("span", null, "TinaCMS"))),
+      /* @__PURE__ */ React.createElement(BiMenu, { className: "h-8 w-auto text-gray-600" })
+    ), /* @__PURE__ */ React.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800/80 flex-1 gap-1" }, /* @__PURE__ */ React.createElement(TinaExtendedIcon, { className: "h-8 w-auto fill-orange-500" }))),
     children,
     /* @__PURE__ */ React.createElement("div", { className: "flex flex-col px-6 flex-1 overflow-auto" }, showCollections && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "flex space-x-1 justify-items-start uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, /* @__PURE__ */ React.createElement("span", null, "Collections"), isLocalMode && /* @__PURE__ */ React.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(
       "a",
@@ -46495,60 +46972,6 @@ function BreadcrumbEllipsis({
     /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "More")
   );
 }
-function DropdownMenu({
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Trigger,
-    {
-      "data-slot": "dropdown-menu-trigger",
-      ...props
-    }
-  );
-}
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Content,
-    {
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground 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 z-base max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-        className
-      ),
-      ...props
-    }
-  ));
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
 const Item = ({
   item,
   depth,
@@ -46817,7 +47240,6 @@ const FormBreadcrumbs = ({
     DropdownMenuItem,
     {
       key: breadcrumb.formId,
-      className: "cursor-pointer text-gray-700 hover:text-blue-500",
       onClick: (e3) => {
         e3.preventDefault();
         goBack(breadcrumb.formId, breadcrumb.formName);
@@ -47145,7 +47567,7 @@ const updateBodyDisplacement = ({
 };
 const SidebarHeader = ({ isLocalMode }) => {
   const { toggleSidebarOpen, toggleMenu } = React.useContext(SidebarContext);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "p-2 flex-grow-0 w-full" }, !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "p-2 flex-grow-0 w-full" }, !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex overflow-hidden py-1" }, /* @__PURE__ */ React.createElement(
     "button",
     {
       className: "p-2 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded",
@@ -47153,8 +47575,8 @@ const SidebarHeader = ({ isLocalMode }) => {
       title: "Open navigation menu",
       "aria-label": "Open navigation menu"
     },
-    /* @__PURE__ */ React.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
-  ), /* @__PURE__ */ React.createElement(BranchButton, null), /* @__PURE__ */ React.createElement("div", { className: "px-4" }, /* @__PURE__ */ React.createElement(LocalWarning, null))), /* @__PURE__ */ React.createElement("div", { className: "flex" }, /* @__PURE__ */ React.createElement(BranchPreviewButton, null), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(BiMenu, { className: "h-8 w-auto text-gray-600" })
+  ), /* @__PURE__ */ React.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500 mr-2" }), /* @__PURE__ */ React.createElement(BranchButton, { className: "overflow-hidden mr-2" }), /* @__PURE__ */ React.createElement(LocalWarning, { className: "px-4" })), /* @__PURE__ */ React.createElement("div", { className: "flex" }, /* @__PURE__ */ React.createElement(BranchPreviewButton, null), /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
@@ -47679,21 +48101,10 @@ const parseUrlsInText = (text) => {
 };
 function Alerts2({ alerts }) {
   useSubscribable(alerts);
-  if (!alerts.all.length) {
+  if (alerts.all.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "fixed bottom-0 left-0 right-0 p-6 flex flex-col items-center z-[999999]" }, alerts.all.filter((alert) => {
-    return alert.level !== "error";
-  }).map((alert) => {
-    return /* @__PURE__ */ React__default.createElement(Alert, { key: alert.id, level: alert.level }, alert.level === "info" && /* @__PURE__ */ React__default.createElement(MdInfo, { className: "w-5 h-auto opacity-70" }), alert.level === "success" && /* @__PURE__ */ React__default.createElement(MdCheckCircle, { className: "w-5 h-auto opacity-70" }), alert.level === "warn" && /* @__PURE__ */ React__default.createElement(MdWarning, { className: "w-5 h-auto opacity-70" }), /* @__PURE__ */ React__default.createElement("p", { className: "m-0 flex-1 max-w-[680px] text-left" }, parseUrlsInText(alert.message.toString())), /* @__PURE__ */ React__default.createElement(
-      CloseAlert,
-      {
-        onClick: () => {
-          alerts.dismiss(alert);
-        }
-      }
-    ));
-  })), alerts.all.filter((alert) => {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Toaster, null), alerts.all.filter((alert) => {
     return alert.level === "error";
   }).map((alert) => {
     const AlertMessage = typeof alert.message === "string" ? () => {
@@ -47721,51 +48132,6 @@ function Alerts2({ alerts }) {
     ))));
   }));
 }
-const Alert = ({
-  level,
-  ...props
-}) => {
-  const colorClasses = {
-    info: "bg-blue-100 border-blue-500 text-blue-600 fill-blue-500",
-    success: "bg-green-100 border-green-500 text-green-600 fill-green-500",
-    warn: "bg-yellow-100 border-yellow-500 text-yellow-600 fill-yellow-500",
-    error: "bg-red-100 border-red-500 text-red-600 fill-red-500"
-  };
-  const borderClasses = {
-    info: "border-blue-200",
-    success: "border-green-200",
-    warn: "border-yellow-200",
-    error: "border-red-200"
-  };
-  return /* @__PURE__ */ React__default.createElement(
-    "div",
-    {
-      className: `rounded shadow-lg font-normal cursor-pointer pointer-events-all text-sm transition-all duration-100 ease-out mb-4 max-w-full ${colorClasses[level]}}`,
-      style: {
-        animationName: "fly-in-up, fade-in",
-        animationTimingFunction: "ease-out",
-        animationIterationCount: 1,
-        animationFillMode: "both",
-        animationDuration: "150ms"
-      }
-    },
-    /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: `flex items-center gap-1.5 min-w-[350px] rounded-md border p-2 ${borderClasses[level]}`,
-        ...props
-      }
-    )
-  );
-};
-const CloseAlert = ({ ...styleProps }) => /* @__PURE__ */ React__default.createElement(
-  "button",
-  {
-    className: "border-none bg-transparent p-0 outline-none flex items-center",
-    ...styleProps
-  },
-  /* @__PURE__ */ React__default.createElement(BiX, { className: "w-5 auto flex-grow-0 flex-shrink-0" })
-);
 function CursorPaginator({
   navigateNext,
   navigatePrev,
@@ -48001,10 +48367,7 @@ const BranchModal = ({ close: close2 }) => {
     }
   ))));
 };
-const trimPrefix = (branchName) => {
-  return branchName.replace(/^tina\//, "");
-};
-const BranchButton = () => {
+const BranchButton = ({ className = "" }) => {
   const [open, setOpen] = React.useState(false);
   const { currentBranch } = useBranchData();
   const cms = useCMS();
@@ -48014,22 +48377,19 @@ const BranchButton = () => {
   }
   const isProtected = cms.api.tina.usingProtectedBranch();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "button",
+    Button$1,
     {
+      variant: "secondary",
+      size: "custom",
       className: cn(
-        `pointer-events-auto px-3 py-3 flex shrink gap-1 items-center justify-between form-select text-sm shadow transition-color duration-150 ease-out rounded-lg`,
-        `focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out `,
-        isProtected ? "text-white hover:text-blue-50 bg-blue-500 hover:bg-blue-400 border-0" : "text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-100"
+        "pointer-events-auto px-3 py-3 flex shrink gap-1 items-center justify-between",
+        className
       ),
-      onClick: () => setOpen(true)
+      onClick: () => setOpen(true),
+      title: currentBranch
     },
-    isProtected ? /* @__PURE__ */ React.createElement(BiLockAlt, { className: "flex-shrink-0 h-4 w-auto opacity-70 text-white" }) : /* @__PURE__ */ React.createElement(
-      BiGitBranch,
-      {
-        className: `flex-shrink-0 h-4 w-auto opacity-70 text-zinc-400`
-      }
-    ),
-    /* @__PURE__ */ React.createElement("span", { className: "truncate max-w-full -mr-1" }, trimPrefix(currentBranch)),
+    isProtected ? /* @__PURE__ */ React.createElement(BiLockAlt, { className: "flex-shrink-0 h-6 w-auto opacity-70" }) : /* @__PURE__ */ React.createElement(BiGitBranch, { className: "flex-shrink-0 h-6 w-auto opacity-70 text-zinc-400" }),
+    /* @__PURE__ */ React.createElement("span", { className: "truncate max-w-full -mr-1" }, currentBranch),
     /* @__PURE__ */ React.createElement(
       BiChevronDown,
       {
@@ -48059,7 +48419,7 @@ const BranchPreviewButton = (props) => {
       className: "p-2 text-gray-500 hover:text-blue-500 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded",
       ...props,
       onClick: () => {
-        window.open(previewUrl, "_blank");
+        window.open("", "_blank");
       },
       title: "Preview site in new tab"
     },
@@ -48067,6 +48427,18 @@ const BranchPreviewButton = (props) => {
     /* @__PURE__ */ React.createElement(BiLinkExternal, { className: "h-5 w-auto" })
   );
 };
+const EDITORIAL_WORKFLOW_STATUS = {
+  QUEUED: "queued",
+  PROCESSING: "processing",
+  SETTING_UP: "setting_up",
+  CREATING_BRANCH: "creating_branch",
+  INDEXING: "indexing",
+  CONTENT_GENERATION: "content_generation",
+  CREATING_PR: "creating_pr",
+  COMPLETE: "complete",
+  ERROR: "error",
+  TIMEOUT: "timeout"
+};
 const num123 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const numFas = ["۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹", "۰"];
 const numKor = ["０", "１", "２", "３", "４", "５", "６", "７", "８", "９"];
@@ -63480,367 +63852,6 @@ class TinaAdminApi {
     );
   }
 }
-const ProgressBar = ({
-  progress,
-  className = "",
-  color = "blue"
-}) => {
-  const clampedProgress = Math.min(Math.max(progress, 0), 100);
-  const colorClass = color === "green" ? "bg-green-500" : "bg-blue-500";
-  return /* @__PURE__ */ React.createElement("div", { className: `w-full ${className}` }, /* @__PURE__ */ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `${colorClass} h-2 rounded-full transition-all duration-300 ease-out`,
-      style: { width: `${clampedProgress}%` }
-    }
-  )));
-};
-const EDITORIAL_WORKFLOW_STATUS = {
-  QUEUED: "queued",
-  PROCESSING: "processing",
-  SETTING_UP: "setting_up",
-  CREATING_BRANCH: "creating_branch",
-  INDEXING: "indexing",
-  CONTENT_GENERATION: "content_generation",
-  CREATING_PR: "creating_pr",
-  COMPLETE: "complete",
-  ERROR: "error",
-  TIMEOUT: "timeout"
-};
-const FormActionMenu = ({ actions, form }) => {
-  const [actionMenuVisibility, setActionMenuVisibility] = useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MoreActionsButton, { onClick: () => setActionMenuVisibility((p2) => !p2) }), /* @__PURE__ */ React.createElement(ActionsOverlay, { open: actionMenuVisibility }, /* @__PURE__ */ React.createElement(
-    Dismissible,
-    {
-      click: true,
-      escape: true,
-      disabled: !actionMenuVisibility,
-      onDismiss: () => {
-        setActionMenuVisibility((p2) => !p2);
-      }
-    },
-    actions.map((Action, i2) => (
-      // TODO: `i` will suppress warnings but this indicates that maybe
-      //        Actions should just be componets
-      /* @__PURE__ */ React.createElement(Action, { form, key: i2 })
-    ))
-  )));
-};
-const MoreActionsButton = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
-  "button",
-  {
-    className: `h-16 w-10 self-stretch bg-transparent bg-center bg-[length:auto_18px] -mr-4 ml-2 outline-none cursor-pointer transition-opacity duration-100 ease-out flex justify-center items-center hover:bg-gray-50 hover:fill-gray-700 ${className}`,
-    ...props
-  },
-  /* @__PURE__ */ React.createElement(EllipsisVerticalIcon, null)
-);
-const ActionsOverlay = ({ open, className = "", style = {}, ...props }) => /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    className: `min-w-[192px] rounded-3xl border border-solid border-[#efefef] block absolute bottom-5 right-5 ${open ? "opacity-100" : "opacity-0"} transition-all duration-100 ease-out origin-bottom-right shadow-[0_2px_3px_rgba(0,0,0,0.05)] bg-white overflow-hidden z-10 ${className}`,
-    style: {
-      transform: open ? "translate3d(0, -28px, 0) scale3d(1, 1, 1)" : "translate3d(0, 0, 0) scale3d(0.5, 0.5, 1)",
-      pointerEvents: open ? "all" : "none",
-      ...style
-    },
-    ...props
-  }
-);
-const ActionButton = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
-  "button",
-  {
-    className: `relative text-center text-[13px] px-3 h-10 font-normal w-full bg-none cursor-pointer outline-none border-0 transition-all duration-[150ms] ease-out hover:text-blue-500 hover:bg-gray50 [&:not(:last-child)]: border-b-[1px] border-solid border-b-[#edecf3] ${className}`,
-    ...props
-  }
-);
-const FormPortalContext = React.createContext(() => {
-  return null;
-});
-function useFormPortal() {
-  return React.useContext(FormPortalContext);
-}
-const FormPortalProvider = ({
-  children
-}) => {
-  const wrapperRef = React.useRef(null);
-  const zIndexRef = React.useRef(0);
-  const FormPortal = React.useCallback(
-    (props) => {
-      if (!wrapperRef.current)
-        return null;
-      return createPortal(
-        props.children({ zIndexShift: zIndexRef.current += 1 }),
-        wrapperRef.current
-      );
-    },
-    [wrapperRef, zIndexRef]
-  );
-  return /* @__PURE__ */ React.createElement(FormPortalContext.Provider, { value: FormPortal }, /* @__PURE__ */ React.createElement("div", { ref: wrapperRef, className: "relative w-full flex-1 overflow-hidden" }, children));
-};
-const LoadingDots = ({
-  dotSize = 8,
-  color = "white"
-}) => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color }), /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color, delay: 0.3 }), /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color, delay: 0.5 }));
-};
-const SingleDot = ({ delay = 0, color, dotSize }) => /* @__PURE__ */ React.createElement(
-  "span",
-  {
-    className: "inline-block mr-1",
-    style: {
-      animation: "loading-dots-scale-up-and-down 2s linear infinite",
-      animationDelay: `${delay}s`,
-      background: color,
-      width: dotSize,
-      height: dotSize,
-      borderRadius: dotSize
-    }
-  }
-);
-const ResetForm = ({
-  pristine,
-  reset: reset2,
-  children,
-  ...props
-}) => {
-  const [open, setOpen] = React.useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Button$1,
-    {
-      onClick: () => {
-        setOpen((p2) => !p2);
-      },
-      disabled: pristine,
-      ...props
-    },
-    children
-  ), open && /* @__PURE__ */ React.createElement(ResetModal, { reset: reset2, close: () => setOpen(false) }));
-};
-const ResetModal = ({ close: close2, reset: reset2 }) => {
-  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",
-      onClick: async () => {
-        await reset2();
-        close2();
-      }
-    },
-    "Reset"
-  ))));
-};
-const NoFieldsPlaceholder = () => /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    className: "relative flex flex-col items-center justify-center text-center p-5 pb-16 w-full h-full overflow-y-auto",
-    style: {
-      animationName: "fade-in",
-      animationDelay: "300ms",
-      animationTimingFunction: "ease-out",
-      animationIterationCount: 1,
-      animationFillMode: "both",
-      animationDuration: "150ms"
-    }
-  },
-  /* @__PURE__ */ React.createElement(Emoji, { className: "block pb-5" }, "🤔"),
-  /* @__PURE__ */ React.createElement("h3", { className: "font-sans font-normal text-lg block pb-5" }, "Hey, you don't have any fields added to this form."),
-  /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, /* @__PURE__ */ React.createElement(
-    "a",
-    {
-      className: "text-center rounded-3xl border border-solid border-gray-100 shadow-[0_2px_3px_rgba(0,0,0,0.12)] font-normal cursor-pointer text-[12px] transition-all duration-100 ease-out bg-white text-gray-700 py-3 pr-5 pl-14 relative no-underline inline-block hover:text-blue-500",
-      href: "https://tinacms.org/docs/fields",
-      target: "_blank",
-      rel: "noopener noreferrer"
-    },
-    /* @__PURE__ */ React.createElement(
-      Emoji,
-      {
-        className: "absolute left-5 top-1/2 origin-center -translate-y-1/2 transition-all duration-100 ease-out",
-        style: { fontSize: 24 }
-      },
-      "📖"
-    ),
-    " ",
-    "Field Setup Guide"
-  ))
-);
-const FormKeyBindings = ({ onSubmit }) => {
-  useEffect(() => {
-    const handleKeyDown = (e3) => {
-      if ((e3.metaKey || e3.ctrlKey) && e3.key === "s") {
-        e3.preventDefault();
-        onSubmit();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [onSubmit]);
-  return null;
-};
-const FormBuilder = ({
-  form,
-  onPristineChange,
-  ...rest
-}) => {
-  const cms = useCMS$1();
-  const hideFooter = !!rest.hideFooter;
-  const [createBranchModalOpen, setCreateBranchModalOpen] = React.useState(false);
-  const tinaForm = form.tinaForm;
-  const finalForm = form.tinaForm.finalForm;
-  React.useEffect(() => {
-    var _a2;
-    const collection = cms.api.tina.schema.getCollectionByFullPath(
-      tinaForm.path
-    );
-    if ((_a2 = collection == null ? void 0 : collection.ui) == null ? void 0 : _a2.beforeSubmit) {
-      tinaForm.beforeSubmit = (values) => collection.ui.beforeSubmit({ cms, form: tinaForm, values });
-    } else {
-      tinaForm.beforeSubmit = void 0;
-    }
-  }, [tinaForm.path]);
-  const moveArrayItem = React.useCallback(
-    (result) => {
-      if (!result.destination || !finalForm)
-        return;
-      const name = result.type;
-      finalForm.mutators.move(
-        name,
-        result.source.index,
-        result.destination.index
-      );
-    },
-    [tinaForm]
-  );
-  React.useEffect(() => {
-    const unsubscribe = finalForm.subscribe(
-      ({ pristine }) => {
-        if (onPristineChange) {
-          onPristineChange(pristine);
-        }
-      },
-      { pristine: true }
-    );
-    return () => {
-      unsubscribe();
-    };
-  }, [finalForm]);
-  const fieldGroup = tinaForm.getActiveField(form.activeFieldName);
-  return /* @__PURE__ */ React.createElement(
-    Form$1,
-    {
-      key: tinaForm.id,
-      form: tinaForm.finalForm,
-      onSubmit: tinaForm.onSubmit
-    },
-    ({
-      handleSubmit,
-      pristine,
-      invalid,
-      submitting,
-      dirtySinceLastSubmit,
-      hasValidationErrors
-    }) => {
-      const usingProtectedBranch = cms.api.tina.usingProtectedBranch();
-      const canSubmit = !pristine && !submitting && !hasValidationErrors && !(invalid && !dirtySinceLastSubmit);
-      const safeSubmit = async () => {
-        if (canSubmit) {
-          await handleSubmit();
-        }
-      };
-      const safeHandleSubmit = async () => {
-        if (usingProtectedBranch) {
-          setCreateBranchModalOpen(true);
-        } else {
-          safeSubmit();
-        }
-      };
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, createBranchModalOpen && /* @__PURE__ */ React.createElement(
-        CreateBranchModal,
-        {
-          safeSubmit,
-          crudType: tinaForm.crudType,
-          path: tinaForm.path,
-          values: tinaForm.values,
-          close: () => setCreateBranchModalOpen(false)
-        }
-      ), /* @__PURE__ */ React.createElement(DragDropContext, { onDragEnd: moveArrayItem }, /* @__PURE__ */ React.createElement(FormKeyBindings, { onSubmit: safeHandleSubmit }), /* @__PURE__ */ React.createElement(FormPortalProvider, null, /* @__PURE__ */ React.createElement(FormWrapper, { id: tinaForm.id }, (tinaForm == null ? void 0 : tinaForm.fields.length) ? /* @__PURE__ */ React.createElement(
-        FieldsBuilder,
-        {
-          form: tinaForm,
-          activeFieldName: form.activeFieldName,
-          fields: fieldGroup.fields
-        }
-      ) : /* @__PURE__ */ React.createElement(NoFieldsPlaceholder, null))), !hideFooter && /* @__PURE__ */ React.createElement("div", { className: "relative flex-none w-full h-16 px-6 bg-white border-t border-gray-100 flex items-center justify-end" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 w-full justify-end gap-2	flex items-center max-w-form" }, tinaForm.reset && /* @__PURE__ */ React.createElement(
-        ResetForm,
-        {
-          pristine,
-          reset: async () => {
-            finalForm.reset();
-            await tinaForm.reset();
-          }
-        },
-        tinaForm.buttons.reset
-      ), /* @__PURE__ */ React.createElement(
-        Button$1,
-        {
-          onClick: safeHandleSubmit,
-          disabled: !canSubmit,
-          busy: submitting,
-          variant: "primary"
-        },
-        submitting && /* @__PURE__ */ React.createElement(LoadingDots, null),
-        !submitting && tinaForm.buttons.save
-      ), tinaForm.actions.length > 0 && /* @__PURE__ */ React.createElement(
-        FormActionMenu,
-        {
-          form: tinaForm,
-          actions: tinaForm.actions
-        }
-      )))));
-    }
-  );
-};
-const FormStatus = ({ pristine }) => {
-  const pristineClass = pristine ? "text-green-500" : "text-red-500";
-  return /* @__PURE__ */ React.createElement(FaCircle, { className: cn("h-3", pristineClass) });
-};
-const FormWrapper = ({
-  id: id2,
-  children
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-test": `form:${id2 == null ? void 0 : id2.replace(/\\/g, "/")}`,
-      className: "h-full overflow-y-auto max-h-full bg-gray-50"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "py-5 px-6" }, children)
-  );
-};
-const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
-  "span",
-  {
-    className: `text-[40px] leading-none inline-block ${className}`,
-    ...props
-  }
-);
-const CreateBranchModel = ({
-  close: close2,
-  safeSubmit,
-  relativePath: relativePath2,
-  values,
-  crudType
-}) => /* @__PURE__ */ React.createElement(
-  CreateBranchModal,
-  {
-    close: close2,
-    safeSubmit,
-    path: relativePath2,
-    values,
-    crudType
-  }
-);
 const pathRelativeToCollection = (collectionPath, fullPath) => {
   const normalizedCollectionPath = collectionPath.replace(/\\/g, "/");
   const normalizedFullPath = fullPath.replace(/\\/g, "/");
@@ -63869,7 +63880,6 @@ const CreateBranchModal = ({
   const [isExecuting, setIsExecuting] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState("");
   const [currentStep, setCurrentStep] = React.useState(0);
-  const [statusMessage, setStatusMessage] = React.useState("");
   const [elapsedTime, setElapsedTime] = React.useState(0);
   React.useEffect(() => {
     let interval;
@@ -63913,7 +63923,6 @@ const CreateBranchModal = ({
       setDisabled(true);
       setIsExecuting(true);
       setCurrentStep(1);
-      setStatusMessage("Initializing workflow...");
       let graphql2 = "";
       if (crudType === "create") {
         graphql2 = CREATE_DOCUMENT_GQL;
@@ -63938,8 +63947,6 @@ const CreateBranchModal = ({
           }
         },
         onStatusUpdate: (status) => {
-          const message = status.message || `Status: ${status.status}`;
-          setStatusMessage(message);
           switch (status.status) {
             case EDITORIAL_WORKFLOW_STATUS.SETTING_UP:
             case EDITORIAL_WORKFLOW_STATUS.CREATING_BRANCH:
@@ -63976,9 +63983,7 @@ const CreateBranchModal = ({
     }
   };
   const renderProgressIndicator = () => {
-    var _a2;
-    const progressPercentage = (currentStep - 1) / steps.length * 100;
-    return /* @__PURE__ */ React.createElement("div", { className: "py-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between mb-4 relative px-5 sm:gap-x-8" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between my-8 relative px-5 sm:gap-x-8" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "absolute top-5 h-0.5 bg-gray-200 -z-10",
@@ -63987,7 +63992,7 @@ const CreateBranchModal = ({
     ), currentStep > 1 && currentStep <= steps.length && /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: "absolute top-5 h-0.5 bg-blue-500 -z-10 transition-all duration-500",
+        className: "absolute top-5 h-0.5 bg-tina-orange -z-10 transition-all duration-500",
         style: {
           left: "50px",
           width: `calc((100% - 100px) * ${(currentStep - 1) / (steps.length - 1)})`
@@ -64015,7 +64020,7 @@ const CreateBranchModal = ({
         /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: `w-10 h-10 rounded-full flex items-center justify-center font-medium mb-3 border-2 transition-all duration-300 ${isCompleted ? "bg-green-500 border-green-500 text-white" : isActive ? "bg-blue-500 border-blue-500 text-white" : "bg-white border-gray-200 text-gray-400"}`
+            className: `w-10 h-10 rounded-full flex items-center justify-center font-medium mb-3 border-2 transition-all duration-300 select-none ${isCompleted ? "bg-green-500 border-green-500 text-white" : isActive ? "bg-tina-orange border-tina-orange text-white" : "bg-white border-gray-200 text-gray-400"}`
           },
           isCompleted ? /* @__PURE__ */ React.createElement(
             "svg",
@@ -64034,15 +64039,9 @@ const CreateBranchModal = ({
             )
           ) : isActive ? /* @__PURE__ */ React.createElement(AiOutlineLoading, { className: "animate-spin text-lg" }) : stepNumber
         ),
-        /* @__PURE__ */ React.createElement("div", { className: "text-center max-w-24" }, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `text-sm font-semibold leading-tight ${isActive ? "text-blue-600" : isCompleted ? "text-green-600" : "text-gray-400"}`
-          },
-          step.name
-        ), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-400 mt-1 leading-tight" }, step.description))
+        /* @__PURE__ */ React.createElement("div", { className: "text-center max-w-24" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-semibold leading-tight" }, step.name), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-400 mt-1 leading-tight" }, step.description))
       );
-    })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-medium text-gray-700" }, "Step ", currentStep > steps.length ? steps.length : currentStep, " of", " ", steps.length), isExecuting && currentStep > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500" }, /* @__PURE__ */ React.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React.createElement(
+    })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500" }, "Estimated time: 1-2 min "), isExecuting && currentStep > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500" }, /* @__PURE__ */ React.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -64050,37 +64049,23 @@ const CreateBranchModal = ({
         clipRule: "evenodd"
       }
     )), formatTime(elapsedTime))), /* @__PURE__ */ React.createElement(
-      ProgressBar,
-      {
-        progress: progressPercentage,
-        className: "mb-4",
-        color: currentStep > steps.length ? "green" : "blue"
-      }
-    ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 mb-2" }, currentStep >= 4 ? /* @__PURE__ */ React.createElement(
-      "svg",
+      "a",
       {
-        className: "w-4 h-4 text-green-500",
-        fill: "currentColor",
-        viewBox: "0 0 20 20"
+        className: "underline text-tina-orange-dark font-medium text-xs",
+        href: "https://tina.io/docs/tinacloud/editorial-workflow",
+        target: "_blank"
       },
-      /* @__PURE__ */ React.createElement(
-        "path",
-        {
-          fillRule: "evenodd",
-          d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-          clipRule: "evenodd"
-        }
-      )
-    ) : /* @__PURE__ */ React.createElement(AiOutlineLoading, { className: "text-blue-500 animate-spin" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-gray-700" }, statusMessage || `${(_a2 = steps[currentStep - 1]) == null ? void 0 : _a2.name}...`)), /* @__PURE__ */ React.createElement("div", { className: "text-left" }, /* @__PURE__ */ React.createElement("p", { className: "text-xs text-gray-500" }, "Estimated time: 1-2 minutes")));
+      "Learn more about Editorial Workflow"
+    ));
   };
   const renderStateContent = () => {
     if (isExecuting) {
       return renderProgressIndicator();
     } else {
-      return /* @__PURE__ */ React.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-red-700 py-2 px-3 mb-4 bg-red-50 border border-red-200 rounded" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-700 mb-4 max-w-sm" }, "To make changes, you need to create a copy then get it approved and merged for it to go live. Learn more about", " ", /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-red-700 py-2 px-3 mb-4 bg-red-50 border border-red-200 rounded" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-700 mb-4 max-w-sm" }, "To make changes, you need to create a copy then get it approved and merged for it to go live.", /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("span", { className: "text-gray-500" }, "Learn more about "), /* @__PURE__ */ React.createElement(
         "a",
         {
-          className: "underline hover:text-tina-orange",
+          className: "underline text-tina-orange-dark font-medium",
           href: "https://tina.io/docs/tinacloud/editorial-workflow",
           target: "_blank"
         },
@@ -64088,54 +64073,273 @@ const CreateBranchModal = ({
       ), "."), /* @__PURE__ */ React.createElement(
         PrefixedTextField,
         {
+          name: "new-branch-name",
+          label: "Branch Name",
           placeholder: "e.g. {{PAGE-NAME}}-updates",
           value: newBranchName,
           onChange: (e3) => {
             setErrorMessage("");
-            setStatusMessage("");
             setNewBranchName(e3.target.value);
           }
         }
       ));
     }
   };
-  return /* @__PURE__ */ React.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React.createElement(ModalHeader, { close: isExecuting ? void 0 : close2 }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(BiGitBranch, { className: "w-6 h-auto mr-1 text-blue-500 opacity-70" }), "Create Branch"))), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, renderStateContent()), !isExecuting && /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 1 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
-    Button$1,
+  return /* @__PURE__ */ React.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React.createElement(ModalHeader, { close: isExecuting ? void 0 : close2 }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, "Save changes to new branch"))), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, renderStateContent()), !isExecuting && /* @__PURE__ */ React.createElement(ModalActions, { align: "end" }, /* @__PURE__ */ React.createElement(Button$1, { variant: "secondary", className: "w-full sm:w-auto" }, "Cancel"), /* @__PURE__ */ React.createElement(
+    DropdownButton,
     {
       variant: "primary",
-      style: { flexGrow: 2 },
+      align: "start",
+      className: "w-full sm:w-auto",
       disabled: newBranchName === "" || disabled,
-      onClick: executeEditorialWorkflow
-    },
-    "Continue"
-  ), /* @__PURE__ */ React.createElement(
-    OverflowMenu$1,
-    {
-      className: "-ml-2",
-      toolbarItems: [
+      onMainAction: executeEditorialWorkflow,
+      items: [
         {
-          name: "override",
           label: "Save to Protected Branch",
-          Icon: /* @__PURE__ */ React.createElement(MdOutlineSaveAlt, { size: "1rem" }),
-          onMouseDown: () => {
+          onClick: () => {
             close2();
             safeSubmit();
-          }
+          },
+          icon: /* @__PURE__ */ React.createElement(TriangleAlert, { className: "w-4 h-4" })
         }
       ]
-    }
+    },
+    /* @__PURE__ */ React.createElement(
+      GitBranchIcon,
+      {
+        className: "w-4 h-4 mr-1",
+        style: { fill: "none" }
+      }
+    ),
+    "Save to a new branch"
   ))));
 };
-const PrefixedTextField = ({ prefix = "tina/", ...props }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "border border-gray-200 focus-within:border-blue-200 bg-gray-100 focus-within:bg-blue-100 rounded shadow-sm focus-within:shadow-outline overflow-hidden flex items-stretch divide-x divide-gray-200 focus-within:divide-blue-100 w-full transition-all ease-out duration-150" }, /* @__PURE__ */ React.createElement("span", { className: "pl-3 pr-2 py-2 font-medium text-base text-gray-700 opacity-50" }, prefix), /* @__PURE__ */ React.createElement(
+const PrefixedTextField = ({
+  label = null,
+  prefix = "tina/",
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(FieldLabel, { name: props.name }, label), /* @__PURE__ */ React.createElement("div", { className: "border border-gray-200 focus-within:border-blue-200 bg-gray-100 focus-within:bg-blue-100 rounded shadow-sm focus-within:shadow-outline overflow-hidden flex items-stretch divide-x divide-gray-200 focus-within:divide-blue-100 w-full transition-all ease-out duration-150" }, /* @__PURE__ */ React.createElement("span", { className: "pl-3 pr-2 py-2 text-base text-tina-orange-dark bg-tina-orange-light" }, prefix), /* @__PURE__ */ React.createElement(
     "input",
     {
+      id: props.name,
       type: "text",
       className: "shadow-inner focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 flex-1 bg-white focus:text-gray-900",
       ...props
     }
-  ));
+  )));
+};
+const NoFieldsPlaceholder = () => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: "relative flex flex-col items-center justify-center text-center p-5 pb-16 w-full h-full overflow-y-auto",
+    style: {
+      animationName: "fade-in",
+      animationDelay: "300ms",
+      animationTimingFunction: "ease-out",
+      animationIterationCount: 1,
+      animationFillMode: "both",
+      animationDuration: "150ms"
+    }
+  },
+  /* @__PURE__ */ React.createElement(Emoji, { className: "block pb-5" }, "🤔"),
+  /* @__PURE__ */ React.createElement("h3", { className: "font-sans font-normal text-lg block pb-5" }, "Hey, you don't have any fields added to this form."),
+  /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      className: "text-center rounded-3xl border border-solid border-gray-100 shadow-[0_2px_3px_rgba(0,0,0,0.12)] font-normal cursor-pointer text-[12px] transition-all duration-100 ease-out bg-white text-gray-700 py-3 pr-5 pl-14 relative no-underline inline-block hover:text-blue-500",
+      href: "https://tinacms.org/docs/fields",
+      target: "_blank",
+      rel: "noopener noreferrer"
+    },
+    /* @__PURE__ */ React.createElement(
+      Emoji,
+      {
+        className: "absolute left-5 top-1/2 origin-center -translate-y-1/2 transition-all duration-100 ease-out",
+        style: { fontSize: 24 }
+      },
+      "📖"
+    ),
+    " ",
+    "Field Setup Guide"
+  ))
+);
+const FormKeyBindings = ({ onSubmit }) => {
+  useEffect(() => {
+    const handleKeyDown = (e3) => {
+      if ((e3.metaKey || e3.ctrlKey) && e3.key === "s") {
+        e3.preventDefault();
+        onSubmit();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onSubmit]);
+  return null;
 };
+const FormBuilder = ({
+  form,
+  onPristineChange,
+  ...rest
+}) => {
+  const cms = useCMS$1();
+  const hideFooter = !!rest.hideFooter;
+  const [createBranchModalOpen, setCreateBranchModalOpen] = React.useState(false);
+  const tinaForm = form.tinaForm;
+  const finalForm = form.tinaForm.finalForm;
+  React.useEffect(() => {
+    var _a2;
+    const collection = cms.api.tina.schema.getCollectionByFullPath(
+      tinaForm.path
+    );
+    if ((_a2 = collection == null ? void 0 : collection.ui) == null ? void 0 : _a2.beforeSubmit) {
+      tinaForm.beforeSubmit = (values) => collection.ui.beforeSubmit({ cms, form: tinaForm, values });
+    } else {
+      tinaForm.beforeSubmit = void 0;
+    }
+  }, [tinaForm.path]);
+  const moveArrayItem = React.useCallback(
+    (result) => {
+      if (!result.destination || !finalForm)
+        return;
+      const name = result.type;
+      finalForm.mutators.move(
+        name,
+        result.source.index,
+        result.destination.index
+      );
+    },
+    [tinaForm]
+  );
+  React.useEffect(() => {
+    const unsubscribe = finalForm.subscribe(
+      ({ pristine }) => {
+        if (onPristineChange) {
+          onPristineChange(pristine);
+        }
+      },
+      { pristine: true }
+    );
+    return () => {
+      unsubscribe();
+    };
+  }, [finalForm]);
+  const fieldGroup = tinaForm.getActiveField(form.activeFieldName);
+  return /* @__PURE__ */ React.createElement(
+    Form$1,
+    {
+      key: tinaForm.id,
+      form: tinaForm.finalForm,
+      onSubmit: tinaForm.onSubmit
+    },
+    ({
+      handleSubmit,
+      pristine,
+      invalid,
+      submitting,
+      dirtySinceLastSubmit,
+      hasValidationErrors
+    }) => {
+      const usingProtectedBranch = cms.api.tina.usingProtectedBranch();
+      const canSubmit = !pristine && !submitting && !hasValidationErrors && !(invalid && !dirtySinceLastSubmit);
+      const safeSubmit = async () => {
+        if (canSubmit) {
+          await handleSubmit();
+        }
+      };
+      const safeHandleSubmit = async () => {
+        if (usingProtectedBranch) {
+          setCreateBranchModalOpen(true);
+        } else {
+          safeSubmit();
+        }
+      };
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, createBranchModalOpen && /* @__PURE__ */ React.createElement(
+        CreateBranchModal,
+        {
+          safeSubmit,
+          crudType: tinaForm.crudType,
+          path: tinaForm.path,
+          values: tinaForm.values,
+          close: () => setCreateBranchModalOpen(false)
+        }
+      ), /* @__PURE__ */ React.createElement(DragDropContext, { onDragEnd: moveArrayItem }, /* @__PURE__ */ React.createElement(FormKeyBindings, { onSubmit: safeHandleSubmit }), /* @__PURE__ */ React.createElement(FormPortalProvider, null, /* @__PURE__ */ React.createElement(FormWrapper, { id: tinaForm.id }, (tinaForm == null ? void 0 : tinaForm.fields.length) ? /* @__PURE__ */ React.createElement(
+        FieldsBuilder,
+        {
+          form: tinaForm,
+          activeFieldName: form.activeFieldName,
+          fields: fieldGroup.fields
+        }
+      ) : /* @__PURE__ */ React.createElement(NoFieldsPlaceholder, null))), !hideFooter && /* @__PURE__ */ React.createElement("div", { className: "relative flex-none w-full h-16 px-6 bg-white border-t border-gray-100 flex items-center justify-end" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 w-full justify-end gap-2	flex items-center max-w-form" }, tinaForm.reset && /* @__PURE__ */ React.createElement(
+        ResetForm,
+        {
+          pristine,
+          reset: async () => {
+            finalForm.reset();
+            await tinaForm.reset();
+          }
+        },
+        tinaForm.buttons.reset
+      ), /* @__PURE__ */ React.createElement(
+        Button$1,
+        {
+          onClick: safeHandleSubmit,
+          disabled: !canSubmit,
+          busy: submitting,
+          variant: "primary"
+        },
+        submitting && /* @__PURE__ */ React.createElement(LoadingDots, null),
+        !submitting && tinaForm.buttons.save
+      ), tinaForm.actions.length > 0 && /* @__PURE__ */ React.createElement(
+        FormActionMenu,
+        {
+          form: tinaForm,
+          actions: tinaForm.actions
+        }
+      )))));
+    }
+  );
+};
+const FormStatus = ({ pristine }) => {
+  const pristineClass = pristine ? "text-green-500" : "text-red-500";
+  return /* @__PURE__ */ React.createElement(FaCircle, { className: cn("h-3", pristineClass) });
+};
+const FormWrapper = ({
+  id: id2,
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-test": `form:${id2 == null ? void 0 : id2.replace(/\\/g, "/")}`,
+      className: "h-full overflow-y-auto max-h-full bg-gray-50"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "py-5 px-6" }, children)
+  );
+};
+const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
+  "span",
+  {
+    className: `text-[40px] leading-none inline-block ${className}`,
+    ...props
+  }
+);
+const CreateBranchModel = ({
+  close: close2,
+  safeSubmit,
+  relativePath: relativePath2,
+  values,
+  crudType
+}) => /* @__PURE__ */ React.createElement(
+  CreateBranchModal,
+  {
+    close: close2,
+    safeSubmit,
+    path: relativePath2,
+    values,
+    crudType
+  }
+);
 const NestedForm = (props) => {
   const FormPortal = useFormPortal();
   const id2 = React__default.useMemo(() => uuid(), [props.id, props.initialValues]);
@@ -65470,9 +65674,9 @@ const editorVariants = cva(
         ai: "w-full px-0 text-base md:text-sm",
         aiChat: "max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm",
         comment: cn$2("rounded-none border-none bg-transparent text-sm"),
-        default: "size-full px-16 pt-2 text-base sm:px-[max(24px,calc(50%-350px))]",
-        demo: "size-full px-16 pt-2 text-base sm:px-[max(24px,calc(50%-350px))]",
-        fullWidth: "size-full px-16 pt-4 pb-72 text-base sm:px-12",
+        default: "size-full px-2 sm:px-4 pt-2 text-base",
+        demo: "size-full px-2 sm:px-4 pt-2 text-base h-[650px]",
+        fullWidth: "size-full px-2 sm:px-4 pt-4 pb-72 text-base",
         none: "",
         select: "px-3 py-2 text-base data-readonly:w-fit"
       }
@@ -65904,7 +66108,7 @@ const EmbedButton = ({ editor, templates }) => {
       className: "w-full p-2 border border-gray-300 rounded",
       onChange: filterChange
     }
-  ), /* @__PURE__ */ React__default.createElement(DropdownMenuSeparator, null), filteredTemplates.map((template) => /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React__default.createElement(DropdownMenuSeparator$1, null), filteredTemplates.map((template) => /* @__PURE__ */ React__default.createElement(
     DropdownMenuItem$1,
     {
       key: template.name,
@@ -119276,7 +119480,7 @@ class LocalSearchClient {
   }
 }
 function ModalBuilder(modalProps) {
-  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(ModalPopup, null, /* @__PURE__ */ React__default.createElement(ModalHeader, null, /* @__PURE__ */ React__default.createElement(TinaIcon, { className: "w-10 h-auto -ml-1 mr-1 my-1 fill-orange-500" }), modalProps.title), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, modalProps.message && (typeof modalProps.message === "string" ? /* @__PURE__ */ React__default.createElement("p", null, modalProps.message) : modalProps.message), modalProps.error && /* @__PURE__ */ React__default.createElement(ErrorLabel, null, modalProps.error), modalProps.children), /* @__PURE__ */ React__default.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React__default.createElement(AsyncButton, { key: action.name, ...action })))));
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(ModalPopup, null, /* @__PURE__ */ React__default.createElement(ModalHeader, null, modalProps.title), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, modalProps.message && (typeof modalProps.message === "string" ? /* @__PURE__ */ React__default.createElement("p", null, modalProps.message) : modalProps.message), modalProps.error && /* @__PURE__ */ React__default.createElement(ErrorLabel, null, modalProps.error), modalProps.children), /* @__PURE__ */ React__default.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React__default.createElement(AsyncButton, { key: action.name, ...action })))));
 }
 const ErrorLabel = ({ style = {}, ...props }) => /* @__PURE__ */ React__default.createElement("p", { style: { ...style, color: "var(--tina-color-error)" }, ...props });
 const AsyncButton = ({ name, primary, action }) => {
@@ -120490,7 +120694,7 @@ const PageWrapper = ({
   headerClassName,
   children
 }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React__default.createElement("div", { className: `py-2 pl-4 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React__default.createElement(BranchButton, null), /* @__PURE__ */ React__default.createElement(BranchPreviewButton, null))), children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React__default.createElement("div", { className: `py-2 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React__default.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React__default.createElement(BranchButton, null), /* @__PURE__ */ React__default.createElement(BranchPreviewButton, null))), children);
 };
 const PageHeader = ({
   children
@@ -120882,7 +121086,7 @@ const CollectionListPage = () => {
             },
             close: () => setFolderModalOpen(false)
           }
-        ), /* @__PURE__ */ React__default.createElement(PageHeader, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full" }, /* @__PURE__ */ React__default.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4 items-baseline" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !search && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React__default.createElement(
+        ), /* @__PURE__ */ React__default.createElement(PageHeader, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React__default.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4 items-baseline" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !search && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React__default.createElement(
           "label",
           {
             htmlFor: "sort",
@@ -120972,7 +121176,7 @@ const CollectionListPage = () => {
             },
             to: "/collections/new-folder",
             className: cn$1(
-              "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-blue-500 bg-white hover:bg-[#f1f5f9] focus:ring-white focus:ring-blue-500 w-full md:w-auto text-sm h-10 px-6 mr-4",
+              "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-gray-500 hover:tina-orange-dark bg-white hover:bg-gray-50 border border-gray-100 focus:ring-white focus:ring-tina-orange-dark w-full md:w-auto text-sm h-10 px-6 mr-4",
               collection.templates && "opacity-50 pointer-events-none cursor-not-allowed"
             ),
             "aria-disabled": !!collection.templates,
@@ -121010,7 +121214,7 @@ const CollectionListPage = () => {
               "new",
               collectionName
             ].join("/")}`,
-            className: "inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-white bg-blue-500 hover:bg-blue-600 w-full md:w-auto text-sm h-10 px-6"
+            className: "inline-flex items-center font-medium focus:ring-2 focus:outline-none focus:ring-tina-orange-dark focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-white bg-tina-orange-dark hover:bg-tina-orange w-full md:w-auto text-sm h-10 px-6"
           },
           /* @__PURE__ */ React__default.createElement(FaFile, { className: "mr-2" }),
           "Add File"
@@ -122578,6 +122782,7 @@ export {
   Dismissible,
   DragHandle,
   DragIcon,
+  DropdownButton,
   DummyMediaStore,
   DuplicateIcon,
   EditIcon,
@@ -122707,6 +122912,7 @@ export {
   TinaCloudAuthProvider,
   TinaCloudAuthWall,
   TinaCloudProvider,
+  TinaExtendedIcon,
   TinaField,
   TinaForm,
   TinaIcon,