tinacms 2.9.3 → 2.9.4

package/dist/index.js

@@ -5,8 +5,8 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/cn"), require("@udecode/plate-heading"), require("is-hotkey"), require("clsx"), require("@radix-ui/react-slot"), require("@udecode/plate-code-block"), require("lucide-react"), require("mermaid"), require("class-variance-authority"), require("cmdk"), require("@radix-ui/react-dialog"), require("@radix-ui/react-popover"), require("@udecode/plate"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-reset-node"), require("@udecode/plate-list"), require("@udecode/plate-resizable"), require("@udecode/plate-dnd"), require("@udecode/plate-table"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-separator"), require("@radix-ui/react-tooltip"), require("final-form"), require("final-form-arrays"), require("final-form-set-field-data"), require("react-final-form"), require("prop-types"), require("react-color"), require("color-string"), require("tailwind-merge"), require("react-beautiful-dnd"), require("graphql"), require("@graphql-inspector/core"), require("react-dropzone"), require("@udecode/cmdk"), require("@headlessui/react"), require("@udecode/plate-trailing-block"), require("@udecode/plate-floating"), require("@udecode/plate-block-quote"), require("@udecode/plate-node-id"), require("@udecode/plate-link"), require("@udecode/plate-autoformat"), require("lodash.get"), require("moment"), require("date-fns"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/cn", "@udecode/plate-heading", "is-hotkey", "clsx", "@radix-ui/react-slot", "@udecode/plate-code-block", "lucide-react", "mermaid", "class-variance-authority", "cmdk", "@radix-ui/react-dialog", "@radix-ui/react-popover", "@udecode/plate", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-reset-node", "@udecode/plate-list", "@udecode/plate-resizable", "@udecode/plate-dnd", "@udecode/plate-table", "@radix-ui/react-dropdown-menu", "@radix-ui/react-toolbar", "@radix-ui/react-separator", "@radix-ui/react-tooltip", "final-form", "final-form-arrays", "final-form-set-field-data", "react-final-form", "prop-types", "react-color", "color-string", "tailwind-merge", "react-beautiful-dnd", "graphql", "@graphql-inspector/core", "react-dropzone", "@udecode/cmdk", "@headlessui/react", "@udecode/plate-trailing-block", "@udecode/plate-floating", "@udecode/plate-block-quote", "@udecode/plate-node-id", "@udecode/plate-link", "@udecode/plate-autoformat", "lodash.get", "moment", "date-fns", "@tinacms/schema-tools", "graphql-tag", "yup", "react-router-dom", "@tinacms/mdx"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.tinacms = {}, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP));
-})(this, function(exports2, zod, React, ReactDOM, cn$2, plateHeading, isHotkey, clsx, reactSlot, plateCodeBlock, lucideReact, mermaid, classVarianceAuthority, cmdk, DialogPrimitive, PopoverPrimitive, plate, react, plateCombobox, plateResetNode, plateList, plateResizable, plateDnd, plateTable, DropdownMenuPrimitive, ToolbarPrimitive, SeparatorPrimitive, TooltipPrimitive, finalForm, arrayMutators, setFieldData, reactFinalForm, PropTypes, pkg$1, pkg, tailwindMerge, reactBeautifulDnd, graphql$1, core$1, dropzone, cmdk$1, react$1, plateTrailingBlock, plateFloating, plateBlockQuote, plateNodeId, plateLink, plateAutoformat, get$5, moment, dateFns, schemaTools, gql, yup, reactRouterDom, mdx) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/cn"), require("@udecode/plate-heading"), require("is-hotkey"), require("clsx"), require("@radix-ui/react-slot"), require("@udecode/plate-code-block"), require("lucide-react"), require("mermaid"), require("class-variance-authority"), require("cmdk"), require("@radix-ui/react-dialog"), require("@radix-ui/react-popover"), require("@udecode/plate"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-reset-node"), require("@udecode/plate-list"), require("@udecode/plate-resizable"), require("@udecode/plate-dnd"), require("@udecode/plate-table"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-separator"), require("@radix-ui/react-tooltip"), require("final-form"), require("final-form-arrays"), require("final-form-set-field-data"), require("react-final-form"), require("prop-types"), require("tailwind-merge"), require("react-beautiful-dnd"), require("react-color"), require("color-string"), require("graphql"), require("@graphql-inspector/core"), require("react-dropzone"), require("@udecode/cmdk"), require("@headlessui/react"), require("@udecode/plate-trailing-block"), require("@udecode/plate-floating"), require("@udecode/plate-block-quote"), require("@udecode/plate-node-id"), require("@udecode/plate-link"), require("@udecode/plate-autoformat"), require("lodash.get"), require("moment"), require("date-fns"), require("dompurify"), require("sonner"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/cn", "@udecode/plate-heading", "is-hotkey", "clsx", "@radix-ui/react-slot", "@udecode/plate-code-block", "lucide-react", "mermaid", "class-variance-authority", "cmdk", "@radix-ui/react-dialog", "@radix-ui/react-popover", "@udecode/plate", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-reset-node", "@udecode/plate-list", "@udecode/plate-resizable", "@udecode/plate-dnd", "@udecode/plate-table", "@radix-ui/react-dropdown-menu", "@radix-ui/react-toolbar", "@radix-ui/react-separator", "@radix-ui/react-tooltip", "final-form", "final-form-arrays", "final-form-set-field-data", "react-final-form", "prop-types", "tailwind-merge", "react-beautiful-dnd", "react-color", "color-string", "graphql", "@graphql-inspector/core", "react-dropzone", "@udecode/cmdk", "@headlessui/react", "@udecode/plate-trailing-block", "@udecode/plate-floating", "@udecode/plate-block-quote", "@udecode/plate-node-id", "@udecode/plate-link", "@udecode/plate-autoformat", "lodash.get", "moment", "date-fns", "dompurify", "sonner", "@tinacms/schema-tools", "graphql-tag", "yup", "react-router-dom", "@tinacms/mdx"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.tinacms = {}, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP));
+})(this, function(exports2, zod, React, ReactDOM, cn$2, plateHeading, isHotkey, clsx, reactSlot, plateCodeBlock, lucideReact, mermaid, classVarianceAuthority, cmdk, DialogPrimitive, PopoverPrimitive, plate, react, plateCombobox, plateResetNode, plateList, plateResizable, plateDnd, plateTable, DropdownMenuPrimitive, ToolbarPrimitive, SeparatorPrimitive, TooltipPrimitive, finalForm, arrayMutators, setFieldData, reactFinalForm, PropTypes, tailwindMerge, reactBeautifulDnd, pkg$1, pkg, graphql$1, core$1, dropzone, cmdk$1, react$1, plateTrailingBlock, plateFloating, plateBlockQuote, plateNodeId, plateLink, plateAutoformat, get$5, moment, dateFns, DOMPurify, sonner, schemaTools, gql, yup, reactRouterDom, mdx) {
   var _a;
   "use strict";
   function _interopNamespaceDefault(e3) {
@@ -38308,6 +38308,171 @@ Please wrap them with useCallback or configure the deps array correctly.`
     Component: PropTypes.any.isRequired,
     children: PropTypes.any
   };
+  function cn$1(...inputs) {
+    return tailwindMerge.twMerge(clsx.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__namespace.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__namespace.createElement(
+      "button",
+      {
+        className: cn$1(
+          baseClasses,
+          variantClasses[variant],
+          sizeClasses[size2],
+          stateClasses[state],
+          className
+        ),
+        ...props
+      },
+      children
+    );
+  };
+  function FontLoader() {
+    React__namespace.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] = React.useState(false);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, toolbarItems2.length > 0 && /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(
+      PopoverPrimitive__namespace.Trigger,
+      {
+        className: `cursor-pointer relative justify-center inline-flex items-center p-3 text-sm font-medium focus:outline-1 focus:outline-blue-200 pointer-events-auto ${open ? `text-blue-400` : `text-gray-300 hover:text-blue-500`} ${className}}`
+      },
+      /* @__PURE__ */ React.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.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.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Content, { style: { zIndex: 2e4 }, align: "end" }, /* @__PURE__ */ React.createElement("div", { className: "mt-0 -mr-1 rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1" }, toolbarItems2.map((toolbarItem) => {
+      return /* @__PURE__ */ React.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.createElement("div", { className: "mr-2 opacity-80" }, toolbarItem.Icon),
+        " ",
+        toolbarItem.label
+      );
+    }))))));
+  };
   var DefaultContext = {
     color: void 0,
     size: void 0,
@@ -38549,30 +38714,270 @@ Please wrap them with useCallback or configure the deps array correctly.`
   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__namespace.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.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.createElement(
+      "div",
+      {
+        className: `rounded-lg border shadow-sm ${sizeClasses[size2]} ${containerClasses[type]} ${className}`
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+        MessageIcon,
+        {
+          type,
+          className: `${size2 === "small" ? "w-5" : "w-6"} h-auto flex-shrink-0 ${iconClasses[type]}`
+        }
+      ), /* @__PURE__ */ React.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children)), link && /* @__PURE__ */ React.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.createElement(BsArrowRightShort, { className: "w-4 h-auto" })
+      ))
+    );
+  };
+  function cn(...inputs) {
+    return tailwindMerge.twMerge(clsx.clsx(inputs));
+  }
+  function DropdownMenu({
+    ...props
+  }) {
+    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Root, { "data-slot": "dropdown-menu", ...props });
+  }
+  function DropdownMenuTrigger({
+    ...props
+  }) {
     return /* @__PURE__ */ React__namespace.createElement(
-      "input",
+      DropdownMenuPrimitive__namespace.Trigger,
       {
-        ref,
-        type: "text",
-        className: `${textFieldClasses} ${disabled ? disabledClasses$1 : ""} ${className}`,
-        ...rest
+        "data-slot": "dropdown-menu-trigger",
+        ...props
       }
     );
-  });
-  const TextArea = React__namespace.forwardRef(({ ...props }, ref) => {
+  }
+  function DropdownMenuContent({
+    className,
+    sideOffset = 4,
+    ...props
+  }) {
+    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Portal, null, /* @__PURE__ */ React__namespace.createElement(
+      DropdownMenuPrimitive__namespace.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__namespace.createElement(
-      "textarea",
+      DropdownMenuPrimitive__namespace.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__namespace.createElement(
+      DropdownMenuPrimitive__namespace.Separator,
+      {
+        "data-slot": "dropdown-menu-separator",
+        className: cn("bg-border -mx-1 my-1 h-px", className),
+        ...props
+      }
+    );
+  }
+  const DropdownButton = React__namespace.forwardRef(
+    ({
+      variant = "primary",
+      size: size2 = "medium",
+      busy,
+      disabled,
+      rounded = "full",
+      children,
+      className = "",
+      onMainAction,
+      items: items2,
+      showSplitButton = true,
+      ...props
+    }, ref) => {
+      const [open, setOpen] = React__namespace.useState(false);
+      if (!onMainAction || !showSplitButton) {
+        return /* @__PURE__ */ React__namespace.createElement(DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
+          Button$1,
+          {
+            variant,
+            size: size2,
+            busy,
+            disabled,
+            rounded,
+            className: cn$1("gap-2", className),
+            ...props
+          },
+          children,
+          /* @__PURE__ */ React__namespace.createElement(
+            lucideReact.ChevronDownIcon,
+            {
+              className: cn$1(
+                "h-4 w-4 transition-transform duration-200",
+                open && "rotate-180"
+              )
+            }
+          )
+        )), /* @__PURE__ */ React__namespace.createElement(DropdownMenuContent, { align: "end", side: "bottom", className: "z-[100000]" }, items2.map((item, index) => /* @__PURE__ */ React__namespace.createElement(
+          DropdownMenuItem,
+          {
+            key: index,
+            onClick: item.onClick,
+            disabled: item.disabled,
+            variant: item.variant
+          },
+          item.icon && item.icon,
+          item.label
+        ))));
+      }
+      return /* @__PURE__ */ React__namespace.createElement("div", { className: cn$1("inline-flex", className) }, /* @__PURE__ */ React__namespace.createElement(
+        Button$1,
+        {
+          variant,
+          size: size2,
+          busy,
+          disabled,
+          rounded: "left",
+          onClick: onMainAction,
+          className: "border-r-0 w-full",
+          ...props
+        },
+        children
+      ), /* @__PURE__ */ React__namespace.createElement(DropdownMenu, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__namespace.createElement(DropdownMenuTrigger, null, /* @__PURE__ */ React__namespace.createElement(
+        Button$1,
+        {
+          variant,
+          size: size2,
+          busy,
+          disabled,
+          rounded: "right",
+          className: "px-4 border-l",
+          style: { borderColor: "#00000030" },
+          "aria-label": "More options"
+        },
+        /* @__PURE__ */ React__namespace.createElement(
+          lucideReact.ChevronDownIcon,
+          {
+            className: cn$1(
+              "h-4 w-4 transition-transform duration-200 fill-none",
+              open && "rotate-180"
+            ),
+            style: { fill: "none" }
+          }
+        )
+      )), /* @__PURE__ */ React__namespace.createElement(DropdownMenuContent, { align: "end", side: "bottom" }, items2.map((item, index) => {
+        var _a2;
+        return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, { key: index }, /* @__PURE__ */ React__namespace.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__namespace.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,
@@ -38645,64 +39050,217 @@ Please wrap them with useCallback or configure the deps array correctly.`
     }, [click, customDocument, escape2, disabled, onDismiss]);
     return area;
   }
-  const { get: getColor, to: toColor } = pkg__namespace;
-  var ColorFormat = /* @__PURE__ */ ((ColorFormat2) => {
-    ColorFormat2["Hex"] = "hex";
-    ColorFormat2["RGB"] = "rgb";
-    return ColorFormat2;
-  })(ColorFormat || {});
-  const rgbToHex = function(color) {
-    return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
-  };
-  function ParseColorStr(color) {
-    if (!color) {
-      return null;
-    }
-    const colorDescriptor = getColor(color);
-    if (!colorDescriptor)
-      return null;
-    const colorVals = colorDescriptor.value;
-    return { r: colorVals[0], g: colorVals[1], b: colorVals[2], a: colorVals[3] };
-  }
-  const ColorFormatter = {
-    [
-      "rgb"
-      /* RGB */
-    ]: {
-      getLabel(color) {
-        return `R${color.r} G${color.g} B${color.b}`;
-      },
-      getValue(color) {
-        const colorVals = [color.r, color.g, color.b, color.a];
-        return toColor.rgb(colorVals);
-      },
-      parse: ParseColorStr
-    },
-    [
-      "hex"
-      /* Hex */
-    ]: {
-      getLabel(color) {
-        return rgbToHex(color);
-      },
-      getValue(color) {
-        const colorVals = [color.r, color.g, color.b, color.a];
-        return toColor.hex(colorVals);
+  const FormActionMenu = ({ actions, form }) => {
+    const [actionMenuVisibility, setActionMenuVisibility] = React.useState(false);
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(MoreActionsButton, { onClick: () => setActionMenuVisibility((p2) => !p2) }), /* @__PURE__ */ React__namespace.createElement(ActionsOverlay, { open: actionMenuVisibility }, /* @__PURE__ */ React__namespace.createElement(
+      Dismissible,
+      {
+        click: true,
+        escape: true,
+        disabled: !actionMenuVisibility,
+        onDismiss: () => {
+          setActionMenuVisibility((p2) => !p2);
+        }
       },
-      parse: ParseColorStr
-    }
-  };
-  const { SketchPicker, BlockPicker } = pkg__namespace$1;
-  const GetTextColorForBackground = function(backgroundColor) {
-    return !backgroundColor || backgroundColor.r * 0.299 + backgroundColor.g * 0.587 + backgroundColor.b * 0.114 > 186 ? "#000000" : "#ffffff";
+      actions.map((Action, i2) => (
+        // TODO: `i` will suppress warnings but this indicates that maybe
+        //        Actions should just be componets
+        /* @__PURE__ */ React__namespace.createElement(Action, { form, key: i2 })
+      ))
+    )));
   };
-  const Swatch = ({
-    colorRGBA,
-    colorFormat,
-    unselectable,
-    ...props
-  }) => /* @__PURE__ */ React__namespace.createElement(
-    "div",
+  const MoreActionsButton = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.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__namespace.createElement(EllipsisVerticalIcon, null)
+  );
+  const ActionsOverlay = ({ open, className = "", style = {}, ...props }) => /* @__PURE__ */ React__namespace.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__namespace.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__namespace.createContext(() => {
+    return null;
+  });
+  function useFormPortal() {
+    return React__namespace.useContext(FormPortalContext);
+  }
+  const FormPortalProvider = ({
+    children
+  }) => {
+    const wrapperRef = React__namespace.useRef(null);
+    const zIndexRef = React__namespace.useRef(0);
+    const FormPortal = React__namespace.useCallback(
+      (props) => {
+        if (!wrapperRef.current)
+          return null;
+        return ReactDOM.createPortal(
+          props.children({ zIndexShift: zIndexRef.current += 1 }),
+          wrapperRef.current
+        );
+      },
+      [wrapperRef, zIndexRef]
+    );
+    return /* @__PURE__ */ React__namespace.createElement(FormPortalContext.Provider, { value: FormPortal }, /* @__PURE__ */ React__namespace.createElement("div", { ref: wrapperRef, className: "relative w-full flex-1 overflow-hidden" }, children));
+  };
+  const LoadingDots = ({
+    dotSize = 8,
+    color = "white"
+  }) => {
+    return /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color }), /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color, delay: 0.3 }), /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color, delay: 0.5 }));
+  };
+  const SingleDot = ({ delay = 0, color, dotSize }) => /* @__PURE__ */ React__namespace.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__namespace.useState(false);
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
+      Button$1,
+      {
+        onClick: () => {
+          setOpen((p2) => !p2);
+        },
+        disabled: pristine,
+        ...props
+      },
+      children
+    ), open && /* @__PURE__ */ React__namespace.createElement(ResetModal, { reset: reset2, close: () => setOpen(false) }));
+  };
+  const ResetModal = ({ close: close2, reset: reset2 }) => {
+    return /* @__PURE__ */ React__namespace.createElement(Modal, null, /* @__PURE__ */ React__namespace.createElement(ModalPopup, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: close2 }, "Reset"), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__namespace.createElement("p", null, "Are you sure you want to reset all changes?")), /* @__PURE__ */ React__namespace.createElement(ModalActions, null, /* @__PURE__ */ React__namespace.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
+      Button$1,
+      {
+        style: { flexGrow: 3 },
+        variant: "primary",
+        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__namespace.forwardRef(({ className, disabled, ...rest }, ref) => {
+    return /* @__PURE__ */ React__namespace.createElement(
+      "input",
+      {
+        ref,
+        type: "text",
+        className: `${textFieldClasses} ${disabled ? disabledClasses$1 : ""} ${className}`,
+        ...rest
+      }
+    );
+  });
+  const TextArea = React__namespace.forwardRef(({ ...props }, ref) => {
+    return /* @__PURE__ */ React__namespace.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__namespace;
+  var ColorFormat = /* @__PURE__ */ ((ColorFormat2) => {
+    ColorFormat2["Hex"] = "hex";
+    ColorFormat2["RGB"] = "rgb";
+    return ColorFormat2;
+  })(ColorFormat || {});
+  const rgbToHex = function(color) {
+    return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
+  };
+  function ParseColorStr(color) {
+    if (!color) {
+      return null;
+    }
+    const colorDescriptor = getColor(color);
+    if (!colorDescriptor)
+      return null;
+    const colorVals = colorDescriptor.value;
+    return { r: colorVals[0], g: colorVals[1], b: colorVals[2], a: colorVals[3] };
+  }
+  const ColorFormatter = {
+    [
+      "rgb"
+      /* RGB */
+    ]: {
+      getLabel(color) {
+        return `R${color.r} G${color.g} B${color.b}`;
+      },
+      getValue(color) {
+        const colorVals = [color.r, color.g, color.b, color.a];
+        return toColor.rgb(colorVals);
+      },
+      parse: ParseColorStr
+    },
+    [
+      "hex"
+      /* Hex */
+    ]: {
+      getLabel(color) {
+        return rgbToHex(color);
+      },
+      getValue(color) {
+        const colorVals = [color.r, color.g, color.b, color.a];
+        return toColor.hex(colorVals);
+      },
+      parse: ParseColorStr
+    }
+  };
+  const { SketchPicker, BlockPicker } = pkg__namespace$1;
+  const GetTextColorForBackground = function(backgroundColor) {
+    return !backgroundColor || backgroundColor.r * 0.299 + backgroundColor.g * 0.587 + backgroundColor.b * 0.114 > 186 ? "#000000" : "#ffffff";
+  };
+  const Swatch = ({
+    colorRGBA,
+    colorFormat,
+    unselectable,
+    ...props
+  }) => /* @__PURE__ */ React__namespace.createElement(
+    "div",
     {
       className: "bg-gray-100 rounded-3xl shadow-[0_2px_3px_rgba(0,0,0,0.12)] cursor-pointer w-full m-0",
       ...props
@@ -39187,546 +39745,135 @@ Please wrap them with useCallback or configure the deps array correctly.`
       }
     }
   );
-  function cn$1(...inputs) {
-    return tailwindMerge.twMerge(clsx.clsx(inputs));
+  function useCMS() {
+    return useCMS$1();
   }
-  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__namespace.createElement(
-      Tag2,
-      {
-        className: cn$1(
-          baseClasses,
-          variantClasses[variant],
-          sizeClasses[size2],
-          stateClasses[state],
-          roundedClasses[rounded],
-          className
-        ),
-        ...props
-      },
-      children
+  const supportedFileTypes = [
+    "text/*",
+    "application/pdf",
+    "application/octet-stream",
+    "application/json",
+    "application/ld+json",
+    "application/vnd.ms-excel",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    "application/postscript",
+    "model/fbx",
+    "model/gltf+json",
+    "model/ply",
+    "model/u3d+mesh",
+    "model/vnd.usdz+zip",
+    "application/x-indesign",
+    "application/vnd.apple.mpegurl",
+    "application/dash+xml",
+    "application/mxf",
+    "image/*",
+    "video/*"
+  ];
+  const DEFAULT_MEDIA_UPLOAD_TYPES = supportedFileTypes.join(",");
+  const dropzoneAcceptFromString = (str) => {
+    return Object.assign(
+      {},
+      ...(str || DEFAULT_MEDIA_UPLOAD_TYPES).split(",").map((x) => ({ [x]: [] }))
     );
   };
-  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: ``
-    };
+  const isImage = (filename) => {
+    return /\.(gif|jpg|jpeg|tiff|png|svg|webp|avif)(\?.*)?$/i.test(filename);
+  };
+  const isVideo = (filename) => {
+    return /\.(mp4|webm|ogg|m4v|mov|avi|flv|mkv)(\?.*)?$/i.test(filename);
+  };
+  const absoluteImgURL = (str) => {
+    if (str.startsWith("http"))
+      return str;
+    return `${window.location.origin}${str}`;
+  };
+  const { useDropzone: useDropzone$1 } = dropzone__namespace;
+  const StyledImage = ({ src }) => {
+    const isSvg = /\.svg$/.test(src);
     return /* @__PURE__ */ React__namespace.createElement(
-      "button",
+      "img",
       {
-        className: cn$1(
-          baseClasses,
-          variantClasses[variant],
-          sizeClasses[size2],
-          stateClasses[state],
-          className
-        ),
-        ...props
-      },
-      children
+        src,
+        className: `block max-w-full rounded shadow overflow-hidden max-h-48 lg:max-h-64 h-auto object-contain transition-opacity duration-100 ease-out m-0 bg-gray-200 bg-auto bg-center bg-no-repeat ${isSvg ? "min-w-[12rem]" : ""}`
+      }
     );
   };
-  function FontLoader() {
-    React__namespace.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] = React.useState(false);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, toolbarItems2.length > 0 && /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(
-      PopoverPrimitive__namespace.Trigger,
+  const StyledFile = ({ src }) => {
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "max-w-full w-full flex-1 flex justify-start items-center gap-3" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-12 h-12 bg-white shadow border border-gray-100 rounded flex justify-center flex-none" }, /* @__PURE__ */ React__namespace.createElement(BiFileBlank, { className: "w-3/5 h-full fill-gray-300" })), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-base text-left flex-1 text-gray-500 w-full break-words truncate" }, src));
+  };
+  const ImageUpload = React__namespace.forwardRef(({ onDrop, onClear, onClick, value, src, loading }, ref) => {
+    const cms = useCMS();
+    const { getRootProps, getInputProps } = useDropzone$1({
+      accept: dropzoneAcceptFromString(
+        cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES
+      ),
+      onDrop,
+      noClick: !!onClick
+    });
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full max-w-full", ...getRootProps() }, /* @__PURE__ */ React__namespace.createElement("input", { ...getInputProps() }), value ? loading ? /* @__PURE__ */ React__namespace.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ React__namespace.createElement(
+      "div",
       {
-        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}}`
+        className: `relative w-full max-w-full flex justify-start ${isImage(src) ? `items-start gap-3` : `items-center gap-2`}`
       },
-      /* @__PURE__ */ React.createElement(
-        "svg",
+      /* @__PURE__ */ React__namespace.createElement(
+        "button",
         {
-          xmlns: "http://www.w3.org/2000/svg",
-          className: "h-5 w-5",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor"
+          className: "flex-shrink min-w-0 focus-within:shadow-outline focus-within:border-blue-500 rounded outline-none overflow-visible cursor-pointer border-none hover:opacity-60 transition ease-out duration-100",
+          onClick,
+          ref
         },
-        /* @__PURE__ */ React.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"
+        isImage(src) ? /* @__PURE__ */ React__namespace.createElement(StyledImage, { src }) : /* @__PURE__ */ React__namespace.createElement(StyledFile, { src })
+      ),
+      onClear && /* @__PURE__ */ React__namespace.createElement(
+        DeleteImageButton,
+        {
+          onClick: (e3) => {
+            e3.stopPropagation();
+            onClear();
           }
-        )
+        }
       )
-    ), /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Content, { style: { zIndex: 2e4 }, align: "end" }, /* @__PURE__ */ React.createElement("div", { className: "mt-0 -mr-1 rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1" }, toolbarItems2.map((toolbarItem) => {
-      return /* @__PURE__ */ React.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.createElement("div", { className: "mr-2 opacity-80" }, toolbarItem.Icon),
-        " ",
-        toolbarItem.label
-      );
-    }))))));
+    ) : /* @__PURE__ */ React__namespace.createElement(
+      "button",
+      {
+        className: "outline-none relative hover:opacity-60 w-full",
+        onClick
+      },
+      loading ? /* @__PURE__ */ React__namespace.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center rounded-[5px] bg-gray-100 text-gray-300 leading-[1.35] py-3 text-[15px] font-normal transition-all ease-out duration-100 hover:opacity-60" }, "Drag 'n' drop a file here,", /* @__PURE__ */ React__namespace.createElement("br", null), "or click to select a file")
+    ));
+  });
+  const DeleteImageButton = ({
+    onClick
+  }) => {
+    return /* @__PURE__ */ React__namespace.createElement(IconButton, { variant: "white", className: "flex-none", onClick }, /* @__PURE__ */ React__namespace.createElement(TrashIcon, { className: "w-7 h-auto caret-transparent" }));
   };
-  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);
+  const ImageLoadingIndicator = () => /* @__PURE__ */ React__namespace.createElement("div", { className: "p-4 w-full min-h-[96px] flex flex-col justify-center items-center" }, /* @__PURE__ */ React__namespace.createElement(LoadingDots, null));
+  function IoMdArrowDropdown(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M128 192l128 128 128-128z" }, "child": [] }] })(props);
   }
-  function 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 IoMdArrowDropup(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M128 320l128-128 128 128z" }, "child": [] }] })(props);
   }
-  function 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);
+  function IoMdClose(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z" }, "child": [] }] })(props);
   }
-  const MessageIcon = ({
-    type = "success",
-    className = ""
-  }) => {
-    const icons = {
-      success: BiCheckCircle,
-      warning: BiError,
-      error: BiError,
-      info: BiInfoCircle
-    };
-    const Icon = icons[type];
-    return /* @__PURE__ */ React.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.createElement(
-      "div",
-      {
-        className: `rounded-lg border shadow-sm ${sizeClasses[size2]} ${containerClasses[type]} ${className}`
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-        MessageIcon,
-        {
-          type,
-          className: `${size2 === "small" ? "w-5" : "w-6"} h-auto flex-shrink-0 ${iconClasses[type]}`
-        }
-      ), /* @__PURE__ */ React.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children)), link && /* @__PURE__ */ React.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.createElement(BsArrowRightShort, { className: "w-4 h-auto" })
-      ))
-    );
-  };
-  function cn(...inputs) {
-    return tailwindMerge.twMerge(clsx.clsx(inputs));
-  }
-  function DropdownMenu({
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Root, { "data-slot": "dropdown-menu", ...props });
-  }
-  function DropdownMenuTrigger({
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(
-      DropdownMenuPrimitive__namespace.Trigger,
-      {
-        "data-slot": "dropdown-menu-trigger",
-        ...props
-      }
-    );
-  }
-  function DropdownMenuContent({
-    className,
-    sideOffset = 4,
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Portal, null, /* @__PURE__ */ React__namespace.createElement(
-      DropdownMenuPrimitive__namespace.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__namespace.createElement(
-      DropdownMenuPrimitive__namespace.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 cursor-pointer text-gray-700 hover:text-blue-500",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-  function DropdownMenuSeparator({
-    className,
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(
-      DropdownMenuPrimitive__namespace.Separator,
-      {
-        "data-slot": "dropdown-menu-separator",
-        className: cn("bg-border -mx-1 my-1 h-px", className),
-        ...props
-      }
-    );
-  }
-  const DropdownButton = React__namespace.forwardRef(
-    ({
-      variant = "primary",
-      size: size2 = "medium",
-      busy,
-      disabled,
-      rounded = "full",
-      children,
-      className = "",
-      onMainAction,
-      items: items2,
-      showSplitButton = true,
-      ...props
-    }, ref) => {
-      const [open, setOpen] = React__namespace.useState(false);
-      if (!onMainAction || !showSplitButton) {
-        return /* @__PURE__ */ React__namespace.createElement(DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
-          Button$1,
-          {
-            variant,
-            size: size2,
-            busy,
-            disabled,
-            rounded,
-            className: cn$1("gap-2", className),
-            ...props
-          },
-          children,
-          /* @__PURE__ */ React__namespace.createElement(
-            lucideReact.ChevronDownIcon,
-            {
-              className: cn$1(
-                "h-4 w-4 transition-transform duration-200",
-                open && "rotate-180"
-              )
-            }
-          )
-        )), /* @__PURE__ */ React__namespace.createElement(DropdownMenuContent, { align: "end", side: "bottom", className: "z-[100000]" }, items2.map((item, index) => /* @__PURE__ */ React__namespace.createElement(
-          DropdownMenuItem,
-          {
-            key: index,
-            onClick: item.onClick,
-            disabled: item.disabled,
-            variant: item.variant
-          },
-          item.icon && item.icon,
-          item.label
-        ))));
-      }
-      return /* @__PURE__ */ React__namespace.createElement("div", { className: cn$1("inline-flex", className) }, /* @__PURE__ */ React__namespace.createElement(
-        Button$1,
-        {
-          variant,
-          size: size2,
-          busy,
-          disabled,
-          rounded: "left",
-          onClick: onMainAction,
-          className: "border-r-0 w-full",
-          ...props
-        },
-        children
-      ), /* @__PURE__ */ React__namespace.createElement(DropdownMenu, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__namespace.createElement(DropdownMenuTrigger, null, /* @__PURE__ */ React__namespace.createElement(
-        Button$1,
-        {
-          variant,
-          size: size2,
-          busy,
-          disabled,
-          rounded: "right",
-          className: "px-4 border-l",
-          style: { borderColor: "#00000030" },
-          "aria-label": "More options"
-        },
-        /* @__PURE__ */ React__namespace.createElement(
-          lucideReact.ChevronDownIcon,
-          {
-            className: cn$1(
-              "h-4 w-4 transition-transform duration-200 fill-none",
-              open && "rotate-180"
-            ),
-            style: { fill: "none" }
-          }
-        )
-      )), /* @__PURE__ */ React__namespace.createElement(DropdownMenuContent, { align: "end", side: "bottom" }, items2.map((item, index) => {
-        var _a2;
-        return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, { key: index }, /* @__PURE__ */ React__namespace.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__namespace.createElement(DropdownMenuSeparator, null));
-      }))));
-    }
-  );
-  DropdownButton.displayName = "DropdownButton";
-  function useCMS() {
-    return useCMS$1();
-  }
-  const supportedFileTypes = [
-    "text/*",
-    "application/pdf",
-    "application/octet-stream",
-    "application/json",
-    "application/ld+json",
-    "application/vnd.ms-excel",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    "application/msword",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
-    "application/postscript",
-    "model/fbx",
-    "model/gltf+json",
-    "model/ply",
-    "model/u3d+mesh",
-    "model/vnd.usdz+zip",
-    "application/x-indesign",
-    "application/vnd.apple.mpegurl",
-    "application/dash+xml",
-    "application/mxf",
-    "image/*",
-    "video/*"
-  ];
-  const DEFAULT_MEDIA_UPLOAD_TYPES = supportedFileTypes.join(",");
-  const dropzoneAcceptFromString = (str) => {
-    return Object.assign(
-      {},
-      ...(str || DEFAULT_MEDIA_UPLOAD_TYPES).split(",").map((x) => ({ [x]: [] }))
-    );
-  };
-  const isImage = (filename) => {
-    return /\.(gif|jpg|jpeg|tiff|png|svg|webp|avif)(\?.*)?$/i.test(filename);
-  };
-  const isVideo = (filename) => {
-    return /\.(mp4|webm|ogg|m4v|mov|avi|flv|mkv)(\?.*)?$/i.test(filename);
-  };
-  const absoluteImgURL = (str) => {
-    if (str.startsWith("http"))
-      return str;
-    return `${window.location.origin}${str}`;
-  };
-  const { useDropzone: useDropzone$1 } = dropzone__namespace;
-  const StyledImage = ({ src }) => {
-    const isSvg = /\.svg$/.test(src);
-    return /* @__PURE__ */ React__namespace.createElement(
-      "img",
-      {
-        src,
-        className: `block max-w-full rounded shadow overflow-hidden max-h-48 lg:max-h-64 h-auto object-contain transition-opacity duration-100 ease-out m-0 bg-gray-200 bg-auto bg-center bg-no-repeat ${isSvg ? "min-w-[12rem]" : ""}`
-      }
-    );
-  };
-  const StyledFile = ({ src }) => {
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "max-w-full w-full flex-1 flex justify-start items-center gap-3" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-12 h-12 bg-white shadow border border-gray-100 rounded flex justify-center flex-none" }, /* @__PURE__ */ React__namespace.createElement(BiFileBlank, { className: "w-3/5 h-full fill-gray-300" })), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-base text-left flex-1 text-gray-500 w-full break-words truncate" }, src));
-  };
-  const ImageUpload = React__namespace.forwardRef(({ onDrop, onClear, onClick, value, src, loading }, ref) => {
-    const cms = useCMS();
-    const { getRootProps, getInputProps } = useDropzone$1({
-      accept: dropzoneAcceptFromString(
-        cms.media.accept || DEFAULT_MEDIA_UPLOAD_TYPES
-      ),
-      onDrop,
-      noClick: !!onClick
-    });
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full max-w-full", ...getRootProps() }, /* @__PURE__ */ React__namespace.createElement("input", { ...getInputProps() }), value ? loading ? /* @__PURE__ */ React__namespace.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ React__namespace.createElement(
-      "div",
-      {
-        className: `relative w-full max-w-full flex justify-start ${isImage(src) ? `items-start gap-3` : `items-center gap-2`}`
-      },
-      /* @__PURE__ */ React__namespace.createElement(
-        "button",
-        {
-          className: "flex-shrink min-w-0 focus-within:shadow-outline focus-within:border-blue-500 rounded outline-none overflow-visible cursor-pointer border-none hover:opacity-60 transition ease-out duration-100",
-          onClick,
-          ref
-        },
-        isImage(src) ? /* @__PURE__ */ React__namespace.createElement(StyledImage, { src }) : /* @__PURE__ */ React__namespace.createElement(StyledFile, { src })
-      ),
-      onClear && /* @__PURE__ */ React__namespace.createElement(
-        DeleteImageButton,
-        {
-          onClick: (e3) => {
-            e3.stopPropagation();
-            onClear();
-          }
-        }
-      )
-    ) : /* @__PURE__ */ React__namespace.createElement(
-      "button",
-      {
-        className: "outline-none relative hover:opacity-60 w-full",
-        onClick
-      },
-      loading ? /* @__PURE__ */ React__namespace.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center rounded-[5px] bg-gray-100 text-gray-300 leading-[1.35] py-3 text-[15px] font-normal transition-all ease-out duration-100 hover:opacity-60" }, "Drag 'n' drop a file here,", /* @__PURE__ */ React__namespace.createElement("br", null), "or click to select a file")
-    ));
-  });
-  const DeleteImageButton = ({
-    onClick
-  }) => {
-    return /* @__PURE__ */ React__namespace.createElement(IconButton, { variant: "white", className: "flex-none", onClick }, /* @__PURE__ */ React__namespace.createElement(TrashIcon, { className: "w-7 h-auto caret-transparent" }));
-  };
-  const ImageLoadingIndicator = () => /* @__PURE__ */ React__namespace.createElement("div", { className: "p-4 w-full min-h-[96px] flex flex-col justify-center items-center" }, /* @__PURE__ */ React__namespace.createElement(LoadingDots, null));
-  function IoMdArrowDropdown(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M128 192l128 128 128-128z" }, "child": [] }] })(props);
-  }
-  function IoMdArrowDropup(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M128 320l128-128 128 128z" }, "child": [] }] })(props);
-  }
-  function IoMdClose(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z" }, "child": [] }] })(props);
-  }
-  function IoMdRefresh(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 388c-72.597 0-132-59.405-132-132 0-72.601 59.403-132 132-132 36.3 0 69.299 15.4 92.406 39.601L278 234h154V80l-51.698 51.702C348.406 99.798 304.406 80 256 80c-96.797 0-176 79.203-176 176s78.094 176 176 176c81.045 0 148.287-54.134 169.401-128H378.85c-18.745 49.561-67.138 84-122.85 84z" }, "child": [] }] })(props);
-  }
-  const buttonVariants = classVarianceAuthority.cva(
-    "inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-    {
-      variants: {
-        variant: {
-          outline: "border border-gray-200 bg-white hover:bg-white hover:text-accent-foreground"
-        },
-        size: {
-          default: "h-10 px-4 py-2",
-          sm: "h-9 rounded px-3",
-          lg: "h-11 rounded px-8",
-          icon: "h-10 w-10"
+  function IoMdRefresh(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 388c-72.597 0-132-59.405-132-132 0-72.601 59.403-132 132-132 36.3 0 69.299 15.4 92.406 39.601L278 234h154V80l-51.698 51.702C348.406 99.798 304.406 80 256 80c-96.797 0-176 79.203-176 176s78.094 176 176 176c81.045 0 148.287-54.134 169.401-128H378.85c-18.745 49.561-67.138 84-122.85 84z" }, "child": [] }] })(props);
+  }
+  const buttonVariants = classVarianceAuthority.cva(
+    "inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    {
+      variants: {
+        variant: {
+          outline: "border border-gray-200 bg-white hover:bg-white hover:text-accent-foreground"
+        },
+        size: {
+          default: "h-10 px-4 py-2",
+          sm: "h-9 rounded px-3",
+          lg: "h-11 rounded px-8",
+          icon: "h-10 w-10"
         }
       },
       defaultVariants: {
@@ -42706,30 +42853,6 @@ Please wrap them with useCallback or configure the deps array correctly.`
     },
     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);
   }
@@ -43445,6 +43568,93 @@ Please wrap them with useCallback or configure the deps array correctly.`
       };
     }
   }
+  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.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.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 sonner.toast.success(content, options);
+    },
+    error: (message, options) => {
+      const content = typeof message === "string" ? parseUrlsInText$1(message) : message;
+      return sonner.toast.error(content, options);
+    },
+    warning: (message, options) => {
+      const content = typeof message === "string" ? parseUrlsInText$1(message) : message;
+      return sonner.toast.warning(content, options);
+    },
+    info: (message, options) => {
+      const content = typeof message === "string" ? parseUrlsInText$1(message) : message;
+      return sonner.toast.info(content, options);
+    },
+    dismiss: sonner.toast.dismiss
+  };
+  const Toaster = ({ ...props }) => {
+    return /* @__PURE__ */ React.createElement(
+      sonner.Toaster,
+      {
+        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;
@@ -43472,20 +43682,43 @@ Please wrap them with useCallback or configure the deps array correctly.`
       };
     }
     add(level, message, timeout = 8e3) {
+      let id2;
+      const toastMessage = typeof message === "string" ? message : React.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) {
@@ -45430,7 +45663,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
     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`,
@@ -46202,7 +46435,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
     requiredArgs(1, arguments);
     return formatDistance(dirtyDate, Date.now(), options);
   }
-  const version$1 = "2.9.3";
+  const version$1 = "2.9.4";
   const VersionInfo = () => {
     var _a2, _b, _c, _d, _e, _f;
     const cms = useCMS();
@@ -47839,21 +48072,10 @@ Please wrap them with useCallback or configure the deps array correctly.`
   };
   function Alerts({ alerts }) {
     useSubscribable(alerts);
-    if (!alerts.all.length) {
+    if (alerts.all.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.createElement(Alert, { key: alert.id, level: alert.level }, alert.level === "info" && /* @__PURE__ */ React.createElement(MdInfo, { className: "w-5 h-auto opacity-70" }), alert.level === "success" && /* @__PURE__ */ React.createElement(MdCheckCircle, { className: "w-5 h-auto opacity-70" }), alert.level === "warn" && /* @__PURE__ */ React.createElement(MdWarning, { className: "w-5 h-auto opacity-70" }), /* @__PURE__ */ React.createElement("p", { className: "m-0 flex-1 max-w-[680px] text-left" }, parseUrlsInText(alert.message.toString())), /* @__PURE__ */ React.createElement(
-        CloseAlert,
-        {
-          onClick: () => {
-            alerts.dismiss(alert);
-          }
-        }
-      ));
-    })), alerts.all.filter((alert) => {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Toaster, null), alerts.all.filter((alert) => {
       return alert.level === "error";
     }).map((alert) => {
       const AlertMessage = typeof alert.message === "string" ? () => {
@@ -47881,51 +48103,6 @@ Please wrap them with useCallback or configure the deps array correctly.`
       ))));
     }));
   }
-  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.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.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.createElement(
-    "button",
-    {
-      className: "border-none bg-transparent p-0 outline-none flex items-center",
-      ...styleProps
-    },
-    /* @__PURE__ */ React.createElement(BiX, { className: "w-5 auto flex-grow-0 flex-shrink-0" })
-  );
   function CursorPaginator({
     navigateNext,
     navigatePrev,
@@ -48221,6 +48398,18 @@ Please wrap them with useCallback or configure the deps array correctly.`
       /* @__PURE__ */ React__namespace.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 = ["０", "１", "２", "３", "４", "５", "６", "７", "８", "９"];
@@ -63634,367 +63823,6 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
       );
     }
   }
-  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__namespace.createElement("div", { className: `w-full ${className}` }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2" }, /* @__PURE__ */ React__namespace.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] = React.useState(false);
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(MoreActionsButton, { onClick: () => setActionMenuVisibility((p2) => !p2) }), /* @__PURE__ */ React__namespace.createElement(ActionsOverlay, { open: actionMenuVisibility }, /* @__PURE__ */ React__namespace.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__namespace.createElement(Action, { form, key: i2 })
-      ))
-    )));
-  };
-  const MoreActionsButton = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.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__namespace.createElement(EllipsisVerticalIcon, null)
-  );
-  const ActionsOverlay = ({ open, className = "", style = {}, ...props }) => /* @__PURE__ */ React__namespace.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__namespace.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__namespace.createContext(() => {
-    return null;
-  });
-  function useFormPortal() {
-    return React__namespace.useContext(FormPortalContext);
-  }
-  const FormPortalProvider = ({
-    children
-  }) => {
-    const wrapperRef = React__namespace.useRef(null);
-    const zIndexRef = React__namespace.useRef(0);
-    const FormPortal = React__namespace.useCallback(
-      (props) => {
-        if (!wrapperRef.current)
-          return null;
-        return ReactDOM.createPortal(
-          props.children({ zIndexShift: zIndexRef.current += 1 }),
-          wrapperRef.current
-        );
-      },
-      [wrapperRef, zIndexRef]
-    );
-    return /* @__PURE__ */ React__namespace.createElement(FormPortalContext.Provider, { value: FormPortal }, /* @__PURE__ */ React__namespace.createElement("div", { ref: wrapperRef, className: "relative w-full flex-1 overflow-hidden" }, children));
-  };
-  const LoadingDots = ({
-    dotSize = 8,
-    color = "white"
-  }) => {
-    return /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color }), /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color, delay: 0.3 }), /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color, delay: 0.5 }));
-  };
-  const SingleDot = ({ delay = 0, color, dotSize }) => /* @__PURE__ */ React__namespace.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__namespace.useState(false);
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
-      Button$1,
-      {
-        onClick: () => {
-          setOpen((p2) => !p2);
-        },
-        disabled: pristine,
-        ...props
-      },
-      children
-    ), open && /* @__PURE__ */ React__namespace.createElement(ResetModal, { reset: reset2, close: () => setOpen(false) }));
-  };
-  const ResetModal = ({ close: close2, reset: reset2 }) => {
-    return /* @__PURE__ */ React__namespace.createElement(Modal, null, /* @__PURE__ */ React__namespace.createElement(ModalPopup, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: close2 }, "Reset"), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__namespace.createElement("p", null, "Are you sure you want to reset all changes?")), /* @__PURE__ */ React__namespace.createElement(ModalActions, null, /* @__PURE__ */ React__namespace.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
-      Button$1,
-      {
-        style: { flexGrow: 3 },
-        variant: "primary",
-        onClick: async () => {
-          await reset2();
-          close2();
-        }
-      },
-      "Reset"
-    ))));
-  };
-  const NoFieldsPlaceholder = () => /* @__PURE__ */ React__namespace.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__namespace.createElement(Emoji, { className: "block pb-5" }, "🤔"),
-    /* @__PURE__ */ React__namespace.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__namespace.createElement("p", { className: "block pb-5" }, /* @__PURE__ */ React__namespace.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__namespace.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 }) => {
-    React.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__namespace.useState(false);
-    const tinaForm = form.tinaForm;
-    const finalForm2 = form.tinaForm.finalForm;
-    React__namespace.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__namespace.useCallback(
-      (result) => {
-        if (!result.destination || !finalForm2)
-          return;
-        const name = result.type;
-        finalForm2.mutators.move(
-          name,
-          result.source.index,
-          result.destination.index
-        );
-      },
-      [tinaForm]
-    );
-    React__namespace.useEffect(() => {
-      const unsubscribe = finalForm2.subscribe(
-        ({ pristine }) => {
-          if (onPristineChange) {
-            onPristineChange(pristine);
-          }
-        },
-        { pristine: true }
-      );
-      return () => {
-        unsubscribe();
-      };
-    }, [finalForm2]);
-    const fieldGroup = tinaForm.getActiveField(form.activeFieldName);
-    return /* @__PURE__ */ React__namespace.createElement(
-      reactFinalForm.Form,
-      {
-        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__namespace.createElement(React__namespace.Fragment, null, createBranchModalOpen && /* @__PURE__ */ React__namespace.createElement(
-          CreateBranchModal,
-          {
-            safeSubmit,
-            crudType: tinaForm.crudType,
-            path: tinaForm.path,
-            values: tinaForm.values,
-            close: () => setCreateBranchModalOpen(false)
-          }
-        ), /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.DragDropContext, { onDragEnd: moveArrayItem }, /* @__PURE__ */ React__namespace.createElement(FormKeyBindings, { onSubmit: safeHandleSubmit }), /* @__PURE__ */ React__namespace.createElement(FormPortalProvider, null, /* @__PURE__ */ React__namespace.createElement(FormWrapper, { id: tinaForm.id }, (tinaForm == null ? void 0 : tinaForm.fields.length) ? /* @__PURE__ */ React__namespace.createElement(
-          FieldsBuilder,
-          {
-            form: tinaForm,
-            activeFieldName: form.activeFieldName,
-            fields: fieldGroup.fields
-          }
-        ) : /* @__PURE__ */ React__namespace.createElement(NoFieldsPlaceholder, null))), !hideFooter && /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: "flex-1 w-full justify-end gap-2	flex items-center max-w-form" }, tinaForm.reset && /* @__PURE__ */ React__namespace.createElement(
-          ResetForm,
-          {
-            pristine,
-            reset: async () => {
-              finalForm2.reset();
-              await tinaForm.reset();
-            }
-          },
-          tinaForm.buttons.reset
-        ), /* @__PURE__ */ React__namespace.createElement(
-          Button$1,
-          {
-            onClick: safeHandleSubmit,
-            disabled: !canSubmit,
-            busy: submitting,
-            variant: "primary"
-          },
-          submitting && /* @__PURE__ */ React__namespace.createElement(LoadingDots, null),
-          !submitting && tinaForm.buttons.save
-        ), tinaForm.actions.length > 0 && /* @__PURE__ */ React__namespace.createElement(
-          FormActionMenu,
-          {
-            form: tinaForm,
-            actions: tinaForm.actions
-          }
-        )))));
-      }
-    );
-  };
-  const FormStatus = ({ pristine }) => {
-    const pristineClass = pristine ? "text-green-500" : "text-red-500";
-    return /* @__PURE__ */ React__namespace.createElement(FaCircle, { className: cn("h-3", pristineClass) });
-  };
-  const FormWrapper = ({
-    id: id2,
-    children
-  }) => {
-    return /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: "py-5 px-6" }, children)
-    );
-  };
-  const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
-    "span",
-    {
-      className: `text-[40px] leading-none inline-block ${className}`,
-      ...props
-    }
-  );
-  const CreateBranchModel = ({
-    close: close2,
-    safeSubmit,
-    relativePath: relativePath2,
-    values,
-    crudType
-  }) => /* @__PURE__ */ React__namespace.createElement(
-    CreateBranchModal,
-    {
-      close: close2,
-      safeSubmit,
-      path: relativePath2,
-      values,
-      crudType
-    }
-  );
   const pathRelativeToCollection = (collectionPath, fullPath) => {
     const normalizedCollectionPath = collectionPath.replace(/\\/g, "/");
     const normalizedFullPath = fullPath.replace(/\\/g, "/");
@@ -64023,7 +63851,6 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
     const [isExecuting, setIsExecuting] = React__namespace.useState(false);
     const [errorMessage, setErrorMessage] = React__namespace.useState("");
     const [currentStep, setCurrentStep] = React__namespace.useState(0);
-    const [statusMessage, setStatusMessage] = React__namespace.useState("");
     const [elapsedTime, setElapsedTime] = React__namespace.useState(0);
     React__namespace.useEffect(() => {
       let interval;
@@ -64067,7 +63894,6 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
         setDisabled(true);
         setIsExecuting(true);
         setCurrentStep(1);
-        setStatusMessage("Initializing workflow...");
         let graphql2 = "";
         if (crudType === "create") {
           graphql2 = CREATE_DOCUMENT_GQL;
@@ -64092,8 +63918,6 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
             }
           },
           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:
@@ -64130,9 +63954,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
       }
     };
     const renderProgressIndicator = () => {
-      var _a2;
-      const progressPercentage = (currentStep - 1) / steps.length * 100;
-      return /* @__PURE__ */ React__namespace.createElement("div", { className: "py-6" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex justify-between mb-4 relative px-5 sm:gap-x-8" }, /* @__PURE__ */ React__namespace.createElement(
+      return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex justify-between my-8 relative px-5 sm:gap-x-8" }, /* @__PURE__ */ React__namespace.createElement(
         "div",
         {
           className: "absolute top-5 h-0.5 bg-gray-200 -z-10",
@@ -64141,7 +63963,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
       ), currentStep > 1 && currentStep <= steps.length && /* @__PURE__ */ React__namespace.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)})`
@@ -64169,7 +63991,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
           /* @__PURE__ */ React__namespace.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__namespace.createElement(
               "svg",
@@ -64190,7 +64012,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
           ),
           /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center max-w-24" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-semibold leading-tight" }, step.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs text-gray-400 mt-1 leading-tight" }, step.description))
         );
-      })), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500" }, /* @__PURE__ */ React__namespace.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React__namespace.createElement(
+      })), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs text-gray-500" }, "Estimated time: 1-2 min "), isExecuting && currentStep > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500" }, /* @__PURE__ */ React__namespace.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React__namespace.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -64198,34 +64020,20 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
           clipRule: "evenodd"
         }
       )), formatTime(elapsedTime))), /* @__PURE__ */ React__namespace.createElement(
-        ProgressBar,
-        {
-          progress: progressPercentage,
-          className: "mb-4",
-          color: currentStep > steps.length ? "green" : "blue"
-        }
-      ), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2 mb-2" }, currentStep >= 4 ? /* @__PURE__ */ React__namespace.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__namespace.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__namespace.createElement(AiOutlineLoading, { className: "text-blue-500 animate-spin" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm font-medium text-gray-700" }, statusMessage || `${(_a2 = steps[currentStep - 1]) == null ? void 0 : _a2.name}...`)), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-left" }, /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React__namespace.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__namespace.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React__namespace.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-sm text-gray-700 mb-4 max-w-sm" }, "To make changes, create a copy then get it approved and merged for it to go live.", " ", /* @__PURE__ */ React__namespace.createElement(
+        return /* @__PURE__ */ React__namespace.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React__namespace.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__namespace.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React__namespace.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React__namespace.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__namespace.createElement("br", null), /* @__PURE__ */ React__namespace.createElement("br", null), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-gray-500" }, "Learn more about "), /* @__PURE__ */ React__namespace.createElement(
           "a",
           {
             className: "underline text-tina-orange-dark font-medium",
@@ -64233,7 +64041,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
             target: "_blank"
           },
           "Editorial Workflow"
-        )), /* @__PURE__ */ React__namespace.createElement(
+        ), "."), /* @__PURE__ */ React__namespace.createElement(
           PrefixedTextField,
           {
             name: "new-branch-name",
@@ -64242,7 +64050,6 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
             value: newBranchName,
             onChange: (e3) => {
               setErrorMessage("");
-              setStatusMessage("");
               setNewBranchName(e3.target.value);
             }
           }
@@ -64293,6 +64100,217 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
       }
     )));
   };
+  const NoFieldsPlaceholder = () => /* @__PURE__ */ React__namespace.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__namespace.createElement(Emoji, { className: "block pb-5" }, "🤔"),
+    /* @__PURE__ */ React__namespace.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__namespace.createElement("p", { className: "block pb-5" }, /* @__PURE__ */ React__namespace.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__namespace.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 }) => {
+    React.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__namespace.useState(false);
+    const tinaForm = form.tinaForm;
+    const finalForm2 = form.tinaForm.finalForm;
+    React__namespace.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__namespace.useCallback(
+      (result) => {
+        if (!result.destination || !finalForm2)
+          return;
+        const name = result.type;
+        finalForm2.mutators.move(
+          name,
+          result.source.index,
+          result.destination.index
+        );
+      },
+      [tinaForm]
+    );
+    React__namespace.useEffect(() => {
+      const unsubscribe = finalForm2.subscribe(
+        ({ pristine }) => {
+          if (onPristineChange) {
+            onPristineChange(pristine);
+          }
+        },
+        { pristine: true }
+      );
+      return () => {
+        unsubscribe();
+      };
+    }, [finalForm2]);
+    const fieldGroup = tinaForm.getActiveField(form.activeFieldName);
+    return /* @__PURE__ */ React__namespace.createElement(
+      reactFinalForm.Form,
+      {
+        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__namespace.createElement(React__namespace.Fragment, null, createBranchModalOpen && /* @__PURE__ */ React__namespace.createElement(
+          CreateBranchModal,
+          {
+            safeSubmit,
+            crudType: tinaForm.crudType,
+            path: tinaForm.path,
+            values: tinaForm.values,
+            close: () => setCreateBranchModalOpen(false)
+          }
+        ), /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.DragDropContext, { onDragEnd: moveArrayItem }, /* @__PURE__ */ React__namespace.createElement(FormKeyBindings, { onSubmit: safeHandleSubmit }), /* @__PURE__ */ React__namespace.createElement(FormPortalProvider, null, /* @__PURE__ */ React__namespace.createElement(FormWrapper, { id: tinaForm.id }, (tinaForm == null ? void 0 : tinaForm.fields.length) ? /* @__PURE__ */ React__namespace.createElement(
+          FieldsBuilder,
+          {
+            form: tinaForm,
+            activeFieldName: form.activeFieldName,
+            fields: fieldGroup.fields
+          }
+        ) : /* @__PURE__ */ React__namespace.createElement(NoFieldsPlaceholder, null))), !hideFooter && /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: "flex-1 w-full justify-end gap-2	flex items-center max-w-form" }, tinaForm.reset && /* @__PURE__ */ React__namespace.createElement(
+          ResetForm,
+          {
+            pristine,
+            reset: async () => {
+              finalForm2.reset();
+              await tinaForm.reset();
+            }
+          },
+          tinaForm.buttons.reset
+        ), /* @__PURE__ */ React__namespace.createElement(
+          Button$1,
+          {
+            onClick: safeHandleSubmit,
+            disabled: !canSubmit,
+            busy: submitting,
+            variant: "primary"
+          },
+          submitting && /* @__PURE__ */ React__namespace.createElement(LoadingDots, null),
+          !submitting && tinaForm.buttons.save
+        ), tinaForm.actions.length > 0 && /* @__PURE__ */ React__namespace.createElement(
+          FormActionMenu,
+          {
+            form: tinaForm,
+            actions: tinaForm.actions
+          }
+        )))));
+      }
+    );
+  };
+  const FormStatus = ({ pristine }) => {
+    const pristineClass = pristine ? "text-green-500" : "text-red-500";
+    return /* @__PURE__ */ React__namespace.createElement(FaCircle, { className: cn("h-3", pristineClass) });
+  };
+  const FormWrapper = ({
+    id: id2,
+    children
+  }) => {
+    return /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: "py-5 px-6" }, children)
+    );
+  };
+  const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
+    "span",
+    {
+      className: `text-[40px] leading-none inline-block ${className}`,
+      ...props
+    }
+  );
+  const CreateBranchModel = ({
+    close: close2,
+    safeSubmit,
+    relativePath: relativePath2,
+    values,
+    crudType
+  }) => /* @__PURE__ */ React__namespace.createElement(
+    CreateBranchModal,
+    {
+      close: close2,
+      safeSubmit,
+      path: relativePath2,
+      values,
+      crudType
+    }
+  );
   const NestedForm = (props) => {
     const FormPortal = useFormPortal();
     const id2 = React.useMemo(() => uuid(), [props.id, props.initialValues]);
@@ -121039,7 +121057,7 @@ This will work when developing locally but NOT when deployed to production.
               },
               close: () => setFolderModalOpen(false)
             }
-          ), /* @__PURE__ */ React.createElement(PageHeader, null, /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React.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.createElement(React.Fragment, null, !search && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
+          ), /* @__PURE__ */ React.createElement(PageHeader, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React.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.createElement(React.Fragment, null, !search && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
             "label",
             {
               htmlFor: "sort",