tinacms 0.0.0-f224124-20251110051725 → 0.0.0-f2577b9-20251119082459

package/dist/index.mjs

@@ -39,12 +39,16 @@ 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 { twMerge } from "tailwind-merge";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates, useSortable, SortableContext, verticalListSortingStrategy, defaultAnimateLayoutChanges } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 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 { 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";
+import { Command as Command$3 } from "@udecode/cmdk";
 import { Popover as Popover$3, PopoverButton, Transition, PopoverPanel, TransitionChild, Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
 import { TrailingBlockPlugin } from "@udecode/plate-trailing-block";
 import { getRangeBoundingClientRect, getDOMSelectionBoundingClientRect, useVirtualFloating, offset, flip, getSelectionBoundingClientRect } from "@udecode/plate-floating";
@@ -52,11 +56,9 @@ import { BaseBlockquotePlugin as BaseBlockquotePlugin$1 } from "@udecode/plate-b
 import { NodeIdPlugin } from "@udecode/plate-node-id";
 import { getLinkAttributes as getLinkAttributes$1 } from "@udecode/plate-link";
 import { autoformatSmartQuotes, autoformatPunctuation, autoformatLegal, autoformatArrow, autoformatMath } from "@udecode/plate-autoformat";
-import { formatDistanceToNow as formatDistanceToNow$1 } from "date-fns";
-import * as dropzone from "react-dropzone";
-import { Command as Command$3 } from "@udecode/cmdk";
 import get$5 from "lodash.get";
 import moment from "moment";
+import { formatDistanceToNow as formatDistanceToNow$1 } from "date-fns";
 import { TinaSchema, addNamespaceToSchema, parseURL, resolveForm, normalizePath, canonicalPath, validateSchema } from "@tinacms/schema-tools";
 import { NAMER, resolveField } from "@tinacms/schema-tools";
 import gql from "graphql-tag";
@@ -38335,6 +38337,171 @@ TinaField.propTypes = {
   Component: PropTypes.any.isRequired,
   children: PropTypes.any
 };
+function cn$1(...inputs) {
+  return twMerge(clsx(inputs));
+}
+const Button$1 = ({
+  variant = "secondary",
+  as: Tag2 = "button",
+  size: size2 = "medium",
+  busy,
+  disabled,
+  rounded = "full",
+  children,
+  className = "",
+  ...props
+}) => {
+  const baseClasses = "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out ";
+  const variantClasses = {
+    primary: `shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark border-0`,
+    secondary: `shadow text-gray-500 hover:tina-orange-dark bg-gray-50 hover:bg-white border border-gray-100`,
+    white: `shadow text-gray-500 hover:tina-orange-dark bg-white hover:bg-gray-50 border border-gray-100`,
+    ghost: `text-gray-500 hover:tina-orange-dark hover:shadow border border-transparent border-0 hover:border hover:border-gray-200 bg-transparent`,
+    danger: `shadow text-white bg-red-500 hover:bg-red-600 focus:ring-red-500`,
+    accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`,
+    custom: ""
+  };
+  const state = busy ? `busy` : disabled ? `disabled` : `default`;
+  const stateClasses = {
+    disabled: `pointer-events-none opacity-30 cursor-not-allowed`,
+    busy: `pointer-events-none opacity-70 cursor-wait`,
+    default: ``
+  };
+  const roundedClasses = {
+    full: `rounded`,
+    left: `rounded-l`,
+    right: `rounded-r`,
+    custom: "",
+    none: ""
+  };
+  const sizeClasses = {
+    small: `text-xs h-8 px-3`,
+    medium: `text-sm h-10 px-8`,
+    custom: ``
+  };
+  return /* @__PURE__ */ React.createElement(
+    Tag2,
+    {
+      className: cn$1(
+        baseClasses,
+        variantClasses[variant],
+        sizeClasses[size2],
+        stateClasses[state],
+        roundedClasses[rounded],
+        className
+      ),
+      ...props
+    },
+    children
+  );
+};
+const IconButton = ({
+  variant = "secondary",
+  size: size2 = "medium",
+  busy,
+  disabled,
+  children,
+  className,
+  ...props
+}) => {
+  const baseClasses = "icon-parent inline-flex items-center border border-transparent text-sm font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out rounded-full";
+  const variantClasses = {
+    primary: `shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark`,
+    secondary: `shadow text-gray-500 hover:text-blue-500 bg-gray-50 hover:bg-white border border-gray-200`,
+    white: `shadow text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-200`,
+    ghost: `text-gray-500 hover:text-blue-500 hover:shadow border border-transparent hover:border-gray-200 bg-transparent`,
+    accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`
+  };
+  const state = busy ? `busy` : disabled ? `disabled` : `default`;
+  const stateClasses = {
+    disabled: `pointer-events-none	opacity-30 cursor-not-allowed`,
+    busy: `pointer-events-none opacity-70 cursor-wait`,
+    default: ``
+  };
+  const sizeClasses = {
+    small: `h-7 w-7`,
+    medium: `h-9 w-9`,
+    custom: ``
+  };
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: cn$1(
+        baseClasses,
+        variantClasses[variant],
+        sizeClasses[size2],
+        stateClasses[state],
+        className
+      ),
+      ...props
+    },
+    children
+  );
+};
+function FontLoader() {
+  React.useEffect(() => {
+    const link = document.createElement("link");
+    link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Libre+Baskerville:wght@400;500;600;700&display=swap";
+    link.rel = "stylesheet";
+    document.head.appendChild(link);
+    return () => {
+      document.head.removeChild(link);
+    };
+  }, []);
+  return null;
+}
+function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const OverflowMenu$1 = ({ toolbarItems: toolbarItems2, className = "w-full" }) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, toolbarItems2.length > 0 && /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(
+    PopoverPrimitive.Trigger,
+    {
+      className: `cursor-pointer relative justify-center inline-flex items-center p-3 text-sm font-medium focus:outline-1 focus:outline-blue-200 pointer-events-auto ${open ? `text-blue-400` : `text-gray-300 hover:text-blue-500`} ${className}}`
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "h-5 w-5",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: "currentColor"
+      },
+      /* @__PURE__ */ React__default.createElement(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+        }
+      )
+    )
+  ), /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React__default.createElement(PopoverPrimitive.Content, { style: { zIndex: 2e4 }, align: "end" }, /* @__PURE__ */ React__default.createElement("div", { className: "mt-0 -mr-1 rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1" }, toolbarItems2.map((toolbarItem) => {
+    return /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        "data-test": `${toolbarItem.name}OverflowButton`,
+        key: toolbarItem.name,
+        onMouseDown: (event) => {
+          event.preventDefault();
+          toolbarItem.onMouseDown(event);
+          setOpen(false);
+        },
+        className: classNames(
+          toolbarItem.active ? "bg-gray-50 text-blue-500" : "bg-white text-gray-600",
+          "hover:bg-gray-50 hover:text-blue-500 cursor-pointer pointer-events-auto px-4 py-2 text-sm w-full flex items-center whitespace-nowrap",
+          toolbarItem.className ?? ""
+        )
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: "mr-2 opacity-80" }, toolbarItem.Icon),
+      " ",
+      toolbarItem.label
+    );
+  }))))));
+};
 var DefaultContext = {
   color: void 0,
   size: void 0,
@@ -38576,30 +38743,392 @@ 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";
+const DragDropContext = ({
+  onDragEnd,
+  children
+}) => {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 5
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    const activeIdStr = String(active.id);
+    const overIdStr = String(over.id);
+    const activeFieldName = activeIdStr.substring(
+      0,
+      activeIdStr.lastIndexOf(".")
+    );
+    const overFieldName = overIdStr.substring(0, overIdStr.lastIndexOf("."));
+    const activeIndex = parseInt(
+      activeIdStr.substring(activeIdStr.lastIndexOf(".") + 1)
+    );
+    const overIndex = parseInt(
+      overIdStr.substring(overIdStr.lastIndexOf(".") + 1)
+    );
+    if (activeFieldName === overFieldName) {
+      const result = {
+        destination: {
+          index: overIndex
+        },
+        source: {
+          index: activeIndex
+        },
+        type: activeFieldName
+      };
+      onDragEnd(result);
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragEnd: handleDragEnd
+    },
+    children
+  );
+};
+const Droppable = ({
+  droppableId,
+  type,
+  children
+}) => {
+  const ref = React__default.useRef(null);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children({
+    innerRef: ref,
+    placeholder: null
+  }));
+};
+const Draggable = ({
+  draggableId,
+  children
+}) => {
+  const animateLayoutChanges = (args) => {
+    const { isSorting, wasDragging } = args;
+    if (wasDragging) {
+      return false;
+    }
+    if (isSorting) {
+      return defaultAnimateLayoutChanges(args);
+    }
+    return true;
+  };
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+    setActivatorNodeRef
+  } = useSortable({
+    id: draggableId,
+    animateLayoutChanges
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    ...isDragging && { zIndex: 9999 }
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children(
+    {
+      innerRef: { current: null },
+      draggableProps: {
+        ref: setNodeRef,
+        style,
+        ...attributes
+      },
+      dragHandleProps: {
+        ref: setActivatorNodeRef,
+        ...listeners
+      }
+    },
+    {
+      isDragging
+    }
+  ));
+};
+const SortableProvider = ({
+  items: items2,
+  children
+}) => {
+  return /* @__PURE__ */ React__default.createElement(SortableContext, { items: items2, strategy: verticalListSortingStrategy }, children);
+};
+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 +39201,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";
@@ -38975,6 +39657,9 @@ function MdWarning(props) {
 function MdVpnKey(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12.65 10A5.99 5.99 0 0 0 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 0 0 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" }, "child": [] }] })(props);
 }
+function MdAccessTime(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" }, "child": [] }] })(props);
+}
 function MdKeyboardArrowDown(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" }, "child": [] }] })(props);
 }
@@ -38984,6 +39669,9 @@ function MdArrowForward(props) {
 function MdSyncProblem(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M3 12c0 2.21.91 4.2 2.36 5.64L3 20h6v-6l-2.24 2.24A6.003 6.003 0 0 1 5 12a5.99 5.99 0 0 1 4-5.65V4.26C5.55 5.15 3 8.27 3 12zm8 5h2v-2h-2v2zM21 4h-6v6l2.24-2.24A6.003 6.003 0 0 1 19 12a5.99 5.99 0 0 1-4 5.65v2.09c3.45-.89 6-4.01 6-7.74 0-2.21-.91-4.2-2.36-5.64L21 4zm-10 9h2V7h-2v6z" }, "child": [] }] })(props);
 }
+function MdWifiOff(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4a9.793 9.793 0 0 0-4.49-2.56l3.53 3.53.96-.97zM2 3.05 5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24A9.684 9.684 0 0 0 5 13v.01L6.99 15a7.042 7.042 0 0 1 4.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3a4.237 4.237 0 0 0-6 0z" }, "child": [] }] })(props);
+}
 function MdOutlineHelpOutline(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" }, "child": [] }] })(props);
 }
@@ -38993,6 +39681,9 @@ function MdOutlineSettings(props) {
 function MdOutlineClear(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" }, "child": [] }] })(props);
 }
+function MdOutlineDataSaverOff(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.48 2.54l2.6 1.53c.56-1.24.88-2.62.88-4.07 0-5.18-3.95-9.45-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53A6.95 6.95 0 0 1 12 19z" }, "child": [] }] })(props);
+}
 function MdOutlineCloud(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11A2.98 2.98 0 0 1 22 15c0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95A5.469 5.469 0 0 1 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96A7.49 7.49 0 0 0 12 4z" }, "child": [] }] })(props);
 }
@@ -39002,7 +39693,7 @@ function MdOutlinePhotoLibrary(props) {
 function MdOutlinePerson(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }, "child": [] }] })(props);
 }
-const selectFieldClasses = "shadow appearance-none bg-white block pl-3 pr-8 py-2 truncate w-full text-base cursor-pointer border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded";
+const selectFieldClasses = "shadow appearance-none h-full bg-white block pl-3 pr-8 py-2 truncate w-full text-base cursor-pointer border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded";
 const Select = ({
   input,
   field,
@@ -39016,7 +39707,7 @@ const Select = ({
       ref.current.focus();
     }
   }, [field == null ? void 0 : field.experimental_focusIntent, ref]);
-  return /* @__PURE__ */ React.createElement("div", { className: "relative group w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "relative group w-full h-full md:w-auto" }, /* @__PURE__ */ React.createElement(
     "select",
     {
       id: input.name,
@@ -39214,417 +39905,6 @@ const NumberInput = ({
     }
   }
 );
-function cn$1(...inputs) {
-  return twMerge(clsx(inputs));
-}
-const Button$1 = ({
-  variant = "secondary",
-  as: Tag2 = "button",
-  size: size2 = "medium",
-  busy,
-  disabled,
-  rounded = "full",
-  children,
-  className = "",
-  ...props
-}) => {
-  const baseClasses = "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out ";
-  const variantClasses = {
-    primary: `shadow text-white bg-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
-    );
-  }))))));
-};
-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(
-    DropdownMenuPrimitive.Trigger,
-    {
-      "data-slot": "dropdown-menu-trigger",
-      ...props
-    }
-  );
-}
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Content,
-    {
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-base max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-        className
-      ),
-      ...props
-    }
-  ));
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 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();
 }
@@ -40319,19 +40599,25 @@ const Group$1 = ({ tinaForm, form, field, input, meta, index }) => {
         /* @__PURE__ */ React__default.createElement(AddIcon, { className: "w-5/6 h-auto" })
       )
     },
-    /* @__PURE__ */ React__default.createElement(ListPanel, null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__default.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React__default.createElement(EmptyList, null), items2.map((item, index2) => /* @__PURE__ */ React__default.createElement(
-      Item$2,
+    /* @__PURE__ */ React__default.createElement(ListPanel, null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__default.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React__default.createElement(EmptyList, null), /* @__PURE__ */ React__default.createElement(
+      SortableProvider,
       {
-        key: index2,
-        tinaForm,
-        field,
-        item,
-        index: index2,
-        isMin,
-        fixedLength,
-        ...itemProps(item)
-      }
-    )), provider.placeholder))))
+        items: items2.map((_, index2) => `${field.name}.${index2}`)
+      },
+      items2.map((item, index2) => /* @__PURE__ */ React__default.createElement(
+        Item$2,
+        {
+          key: index2,
+          tinaForm,
+          field,
+          item,
+          index: index2,
+          isMin,
+          fixedLength,
+          ...itemProps(item)
+        }
+      ))
+    ), provider.placeholder))))
   );
 };
 const Item$2 = ({
@@ -40358,7 +40644,13 @@ const Item$2 = ({
       isDragging: snapshot.isDragging,
       ...p2
     },
-    /* @__PURE__ */ React__default.createElement(DragHandle, { isDragging: snapshot.isDragging }),
+    /* @__PURE__ */ React__default.createElement(
+      DragHandle,
+      {
+        isDragging: snapshot.isDragging,
+        dragHandleProps: provider.dragHandleProps
+      }
+    ),
     /* @__PURE__ */ React__default.createElement(
       ItemClickTarget,
       {
@@ -40422,17 +40714,16 @@ const ItemHeader = ({
   provider,
   ...props
 }) => {
+  var _a2, _b;
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      ref: provider.innerRef,
+      ref: (_a2 = provider.draggableProps) == null ? void 0 : _a2.ref,
       ...provider.draggableProps,
-      ...provider.dragHandleProps,
       ...props,
       className: `relative group cursor-pointer flex justify-between items-stretch bg-white border border-gray-100 -mb-px overflow-visible p-0 text-sm font-normal ${isDragging ? "rounded shadow text-blue-600" : "text-gray-600 first:rounded-t last:rounded-b"} ${props.className ?? ""}`,
       style: {
-        ...provider.draggableProps.style ?? {},
-        ...provider.dragHandleProps.style ?? {},
+        ...((_b = provider.draggableProps) == null ? void 0 : _b.style) ?? {},
         ...props.style ?? {}
       }
     },
@@ -40450,10 +40741,14 @@ const ItemDeleteButton = ({ onClick, disabled = false }) => {
     /* @__PURE__ */ React__default.createElement(TrashIcon, { className: "h-5 w-auto fill-current text-red-500 transition-colors duration-150 ease-out" })
   );
 };
-const DragHandle = ({ isDragging }) => {
+const DragHandle = ({
+  isDragging,
+  dragHandleProps
+}) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
+      ...dragHandleProps,
       className: `relative w-8 px-1 py-2.5 flex items-center justify-center hover:bg-gray-50 group cursor-[grab] ${isDragging ? `text-blue-500` : `text-gray-200 hover:text-gray-600`}`
     },
     isDragging ? /* @__PURE__ */ React__default.createElement(ReorderIcon, { className: "fill-current w-7 h-auto" }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(DragIcon, { className: "fill-current w-7 h-auto group-hover:opacity-0 transition-opacity duration-150 ease-out" }), /* @__PURE__ */ React__default.createElement(ReorderIcon, { className: "fill-current w-7 h-auto absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 ease-out" }))
@@ -40905,39 +41200,45 @@ const Blocks = ({
         }
       ))
     },
-    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef, className: "edit-page--list-parent" }, items2.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), items2.map((block2, index2) => {
-      const template = field.templates[block2._template];
-      if (!template) {
+    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef, className: "edit-page--list-parent" }, items2.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), /* @__PURE__ */ React.createElement(
+      SortableProvider,
+      {
+        items: items2.map((_, index2) => `${field.name}.${index2}`)
+      },
+      items2.map((block2, index2) => {
+        const template = field.templates[block2._template];
+        if (!template) {
+          return /* @__PURE__ */ React.createElement(
+            InvalidBlockListItem,
+            {
+              key: index2,
+              index: index2,
+              field,
+              tinaForm
+            }
+          );
+        }
+        const itemProps = (item) => {
+          if (!template.itemProps)
+            return {};
+          return template.itemProps(item);
+        };
         return /* @__PURE__ */ React.createElement(
-          InvalidBlockListItem,
+          BlockListItem,
           {
             key: index2,
+            block: block2,
+            template,
             index: index2,
             field,
-            tinaForm
+            tinaForm,
+            isMin,
+            fixedLength,
+            ...itemProps(block2)
           }
         );
-      }
-      const itemProps = (item) => {
-        if (!template.itemProps)
-          return {};
-        return template.itemProps(item);
-      };
-      return /* @__PURE__ */ React.createElement(
-        BlockListItem,
-        {
-          key: index2,
-          block: block2,
-          template,
-          index: index2,
-          field,
-          tinaForm,
-          isMin,
-          fixedLength,
-          ...itemProps(block2)
-        }
-      );
-    }), provider.placeholder)))
+      })
+    ), provider.placeholder)))
   );
 };
 const BlockListItem = ({
@@ -40955,7 +41256,13 @@ const BlockListItem = ({
   }, [tinaForm, field, index]);
   const { dispatch: setHoveredField } = useEvent("field:hover");
   const { dispatch: setFocusedField } = useEvent("field:focus");
-  return /* @__PURE__ */ React.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React.createElement(
+    DragHandle,
+    {
+      isDragging: snapshot.isDragging,
+      dragHandleProps: provider.dragHandleProps
+    }
+  ), /* @__PURE__ */ React.createElement(
     ItemClickTarget,
     {
       onClick: () => {
@@ -40996,7 +41303,13 @@ const InvalidBlockListItem = ({
   const removeItem = React.useCallback(() => {
     tinaForm.mutators.remove(field.name, index);
   }, [tinaForm, field, index]);
-  return /* @__PURE__ */ React.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React.createElement(ItemClickTarget, null, /* @__PURE__ */ React.createElement(GroupLabel, { error: true }, "Invalid Block")), /* @__PURE__ */ React.createElement(ItemDeleteButton, { onClick: removeItem })));
+  return /* @__PURE__ */ React.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React.createElement(
+    DragHandle,
+    {
+      isDragging: snapshot.isDragging,
+      dragHandleProps: provider.dragHandleProps
+    }
+  ), /* @__PURE__ */ React.createElement(ItemClickTarget, null, /* @__PURE__ */ React.createElement(GroupLabel, { error: true }, "Invalid Block")), /* @__PURE__ */ React.createElement(ItemDeleteButton, { onClick: removeItem })));
 };
 const BlocksField = Blocks;
 const BlocksFieldPlugin = {
@@ -41063,19 +41376,25 @@ const List = ({ tinaForm, form, field, input, meta, index }) => {
       tinaForm,
       actions: (!fixedLength || fixedLength && !isMax) && /* @__PURE__ */ React.createElement(IconButton, { onClick: addItem, variant: "primary", size: "small" }, /* @__PURE__ */ React.createElement(AddIcon, { className: "w-5/6 h-auto" }))
     },
-    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), items2.map((item, index2) => /* @__PURE__ */ React.createElement(
-      Item$1,
+    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), /* @__PURE__ */ React.createElement(
+      SortableProvider,
       {
-        key: index2,
-        tinaForm,
-        field,
-        item,
-        index: index2,
-        isMin,
-        fixedLength,
-        ...itemProps(item)
-      }
-    )), provider.placeholder))))
+        items: items2.map((_, index2) => `${field.name}.${index2}`)
+      },
+      items2.map((item, index2) => /* @__PURE__ */ React.createElement(
+        Item$1,
+        {
+          key: index2,
+          tinaForm,
+          field,
+          item,
+          index: index2,
+          isMin,
+          fixedLength,
+          ...itemProps(item)
+        }
+      ))
+    ), provider.placeholder))))
   );
 };
 const Item$1 = ({
@@ -41101,7 +41420,13 @@ const Item$1 = ({
       name: `${field.name}.${index}`
     }
   ];
-  return /* @__PURE__ */ React.createElement(Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging, ...p2 }, /* @__PURE__ */ React.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React.createElement(ItemClickTarget, null, /* @__PURE__ */ React.createElement(FieldsBuilder, { padding: false, form: tinaForm, fields })), (!fixedLength || fixedLength && !isMin) && /* @__PURE__ */ React.createElement(ItemDeleteButton, { disabled: isMin, onClick: removeItem })));
+  return /* @__PURE__ */ React.createElement(Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging, ...p2 }, /* @__PURE__ */ React.createElement(
+    DragHandle,
+    {
+      isDragging: snapshot.isDragging,
+      dragHandleProps: provider.dragHandleProps
+    }
+  ), /* @__PURE__ */ React.createElement(ItemClickTarget, null, /* @__PURE__ */ React.createElement(FieldsBuilder, { padding: false, form: tinaForm, fields })), (!fixedLength || fixedLength && !isMin) && /* @__PURE__ */ React.createElement(ItemDeleteButton, { disabled: isMin, onClick: removeItem })));
 };
 const ListField = List;
 const ListFieldPlugin = {
@@ -42733,30 +43058,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);
 }
@@ -43008,6 +43309,38 @@ const CreateBranch = ({ currentBranch, newBranchName, onCreateBranch, setNewBran
     " Create Branch"
   )));
 };
+const Badge = ({
+  children,
+  calloutStyle = "warning",
+  className = "",
+  displayIcon = true,
+  ...props
+}) => {
+  const commonAlertStyles = "text-xs px-2 py-0.5 flex items-center 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`,
+    success: `text-green-600 bg-green-100/50 border-green-600/20`,
+    error: `text-red-700 bg-red-100/50 border-red-700/20`
+  };
+  const icon = {
+    warning: /* @__PURE__ */ React.createElement(MdAccessTime, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-amber-600" }),
+    info: /* @__PURE__ */ React.createElement(MdOutlineDataSaverOff, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-blue-600" }),
+    success: /* @__PURE__ */ React.createElement(MdCheckCircle, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-green-600" }),
+    error: /* @__PURE__ */ React.createElement(MdWifiOff, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-red-700" })
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn$1(commonAlertStyles, styles[calloutStyle], className),
+      ...props
+    },
+    displayIcon && icon[calloutStyle],
+    " ",
+    children
+  );
+};
+const tableHeadingStyle = "px-3 py-3 text-left text-xs font-bold text-gray-700 tracking-wider";
 function formatBranchName(str) {
   const pattern = /[^/\w-]+/g;
   const formattedStr = str.replace(pattern, "-");
@@ -43251,7 +43584,7 @@ const BranchSelector = ({
     filter2
   ).sort(sortBranchListFn(sortValue));
   const previewFunction = (_d = (_c = (_b = (_a2 = cms.api.tina.schema) == null ? void 0 : _a2.config) == null ? void 0 : _b.config) == null ? void 0 : _c.ui) == null ? void 0 : _d.previewUrl;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-end space-x-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch space-x-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
     "label",
     {
       htmlFor: "search",
@@ -43274,7 +43607,7 @@ const BranchSelector = ({
       className: "outline-none focus:outline-none bg-transparent border-0 p-0 m-0 absolute right-2.5 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-100 transition-all ease-out duration-150"
     },
     /* @__PURE__ */ React.createElement(MdOutlineClear, { className: "w-5 h-auto text-gray-600" })
-  ))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement(
     "label",
     {
       htmlFor: "branch-type",
@@ -43302,7 +43635,7 @@ const BranchSelector = ({
         }
       ]
     }
-  ))), filteredBranchList.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "block relative text-gray-300 italic py-1" }, "No branches to display"), filteredBranchList.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "min-w-[192px] max-h-[24rem] overflow-y-auto flex flex-col w-full h-full rounded-lg shadow-inner bg-white border border-gray-200" }, filteredBranchList.map((branch) => /* @__PURE__ */ React.createElement(
+  ))), filteredBranchList.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "block relative text-gray-300 italic py-1" }, "No branches to display"), filteredBranchList.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "min-w-[192px] max-h-[24rem] overflow-y-auto w-full h-full rounded-lg shadow-inner bg-white border border-gray-200" }, /* @__PURE__ */ React.createElement("table", { className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "bg-gray-100 border-b-2 border-gray-200" }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", { className: tableHeadingStyle }, "Branch Name"), /* @__PURE__ */ React.createElement("th", { className: tableHeadingStyle }, "Last Updated"), /* @__PURE__ */ React.createElement("th", null), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, filteredBranchList.map((branch) => /* @__PURE__ */ React.createElement(
     BranchItem,
     {
       key: branch.name,
@@ -43313,7 +43646,7 @@ const BranchSelector = ({
       previewFunction,
       cms
     }
-  ))));
+  ))))));
 };
 const BranchItem = ({
   branch,
@@ -43349,15 +43682,15 @@ const BranchItem = ({
   const isCurrentBranch = branch.name === currentBranch;
   const indexingStatus = (_a2 = branch == null ? void 0 : branch.indexStatus) == null ? void 0 : _a2.status;
   return /* @__PURE__ */ React.createElement(
-    "div",
+    "tr",
     {
-      className: `relative text-base py-1.5 px-3 flex items-center gap-1.5 border-l-0 border-t-0 border-r-0 border-gray-50 w-full outline-none transition-all ease-out duration-150 ${indexingStatus !== "complete" ? "bg-gray-50 text-gray-400" : isCurrentBranch ? "border-blue-500 border-l-5 bg-blue-50 text-blue-800 border-b-0" : "border-b-2"}`
+      className: `text-base border-l-0 border-t-0 border-r-0 outline-none transition-all ease-out duration-150 ${indexingStatus !== "complete" ? "bg-gray-50 text-gray-400" : isCurrentBranch ? "bg-blue-50 text-blue-800 border-b-0" : "border-b-2 border-gray-50"}`
     },
-    /* @__PURE__ */ React.createElement("div", { className: "w-1/2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex-0" }, branch.protected && /* @__PURE__ */ React.createElement(BiLock, { className: "w-5 h-auto opacity-70 text-blue-500" })), /* @__PURE__ */ React.createElement("div", { className: "truncate flex-1" }, branch.name)), indexingStatus !== "complete" && /* @__PURE__ */ React.createElement("div", { className: "w-fit" }, /* @__PURE__ */ React.createElement(IndexStatus, { indexingStatus: branch.indexStatus.status }))),
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, creatingPR ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-blue-600" }, "Creating PR"), /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight text-blue-500" }, "Please wait...")), /* @__PURE__ */ React.createElement(FaSpinner, { className: "w-3 h-auto animate-spin text-blue-500" })) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold" }, "Last Updated"), /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight" }, formatDistanceToNow$1(new Date(branch.indexStatus.timestamp), {
+    /* @__PURE__ */ React.createElement("td", { className: "pl-3 pr-3 py-1.5 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, branch.protected && /* @__PURE__ */ React.createElement(BiLock, { className: "w-5 h-auto opacity-70 text-blue-500 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight truncate" }, branch.name)), indexingStatus !== "complete" && /* @__PURE__ */ React.createElement("div", { className: "w-fit mt-1" }, /* @__PURE__ */ React.createElement(IndexStatus, { indexingStatus: branch.indexStatus.status })))),
+    /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 min-w-0" }, creatingPR ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-blue-600" }, "Creating PR"), /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight text-blue-500" }, "Please wait...")), /* @__PURE__ */ React.createElement(FaSpinner, { className: "w-3 h-auto animate-spin text-blue-500" })) : /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight whitespace-nowrap" }, formatDistanceToNow$1(new Date(branch.indexStatus.timestamp), {
       addSuffix: true
-    })))),
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, indexingStatus === "complete" && !isCurrentBranch && /* @__PURE__ */ React.createElement(
+    }))),
+    /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 text-left" }, indexingStatus === "complete" && !isCurrentBranch && /* @__PURE__ */ React.createElement(
       Button$1,
       {
         variant: "white",
@@ -43365,12 +43698,13 @@ const BranchItem = ({
         onClick: () => {
           onChange(branch.name);
         },
-        className: "mr-auto cursor-pointer text-sm h-9 px-4 flex items-center gap-1"
+        className: "cursor-pointer text-sm h-9 px-4 flex items-center gap-1"
       },
       /* @__PURE__ */ React.createElement(BiPencil, { className: "h-4 w-auto text-blue-500 opacity-70 -mt-px" }),
       " ",
       "Select"
-    ), /* @__PURE__ */ React.createElement("div", { className: "ml-auto" }, /* @__PURE__ */ React.createElement(
+    ), indexingStatus === "complete" && isCurrentBranch && /* @__PURE__ */ React.createElement(Badge, { calloutStyle: "info", className: "w-fit", displayIcon: false }, /* @__PURE__ */ React.createElement("span", null, "Selected"))),
+    /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 text-right" }, /* @__PURE__ */ React.createElement(
       OverflowMenu$1,
       {
         toolbarItems: [
@@ -43401,7 +43735,7 @@ const BranchItem = ({
           }
         ].filter(Boolean)
       }
-    )))
+    ))
   );
 };
 const IndexStatus = ({ indexingStatus }) => {
@@ -45457,7 +45791,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 +46563,7 @@ function formatDistanceToNow(dirtyDate, options) {
   requiredArgs(1, arguments);
   return formatDistance2(dirtyDate, Date.now(), options);
 }
-const version$1 = "2.9.1";
+const version$1 = "2.9.5";
 const VersionInfo = () => {
   var _a2, _b, _c, _d, _e, _f;
   const cms = useCMS();
@@ -47869,7 +48203,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 +48247,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 +48273,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 +48285,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,
@@ -48221,6 +48555,18 @@ const BranchButton = ({ className = "" }) => {
   ), open && /* @__PURE__ */ React.createElement(BranchModal, { close: () => setOpen(false) }));
 };
 const BranchPreviewButton = (props) => {
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
+  const cms = useCMS();
+  const branchingEnabled = cms.flags.get("branch-switcher");
+  if (!branchingEnabled) {
+    return null;
+  }
+  const previewFunction = (_f = (_e = (_d = (_c = (_b = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b.schema) == null ? void 0 : _c.config) == null ? void 0 : _d.config) == null ? void 0 : _e.ui) == null ? void 0 : _f.previewUrl;
+  const branch = (_h = (_g = cms.api) == null ? void 0 : _g.tina) == null ? void 0 : _h.branch;
+  const previewUrl = typeof previewFunction === "function" ? (_i = previewFunction({ branch })) == null ? void 0 : _i.url : null;
+  if (!previewUrl) {
+    return null;
+  }
   return /* @__PURE__ */ React.createElement(
     "button",
     {
@@ -48236,6 +48582,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 = ["０", "１", "２", "３", "４", "５", "６", "７", "８", "９"];
@@ -63649,367 +64007,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, "/");
@@ -64038,7 +64035,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;
@@ -64082,7 +64078,6 @@ const CreateBranchModal = ({
       setDisabled(true);
       setIsExecuting(true);
       setCurrentStep(1);
-      setStatusMessage("Initializing workflow...");
       let graphql2 = "";
       if (crudType === "create") {
         graphql2 = CREATE_DOCUMENT_GQL;
@@ -64107,8 +64102,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:
@@ -64145,9 +64138,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",
@@ -64156,7 +64147,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)})`
@@ -64184,7 +64175,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",
@@ -64205,7 +64196,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",
@@ -64213,28 +64204,14 @@ 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) {
@@ -64257,14 +64234,13 @@ const CreateBranchModal = ({
           value: newBranchName,
           onChange: (e3) => {
             setErrorMessage("");
-            setStatusMessage("");
             setNewBranchName(e3.target.value);
           }
         }
       ));
     }
   };
-  return /* @__PURE__ */ React.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React.createElement(ModalHeader, { close: isExecuting ? void 0 : close2 }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(TinaIcon, { className: "w-8 h-auto mr-1 text-blue-500 text-tina-orange" }), "Save changes to new branch"))), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, renderStateContent()), !isExecuting && /* @__PURE__ */ React.createElement(ModalActions, { align: "end" }, /* @__PURE__ */ React.createElement(Button$1, { variant: "secondary", className: "w-full sm:w-auto" }, "Cancel"), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React.createElement(ModalHeader, { close: isExecuting ? void 0 : close2 }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, "Save changes to new branch"))), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, renderStateContent()), !isExecuting && /* @__PURE__ */ React.createElement(ModalActions, { align: "end" }, /* @__PURE__ */ React.createElement(Button$1, { variant: "secondary", className: "w-full sm:w-auto" }, "Cancel"), /* @__PURE__ */ React.createElement(
     DropdownButton,
     {
       variant: "primary",
@@ -64308,6 +64284,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]);
@@ -65642,9 +65829,9 @@ const editorVariants = cva(
         ai: "w-full px-0 text-base md:text-sm",
         aiChat: "max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm",
         comment: cn$2("rounded-none border-none bg-transparent text-sm"),
-        default: "size-full px-16 pt-2 text-base sm:px-[max(24px,calc(50%-350px))]",
-        demo: "size-full px-16 pt-2 text-base sm:px-[max(24px,calc(50%-350px))]",
-        fullWidth: "size-full px-16 pt-4 pb-72 text-base sm:px-12",
+        default: "size-full px-2 sm:px-4 pt-2 text-base",
+        demo: "size-full px-2 sm:px-4 pt-2 text-base h-[650px]",
+        fullWidth: "size-full px-2 sm:px-4 pt-4 pb-72 text-base",
         none: "",
         select: "px-3 py-2 text-base data-readonly:w-fit"
       }
@@ -120662,7 +120849,7 @@ const PageWrapper = ({
   headerClassName,
   children
 }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React__default.createElement("div", { className: `py-2 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React__default.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React__default.createElement(BranchButton, null), /* @__PURE__ */ React__default.createElement(BranchPreviewButton, null))), children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React__default.createElement("div", { className: `py-2 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React__default.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement(BranchButton, null), /* @__PURE__ */ React__default.createElement(BranchPreviewButton, null))), children);
 };
 const PageHeader = ({
   children
@@ -120730,7 +120917,7 @@ const TemplateMenu = ({
   folder,
   collectionName
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Menu, { as: "div", className: "relative inline-block text-left" }, () => /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(MenuButton, { className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6" }, "Create New ", /* @__PURE__ */ React__default.createElement(BiPlus, { className: "w-5 h-full ml-1 opacity-70" }))), /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Menu, { as: "div", className: "relative inline-block text-left w-full md:w-auto" }, () => /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(MenuButton, { className: "w-full md:w-auto icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out  shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark text-sm h-10 px-6" }, "Create New ", /* @__PURE__ */ React__default.createElement(BiPlus, { className: "w-5 h-full ml-1 opacity-70" }))), /* @__PURE__ */ React__default.createElement(
     Transition,
     {
       enter: "transition ease-out duration-100",
@@ -120858,6 +121045,9 @@ const CollectionListPage = () => {
       booleanEquals: null
     }));
   }, [collectionName]);
+  const tableRowStyle = "hover:bg-gray-50/50 border-b-2 border-gray-50 transition-colors duration-300";
+  const tableHeadingCellStyle = "px-3 py-3 text-left text-xs font-bold text-gray-700 tracking-wider";
+  const tableHeadingStyle2 = "bg-gray-100 border-b-2 border-gray-200";
   return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => {
     return /* @__PURE__ */ React__default.createElement(PageWrapper, null, /* @__PURE__ */ React__default.createElement(
       GetCollection,
@@ -120887,7 +121077,7 @@ const CollectionListPage = () => {
         search
       },
       (collection, _loading, reFetchCollection, collectionExtra) => {
-        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
         const documents = collection.documents.edges;
         const admin = cms.api.admin;
         const pageInfo = collection.documents.pageInfo;
@@ -121022,6 +121212,7 @@ const CollectionListPage = () => {
                 return { ...vars2, folderName };
               });
             },
+            validationRegex: (_m = (_l = (_k = cms.api.tina) == null ? void 0 : _k.schema.config.config.ui) == null ? void 0 : _l.regexValidation) == null ? void 0 : _m.folderNameRegex,
             createFunc: async () => {
               try {
                 admin.createFolder(
@@ -121054,7 +121245,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" }, (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",
@@ -121126,7 +121317,7 @@ const CollectionListPage = () => {
             className: "underline hover:text-blue-700 transition-all duration-150"
           },
           "Read the docs"
-        ))))), allowCreate && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-end gap-2 md:gap-0 pt-4 lg:pt-0" }, allowCreateNestedFolder && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(
+        ))))), allowCreate && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-end gap-2 md:gap-0 pt-4 lg:pt-0" }, allowCreateNestedFolder && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
           Link$1,
           {
             onMouseDown: (evt) => {
@@ -121144,7 +121335,7 @@ const CollectionListPage = () => {
             },
             to: "/collections/new-folder",
             className: cn$1(
-              "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-gray-500 hover:tina-orange-dark bg-white hover:bg-gray-50 border border-gray-100 focus:ring-white focus:ring-tina-orange-dark w-full md:w-auto text-sm h-10 px-6 mr-4",
+              "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-gray-500 bg-white hover:bg-gray-50 border border-gray-100 focus:ring-white focus:ring-blue-500 w-full md:w-auto text-sm h-10 px-6 mr-4",
               collection.templates && "opacity-50 pointer-events-none cursor-not-allowed"
             ),
             "aria-disabled": !!collection.templates,
@@ -121152,7 +121343,7 @@ const CollectionListPage = () => {
           },
           /* @__PURE__ */ React__default.createElement(FaFolder, { className: "mr-2" }),
           "Add Folder"
-        ))), collection.templates && /* @__PURE__ */ React__default.createElement(
+        )), collection.templates && /* @__PURE__ */ React__default.createElement(
           TooltipContent,
           {
             side: "top",
@@ -121193,175 +121384,225 @@ const CollectionListPage = () => {
             templates: collection.templates,
             folder
           }
-        ))))), /* @__PURE__ */ React__default.createElement(PageBody, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React__default.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React__default.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), /* @__PURE__ */ React__default.createElement("div", { className: "w-full overflow-x-auto shadow-md rounded-md" }, (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React__default.createElement("table", { className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg" }, /* @__PURE__ */ React__default.createElement("tbody", null, folder.name && !search ? /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React__default.createElement(
-          Breadcrumb,
-          {
-            folder,
-            navigate,
-            collectionName
-          }
-        ))) : null, documents.length > 0 && documents.map((document2) => {
-          var _a3;
-          if (document2.node.__typename === "Folder") {
-            return /* @__PURE__ */ React__default.createElement(
-              "tr",
-              {
-                key: `folder-${document2.node.path}`
-              },
-              /* @__PURE__ */ React__default.createElement("td", { className: "pl-5 pr-3 py-3" }, /* @__PURE__ */ React__default.createElement(
-                "a",
-                {
-                  className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
-                  onClick: () => {
-                    navigate(
-                      `/${[
-                        "collections",
-                        collectionName,
-                        document2.node.path
-                      ].join("/")}`,
-                      { replace: true }
-                    );
-                  }
-                },
-                /* @__PURE__ */ React__default.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
-                /* @__PURE__ */ React__default.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Name"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block truncate" }, /* @__PURE__ */ React__default.createElement("span", null, document2.node.name)))
-              )),
-              /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3", colSpan: 4 }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Path"), /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, document2.node.path.substring(2).split("/").map((node3) => {
-                return /* @__PURE__ */ React__default.createElement("span", { key: node3 }, /* @__PURE__ */ React__default.createElement("span", { className: "text-gray-300 pr-0.5" }, "/"), /* @__PURE__ */ React__default.createElement("span", { className: "pr-0.5" }, node3));
-              })))
-            );
-          }
-          const hasTitle = Boolean(
-            document2.node._sys.title
+        ))))), /* @__PURE__ */ React__default.createElement(PageBody, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React__default.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React__default.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), /* @__PURE__ */ React__default.createElement("div", { className: "w-full overflow-x-auto shadow-md rounded-md" }, (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React__default.createElement("table", { className: "table-auto shadow bg-white border border-gray-200 w-full max-w-full rounded-lg" }, (() => {
+          const hasAnyDocuments = documents.some(
+            (doc) => doc.node.__typename !== "Folder"
           );
-          const subfolders = document2.node._sys.breadcrumbs.slice(0, -1).join("/");
-          return /* @__PURE__ */ React__default.createElement(
-            "tr",
+          const hasAnyFolders = documents.some(
+            (doc) => doc.node.__typename === "Folder"
+          );
+          const hasAnyTitles = documents.some(
+            (doc) => {
+              var _a3;
+              return doc.node.__typename !== "Folder" && Boolean((_a3 = doc.node._sys) == null ? void 0 : _a3.title);
+            }
+          );
+          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, hasAnyDocuments && /* @__PURE__ */ React__default.createElement("thead", { className: tableHeadingStyle2 }, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement(
+            "th",
             {
-              className: "hover:bg-gray-100 transition-colors duration-300",
-              key: `document-${document2.node._sys.relativePath}`
+              className: tableHeadingCellStyle,
+              colSpan: hasAnyTitles ? 1 : 2
             },
-            /* @__PURE__ */ React__default.createElement(
-              "td",
-              {
-                className: "pl-5 pr-3 py-3",
-                colSpan: hasTitle ? 1 : 2
-              },
-              /* @__PURE__ */ React__default.createElement(
-                "a",
+            hasAnyTitles ? "Title" : "Filename"
+          ), hasAnyTitles && /* @__PURE__ */ React__default.createElement(
+            "th",
+            {
+              className: tableHeadingCellStyle
+            },
+            "Filename"
+          ), /* @__PURE__ */ React__default.createElement("th", { className: tableHeadingCellStyle }, "Extension"), /* @__PURE__ */ React__default.createElement("th", { className: tableHeadingCellStyle }, "Template"), /* @__PURE__ */ React__default.createElement("th", null))), !hasAnyDocuments && hasAnyFolders && /* @__PURE__ */ React__default.createElement("thead", { className: tableHeadingStyle2 }, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", { className: tableHeadingCellStyle }, "Name"), /* @__PURE__ */ React__default.createElement(
+            "th",
+            {
+              className: tableHeadingCellStyle,
+              colSpan: 4
+            },
+            "Path"
+          ))), /* @__PURE__ */ React__default.createElement("tbody", null, folder.name && !search ? /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React__default.createElement(
+            Breadcrumb,
+            {
+              folder,
+              navigate,
+              collectionName
+            }
+          ))) : null, documents.length > 0 && documents.map((document2) => {
+            var _a3;
+            if (document2.node.__typename === "Folder") {
+              return /* @__PURE__ */ React__default.createElement(
+                "tr",
                 {
-                  className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
-                  onClick: () => {
-                    handleNavigate(
-                      navigate,
-                      cms,
-                      collection,
-                      collectionDefinition,
-                      document2.node
-                    );
-                  }
+                  className: tableRowStyle,
+                  key: `folder-${document2.node.path}`
                 },
-                /* @__PURE__ */ React__default.createElement(BiFile, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
-                /* @__PURE__ */ React__default.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block truncate mb-1" }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, hasTitle ? (_a3 = document2.node._sys) == null ? void 0 : _a3.title : document2.node._sys.filename)), /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400" }, document2.node._sys.path))
-              )
-            ),
-            hasTitle && /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Filename"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, document2.node._sys.filename))),
-            /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Extension"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
-            /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Template"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
-            /* @__PURE__ */ React__default.createElement("td", { className: "w-0" }, /* @__PURE__ */ React__default.createElement(
-              OverflowMenu$1,
-              {
-                toolbarItems: [
+                /* @__PURE__ */ React__default.createElement("td", { className: "pl-5 pr-3 py-3" }, /* @__PURE__ */ React__default.createElement(
+                  "a",
                   {
-                    name: "edit",
-                    label: "Edit in Admin",
-                    Icon: /* @__PURE__ */ React__default.createElement(BiEdit, { size: "1.3rem" }),
-                    onMouseDown: () => {
-                      const pathToDoc = document2.node._sys.breadcrumbs;
-                      if (folder.fullyQualifiedName) {
-                        pathToDoc.unshift("~");
-                      }
+                    className: "text-blue-600 flex items-center gap-3 cursor-pointer truncate",
+                    onClick: () => {
                       navigate(
                         `/${[
                           "collections",
-                          "edit",
                           collectionName,
-                          ...pathToDoc
+                          document2.node.path
                         ].join("/")}`,
                         { replace: true }
                       );
                     }
                   },
-                  allowCreate && {
-                    name: "duplicate",
-                    label: "Duplicate",
-                    Icon: /* @__PURE__ */ React__default.createElement(BiCopy, { size: "1.3rem" }),
-                    onMouseDown: () => {
-                      const pathToDoc = document2.node._sys.breadcrumbs;
-                      if (folder.fullyQualifiedName) {
-                        pathToDoc.unshift("~");
-                      }
-                      navigate(
-                        `/${[
-                          "collections",
-                          "duplicate",
-                          collectionName,
-                          ...pathToDoc
-                        ].join("/")}`,
-                        { replace: true }
-                      );
-                    }
+                  /* @__PURE__ */ React__default.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
+                  /* @__PURE__ */ React__default.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block truncate" }, /* @__PURE__ */ React__default.createElement("span", null, document2.node.name)))
+                )),
+                /* @__PURE__ */ React__default.createElement(
+                  "td",
+                  {
+                    className: "px-3 py-3",
+                    colSpan: 4
                   },
-                  allowDelete && {
-                    name: "rename",
-                    label: "Rename",
-                    Icon: /* @__PURE__ */ React__default.createElement(BiRename, { size: "1.3rem" }),
-                    onMouseDown: () => {
-                      setVars((old) => ({
-                        ...old,
-                        collection: collectionName,
-                        relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
-                          "/"
-                        ),
-                        relativePath: document2.node._sys.breadcrumbs.join(
-                          "/"
-                        ) + document2.node._sys.extension,
-                        newRelativePath: ""
-                      }));
-                      setRenameModalOpen(true);
+                  /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-400 truncate" }, document2.node.path.substring(2).split("/").map((node3) => {
+                    return /* @__PURE__ */ React__default.createElement("span", { key: node3 }, /* @__PURE__ */ React__default.createElement("span", { className: "text-gray-300 pr-0.5" }, "/"), /* @__PURE__ */ React__default.createElement("span", { className: "pr-0.5" }, node3));
+                  }))
+                )
+              );
+            }
+            const hasTitle = Boolean(
+              document2.node._sys.title
+            );
+            const subfolders = document2.node._sys.breadcrumbs.slice(0, -1).join("/");
+            return /* @__PURE__ */ React__default.createElement(
+              "tr",
+              {
+                className: tableRowStyle,
+                key: `document-${document2.node._sys.relativePath}`
+              },
+              /* @__PURE__ */ React__default.createElement(
+                "td",
+                {
+                  className: "pl-5 pr-3 py-3",
+                  colSpan: hasTitle ? 1 : 2
+                },
+                /* @__PURE__ */ React__default.createElement(
+                  "a",
+                  {
+                    className: "text-blue-600 flex items-center gap-3 cursor-pointer truncate",
+                    onClick: () => {
+                      handleNavigate(
+                        navigate,
+                        cms,
+                        collection,
+                        collectionDefinition,
+                        document2.node
+                      );
                     }
                   },
-                  allowDelete && {
-                    name: "delete",
-                    label: "Delete",
-                    Icon: /* @__PURE__ */ React__default.createElement(
-                      BiTrash,
-                      {
-                        size: "1.3rem",
-                        className: "text-red-500"
+                  /* @__PURE__ */ React__default.createElement(BiFile, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
+                  /* @__PURE__ */ React__default.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block truncate mb-1" }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, hasTitle ? (_a3 = document2.node._sys) == null ? void 0 : _a3.title : document2.node._sys.filename)), /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400" }, document2.node._sys.path))
+                )
+              ),
+              hasTitle && /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, document2.node._sys.filename))),
+              /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
+              /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
+              /* @__PURE__ */ React__default.createElement("td", { className: "w-0" }, /* @__PURE__ */ React__default.createElement(
+                OverflowMenu$1,
+                {
+                  toolbarItems: [
+                    {
+                      name: "edit",
+                      label: "Edit in Admin",
+                      Icon: /* @__PURE__ */ React__default.createElement(BiEdit, { size: "1.3rem" }),
+                      onMouseDown: () => {
+                        const pathToDoc = document2.node._sys.breadcrumbs;
+                        if (folder.fullyQualifiedName) {
+                          pathToDoc.unshift(
+                            "~"
+                          );
+                        }
+                        navigate(
+                          `/${[
+                            "collections",
+                            "edit",
+                            collectionName,
+                            ...pathToDoc
+                          ].join("/")}`,
+                          { replace: true }
+                        );
+                      }
+                    },
+                    allowCreate && {
+                      name: "duplicate",
+                      label: "Duplicate",
+                      Icon: /* @__PURE__ */ React__default.createElement(BiCopy, { size: "1.3rem" }),
+                      onMouseDown: () => {
+                        const pathToDoc = document2.node._sys.breadcrumbs;
+                        if (folder.fullyQualifiedName) {
+                          pathToDoc.unshift(
+                            "~"
+                          );
+                        }
+                        navigate(
+                          `/${[
+                            "collections",
+                            "duplicate",
+                            collectionName,
+                            ...pathToDoc
+                          ].join("/")}`,
+                          { replace: true }
+                        );
+                      }
+                    },
+                    allowDelete && {
+                      name: "rename",
+                      label: "Rename",
+                      Icon: /* @__PURE__ */ React__default.createElement(BiRename, { size: "1.3rem" }),
+                      onMouseDown: () => {
+                        setVars((old) => ({
+                          ...old,
+                          collection: collectionName,
+                          relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
+                            "/"
+                          ),
+                          relativePath: document2.node._sys.breadcrumbs.join(
+                            "/"
+                          ) + document2.node._sys.extension,
+                          newRelativePath: ""
+                        }));
+                        setRenameModalOpen(
+                          true
+                        );
+                      }
+                    },
+                    allowDelete && {
+                      name: "delete",
+                      label: "Delete",
+                      Icon: /* @__PURE__ */ React__default.createElement(
+                        BiTrash,
+                        {
+                          size: "1.3rem",
+                          className: "text-red-500"
+                        }
+                      ),
+                      className: "text-red-500",
+                      onMouseDown: () => {
+                        setVars((old) => ({
+                          ...old,
+                          collection: collectionName,
+                          relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
+                            "/"
+                          ),
+                          relativePath: document2.node._sys.breadcrumbs.join(
+                            "/"
+                          ) + document2.node._sys.extension,
+                          newRelativePath: ""
+                        }));
+                        setDeleteModalOpen(
+                          true
+                        );
                       }
-                    ),
-                    className: "text-red-500",
-                    onMouseDown: () => {
-                      setVars((old) => ({
-                        ...old,
-                        collection: collectionName,
-                        relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
-                          "/"
-                        ),
-                        relativePath: document2.node._sys.breadcrumbs.join(
-                          "/"
-                        ) + document2.node._sys.extension,
-                        newRelativePath: ""
-                      }));
-                      setDeleteModalOpen(true);
                     }
-                  }
-                ].filter(Boolean)
-              }
-            ))
-          );
-        })))), documents.length === 0 && /* @__PURE__ */ React__default.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React__default.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React__default.createElement(
+                  ].filter(Boolean)
+                }
+              ))
+            );
+          })));
+        })())), documents.length === 0 && /* @__PURE__ */ React__default.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React__default.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React__default.createElement(
           CursorPaginator,
           {
             variant: "white",
@@ -121521,20 +121762,47 @@ const FolderModal = ({
   close: close2,
   createFunc,
   folderName,
-  setFolderName
+  setFolderName,
+  validationRegex
 }) => {
+  const [isFolderNameValid, setIsFolderNameValid] = useState(false);
+  const [isInteracted, setIsInteracted] = useState(false);
+  useEffect(() => {
+    validateFolderName(folderName);
+  }, [folderName]);
+  const validateFolderName = (name) => {
+    if (!validationRegex || !name.trim()) {
+      setIsFolderNameValid(!!name.trim());
+      return !!name.trim();
+    }
+    try {
+      const regex = new RegExp(validationRegex);
+      const valid = regex.test(name);
+      setIsFolderNameValid(valid);
+      return valid;
+    } catch (error2) {
+      setIsFolderNameValid(false);
+      return false;
+    }
+  };
   return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(PopupModal, null, /* @__PURE__ */ React__default.createElement(ModalHeader, { close: close2 }, "Create Folder"), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     BaseTextField,
     {
       placeholder: "Enter the name of the new folder",
       value: folderName,
-      onChange: (event) => setFolderName(event.target.value)
+      className: `mb-4 ${!isFolderNameValid && isInteracted ? "border-red-500" : ""}`,
+      onChange: (event) => {
+        setFolderName(event.target.value);
+        setIsInteracted(true);
+        validateFolderName(event.target.value);
+      }
     }
-  ))), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
+  ), !isFolderNameValid && isInteracted && /* @__PURE__ */ React__default.createElement("p", { className: "text-red-500 text-sm pl-1" }, "Folder name is not valid – please enter a valid folder name."))), /* @__PURE__ */ React__default.createElement(ModalActions, null, /* @__PURE__ */ React__default.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__default.createElement(
     Button$1,
     {
       style: { flexGrow: 3 },
       variant: "primary",
+      disabled: !isFolderNameValid,
       onClick: async () => {
         await createFunc();
         close2();