tinacms 2.9.3 → 2.9.5

package/dist/index.mjs

@@ -39,10 +39,10 @@ import arrayMutators from "final-form-arrays";
 import setFieldData from "final-form-set-field-data";
 import { Field, Form as Form$1 } from "react-final-form";
 import PropTypes from "prop-types";
-import * as pkg$1 from "react-color";
-import * as pkg from "color-string";
 import { twMerge } from "tailwind-merge";
 import { Droppable, Draggable, DragDropContext } from "react-beautiful-dnd";
+import * as pkg$1 from "react-color";
+import * as pkg from "color-string";
 import { buildSchema, print, getIntrospectionQuery, buildClientSchema, parse as parse$4 } from "graphql";
 import { diff as diff$1 } from "@graphql-inspector/core";
 import * as dropzone from "react-dropzone";
@@ -38335,6 +38335,171 @@ TinaField.propTypes = {
   Component: PropTypes.any.isRequired,
   children: PropTypes.any
 };
+function cn$1(...inputs) {
+  return twMerge(clsx(inputs));
+}
+const Button$1 = ({
+  variant = "secondary",
+  as: Tag2 = "button",
+  size: size2 = "medium",
+  busy,
+  disabled,
+  rounded = "full",
+  children,
+  className = "",
+  ...props
+}) => {
+  const baseClasses = "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out ";
+  const variantClasses = {
+    primary: `shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark border-0`,
+    secondary: `shadow text-gray-500 hover:tina-orange-dark bg-gray-50 hover:bg-white border border-gray-100`,
+    white: `shadow text-gray-500 hover:tina-orange-dark bg-white hover:bg-gray-50 border border-gray-100`,
+    ghost: `text-gray-500 hover:tina-orange-dark hover:shadow border border-transparent border-0 hover:border hover:border-gray-200 bg-transparent`,
+    danger: `shadow text-white bg-red-500 hover:bg-red-600 focus:ring-red-500`,
+    accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`,
+    custom: ""
+  };
+  const state = busy ? `busy` : disabled ? `disabled` : `default`;
+  const stateClasses = {
+    disabled: `pointer-events-none opacity-30 cursor-not-allowed`,
+    busy: `pointer-events-none opacity-70 cursor-wait`,
+    default: ``
+  };
+  const roundedClasses = {
+    full: `rounded`,
+    left: `rounded-l`,
+    right: `rounded-r`,
+    custom: "",
+    none: ""
+  };
+  const sizeClasses = {
+    small: `text-xs h-8 px-3`,
+    medium: `text-sm h-10 px-8`,
+    custom: ``
+  };
+  return /* @__PURE__ */ React.createElement(
+    Tag2,
+    {
+      className: cn$1(
+        baseClasses,
+        variantClasses[variant],
+        sizeClasses[size2],
+        stateClasses[state],
+        roundedClasses[rounded],
+        className
+      ),
+      ...props
+    },
+    children
+  );
+};
+const IconButton = ({
+  variant = "secondary",
+  size: size2 = "medium",
+  busy,
+  disabled,
+  children,
+  className,
+  ...props
+}) => {
+  const baseClasses = "icon-parent inline-flex items-center border border-transparent text-sm font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out rounded-full";
+  const variantClasses = {
+    primary: `shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark`,
+    secondary: `shadow text-gray-500 hover:text-blue-500 bg-gray-50 hover:bg-white border border-gray-200`,
+    white: `shadow text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-200`,
+    ghost: `text-gray-500 hover:text-blue-500 hover:shadow border border-transparent hover:border-gray-200 bg-transparent`,
+    accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`
+  };
+  const state = busy ? `busy` : disabled ? `disabled` : `default`;
+  const stateClasses = {
+    disabled: `pointer-events-none	opacity-30 cursor-not-allowed`,
+    busy: `pointer-events-none opacity-70 cursor-wait`,
+    default: ``
+  };
+  const sizeClasses = {
+    small: `h-7 w-7`,
+    medium: `h-9 w-9`,
+    custom: ``
+  };
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: cn$1(
+        baseClasses,
+        variantClasses[variant],
+        sizeClasses[size2],
+        stateClasses[state],
+        className
+      ),
+      ...props
+    },
+    children
+  );
+};
+function FontLoader() {
+  React.useEffect(() => {
+    const link = document.createElement("link");
+    link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Libre+Baskerville:wght@400;500;600;700&display=swap";
+    link.rel = "stylesheet";
+    document.head.appendChild(link);
+    return () => {
+      document.head.removeChild(link);
+    };
+  }, []);
+  return null;
+}
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const OverflowMenu$1 = ({ toolbarItems: toolbarItems2, className = "w-full" }) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, toolbarItems2.length > 0 && /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(
+    PopoverPrimitive.Trigger,
+    {
+      className: `cursor-pointer relative justify-center inline-flex items-center p-3 text-sm font-medium focus:outline-1 focus:outline-blue-200 pointer-events-auto ${open ? `text-blue-400` : `text-gray-300 hover:text-blue-500`} ${className}}`
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "h-5 w-5",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor"
+      },
+      /* @__PURE__ */ React__default.createElement(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+        }
+      )
+    )
+  ), /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Content, { style: { zIndex: 2e4 }, align: "end" }, /* @__PURE__ */ React__default.createElement("div", { className: "mt-0 -mr-1 rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1" }, toolbarItems2.map((toolbarItem) => {
+    return /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        "data-test": `${toolbarItem.name}OverflowButton`,
+        key: toolbarItem.name,
+        onMouseDown: (event) => {
+          event.preventDefault();
+          toolbarItem.onMouseDown(event);
+          setOpen(false);
+        },
+        className: classNames(
+          toolbarItem.active ? "bg-gray-50 text-blue-500" : "bg-white text-gray-600",
+          "hover:bg-gray-50 hover:text-blue-500 cursor-pointer pointer-events-auto px-4 py-2 text-sm w-full flex items-center whitespace-nowrap",
+          toolbarItem.className ?? ""
+        )
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: "mr-2 opacity-80" }, toolbarItem.Icon),
+      " ",
+      toolbarItem.label
+    );
+  }))))));
+};
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -38576,30 +38741,270 @@ function BiTrash(props) {
 function BiX(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z" }, "child": [] }] })(props);
 }
-const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
-const disabledClasses$1 = "opacity-50 pointer-events-none cursor-not-allowed";
-const BaseTextField = React.forwardRef(({ className, disabled, ...rest }, ref) => {
+function BsArrowRightShort(props) {
+  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" }, "child": [] }] })(props);
+}
+function BsCheckCircleFill(props) {
+  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }, "child": [] }] })(props);
+}
+function BsExclamationOctagonFill(props) {
+  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" }, "child": [] }] })(props);
+}
+const MessageIcon = ({
+  type = "success",
+  className = ""
+}) => {
+  const icons = {
+    success: BiCheckCircle,
+    warning: BiError,
+    error: BiError,
+    info: BiInfoCircle
+  };
+  const Icon = icons[type];
+  return /* @__PURE__ */ React__default.createElement(Icon, { className });
+};
+const Message = ({
+  children,
+  type = "success",
+  size: size2 = "medium",
+  className = "",
+  link,
+  linkLabel = "Learn More"
+}) => {
+  const containerClasses = {
+    success: "bg-gradient-to-r from-green-50 to-green-100 border-green-200",
+    warning: "bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-200",
+    error: "bg-gradient-to-r from-red-50 to-red-100 border-red-200",
+    info: "bg-gradient-to-r from-blue-50 to-blue-100 border-blue-100"
+  };
+  const textClasses = {
+    success: "text-green-700",
+    warning: "text-yellow-700",
+    error: "text-red-700",
+    info: "text-blue-700"
+  };
+  const iconClasses = {
+    success: "text-green-400",
+    warning: "text-yellow-400",
+    error: "text-red-400",
+    info: "text-blue-400"
+  };
+  const sizeClasses = {
+    small: "px-3 py-1.5 text-xs",
+    medium: "px-4 py-2.5 text-sm"
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: `rounded-lg border shadow-sm ${sizeClasses[size2]} ${containerClasses[type]} ${className}`
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement(
+      MessageIcon,
+      {
+        type,
+        className: `${size2 === "small" ? "w-5" : "w-6"} h-auto flex-shrink-0 ${iconClasses[type]}`
+      }
+    ), /* @__PURE__ */ React__default.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children)), link && /* @__PURE__ */ React__default.createElement(
+      "a",
+      {
+        href: link,
+        target: "_blank",
+        className: "flex-shrink-0 flex items-center gap-1 text-blue-600 underline decoration-blue-200 hover:text-blue-500 hover:decoration-blue-500 transition-all ease-out duration-150"
+      },
+      linkLabel,
+      " ",
+      /* @__PURE__ */ React__default.createElement(BsArrowRightShort, { className: "w-4 h-auto" })
+    ))
+  );
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
   return /* @__PURE__ */ React.createElement(
-    "input",
+    DropdownMenuPrimitive.Trigger,
     {
-      ref,
-      type: "text",
-      className: `${textFieldClasses} ${disabled ? disabledClasses$1 : ""} ${className}`,
-      ...rest
+      "data-slot": "dropdown-menu-trigger",
+      ...props
     }
   );
-});
-const TextArea = React.forwardRef(({ ...props }, ref) => {
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-base max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ));
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
   return /* @__PURE__ */ React.createElement(
-    "textarea",
+    DropdownMenuPrimitive.Item,
     {
-      ...props,
-      className: "shadow-inner text-base px-3 py-2 text-gray-600 resize-y focus:shadow-outline focus:border-blue-500 block w-full border border-gray-200 focus:text-gray-900 rounded",
-      ref,
-      style: { minHeight: "160px" }
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer text-gray-700 hover:text-blue-500",
+        className
+      ),
+      ...props
     }
   );
-});
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+const DropdownButton = React.forwardRef(
+  ({
+    variant = "primary",
+    size: size2 = "medium",
+    busy,
+    disabled,
+    rounded = "full",
+    children,
+    className = "",
+    onMainAction,
+    items: items2,
+    showSplitButton = true,
+    ...props
+  }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    if (!onMainAction || !showSplitButton) {
+      return /* @__PURE__ */ React.createElement(DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+        Button$1,
+        {
+          variant,
+          size: size2,
+          busy,
+          disabled,
+          rounded,
+          className: cn$1("gap-2", className),
+          ...props
+        },
+        children,
+        /* @__PURE__ */ React.createElement(
+          ChevronDownIcon$1,
+          {
+            className: cn$1(
+              "h-4 w-4 transition-transform duration-200",
+              open && "rotate-180"
+            )
+          }
+        )
+      )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom", className: "z-[100000]" }, items2.map((item, index) => /* @__PURE__ */ React.createElement(
+        DropdownMenuItem,
+        {
+          key: index,
+          onClick: item.onClick,
+          disabled: item.disabled,
+          variant: item.variant
+        },
+        item.icon && item.icon,
+        item.label
+      ))));
+    }
+    return /* @__PURE__ */ React.createElement("div", { className: cn$1("inline-flex", className) }, /* @__PURE__ */ React.createElement(
+      Button$1,
+      {
+        variant,
+        size: size2,
+        busy,
+        disabled,
+        rounded: "left",
+        onClick: onMainAction,
+        className: "border-r-0 w-full",
+        ...props
+      },
+      children
+    ), /* @__PURE__ */ React.createElement(DropdownMenu, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, null, /* @__PURE__ */ React.createElement(
+      Button$1,
+      {
+        variant,
+        size: size2,
+        busy,
+        disabled,
+        rounded: "right",
+        className: "px-4 border-l",
+        style: { borderColor: "#00000030" },
+        "aria-label": "More options"
+      },
+      /* @__PURE__ */ React.createElement(
+        ChevronDownIcon$1,
+        {
+          className: cn$1(
+            "h-4 w-4 transition-transform duration-200 fill-none",
+            open && "rotate-180"
+          ),
+          style: { fill: "none" }
+        }
+      )
+    )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom" }, items2.map((item, index) => {
+      var _a2;
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, /* @__PURE__ */ React.createElement(
+        DropdownMenuItem,
+        {
+          onClick: item.onClick,
+          disabled: item.disabled,
+          variant: item.variant
+        },
+        item.icon && item.icon,
+        item.label
+      ), item.variant === "destructive" && index < items2.length - 1 && ((_a2 = items2[index + 1]) == null ? void 0 : _a2.variant) !== "destructive" && /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null));
+    }))));
+  }
+);
+DropdownButton.displayName = "DropdownButton";
+function FaCircle(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" }, "child": [] }] })(props);
+}
+function FaFile(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 384 512" }, "child": [{ "tag": "path", "attr": { "d": "M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z" }, "child": [] }] })(props);
+}
+function FaFolder(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z" }, "child": [] }] })(props);
+}
+function FaLock(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" }, "child": [] }] })(props);
+}
+function FaSpinner(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z" }, "child": [] }] })(props);
+}
+function FaUnlock(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z" }, "child": [] }] })(props);
+}
 const Dismissible = ({
   onDismiss,
   escape: escape2,
@@ -38672,6 +39077,159 @@ function useDismissible({
   }, [click, customDocument, escape2, disabled, onDismiss]);
   return area;
 }
+const FormActionMenu = ({ actions, form }) => {
+  const [actionMenuVisibility, setActionMenuVisibility] = useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MoreActionsButton, { onClick: () => setActionMenuVisibility((p2) => !p2) }), /* @__PURE__ */ React.createElement(ActionsOverlay, { open: actionMenuVisibility }, /* @__PURE__ */ React.createElement(
+    Dismissible,
+    {
+      click: true,
+      escape: true,
+      disabled: !actionMenuVisibility,
+      onDismiss: () => {
+        setActionMenuVisibility((p2) => !p2);
+      }
+    },
+    actions.map((Action, i2) => (
+      // TODO: `i` will suppress warnings but this indicates that maybe
+      //        Actions should just be componets
+      /* @__PURE__ */ React.createElement(Action, { form, key: i2 })
+    ))
+  )));
+};
+const MoreActionsButton = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
+  "button",
+  {
+    className: `h-16 w-10 self-stretch bg-transparent bg-center bg-[length:auto_18px] -mr-4 ml-2 outline-none cursor-pointer transition-opacity duration-100 ease-out flex justify-center items-center hover:bg-gray-50 hover:fill-gray-700 ${className}`,
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(EllipsisVerticalIcon, null)
+);
+const ActionsOverlay = ({ open, className = "", style = {}, ...props }) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: `min-w-[192px] rounded-3xl border border-solid border-[#efefef] block absolute bottom-5 right-5 ${open ? "opacity-100" : "opacity-0"} transition-all duration-100 ease-out origin-bottom-right shadow-[0_2px_3px_rgba(0,0,0,0.05)] bg-white overflow-hidden z-10 ${className}`,
+    style: {
+      transform: open ? "translate3d(0, -28px, 0) scale3d(1, 1, 1)" : "translate3d(0, 0, 0) scale3d(0.5, 0.5, 1)",
+      pointerEvents: open ? "all" : "none",
+      ...style
+    },
+    ...props
+  }
+);
+const ActionButton = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
+  "button",
+  {
+    className: `relative text-center text-[13px] px-3 h-10 font-normal w-full bg-none cursor-pointer outline-none border-0 transition-all duration-[150ms] ease-out hover:text-blue-500 hover:bg-gray50 [&:not(:last-child)]: border-b-[1px] border-solid border-b-[#edecf3] ${className}`,
+    ...props
+  }
+);
+const FormPortalContext = React.createContext(() => {
+  return null;
+});
+function useFormPortal() {
+  return React.useContext(FormPortalContext);
+}
+const FormPortalProvider = ({
+  children
+}) => {
+  const wrapperRef = React.useRef(null);
+  const zIndexRef = React.useRef(0);
+  const FormPortal = React.useCallback(
+    (props) => {
+      if (!wrapperRef.current)
+        return null;
+      return createPortal(
+        props.children({ zIndexShift: zIndexRef.current += 1 }),
+        wrapperRef.current
+      );
+    },
+    [wrapperRef, zIndexRef]
+  );
+  return /* @__PURE__ */ React.createElement(FormPortalContext.Provider, { value: FormPortal }, /* @__PURE__ */ React.createElement("div", { ref: wrapperRef, className: "relative w-full flex-1 overflow-hidden" }, children));
+};
+const LoadingDots = ({
+  dotSize = 8,
+  color = "white"
+}) => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color }), /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color, delay: 0.3 }), /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color, delay: 0.5 }));
+};
+const SingleDot = ({ delay = 0, color, dotSize }) => /* @__PURE__ */ React.createElement(
+  "span",
+  {
+    className: "inline-block mr-1",
+    style: {
+      animation: "loading-dots-scale-up-and-down 2s linear infinite",
+      animationDelay: `${delay}s`,
+      background: color,
+      width: dotSize,
+      height: dotSize,
+      borderRadius: dotSize
+    }
+  }
+);
+const ResetForm = ({
+  pristine,
+  reset: reset2,
+  children,
+  ...props
+}) => {
+  const [open, setOpen] = React.useState(false);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Button$1,
+    {
+      onClick: () => {
+        setOpen((p2) => !p2);
+      },
+      disabled: pristine,
+      ...props
+    },
+    children
+  ), open && /* @__PURE__ */ React.createElement(ResetModal, { reset: reset2, close: () => setOpen(false) }));
+};
+const ResetModal = ({ close: close2, reset: reset2 }) => {
+  return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Reset"), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", null, "Are you sure you want to reset all changes?")), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
+    Button$1,
+    {
+      style: { flexGrow: 3 },
+      variant: "primary",
+      onClick: async () => {
+        await reset2();
+        close2();
+      }
+    },
+    "Reset"
+  ))));
+};
+function AiFillWarning(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z" }, "child": [] }] })(props);
+}
+function AiOutlineLoading(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }, "child": [] }] })(props);
+}
+const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
+const disabledClasses$1 = "opacity-50 pointer-events-none cursor-not-allowed";
+const BaseTextField = React.forwardRef(({ className, disabled, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ref,
+      type: "text",
+      className: `${textFieldClasses} ${disabled ? disabledClasses$1 : ""} ${className}`,
+      ...rest
+    }
+  );
+});
+const TextArea = React.forwardRef(({ ...props }, ref) => {
+  return /* @__PURE__ */ React.createElement(
+    "textarea",
+    {
+      ...props,
+      className: "shadow-inner text-base px-3 py-2 text-gray-600 resize-y focus:shadow-outline focus:border-blue-500 block w-full border border-gray-200 focus:text-gray-900 rounded",
+      ref,
+      style: { minHeight: "160px" }
+    }
+  );
+});
 const { get: getColor, to: toColor } = pkg;
 var ColorFormat = /* @__PURE__ */ ((ColorFormat2) => {
   ColorFormat2["Hex"] = "hex";
@@ -39214,533 +39772,122 @@ const NumberInput = ({
     }
   }
 );
-function cn$1(...inputs) {
-  return twMerge(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.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;
+const StyledImage = ({ src }) => {
+  const isSvg = /\.svg$/.test(src);
   return /* @__PURE__ */ React.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.useEffect(() => {
-    const link = document.createElement("link");
-    link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Libre+Baskerville:wght@400;500;600;700&display=swap";
-    link.rel = "stylesheet";
-    document.head.appendChild(link);
-    return () => {
-      document.head.removeChild(link);
-    };
-  }, []);
-  return null;
-}
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-const OverflowMenu$1 = ({ toolbarItems: toolbarItems2, className = "w-full" }) => {
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, toolbarItems2.length > 0 && /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(
-    PopoverPrimitive.Trigger,
+const StyledFile = ({ src }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "max-w-full w-full flex-1 flex justify-start items-center gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "w-12 h-12 bg-white shadow border border-gray-100 rounded flex justify-center flex-none" }, /* @__PURE__ */ React.createElement(BiFileBlank, { className: "w-3/5 h-full fill-gray-300" })), /* @__PURE__ */ React.createElement("span", { className: "text-base text-left flex-1 text-gray-500 w-full break-words truncate" }, src));
+};
+const ImageUpload = React.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.createElement("div", { className: "w-full max-w-full", ...getRootProps() }, /* @__PURE__ */ React.createElement("input", { ...getInputProps() }), value ? loading ? /* @__PURE__ */ React.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ React.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__default.createElement(
-      "svg",
+    /* @__PURE__ */ React.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__default.createElement(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+      isImage(src) ? /* @__PURE__ */ React.createElement(StyledImage, { src }) : /* @__PURE__ */ React.createElement(StyledFile, { src })
+    ),
+    onClear && /* @__PURE__ */ React.createElement(
+      DeleteImageButton,
+      {
+        onClick: (e3) => {
+          e3.stopPropagation();
+          onClear();
         }
-      )
+      }
     )
-  ), /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Content, { style: { zIndex: 2e4 }, align: "end" }, /* @__PURE__ */ React__default.createElement("div", { className: "mt-0 -mr-1 rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1" }, toolbarItems2.map((toolbarItem) => {
-    return /* @__PURE__ */ React__default.createElement(
-      "span",
-      {
-        "data-test": `${toolbarItem.name}OverflowButton`,
-        key: toolbarItem.name,
-        onMouseDown: (event) => {
-          event.preventDefault();
-          toolbarItem.onMouseDown(event);
-          setOpen(false);
-        },
-        className: classNames(
-          toolbarItem.active ? "bg-gray-50 text-blue-500" : "bg-white text-gray-600",
-          "hover:bg-gray-50 hover:text-blue-500 cursor-pointer pointer-events-auto px-4 py-2 text-sm w-full flex items-center whitespace-nowrap",
-          toolbarItem.className ?? ""
-        )
-      },
-      /* @__PURE__ */ React__default.createElement("div", { className: "mr-2 opacity-80" }, toolbarItem.Icon),
-      " ",
-      toolbarItem.label
-    );
-  }))))));
-};
-function BsArrowRightShort(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" }, "child": [] }] })(props);
-}
-function BsCheckCircleFill(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }, "child": [] }] })(props);
-}
-function BsExclamationOctagonFill(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" }, "child": [] }] })(props);
-}
-const MessageIcon = ({
-  type = "success",
-  className = ""
-}) => {
-  const icons = {
-    success: BiCheckCircle,
-    warning: BiError,
-    error: BiError,
-    info: BiInfoCircle
-  };
-  const Icon = icons[type];
-  return /* @__PURE__ */ React__default.createElement(Icon, { className });
-};
-const Message = ({
-  children,
-  type = "success",
-  size: size2 = "medium",
-  className = "",
-  link,
-  linkLabel = "Learn More"
-}) => {
-  const containerClasses = {
-    success: "bg-gradient-to-r from-green-50 to-green-100 border-green-200",
-    warning: "bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-200",
-    error: "bg-gradient-to-r from-red-50 to-red-100 border-red-200",
-    info: "bg-gradient-to-r from-blue-50 to-blue-100 border-blue-100"
-  };
-  const textClasses = {
-    success: "text-green-700",
-    warning: "text-yellow-700",
-    error: "text-red-700",
-    info: "text-blue-700"
-  };
-  const iconClasses = {
-    success: "text-green-400",
-    warning: "text-yellow-400",
-    error: "text-red-400",
-    info: "text-blue-400"
-  };
-  const sizeClasses = {
-    small: "px-3 py-1.5 text-xs",
-    medium: "px-4 py-2.5 text-sm"
-  };
-  return /* @__PURE__ */ React__default.createElement(
-    "div",
+  ) : /* @__PURE__ */ React.createElement(
+    "button",
     {
-      className: `rounded-lg border shadow-sm ${sizeClasses[size2]} ${containerClasses[type]} ${className}`
+      className: "outline-none relative hover:opacity-60 w-full",
+      onClick
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement(
-      MessageIcon,
-      {
-        type,
-        className: `${size2 === "small" ? "w-5" : "w-6"} h-auto flex-shrink-0 ${iconClasses[type]}`
-      }
-    ), /* @__PURE__ */ React__default.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children)), link && /* @__PURE__ */ React__default.createElement(
-      "a",
-      {
-        href: link,
-        target: "_blank",
-        className: "flex-shrink-0 flex items-center gap-1 text-blue-600 underline decoration-blue-200 hover:text-blue-500 hover:decoration-blue-500 transition-all ease-out duration-150"
-      },
-      linkLabel,
-      " ",
-      /* @__PURE__ */ React__default.createElement(BsArrowRightShort, { className: "w-4 h-auto" })
-    ))
-  );
+    loading ? /* @__PURE__ */ React.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ React.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.createElement("br", null), "or click to select a file")
+  ));
+});
+const DeleteImageButton = ({
+  onClick
+}) => {
+  return /* @__PURE__ */ React.createElement(IconButton, { variant: "white", className: "flex-none", onClick }, /* @__PURE__ */ React.createElement(TrashIcon, { className: "w-7 h-auto caret-transparent" }));
 };
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
+const ImageLoadingIndicator = () => /* @__PURE__ */ React.createElement("div", { className: "p-4 w-full min-h-[96px] flex flex-col justify-center items-center" }, /* @__PURE__ */ React.createElement(LoadingDots, null));
+function 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 DropdownMenu({
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...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 DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Trigger,
-    {
-      "data-slot": "dropdown-menu-trigger",
-      ...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 DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Content,
-    {
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-base max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-        className
-      ),
-      ...props
-    }
-  ));
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer text-gray-700 hover:text-blue-500",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function DropdownMenuSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Separator,
-    {
-      "data-slot": "dropdown-menu-separator",
-      className: cn("bg-border -mx-1 my-1 h-px", className),
-      ...props
-    }
-  );
-}
-const DropdownButton = React.forwardRef(
-  ({
-    variant = "primary",
-    size: size2 = "medium",
-    busy,
-    disabled,
-    rounded = "full",
-    children,
-    className = "",
-    onMainAction,
-    items: items2,
-    showSplitButton = true,
-    ...props
-  }, ref) => {
-    const [open, setOpen] = React.useState(false);
-    if (!onMainAction || !showSplitButton) {
-      return /* @__PURE__ */ React.createElement(DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-        Button$1,
-        {
-          variant,
-          size: size2,
-          busy,
-          disabled,
-          rounded,
-          className: cn$1("gap-2", className),
-          ...props
-        },
-        children,
-        /* @__PURE__ */ React.createElement(
-          ChevronDownIcon$1,
-          {
-            className: cn$1(
-              "h-4 w-4 transition-transform duration-200",
-              open && "rotate-180"
-            )
-          }
-        )
-      )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom", className: "z-[100000]" }, items2.map((item, index) => /* @__PURE__ */ React.createElement(
-        DropdownMenuItem,
-        {
-          key: index,
-          onClick: item.onClick,
-          disabled: item.disabled,
-          variant: item.variant
-        },
-        item.icon && item.icon,
-        item.label
-      ))));
-    }
-    return /* @__PURE__ */ React.createElement("div", { className: cn$1("inline-flex", className) }, /* @__PURE__ */ React.createElement(
-      Button$1,
-      {
-        variant,
-        size: size2,
-        busy,
-        disabled,
-        rounded: "left",
-        onClick: onMainAction,
-        className: "border-r-0 w-full",
-        ...props
-      },
-      children
-    ), /* @__PURE__ */ React.createElement(DropdownMenu, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, null, /* @__PURE__ */ React.createElement(
-      Button$1,
-      {
-        variant,
-        size: size2,
-        busy,
-        disabled,
-        rounded: "right",
-        className: "px-4 border-l",
-        style: { borderColor: "#00000030" },
-        "aria-label": "More options"
-      },
-      /* @__PURE__ */ React.createElement(
-        ChevronDownIcon$1,
-        {
-          className: cn$1(
-            "h-4 w-4 transition-transform duration-200 fill-none",
-            open && "rotate-180"
-          ),
-          style: { fill: "none" }
-        }
-      )
-    )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom" }, items2.map((item, index) => {
-      var _a2;
-      return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, /* @__PURE__ */ React.createElement(
-        DropdownMenuItem,
-        {
-          onClick: item.onClick,
-          disabled: item.disabled,
-          variant: item.variant
-        },
-        item.icon && item.icon,
-        item.label
-      ), item.variant === "destructive" && index < items2.length - 1 && ((_a2 = items2[index + 1]) == null ? void 0 : _a2.variant) !== "destructive" && /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null));
-    }))));
-  }
-);
-DropdownButton.displayName = "DropdownButton";
-function 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;
-const StyledImage = ({ src }) => {
-  const isSvg = /\.svg$/.test(src);
-  return /* @__PURE__ */ React.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.createElement("div", { className: "max-w-full w-full flex-1 flex justify-start items-center gap-3" }, /* @__PURE__ */ React.createElement("div", { className: "w-12 h-12 bg-white shadow border border-gray-100 rounded flex justify-center flex-none" }, /* @__PURE__ */ React.createElement(BiFileBlank, { className: "w-3/5 h-full fill-gray-300" })), /* @__PURE__ */ React.createElement("span", { className: "text-base text-left flex-1 text-gray-500 w-full break-words truncate" }, src));
-};
-const ImageUpload = React.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.createElement("div", { className: "w-full max-w-full", ...getRootProps() }, /* @__PURE__ */ React.createElement("input", { ...getInputProps() }), value ? loading ? /* @__PURE__ */ React.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `relative w-full max-w-full flex justify-start ${isImage(src) ? `items-start gap-3` : `items-center gap-2`}`
-    },
-    /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        className: "flex-shrink min-w-0 focus-within:shadow-outline focus-within:border-blue-500 rounded outline-none overflow-visible cursor-pointer border-none hover:opacity-60 transition ease-out duration-100",
-        onClick,
-        ref
-      },
-      isImage(src) ? /* @__PURE__ */ React.createElement(StyledImage, { src }) : /* @__PURE__ */ React.createElement(StyledFile, { src })
-    ),
-    onClear && /* @__PURE__ */ React.createElement(
-      DeleteImageButton,
-      {
-        onClick: (e3) => {
-          e3.stopPropagation();
-          onClear();
-        }
-      }
-    )
-  ) : /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      className: "outline-none relative hover:opacity-60 w-full",
-      onClick
-    },
-    loading ? /* @__PURE__ */ React.createElement(ImageLoadingIndicator, null) : /* @__PURE__ */ React.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.createElement("br", null), "or click to select a file")
-  ));
-});
-const DeleteImageButton = ({
-  onClick
-}) => {
-  return /* @__PURE__ */ React.createElement(IconButton, { variant: "white", className: "flex-none", onClick }, /* @__PURE__ */ React.createElement(TrashIcon, { className: "w-7 h-auto caret-transparent" }));
-};
-const ImageLoadingIndicator = () => /* @__PURE__ */ React.createElement("div", { className: "p-4 w-full min-h-[96px] flex flex-col justify-center items-center" }, /* @__PURE__ */ React.createElement(LoadingDots, null));
-function 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);
+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 = 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",
@@ -42733,30 +42880,6 @@ const PasswordFieldPlugin = {
   },
   parse: parse$2
 };
-function AiFillWarning(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z" }, "child": [] }] })(props);
-}
-function AiOutlineLoading(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }, "child": [] }] })(props);
-}
-function FaCircle(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" }, "child": [] }] })(props);
-}
-function FaFile(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 384 512" }, "child": [{ "tag": "path", "attr": { "d": "M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z" }, "child": [] }] })(props);
-}
-function FaFolder(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z" }, "child": [] }] })(props);
-}
-function FaLock(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" }, "child": [] }] })(props);
-}
-function FaSpinner(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z" }, "child": [] }] })(props);
-}
-function FaUnlock(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z" }, "child": [] }] })(props);
-}
 function GrCircleQuestion(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "strokeWidth": "2", "d": "M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,15 L12,14 C12,13 12,12.5 13,12 C14,11.5 15,11 15,9.5 C15,8.5 14,7 12,7 C10,7 9,8.26413718 9,10 M12,16 L12,18" }, "child": [] }] })(props);
 }
@@ -45457,7 +45580,7 @@ const Callout = ({
   className = "",
   ...props
 }) => {
-  const commonAlertStyles = "ml-8 text-sm px-4 py-3 rounded-md border";
+  const commonAlertStyles = "text-sm px-4 py-3 rounded-md border";
   const styles = {
     warning: `text-amber-700 bg-amber-100 border-amber-700/20`,
     info: `text-blue-600 bg-blue-100/50 border-blue-600/20`,
@@ -46229,7 +46352,7 @@ function formatDistanceToNow(dirtyDate, options) {
   requiredArgs(1, arguments);
   return formatDistance2(dirtyDate, Date.now(), options);
 }
-const version$1 = "2.9.3";
+const version$1 = "2.9.5";
 const VersionInfo = () => {
   var _a2, _b, _c, _d, _e, _f;
   const cms = useCMS();
@@ -47869,7 +47992,7 @@ function Alerts2({ alerts }) {
   if (!alerts.all.length) {
     return null;
   }
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "fixed bottom-0 left-0 right-0 p-6 flex flex-col items-center z-[999999]" }, alerts.all.filter((alert) => {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "fixed top-0 left-0 p-6 flex flex-col items-center z-[999999]" }, alerts.all.filter((alert) => {
     return alert.level !== "error";
   }).map((alert) => {
     return /* @__PURE__ */ React__default.createElement(Alert, { key: alert.id, level: alert.level }, alert.level === "info" && /* @__PURE__ */ React__default.createElement(MdInfo, { className: "w-5 h-auto opacity-70" }), alert.level === "success" && /* @__PURE__ */ React__default.createElement(MdCheckCircle, { className: "w-5 h-auto opacity-70" }), alert.level === "warn" && /* @__PURE__ */ React__default.createElement(MdWarning, { className: "w-5 h-auto opacity-70" }), /* @__PURE__ */ React__default.createElement("p", { className: "m-0 flex-1 max-w-[680px] text-left" }, parseUrlsInText(alert.message.toString())), /* @__PURE__ */ React__default.createElement(
@@ -47913,10 +48036,10 @@ const Alert = ({
   ...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"
+    info: "bg-white border-blue-500 text-blue-600 fill-blue-500",
+    success: "bg-white border-green-500 text-green-600 fill-green-500",
+    warn: "bg-white border-yellow-500 text-yellow-600 fill-yellow-500",
+    error: "bg-white border-red-500 text-red-600 fill-red-500"
   };
   const borderClasses = {
     info: "border-blue-200",
@@ -47939,7 +48062,7 @@ const Alert = ({
     /* @__PURE__ */ React__default.createElement(
       "div",
       {
-        className: `flex items-center gap-1.5 min-w-[350px] rounded-md border p-2 ${borderClasses[level]}`,
+        className: `flex items-center gap-1.5 w-[350px] rounded-md border p-2 ${borderClasses[level]}`,
         ...props
       }
     )
@@ -47951,7 +48074,7 @@ const CloseAlert = ({ ...styleProps }) => /* @__PURE__ */ React__default.createE
     className: "border-none bg-transparent p-0 outline-none flex items-center",
     ...styleProps
   },
-  /* @__PURE__ */ React__default.createElement(BiX, { className: "w-5 auto flex-grow-0 flex-shrink-0" })
+  /* @__PURE__ */ React__default.createElement(BiX, { className: "w-5 auto flex-grow-0 flex-shrink-0 text-gray-700" })
 );
 function CursorPaginator({
   navigateNext,
@@ -48248,6 +48371,18 @@ const BranchPreviewButton = (props) => {
     /* @__PURE__ */ React.createElement(BiLinkExternal, { className: "h-5 w-auto" })
   );
 };
+const EDITORIAL_WORKFLOW_STATUS = {
+  QUEUED: "queued",
+  PROCESSING: "processing",
+  SETTING_UP: "setting_up",
+  CREATING_BRANCH: "creating_branch",
+  INDEXING: "indexing",
+  CONTENT_GENERATION: "content_generation",
+  CREATING_PR: "creating_pr",
+  COMPLETE: "complete",
+  ERROR: "error",
+  TIMEOUT: "timeout"
+};
 const num123 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const numFas = ["۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹", "۰"];
 const numKor = ["０", "１", "２", "３", "４", "５", "６", "７", "８", "９"];
@@ -63661,367 +63796,6 @@ class TinaAdminApi {
     );
   }
 }
-const ProgressBar = ({
-  progress,
-  className = "",
-  color = "blue"
-}) => {
-  const clampedProgress = Math.min(Math.max(progress, 0), 100);
-  const colorClass = color === "green" ? "bg-green-500" : "bg-blue-500";
-  return /* @__PURE__ */ React.createElement("div", { className: `w-full ${className}` }, /* @__PURE__ */ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `${colorClass} h-2 rounded-full transition-all duration-300 ease-out`,
-      style: { width: `${clampedProgress}%` }
-    }
-  )));
-};
-const EDITORIAL_WORKFLOW_STATUS = {
-  QUEUED: "queued",
-  PROCESSING: "processing",
-  SETTING_UP: "setting_up",
-  CREATING_BRANCH: "creating_branch",
-  INDEXING: "indexing",
-  CONTENT_GENERATION: "content_generation",
-  CREATING_PR: "creating_pr",
-  COMPLETE: "complete",
-  ERROR: "error",
-  TIMEOUT: "timeout"
-};
-const FormActionMenu = ({ actions, form }) => {
-  const [actionMenuVisibility, setActionMenuVisibility] = useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MoreActionsButton, { onClick: () => setActionMenuVisibility((p2) => !p2) }), /* @__PURE__ */ React.createElement(ActionsOverlay, { open: actionMenuVisibility }, /* @__PURE__ */ React.createElement(
-    Dismissible,
-    {
-      click: true,
-      escape: true,
-      disabled: !actionMenuVisibility,
-      onDismiss: () => {
-        setActionMenuVisibility((p2) => !p2);
-      }
-    },
-    actions.map((Action, i2) => (
-      // TODO: `i` will suppress warnings but this indicates that maybe
-      //        Actions should just be componets
-      /* @__PURE__ */ React.createElement(Action, { form, key: i2 })
-    ))
-  )));
-};
-const MoreActionsButton = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
-  "button",
-  {
-    className: `h-16 w-10 self-stretch bg-transparent bg-center bg-[length:auto_18px] -mr-4 ml-2 outline-none cursor-pointer transition-opacity duration-100 ease-out flex justify-center items-center hover:bg-gray-50 hover:fill-gray-700 ${className}`,
-    ...props
-  },
-  /* @__PURE__ */ React.createElement(EllipsisVerticalIcon, null)
-);
-const ActionsOverlay = ({ open, className = "", style = {}, ...props }) => /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    className: `min-w-[192px] rounded-3xl border border-solid border-[#efefef] block absolute bottom-5 right-5 ${open ? "opacity-100" : "opacity-0"} transition-all duration-100 ease-out origin-bottom-right shadow-[0_2px_3px_rgba(0,0,0,0.05)] bg-white overflow-hidden z-10 ${className}`,
-    style: {
-      transform: open ? "translate3d(0, -28px, 0) scale3d(1, 1, 1)" : "translate3d(0, 0, 0) scale3d(0.5, 0.5, 1)",
-      pointerEvents: open ? "all" : "none",
-      ...style
-    },
-    ...props
-  }
-);
-const ActionButton = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
-  "button",
-  {
-    className: `relative text-center text-[13px] px-3 h-10 font-normal w-full bg-none cursor-pointer outline-none border-0 transition-all duration-[150ms] ease-out hover:text-blue-500 hover:bg-gray50 [&:not(:last-child)]: border-b-[1px] border-solid border-b-[#edecf3] ${className}`,
-    ...props
-  }
-);
-const FormPortalContext = React.createContext(() => {
-  return null;
-});
-function useFormPortal() {
-  return React.useContext(FormPortalContext);
-}
-const FormPortalProvider = ({
-  children
-}) => {
-  const wrapperRef = React.useRef(null);
-  const zIndexRef = React.useRef(0);
-  const FormPortal = React.useCallback(
-    (props) => {
-      if (!wrapperRef.current)
-        return null;
-      return createPortal(
-        props.children({ zIndexShift: zIndexRef.current += 1 }),
-        wrapperRef.current
-      );
-    },
-    [wrapperRef, zIndexRef]
-  );
-  return /* @__PURE__ */ React.createElement(FormPortalContext.Provider, { value: FormPortal }, /* @__PURE__ */ React.createElement("div", { ref: wrapperRef, className: "relative w-full flex-1 overflow-hidden" }, children));
-};
-const LoadingDots = ({
-  dotSize = 8,
-  color = "white"
-}) => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color }), /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color, delay: 0.3 }), /* @__PURE__ */ React.createElement(SingleDot, { dotSize, color, delay: 0.5 }));
-};
-const SingleDot = ({ delay = 0, color, dotSize }) => /* @__PURE__ */ React.createElement(
-  "span",
-  {
-    className: "inline-block mr-1",
-    style: {
-      animation: "loading-dots-scale-up-and-down 2s linear infinite",
-      animationDelay: `${delay}s`,
-      background: color,
-      width: dotSize,
-      height: dotSize,
-      borderRadius: dotSize
-    }
-  }
-);
-const ResetForm = ({
-  pristine,
-  reset: reset2,
-  children,
-  ...props
-}) => {
-  const [open, setOpen] = React.useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Button$1,
-    {
-      onClick: () => {
-        setOpen((p2) => !p2);
-      },
-      disabled: pristine,
-      ...props
-    },
-    children
-  ), open && /* @__PURE__ */ React.createElement(ResetModal, { reset: reset2, close: () => setOpen(false) }));
-};
-const ResetModal = ({ close: close2, reset: reset2 }) => {
-  return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Reset"), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement("p", null, "Are you sure you want to reset all changes?")), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
-    Button$1,
-    {
-      style: { flexGrow: 3 },
-      variant: "primary",
-      onClick: async () => {
-        await reset2();
-        close2();
-      }
-    },
-    "Reset"
-  ))));
-};
-const NoFieldsPlaceholder = () => /* @__PURE__ */ React.createElement(
-  "div",
-  {
-    className: "relative flex flex-col items-center justify-center text-center p-5 pb-16 w-full h-full overflow-y-auto",
-    style: {
-      animationName: "fade-in",
-      animationDelay: "300ms",
-      animationTimingFunction: "ease-out",
-      animationIterationCount: 1,
-      animationFillMode: "both",
-      animationDuration: "150ms"
-    }
-  },
-  /* @__PURE__ */ React.createElement(Emoji, { className: "block pb-5" }, "🤔"),
-  /* @__PURE__ */ React.createElement("h3", { className: "font-sans font-normal text-lg block pb-5" }, "Hey, you don't have any fields added to this form."),
-  /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, /* @__PURE__ */ React.createElement(
-    "a",
-    {
-      className: "text-center rounded-3xl border border-solid border-gray-100 shadow-[0_2px_3px_rgba(0,0,0,0.12)] font-normal cursor-pointer text-[12px] transition-all duration-100 ease-out bg-white text-gray-700 py-3 pr-5 pl-14 relative no-underline inline-block hover:text-blue-500",
-      href: "https://tinacms.org/docs/fields",
-      target: "_blank",
-      rel: "noopener noreferrer"
-    },
-    /* @__PURE__ */ React.createElement(
-      Emoji,
-      {
-        className: "absolute left-5 top-1/2 origin-center -translate-y-1/2 transition-all duration-100 ease-out",
-        style: { fontSize: 24 }
-      },
-      "📖"
-    ),
-    " ",
-    "Field Setup Guide"
-  ))
-);
-const FormKeyBindings = ({ onSubmit }) => {
-  useEffect(() => {
-    const handleKeyDown = (e3) => {
-      if ((e3.metaKey || e3.ctrlKey) && e3.key === "s") {
-        e3.preventDefault();
-        onSubmit();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [onSubmit]);
-  return null;
-};
-const FormBuilder = ({
-  form,
-  onPristineChange,
-  ...rest
-}) => {
-  const cms = useCMS$1();
-  const hideFooter = !!rest.hideFooter;
-  const [createBranchModalOpen, setCreateBranchModalOpen] = React.useState(false);
-  const tinaForm = form.tinaForm;
-  const finalForm = form.tinaForm.finalForm;
-  React.useEffect(() => {
-    var _a2;
-    const collection = cms.api.tina.schema.getCollectionByFullPath(
-      tinaForm.path
-    );
-    if ((_a2 = collection == null ? void 0 : collection.ui) == null ? void 0 : _a2.beforeSubmit) {
-      tinaForm.beforeSubmit = (values) => collection.ui.beforeSubmit({ cms, form: tinaForm, values });
-    } else {
-      tinaForm.beforeSubmit = void 0;
-    }
-  }, [tinaForm.path]);
-  const moveArrayItem = React.useCallback(
-    (result) => {
-      if (!result.destination || !finalForm)
-        return;
-      const name = result.type;
-      finalForm.mutators.move(
-        name,
-        result.source.index,
-        result.destination.index
-      );
-    },
-    [tinaForm]
-  );
-  React.useEffect(() => {
-    const unsubscribe = finalForm.subscribe(
-      ({ pristine }) => {
-        if (onPristineChange) {
-          onPristineChange(pristine);
-        }
-      },
-      { pristine: true }
-    );
-    return () => {
-      unsubscribe();
-    };
-  }, [finalForm]);
-  const fieldGroup = tinaForm.getActiveField(form.activeFieldName);
-  return /* @__PURE__ */ React.createElement(
-    Form$1,
-    {
-      key: tinaForm.id,
-      form: tinaForm.finalForm,
-      onSubmit: tinaForm.onSubmit
-    },
-    ({
-      handleSubmit,
-      pristine,
-      invalid,
-      submitting,
-      dirtySinceLastSubmit,
-      hasValidationErrors
-    }) => {
-      const usingProtectedBranch = cms.api.tina.usingProtectedBranch();
-      const canSubmit = !pristine && !submitting && !hasValidationErrors && !(invalid && !dirtySinceLastSubmit);
-      const safeSubmit = async () => {
-        if (canSubmit) {
-          await handleSubmit();
-        }
-      };
-      const safeHandleSubmit = async () => {
-        if (usingProtectedBranch) {
-          setCreateBranchModalOpen(true);
-        } else {
-          safeSubmit();
-        }
-      };
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, createBranchModalOpen && /* @__PURE__ */ React.createElement(
-        CreateBranchModal,
-        {
-          safeSubmit,
-          crudType: tinaForm.crudType,
-          path: tinaForm.path,
-          values: tinaForm.values,
-          close: () => setCreateBranchModalOpen(false)
-        }
-      ), /* @__PURE__ */ React.createElement(DragDropContext, { onDragEnd: moveArrayItem }, /* @__PURE__ */ React.createElement(FormKeyBindings, { onSubmit: safeHandleSubmit }), /* @__PURE__ */ React.createElement(FormPortalProvider, null, /* @__PURE__ */ React.createElement(FormWrapper, { id: tinaForm.id }, (tinaForm == null ? void 0 : tinaForm.fields.length) ? /* @__PURE__ */ React.createElement(
-        FieldsBuilder,
-        {
-          form: tinaForm,
-          activeFieldName: form.activeFieldName,
-          fields: fieldGroup.fields
-        }
-      ) : /* @__PURE__ */ React.createElement(NoFieldsPlaceholder, null))), !hideFooter && /* @__PURE__ */ React.createElement("div", { className: "relative flex-none w-full h-16 px-6 bg-white border-t border-gray-100 flex items-center justify-end" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 w-full justify-end gap-2	flex items-center max-w-form" }, tinaForm.reset && /* @__PURE__ */ React.createElement(
-        ResetForm,
-        {
-          pristine,
-          reset: async () => {
-            finalForm.reset();
-            await tinaForm.reset();
-          }
-        },
-        tinaForm.buttons.reset
-      ), /* @__PURE__ */ React.createElement(
-        Button$1,
-        {
-          onClick: safeHandleSubmit,
-          disabled: !canSubmit,
-          busy: submitting,
-          variant: "primary"
-        },
-        submitting && /* @__PURE__ */ React.createElement(LoadingDots, null),
-        !submitting && tinaForm.buttons.save
-      ), tinaForm.actions.length > 0 && /* @__PURE__ */ React.createElement(
-        FormActionMenu,
-        {
-          form: tinaForm,
-          actions: tinaForm.actions
-        }
-      )))));
-    }
-  );
-};
-const FormStatus = ({ pristine }) => {
-  const pristineClass = pristine ? "text-green-500" : "text-red-500";
-  return /* @__PURE__ */ React.createElement(FaCircle, { className: cn("h-3", pristineClass) });
-};
-const FormWrapper = ({
-  id: id2,
-  children
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-test": `form:${id2 == null ? void 0 : id2.replace(/\\/g, "/")}`,
-      className: "h-full overflow-y-auto max-h-full bg-gray-50"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "py-5 px-6" }, children)
-  );
-};
-const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
-  "span",
-  {
-    className: `text-[40px] leading-none inline-block ${className}`,
-    ...props
-  }
-);
-const CreateBranchModel = ({
-  close: close2,
-  safeSubmit,
-  relativePath: relativePath2,
-  values,
-  crudType
-}) => /* @__PURE__ */ React.createElement(
-  CreateBranchModal,
-  {
-    close: close2,
-    safeSubmit,
-    path: relativePath2,
-    values,
-    crudType
-  }
-);
 const pathRelativeToCollection = (collectionPath, fullPath) => {
   const normalizedCollectionPath = collectionPath.replace(/\\/g, "/");
   const normalizedFullPath = fullPath.replace(/\\/g, "/");
@@ -64050,7 +63824,6 @@ const CreateBranchModal = ({
   const [isExecuting, setIsExecuting] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState("");
   const [currentStep, setCurrentStep] = React.useState(0);
-  const [statusMessage, setStatusMessage] = React.useState("");
   const [elapsedTime, setElapsedTime] = React.useState(0);
   React.useEffect(() => {
     let interval;
@@ -64094,7 +63867,6 @@ const CreateBranchModal = ({
       setDisabled(true);
       setIsExecuting(true);
       setCurrentStep(1);
-      setStatusMessage("Initializing workflow...");
       let graphql2 = "";
       if (crudType === "create") {
         graphql2 = CREATE_DOCUMENT_GQL;
@@ -64119,8 +63891,6 @@ const CreateBranchModal = ({
           }
         },
         onStatusUpdate: (status) => {
-          const message = status.message || `Status: ${status.status}`;
-          setStatusMessage(message);
           switch (status.status) {
             case EDITORIAL_WORKFLOW_STATUS.SETTING_UP:
             case EDITORIAL_WORKFLOW_STATUS.CREATING_BRANCH:
@@ -64157,9 +63927,7 @@ const CreateBranchModal = ({
     }
   };
   const renderProgressIndicator = () => {
-    var _a2;
-    const progressPercentage = (currentStep - 1) / steps.length * 100;
-    return /* @__PURE__ */ React.createElement("div", { className: "py-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between mb-4 relative px-5 sm:gap-x-8" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between my-8 relative px-5 sm:gap-x-8" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "absolute top-5 h-0.5 bg-gray-200 -z-10",
@@ -64168,7 +63936,7 @@ const CreateBranchModal = ({
     ), currentStep > 1 && currentStep <= steps.length && /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: "absolute top-5 h-0.5 bg-blue-500 -z-10 transition-all duration-500",
+        className: "absolute top-5 h-0.5 bg-tina-orange -z-10 transition-all duration-500",
         style: {
           left: "50px",
           width: `calc((100% - 100px) * ${(currentStep - 1) / (steps.length - 1)})`
@@ -64196,7 +63964,7 @@ const CreateBranchModal = ({
         /* @__PURE__ */ React.createElement(
           "div",
           {
-            className: `w-10 h-10 rounded-full flex items-center justify-center font-medium mb-3 border-2 transition-all duration-300 ${isCompleted ? "bg-green-500 border-green-500 text-white" : isActive ? "bg-blue-500 border-blue-500 text-white" : "bg-white border-gray-200 text-gray-400"}`
+            className: `w-10 h-10 rounded-full flex items-center justify-center font-medium mb-3 border-2 transition-all duration-300 select-none ${isCompleted ? "bg-green-500 border-green-500 text-white" : isActive ? "bg-tina-orange border-tina-orange text-white" : "bg-white border-gray-200 text-gray-400"}`
           },
           isCompleted ? /* @__PURE__ */ React.createElement(
             "svg",
@@ -64217,7 +63985,7 @@ const CreateBranchModal = ({
         ),
         /* @__PURE__ */ React.createElement("div", { className: "text-center max-w-24" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-semibold leading-tight" }, step.name), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-400 mt-1 leading-tight" }, step.description))
       );
-    })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-medium text-gray-700" }, "Step ", currentStep > steps.length ? steps.length : currentStep, " of", " ", steps.length), isExecuting && currentStep > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500" }, /* @__PURE__ */ React.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React.createElement(
+    })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500" }, "Estimated time: 1-2 min "), isExecuting && currentStep > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500" }, /* @__PURE__ */ React.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -64225,34 +63993,20 @@ const CreateBranchModal = ({
         clipRule: "evenodd"
       }
     )), formatTime(elapsedTime))), /* @__PURE__ */ React.createElement(
-      ProgressBar,
-      {
-        progress: progressPercentage,
-        className: "mb-4",
-        color: currentStep > steps.length ? "green" : "blue"
-      }
-    ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 mb-2" }, currentStep >= 4 ? /* @__PURE__ */ React.createElement(
-      "svg",
+      "a",
       {
-        className: "w-4 h-4 text-green-500",
-        fill: "currentColor",
-        viewBox: "0 0 20 20"
+        className: "underline text-tina-orange-dark font-medium text-xs",
+        href: "https://tina.io/docs/tinacloud/editorial-workflow",
+        target: "_blank"
       },
-      /* @__PURE__ */ React.createElement(
-        "path",
-        {
-          fillRule: "evenodd",
-          d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-          clipRule: "evenodd"
-        }
-      )
-    ) : /* @__PURE__ */ React.createElement(AiOutlineLoading, { className: "text-blue-500 animate-spin" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-gray-700" }, statusMessage || `${(_a2 = steps[currentStep - 1]) == null ? void 0 : _a2.name}...`)), /* @__PURE__ */ React.createElement("div", { className: "text-left" }, /* @__PURE__ */ React.createElement("p", { className: "text-xs text-gray-500" }, "Estimated time: 1-2 minutes")));
+      "Learn more about Editorial Workflow"
+    ));
   };
   const renderStateContent = () => {
     if (isExecuting) {
       return renderProgressIndicator();
     } else {
-      return /* @__PURE__ */ React.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-red-700 py-2 px-3 mb-4 bg-red-50 border border-red-200 rounded" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-700 mb-4 max-w-sm" }, "To make changes, create a copy then get it approved and merged for it to go live.", " ", /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-red-700 py-2 px-3 mb-4 bg-red-50 border border-red-200 rounded" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-700 mb-4 max-w-sm" }, "To make changes, you need to create a copy then get it approved and merged for it to go live.", /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement("span", { className: "text-gray-500" }, "Learn more about "), /* @__PURE__ */ React.createElement(
         "a",
         {
           className: "underline text-tina-orange-dark font-medium",
@@ -64260,7 +64014,7 @@ const CreateBranchModal = ({
           target: "_blank"
         },
         "Editorial Workflow"
-      )), /* @__PURE__ */ React.createElement(
+      ), "."), /* @__PURE__ */ React.createElement(
         PrefixedTextField,
         {
           name: "new-branch-name",
@@ -64269,7 +64023,6 @@ const CreateBranchModal = ({
           value: newBranchName,
           onChange: (e3) => {
             setErrorMessage("");
-            setStatusMessage("");
             setNewBranchName(e3.target.value);
           }
         }
@@ -64320,6 +64073,217 @@ const PrefixedTextField = ({
     }
   )));
 };
+const NoFieldsPlaceholder = () => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: "relative flex flex-col items-center justify-center text-center p-5 pb-16 w-full h-full overflow-y-auto",
+    style: {
+      animationName: "fade-in",
+      animationDelay: "300ms",
+      animationTimingFunction: "ease-out",
+      animationIterationCount: 1,
+      animationFillMode: "both",
+      animationDuration: "150ms"
+    }
+  },
+  /* @__PURE__ */ React.createElement(Emoji, { className: "block pb-5" }, "🤔"),
+  /* @__PURE__ */ React.createElement("h3", { className: "font-sans font-normal text-lg block pb-5" }, "Hey, you don't have any fields added to this form."),
+  /* @__PURE__ */ React.createElement("p", { className: "block pb-5" }, /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      className: "text-center rounded-3xl border border-solid border-gray-100 shadow-[0_2px_3px_rgba(0,0,0,0.12)] font-normal cursor-pointer text-[12px] transition-all duration-100 ease-out bg-white text-gray-700 py-3 pr-5 pl-14 relative no-underline inline-block hover:text-blue-500",
+      href: "https://tinacms.org/docs/fields",
+      target: "_blank",
+      rel: "noopener noreferrer"
+    },
+    /* @__PURE__ */ React.createElement(
+      Emoji,
+      {
+        className: "absolute left-5 top-1/2 origin-center -translate-y-1/2 transition-all duration-100 ease-out",
+        style: { fontSize: 24 }
+      },
+      "📖"
+    ),
+    " ",
+    "Field Setup Guide"
+  ))
+);
+const FormKeyBindings = ({ onSubmit }) => {
+  useEffect(() => {
+    const handleKeyDown = (e3) => {
+      if ((e3.metaKey || e3.ctrlKey) && e3.key === "s") {
+        e3.preventDefault();
+        onSubmit();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [onSubmit]);
+  return null;
+};
+const FormBuilder = ({
+  form,
+  onPristineChange,
+  ...rest
+}) => {
+  const cms = useCMS$1();
+  const hideFooter = !!rest.hideFooter;
+  const [createBranchModalOpen, setCreateBranchModalOpen] = React.useState(false);
+  const tinaForm = form.tinaForm;
+  const finalForm = form.tinaForm.finalForm;
+  React.useEffect(() => {
+    var _a2;
+    const collection = cms.api.tina.schema.getCollectionByFullPath(
+      tinaForm.path
+    );
+    if ((_a2 = collection == null ? void 0 : collection.ui) == null ? void 0 : _a2.beforeSubmit) {
+      tinaForm.beforeSubmit = (values) => collection.ui.beforeSubmit({ cms, form: tinaForm, values });
+    } else {
+      tinaForm.beforeSubmit = void 0;
+    }
+  }, [tinaForm.path]);
+  const moveArrayItem = React.useCallback(
+    (result) => {
+      if (!result.destination || !finalForm)
+        return;
+      const name = result.type;
+      finalForm.mutators.move(
+        name,
+        result.source.index,
+        result.destination.index
+      );
+    },
+    [tinaForm]
+  );
+  React.useEffect(() => {
+    const unsubscribe = finalForm.subscribe(
+      ({ pristine }) => {
+        if (onPristineChange) {
+          onPristineChange(pristine);
+        }
+      },
+      { pristine: true }
+    );
+    return () => {
+      unsubscribe();
+    };
+  }, [finalForm]);
+  const fieldGroup = tinaForm.getActiveField(form.activeFieldName);
+  return /* @__PURE__ */ React.createElement(
+    Form$1,
+    {
+      key: tinaForm.id,
+      form: tinaForm.finalForm,
+      onSubmit: tinaForm.onSubmit
+    },
+    ({
+      handleSubmit,
+      pristine,
+      invalid,
+      submitting,
+      dirtySinceLastSubmit,
+      hasValidationErrors
+    }) => {
+      const usingProtectedBranch = cms.api.tina.usingProtectedBranch();
+      const canSubmit = !pristine && !submitting && !hasValidationErrors && !(invalid && !dirtySinceLastSubmit);
+      const safeSubmit = async () => {
+        if (canSubmit) {
+          await handleSubmit();
+        }
+      };
+      const safeHandleSubmit = async () => {
+        if (usingProtectedBranch) {
+          setCreateBranchModalOpen(true);
+        } else {
+          safeSubmit();
+        }
+      };
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, createBranchModalOpen && /* @__PURE__ */ React.createElement(
+        CreateBranchModal,
+        {
+          safeSubmit,
+          crudType: tinaForm.crudType,
+          path: tinaForm.path,
+          values: tinaForm.values,
+          close: () => setCreateBranchModalOpen(false)
+        }
+      ), /* @__PURE__ */ React.createElement(DragDropContext, { onDragEnd: moveArrayItem }, /* @__PURE__ */ React.createElement(FormKeyBindings, { onSubmit: safeHandleSubmit }), /* @__PURE__ */ React.createElement(FormPortalProvider, null, /* @__PURE__ */ React.createElement(FormWrapper, { id: tinaForm.id }, (tinaForm == null ? void 0 : tinaForm.fields.length) ? /* @__PURE__ */ React.createElement(
+        FieldsBuilder,
+        {
+          form: tinaForm,
+          activeFieldName: form.activeFieldName,
+          fields: fieldGroup.fields
+        }
+      ) : /* @__PURE__ */ React.createElement(NoFieldsPlaceholder, null))), !hideFooter && /* @__PURE__ */ React.createElement("div", { className: "relative flex-none w-full h-16 px-6 bg-white border-t border-gray-100 flex items-center justify-end" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 w-full justify-end gap-2	flex items-center max-w-form" }, tinaForm.reset && /* @__PURE__ */ React.createElement(
+        ResetForm,
+        {
+          pristine,
+          reset: async () => {
+            finalForm.reset();
+            await tinaForm.reset();
+          }
+        },
+        tinaForm.buttons.reset
+      ), /* @__PURE__ */ React.createElement(
+        Button$1,
+        {
+          onClick: safeHandleSubmit,
+          disabled: !canSubmit,
+          busy: submitting,
+          variant: "primary"
+        },
+        submitting && /* @__PURE__ */ React.createElement(LoadingDots, null),
+        !submitting && tinaForm.buttons.save
+      ), tinaForm.actions.length > 0 && /* @__PURE__ */ React.createElement(
+        FormActionMenu,
+        {
+          form: tinaForm,
+          actions: tinaForm.actions
+        }
+      )))));
+    }
+  );
+};
+const FormStatus = ({ pristine }) => {
+  const pristineClass = pristine ? "text-green-500" : "text-red-500";
+  return /* @__PURE__ */ React.createElement(FaCircle, { className: cn("h-3", pristineClass) });
+};
+const FormWrapper = ({
+  id: id2,
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-test": `form:${id2 == null ? void 0 : id2.replace(/\\/g, "/")}`,
+      className: "h-full overflow-y-auto max-h-full bg-gray-50"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "py-5 px-6" }, children)
+  );
+};
+const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React.createElement(
+  "span",
+  {
+    className: `text-[40px] leading-none inline-block ${className}`,
+    ...props
+  }
+);
+const CreateBranchModel = ({
+  close: close2,
+  safeSubmit,
+  relativePath: relativePath2,
+  values,
+  crudType
+}) => /* @__PURE__ */ React.createElement(
+  CreateBranchModal,
+  {
+    close: close2,
+    safeSubmit,
+    path: relativePath2,
+    values,
+    crudType
+  }
+);
 const NestedForm = (props) => {
   const FormPortal = useFormPortal();
   const id2 = React__default.useMemo(() => uuid(), [props.id, props.initialValues]);
@@ -121066,7 +121030,7 @@ const CollectionListPage = () => {
             },
             close: () => setFolderModalOpen(false)
           }
-        ), /* @__PURE__ */ React__default.createElement(PageHeader, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full" }, /* @__PURE__ */ React__default.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4 items-baseline" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !search && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React__default.createElement(
+        ), /* @__PURE__ */ React__default.createElement(PageHeader, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React__default.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4 items-baseline" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !search && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React__default.createElement(
           "label",
           {
             htmlFor: "sort",