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

package/dist/index.js

@@ -5,8 +5,8 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/cn"), require("@udecode/plate-heading"), require("is-hotkey"), require("clsx"), require("@radix-ui/react-slot"), require("@udecode/plate-code-block"), require("lucide-react"), require("mermaid"), require("class-variance-authority"), require("cmdk"), require("@radix-ui/react-dialog"), require("@radix-ui/react-popover"), require("@udecode/plate"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-reset-node"), require("@udecode/plate-list"), require("@udecode/plate-resizable"), require("@udecode/plate-dnd"), require("@udecode/plate-table"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-separator"), require("@radix-ui/react-tooltip"), require("final-form"), require("final-form-arrays"), require("final-form-set-field-data"), require("react-final-form"), require("prop-types"), require("react-color"), require("color-string"), require("tailwind-merge"), require("react-beautiful-dnd"), require("graphql"), require("@graphql-inspector/core"), require("@headlessui/react"), require("@udecode/plate-trailing-block"), require("@udecode/plate-floating"), require("@udecode/plate-block-quote"), require("@udecode/plate-node-id"), require("@udecode/plate-link"), require("@udecode/plate-autoformat"), require("date-fns"), require("react-dropzone"), require("@udecode/cmdk"), require("lodash.get"), require("moment"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/cn", "@udecode/plate-heading", "is-hotkey", "clsx", "@radix-ui/react-slot", "@udecode/plate-code-block", "lucide-react", "mermaid", "class-variance-authority", "cmdk", "@radix-ui/react-dialog", "@radix-ui/react-popover", "@udecode/plate", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-reset-node", "@udecode/plate-list", "@udecode/plate-resizable", "@udecode/plate-dnd", "@udecode/plate-table", "@radix-ui/react-dropdown-menu", "@radix-ui/react-toolbar", "@radix-ui/react-separator", "@radix-ui/react-tooltip", "final-form", "final-form-arrays", "final-form-set-field-data", "react-final-form", "prop-types", "react-color", "color-string", "tailwind-merge", "react-beautiful-dnd", "graphql", "@graphql-inspector/core", "@headlessui/react", "@udecode/plate-trailing-block", "@udecode/plate-floating", "@udecode/plate-block-quote", "@udecode/plate-node-id", "@udecode/plate-link", "@udecode/plate-autoformat", "date-fns", "react-dropzone", "@udecode/cmdk", "lodash.get", "moment", "@tinacms/schema-tools", "graphql-tag", "yup", "react-router-dom", "@tinacms/mdx"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.tinacms = {}, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP));
-})(this, function(exports2, zod, React, ReactDOM, cn$2, plateHeading, isHotkey, clsx, reactSlot, plateCodeBlock, lucideReact, mermaid, classVarianceAuthority, cmdk, DialogPrimitive, PopoverPrimitive, plate, react, plateCombobox, plateResetNode, plateList, plateResizable, plateDnd, plateTable, DropdownMenuPrimitive, ToolbarPrimitive, SeparatorPrimitive, TooltipPrimitive, finalForm, arrayMutators, setFieldData, reactFinalForm, PropTypes, pkg$1, pkg, tailwindMerge, reactBeautifulDnd, graphql$1, core$1, react$1, plateTrailingBlock, plateFloating, plateBlockQuote, plateNodeId, plateLink, plateAutoformat, dateFns, dropzone, cmdk$1, get$5, moment, schemaTools, gql, yup, reactRouterDom, mdx) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("zod"), require("react"), require("react-dom"), require("@udecode/cn"), require("@udecode/plate-heading"), require("is-hotkey"), require("clsx"), require("@radix-ui/react-slot"), require("@udecode/plate-code-block"), require("lucide-react"), require("mermaid"), require("class-variance-authority"), require("cmdk"), require("@radix-ui/react-dialog"), require("@radix-ui/react-popover"), require("@udecode/plate"), require("@ariakit/react"), require("@udecode/plate-combobox"), require("@udecode/plate-reset-node"), require("@udecode/plate-list"), require("@udecode/plate-resizable"), require("@udecode/plate-dnd"), require("@udecode/plate-table"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-separator"), require("@radix-ui/react-tooltip"), require("final-form"), require("final-form-arrays"), require("final-form-set-field-data"), require("react-final-form"), require("prop-types"), require("tailwind-merge"), require("@dnd-kit/core"), require("@dnd-kit/sortable"), require("@dnd-kit/utilities"), require("react-color"), require("color-string"), require("graphql"), require("@graphql-inspector/core"), require("react-dropzone"), require("@udecode/cmdk"), require("@headlessui/react"), require("@udecode/plate-trailing-block"), require("@udecode/plate-floating"), require("@udecode/plate-block-quote"), require("@udecode/plate-node-id"), require("@udecode/plate-link"), require("@udecode/plate-autoformat"), require("lodash.get"), require("moment"), require("date-fns"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("react-router-dom"), require("@tinacms/mdx")) : typeof define === "function" && define.amd ? define(["exports", "zod", "react", "react-dom", "@udecode/cn", "@udecode/plate-heading", "is-hotkey", "clsx", "@radix-ui/react-slot", "@udecode/plate-code-block", "lucide-react", "mermaid", "class-variance-authority", "cmdk", "@radix-ui/react-dialog", "@radix-ui/react-popover", "@udecode/plate", "@ariakit/react", "@udecode/plate-combobox", "@udecode/plate-reset-node", "@udecode/plate-list", "@udecode/plate-resizable", "@udecode/plate-dnd", "@udecode/plate-table", "@radix-ui/react-dropdown-menu", "@radix-ui/react-toolbar", "@radix-ui/react-separator", "@radix-ui/react-tooltip", "final-form", "final-form-arrays", "final-form-set-field-data", "react-final-form", "prop-types", "tailwind-merge", "@dnd-kit/core", "@dnd-kit/sortable", "@dnd-kit/utilities", "react-color", "color-string", "graphql", "@graphql-inspector/core", "react-dropzone", "@udecode/cmdk", "@headlessui/react", "@udecode/plate-trailing-block", "@udecode/plate-floating", "@udecode/plate-block-quote", "@udecode/plate-node-id", "@udecode/plate-link", "@udecode/plate-autoformat", "lodash.get", "moment", "date-fns", "@tinacms/schema-tools", "graphql-tag", "yup", "react-router-dom", "@tinacms/mdx"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.tinacms = {}, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP, global2.NOOP));
+})(this, function(exports2, zod, React, ReactDOM, cn$2, plateHeading, isHotkey, clsx, reactSlot, plateCodeBlock, lucideReact, mermaid, classVarianceAuthority, cmdk, DialogPrimitive, PopoverPrimitive, plate, react, plateCombobox, plateResetNode, plateList, plateResizable, plateDnd, plateTable, DropdownMenuPrimitive, ToolbarPrimitive, SeparatorPrimitive, TooltipPrimitive, finalForm, arrayMutators, setFieldData, reactFinalForm, PropTypes, tailwindMerge, core$1, sortable, utilities, pkg$1, pkg, graphql$1, core$2, dropzone, cmdk$1, react$1, plateTrailingBlock, plateFloating, plateBlockQuote, plateNodeId, plateLink, plateAutoformat, get$5, moment, dateFns, schemaTools, gql, yup, reactRouterDom, mdx) {
   var _a;
   "use strict";
   function _interopNamespaceDefault(e3) {
@@ -38308,6 +38308,171 @@ Please wrap them with useCallback or configure the deps array correctly.`
     Component: PropTypes.any.isRequired,
     children: PropTypes.any
   };
+  function cn$1(...inputs) {
+    return tailwindMerge.twMerge(clsx.clsx(inputs));
+  }
+  const Button$1 = ({
+    variant = "secondary",
+    as: Tag2 = "button",
+    size: size2 = "medium",
+    busy,
+    disabled,
+    rounded = "full",
+    children,
+    className = "",
+    ...props
+  }) => {
+    const baseClasses = "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out ";
+    const variantClasses = {
+      primary: `shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark border-0`,
+      secondary: `shadow text-gray-500 hover:tina-orange-dark bg-gray-50 hover:bg-white border border-gray-100`,
+      white: `shadow text-gray-500 hover:tina-orange-dark bg-white hover:bg-gray-50 border border-gray-100`,
+      ghost: `text-gray-500 hover:tina-orange-dark hover:shadow border border-transparent border-0 hover:border hover:border-gray-200 bg-transparent`,
+      danger: `shadow text-white bg-red-500 hover:bg-red-600 focus:ring-red-500`,
+      accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`,
+      custom: ""
+    };
+    const state = busy ? `busy` : disabled ? `disabled` : `default`;
+    const stateClasses = {
+      disabled: `pointer-events-none opacity-30 cursor-not-allowed`,
+      busy: `pointer-events-none opacity-70 cursor-wait`,
+      default: ``
+    };
+    const roundedClasses = {
+      full: `rounded`,
+      left: `rounded-l`,
+      right: `rounded-r`,
+      custom: "",
+      none: ""
+    };
+    const sizeClasses = {
+      small: `text-xs h-8 px-3`,
+      medium: `text-sm h-10 px-8`,
+      custom: ``
+    };
+    return /* @__PURE__ */ React__namespace.createElement(
+      Tag2,
+      {
+        className: cn$1(
+          baseClasses,
+          variantClasses[variant],
+          sizeClasses[size2],
+          stateClasses[state],
+          roundedClasses[rounded],
+          className
+        ),
+        ...props
+      },
+      children
+    );
+  };
+  const IconButton = ({
+    variant = "secondary",
+    size: size2 = "medium",
+    busy,
+    disabled,
+    children,
+    className,
+    ...props
+  }) => {
+    const baseClasses = "icon-parent inline-flex items-center border border-transparent text-sm font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out rounded-full";
+    const variantClasses = {
+      primary: `shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark`,
+      secondary: `shadow text-gray-500 hover:text-blue-500 bg-gray-50 hover:bg-white border border-gray-200`,
+      white: `shadow text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-200`,
+      ghost: `text-gray-500 hover:text-blue-500 hover:shadow border border-transparent hover:border-gray-200 bg-transparent`,
+      accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`
+    };
+    const state = busy ? `busy` : disabled ? `disabled` : `default`;
+    const stateClasses = {
+      disabled: `pointer-events-none	opacity-30 cursor-not-allowed`,
+      busy: `pointer-events-none opacity-70 cursor-wait`,
+      default: ``
+    };
+    const sizeClasses = {
+      small: `h-7 w-7`,
+      medium: `h-9 w-9`,
+      custom: ``
+    };
+    return /* @__PURE__ */ React__namespace.createElement(
+      "button",
+      {
+        className: cn$1(
+          baseClasses,
+          variantClasses[variant],
+          sizeClasses[size2],
+          stateClasses[state],
+          className
+        ),
+        ...props
+      },
+      children
+    );
+  };
+  function FontLoader() {
+    React__namespace.useEffect(() => {
+      const link = document.createElement("link");
+      link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Libre+Baskerville:wght@400;500;600;700&display=swap";
+      link.rel = "stylesheet";
+      document.head.appendChild(link);
+      return () => {
+        document.head.removeChild(link);
+      };
+    }, []);
+    return null;
+  }
+  function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+  }
+  const OverflowMenu$1 = ({ toolbarItems: toolbarItems2, className = "w-full" }) => {
+    const [open, setOpen] = React.useState(false);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, toolbarItems2.length > 0 && /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(
+      PopoverPrimitive__namespace.Trigger,
+      {
+        className: `cursor-pointer relative justify-center inline-flex items-center p-3 text-sm font-medium focus:outline-1 focus:outline-blue-200 pointer-events-auto ${open ? `text-blue-400` : `text-gray-300 hover:text-blue-500`} ${className}}`
+      },
+      /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "h-5 w-5",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor"
+        },
+        /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+          }
+        )
+      )
+    ), /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Content, { style: { zIndex: 2e4 }, align: "end" }, /* @__PURE__ */ React.createElement("div", { className: "mt-0 -mr-1 rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1" }, toolbarItems2.map((toolbarItem) => {
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "data-test": `${toolbarItem.name}OverflowButton`,
+          key: toolbarItem.name,
+          onMouseDown: (event) => {
+            event.preventDefault();
+            toolbarItem.onMouseDown(event);
+            setOpen(false);
+          },
+          className: classNames(
+            toolbarItem.active ? "bg-gray-50 text-blue-500" : "bg-white text-gray-600",
+            "hover:bg-gray-50 hover:text-blue-500 cursor-pointer pointer-events-auto px-4 py-2 text-sm w-full flex items-center whitespace-nowrap",
+            toolbarItem.className ?? ""
+          )
+        },
+        /* @__PURE__ */ React.createElement("div", { className: "mr-2 opacity-80" }, toolbarItem.Icon),
+        " ",
+        toolbarItem.label
+      );
+    }))))));
+  };
   var DefaultContext = {
     color: void 0,
     size: void 0,
@@ -38549,30 +38714,392 @@ Please wrap them with useCallback or configure the deps array correctly.`
   function BiX(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z" }, "child": [] }] })(props);
   }
-  const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
-  const disabledClasses$1 = "opacity-50 pointer-events-none cursor-not-allowed";
-  const BaseTextField = React__namespace.forwardRef(({ className, disabled, ...rest }, ref) => {
+  function BsArrowRightShort(props) {
+    return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" }, "child": [] }] })(props);
+  }
+  function BsCheckCircleFill(props) {
+    return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }, "child": [] }] })(props);
+  }
+  function BsExclamationOctagonFill(props) {
+    return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" }, "child": [] }] })(props);
+  }
+  const MessageIcon = ({
+    type = "success",
+    className = ""
+  }) => {
+    const icons = {
+      success: BiCheckCircle,
+      warning: BiError,
+      error: BiError,
+      info: BiInfoCircle
+    };
+    const Icon = icons[type];
+    return /* @__PURE__ */ React.createElement(Icon, { className });
+  };
+  const Message = ({
+    children,
+    type = "success",
+    size: size2 = "medium",
+    className = "",
+    link,
+    linkLabel = "Learn More"
+  }) => {
+    const containerClasses = {
+      success: "bg-gradient-to-r from-green-50 to-green-100 border-green-200",
+      warning: "bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-200",
+      error: "bg-gradient-to-r from-red-50 to-red-100 border-red-200",
+      info: "bg-gradient-to-r from-blue-50 to-blue-100 border-blue-100"
+    };
+    const textClasses = {
+      success: "text-green-700",
+      warning: "text-yellow-700",
+      error: "text-red-700",
+      info: "text-blue-700"
+    };
+    const iconClasses = {
+      success: "text-green-400",
+      warning: "text-yellow-400",
+      error: "text-red-400",
+      info: "text-blue-400"
+    };
+    const sizeClasses = {
+      small: "px-3 py-1.5 text-xs",
+      medium: "px-4 py-2.5 text-sm"
+    };
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `rounded-lg border shadow-sm ${sizeClasses[size2]} ${containerClasses[type]} ${className}`
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+        MessageIcon,
+        {
+          type,
+          className: `${size2 === "small" ? "w-5" : "w-6"} h-auto flex-shrink-0 ${iconClasses[type]}`
+        }
+      ), /* @__PURE__ */ React.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children)), link && /* @__PURE__ */ React.createElement(
+        "a",
+        {
+          href: link,
+          target: "_blank",
+          className: "flex-shrink-0 flex items-center gap-1 text-blue-600 underline decoration-blue-200 hover:text-blue-500 hover:decoration-blue-500 transition-all ease-out duration-150"
+        },
+        linkLabel,
+        " ",
+        /* @__PURE__ */ React.createElement(BsArrowRightShort, { className: "w-4 h-auto" })
+      ))
+    );
+  };
+  function cn(...inputs) {
+    return tailwindMerge.twMerge(clsx.clsx(inputs));
+  }
+  function DropdownMenu({
+    ...props
+  }) {
+    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Root, { "data-slot": "dropdown-menu", ...props });
+  }
+  function DropdownMenuTrigger({
+    ...props
+  }) {
     return /* @__PURE__ */ React__namespace.createElement(
-      "input",
+      DropdownMenuPrimitive__namespace.Trigger,
       {
-        ref,
-        type: "text",
-        className: `${textFieldClasses} ${disabled ? disabledClasses$1 : ""} ${className}`,
-        ...rest
+        "data-slot": "dropdown-menu-trigger",
+        ...props
       }
     );
-  });
-  const TextArea = React__namespace.forwardRef(({ ...props }, ref) => {
+  }
+  function DropdownMenuContent({
+    className,
+    sideOffset = 4,
+    ...props
+  }) {
+    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Portal, null, /* @__PURE__ */ React__namespace.createElement(
+      DropdownMenuPrimitive__namespace.Content,
+      {
+        "data-slot": "dropdown-menu-content",
+        sideOffset,
+        className: cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-base max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        ),
+        ...props
+      }
+    ));
+  }
+  function DropdownMenuItem({
+    className,
+    inset,
+    variant = "default",
+    ...props
+  }) {
     return /* @__PURE__ */ React__namespace.createElement(
-      "textarea",
+      DropdownMenuPrimitive__namespace.Item,
       {
-        ...props,
-        className: "shadow-inner text-base px-3 py-2 text-gray-600 resize-y focus:shadow-outline focus:border-blue-500 block w-full border border-gray-200 focus:text-gray-900 rounded",
-        ref,
-        style: { minHeight: "160px" }
+        "data-slot": "dropdown-menu-item",
+        "data-inset": inset,
+        "data-variant": variant,
+        className: cn(
+          "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer text-gray-700 hover:text-blue-500",
+          className
+        ),
+        ...props
       }
     );
-  });
+  }
+  function DropdownMenuSeparator({
+    className,
+    ...props
+  }) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      DropdownMenuPrimitive__namespace.Separator,
+      {
+        "data-slot": "dropdown-menu-separator",
+        className: cn("bg-border -mx-1 my-1 h-px", className),
+        ...props
+      }
+    );
+  }
+  const DropdownButton = React__namespace.forwardRef(
+    ({
+      variant = "primary",
+      size: size2 = "medium",
+      busy,
+      disabled,
+      rounded = "full",
+      children,
+      className = "",
+      onMainAction,
+      items: items2,
+      showSplitButton = true,
+      ...props
+    }, ref) => {
+      const [open, setOpen] = React__namespace.useState(false);
+      if (!onMainAction || !showSplitButton) {
+        return /* @__PURE__ */ React__namespace.createElement(DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
+          Button$1,
+          {
+            variant,
+            size: size2,
+            busy,
+            disabled,
+            rounded,
+            className: cn$1("gap-2", className),
+            ...props
+          },
+          children,
+          /* @__PURE__ */ React__namespace.createElement(
+            lucideReact.ChevronDownIcon,
+            {
+              className: cn$1(
+                "h-4 w-4 transition-transform duration-200",
+                open && "rotate-180"
+              )
+            }
+          )
+        )), /* @__PURE__ */ React__namespace.createElement(DropdownMenuContent, { align: "end", side: "bottom", className: "z-[100000]" }, items2.map((item, index) => /* @__PURE__ */ React__namespace.createElement(
+          DropdownMenuItem,
+          {
+            key: index,
+            onClick: item.onClick,
+            disabled: item.disabled,
+            variant: item.variant
+          },
+          item.icon && item.icon,
+          item.label
+        ))));
+      }
+      return /* @__PURE__ */ React__namespace.createElement("div", { className: cn$1("inline-flex", className) }, /* @__PURE__ */ React__namespace.createElement(
+        Button$1,
+        {
+          variant,
+          size: size2,
+          busy,
+          disabled,
+          rounded: "left",
+          onClick: onMainAction,
+          className: "border-r-0 w-full",
+          ...props
+        },
+        children
+      ), /* @__PURE__ */ React__namespace.createElement(DropdownMenu, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__namespace.createElement(DropdownMenuTrigger, null, /* @__PURE__ */ React__namespace.createElement(
+        Button$1,
+        {
+          variant,
+          size: size2,
+          busy,
+          disabled,
+          rounded: "right",
+          className: "px-4 border-l",
+          style: { borderColor: "#00000030" },
+          "aria-label": "More options"
+        },
+        /* @__PURE__ */ React__namespace.createElement(
+          lucideReact.ChevronDownIcon,
+          {
+            className: cn$1(
+              "h-4 w-4 transition-transform duration-200 fill-none",
+              open && "rotate-180"
+            ),
+            style: { fill: "none" }
+          }
+        )
+      )), /* @__PURE__ */ React__namespace.createElement(DropdownMenuContent, { align: "end", side: "bottom" }, items2.map((item, index) => {
+        var _a2;
+        return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, { key: index }, /* @__PURE__ */ React__namespace.createElement(
+          DropdownMenuItem,
+          {
+            onClick: item.onClick,
+            disabled: item.disabled,
+            variant: item.variant
+          },
+          item.icon && item.icon,
+          item.label
+        ), item.variant === "destructive" && index < items2.length - 1 && ((_a2 = items2[index + 1]) == null ? void 0 : _a2.variant) !== "destructive" && /* @__PURE__ */ React__namespace.createElement(DropdownMenuSeparator, null));
+      }))));
+    }
+  );
+  DropdownButton.displayName = "DropdownButton";
+  const DragDropContext = ({
+    onDragEnd,
+    children
+  }) => {
+    const sensors = core$1.useSensors(
+      core$1.useSensor(core$1.PointerSensor, {
+        activationConstraint: {
+          delay: 100,
+          tolerance: 5
+        }
+      }),
+      core$1.useSensor(core$1.KeyboardSensor, {
+        coordinateGetter: sortable.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.createElement(
+      core$1.DndContext,
+      {
+        sensors,
+        collisionDetection: core$1.closestCenter,
+        onDragEnd: handleDragEnd
+      },
+      children
+    );
+  };
+  const Droppable = ({
+    droppableId,
+    type,
+    children
+  }) => {
+    const ref = React.useRef(null);
+    return /* @__PURE__ */ React.createElement(React.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 sortable.defaultAnimateLayoutChanges(args);
+      }
+      return true;
+    };
+    const {
+      attributes,
+      listeners,
+      setNodeRef,
+      transform,
+      transition,
+      isDragging,
+      setActivatorNodeRef
+    } = sortable.useSortable({
+      id: draggableId,
+      animateLayoutChanges
+    });
+    const style = {
+      transform: utilities.CSS.Transform.toString(transform),
+      transition,
+      ...isDragging && { zIndex: 9999 }
+    };
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, children(
+      {
+        innerRef: { current: null },
+        draggableProps: {
+          ref: setNodeRef,
+          style,
+          ...attributes
+        },
+        dragHandleProps: {
+          ref: setActivatorNodeRef,
+          ...listeners
+        }
+      },
+      {
+        isDragging
+      }
+    ));
+  };
+  const SortableProvider = ({
+    items: items2,
+    children
+  }) => {
+    return /* @__PURE__ */ React.createElement(sortable.SortableContext, { items: items2, strategy: sortable.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,
@@ -38645,14 +39172,167 @@ Please wrap them with useCallback or configure the deps array correctly.`
     }, [click, customDocument, escape2, disabled, onDismiss]);
     return area;
   }
-  const { get: getColor, to: toColor } = pkg__namespace;
-  var ColorFormat = /* @__PURE__ */ ((ColorFormat2) => {
-    ColorFormat2["Hex"] = "hex";
-    ColorFormat2["RGB"] = "rgb";
-    return ColorFormat2;
-  })(ColorFormat || {});
-  const rgbToHex = function(color) {
-    return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
+  const FormActionMenu = ({ actions, form }) => {
+    const [actionMenuVisibility, setActionMenuVisibility] = React.useState(false);
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(MoreActionsButton, { onClick: () => setActionMenuVisibility((p2) => !p2) }), /* @__PURE__ */ React__namespace.createElement(ActionsOverlay, { open: actionMenuVisibility }, /* @__PURE__ */ React__namespace.createElement(
+      Dismissible,
+      {
+        click: true,
+        escape: true,
+        disabled: !actionMenuVisibility,
+        onDismiss: () => {
+          setActionMenuVisibility((p2) => !p2);
+        }
+      },
+      actions.map((Action, i2) => (
+        // TODO: `i` will suppress warnings but this indicates that maybe
+        //        Actions should just be componets
+        /* @__PURE__ */ React__namespace.createElement(Action, { form, key: i2 })
+      ))
+    )));
+  };
+  const MoreActionsButton = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
+    "button",
+    {
+      className: `h-16 w-10 self-stretch bg-transparent bg-center bg-[length:auto_18px] -mr-4 ml-2 outline-none cursor-pointer transition-opacity duration-100 ease-out flex justify-center items-center hover:bg-gray-50 hover:fill-gray-700 ${className}`,
+      ...props
+    },
+    /* @__PURE__ */ React__namespace.createElement(EllipsisVerticalIcon, null)
+  );
+  const ActionsOverlay = ({ open, className = "", style = {}, ...props }) => /* @__PURE__ */ React__namespace.createElement(
+    "div",
+    {
+      className: `min-w-[192px] rounded-3xl border border-solid border-[#efefef] block absolute bottom-5 right-5 ${open ? "opacity-100" : "opacity-0"} transition-all duration-100 ease-out origin-bottom-right shadow-[0_2px_3px_rgba(0,0,0,0.05)] bg-white overflow-hidden z-10 ${className}`,
+      style: {
+        transform: open ? "translate3d(0, -28px, 0) scale3d(1, 1, 1)" : "translate3d(0, 0, 0) scale3d(0.5, 0.5, 1)",
+        pointerEvents: open ? "all" : "none",
+        ...style
+      },
+      ...props
+    }
+  );
+  const ActionButton = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
+    "button",
+    {
+      className: `relative text-center text-[13px] px-3 h-10 font-normal w-full bg-none cursor-pointer outline-none border-0 transition-all duration-[150ms] ease-out hover:text-blue-500 hover:bg-gray50 [&:not(:last-child)]: border-b-[1px] border-solid border-b-[#edecf3] ${className}`,
+      ...props
+    }
+  );
+  const FormPortalContext = React__namespace.createContext(() => {
+    return null;
+  });
+  function useFormPortal() {
+    return React__namespace.useContext(FormPortalContext);
+  }
+  const FormPortalProvider = ({
+    children
+  }) => {
+    const wrapperRef = React__namespace.useRef(null);
+    const zIndexRef = React__namespace.useRef(0);
+    const FormPortal = React__namespace.useCallback(
+      (props) => {
+        if (!wrapperRef.current)
+          return null;
+        return ReactDOM.createPortal(
+          props.children({ zIndexShift: zIndexRef.current += 1 }),
+          wrapperRef.current
+        );
+      },
+      [wrapperRef, zIndexRef]
+    );
+    return /* @__PURE__ */ React__namespace.createElement(FormPortalContext.Provider, { value: FormPortal }, /* @__PURE__ */ React__namespace.createElement("div", { ref: wrapperRef, className: "relative w-full flex-1 overflow-hidden" }, children));
+  };
+  const LoadingDots = ({
+    dotSize = 8,
+    color = "white"
+  }) => {
+    return /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color }), /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color, delay: 0.3 }), /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color, delay: 0.5 }));
+  };
+  const SingleDot = ({ delay = 0, color, dotSize }) => /* @__PURE__ */ React__namespace.createElement(
+    "span",
+    {
+      className: "inline-block mr-1",
+      style: {
+        animation: "loading-dots-scale-up-and-down 2s linear infinite",
+        animationDelay: `${delay}s`,
+        background: color,
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotSize
+      }
+    }
+  );
+  const ResetForm = ({
+    pristine,
+    reset: reset2,
+    children,
+    ...props
+  }) => {
+    const [open, setOpen] = React__namespace.useState(false);
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
+      Button$1,
+      {
+        onClick: () => {
+          setOpen((p2) => !p2);
+        },
+        disabled: pristine,
+        ...props
+      },
+      children
+    ), open && /* @__PURE__ */ React__namespace.createElement(ResetModal, { reset: reset2, close: () => setOpen(false) }));
+  };
+  const ResetModal = ({ close: close2, reset: reset2 }) => {
+    return /* @__PURE__ */ React__namespace.createElement(Modal, null, /* @__PURE__ */ React__namespace.createElement(ModalPopup, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: close2 }, "Reset"), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__namespace.createElement("p", null, "Are you sure you want to reset all changes?")), /* @__PURE__ */ React__namespace.createElement(ModalActions, null, /* @__PURE__ */ React__namespace.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
+      Button$1,
+      {
+        style: { flexGrow: 3 },
+        variant: "primary",
+        onClick: async () => {
+          await reset2();
+          close2();
+        }
+      },
+      "Reset"
+    ))));
+  };
+  function AiFillWarning(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z" }, "child": [] }] })(props);
+  }
+  function AiOutlineLoading(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }, "child": [] }] })(props);
+  }
+  const textFieldClasses = "shadow-inner focus:shadow-outline focus:border-blue-500 focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 w-full bg-white border border-gray-200 transition-all ease-out duration-150 focus:text-gray-900 rounded";
+  const disabledClasses$1 = "opacity-50 pointer-events-none cursor-not-allowed";
+  const BaseTextField = React__namespace.forwardRef(({ className, disabled, ...rest }, ref) => {
+    return /* @__PURE__ */ React__namespace.createElement(
+      "input",
+      {
+        ref,
+        type: "text",
+        className: `${textFieldClasses} ${disabled ? disabledClasses$1 : ""} ${className}`,
+        ...rest
+      }
+    );
+  });
+  const TextArea = React__namespace.forwardRef(({ ...props }, ref) => {
+    return /* @__PURE__ */ React__namespace.createElement(
+      "textarea",
+      {
+        ...props,
+        className: "shadow-inner text-base px-3 py-2 text-gray-600 resize-y focus:shadow-outline focus:border-blue-500 block w-full border border-gray-200 focus:text-gray-900 rounded",
+        ref,
+        style: { minHeight: "160px" }
+      }
+    );
+  });
+  const { get: getColor, to: toColor } = pkg__namespace;
+  var ColorFormat = /* @__PURE__ */ ((ColorFormat2) => {
+    ColorFormat2["Hex"] = "hex";
+    ColorFormat2["RGB"] = "rgb";
+    return ColorFormat2;
+  })(ColorFormat || {});
+  const rgbToHex = function(color) {
+    return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
   };
   function ParseColorStr(color) {
     if (!color) {
@@ -38913,691 +39593,289 @@ Please wrap them with useCallback or configure the deps array correctly.`
           className: `absolute rounded-3xl left-0.5 top-1/2 w-[22px] h-[22px] shadow border transition-all ease-out duration-150 ${checked ? "bg-blue-500 border-blue-600" : "bg-gray-250 border-gray-300"}`,
           style: {
             transform: `translate3d(${checked ? "20px" : "0"}, -50%, 0)`
-          }
-        }
-      ))
-    )), labels && /* @__PURE__ */ React__namespace.createElement(
-      "span",
-      {
-        className: `text-sm ${checked ? "text-blue-500 font-bold" : "text-gray-300"}`
-      },
-      labels.true
-    ));
-  };
-  const ToggleInput = ({ disabled, ...props }) => {
-    return /* @__PURE__ */ React__namespace.createElement(
-      "input",
-      {
-        className: `absolute left-0 top-0 w-12 h-8 opacity-0 m-0 ${disabled ? `cursor-not-allowed pointer-events-none` : `cursor-pointer z-20`}`,
-        ...props
-      }
-    );
-  };
-  function MdCheckCircle(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 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }, "child": [] }] })(props);
-  }
-  function MdInfo(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 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }, "child": [] }] })(props);
-  }
-  function MdError(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 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }, "child": [] }] })(props);
-  }
-  function MdWarning(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": "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }, "child": [] }] })(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 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);
-  }
-  function MdArrowForward(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 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" }, "child": [] }] })(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 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);
-  }
-  function MdOutlineSettings(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.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.566.566 0 0 0-.18-.03c-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" }, "child": [] }] })(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 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);
-  }
-  function MdOutlinePhotoLibrary(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": "M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z" }, "child": [] }] })(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 Select = ({
-    input,
-    field,
-    options,
-    className = ""
-  }) => {
-    const selectOptions = options || field.options;
-    const ref = React__namespace.useRef(null);
-    React__namespace.useEffect(() => {
-      if (ref.current && (field == null ? void 0 : field.experimental_focusIntent)) {
-        ref.current.focus();
-      }
-    }, [field == null ? void 0 : field.experimental_focusIntent, ref]);
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group w-full md:w-auto" }, /* @__PURE__ */ React__namespace.createElement(
-      "select",
-      {
-        id: input.name,
-        ref,
-        value: input.value,
-        onChange: input.onChange,
-        className: `${selectFieldClasses} ${input.value ? "text-gray-700" : "text-gray-300"} } ${className}`,
-        ...input
-      },
-      selectOptions ? selectOptions.map(toProps$1).map(toComponent) : /* @__PURE__ */ React__namespace.createElement("option", null, input.value)
-    ), /* @__PURE__ */ React__namespace.createElement(MdKeyboardArrowDown, { className: "absolute top-1/2 right-2 w-6 h-auto -translate-y-1/2 text-gray-300 group-hover:text-blue-500 transition duration-150 ease-out pointer-events-none" }));
-  };
-  function toProps$1(option) {
-    if (typeof option === "object")
-      return option;
-    return { value: option, label: option };
-  }
-  function toComponent(option) {
-    return /* @__PURE__ */ React__namespace.createElement("option", { key: option.value, value: option.value }, option.label);
-  }
-  const RadioGroup = ({
-    input,
-    field,
-    options
-  }) => {
-    const radioOptions = options || field.options;
-    const radioRefs = {};
-    const toProps2 = (option) => {
-      if (typeof option === "object")
-        return option;
-      return { value: option, label: option };
-    };
-    const toComponent2 = (option) => {
-      const optionId = `field-${field.name}-option-${option.value}`;
-      const checked = option.value === input.value;
-      return /* @__PURE__ */ React__namespace.createElement(
-        "div",
-        {
-          key: option.value,
-          ref: (ref) => {
-            radioRefs[`radio_${option.value}`] = ref;
-          }
-        },
-        /* @__PURE__ */ React__namespace.createElement(
-          "input",
-          {
-            className: "absolute w-0 h-0 opacity-0 cursor-pointer",
-            type: "radio",
-            id: optionId,
-            name: input.name,
-            value: option.value,
-            onChange: (event) => {
-              input.onChange(event.target.value);
-            },
-            checked
-          }
-        ),
-        /* @__PURE__ */ React__namespace.createElement(RadioOption, { htmlFor: optionId, checked }, option.label)
-      );
-    };
-    return /* @__PURE__ */ React__namespace.createElement(RadioOptions, { id: input.name, direction: field.direction }, radioOptions ? radioOptions.map(toProps2).map(toComponent2) : input.value);
-  };
-  const RadioOptions = ({ direction: direction2, children, ...props }) => /* @__PURE__ */ React__namespace.createElement(
-    "div",
-    {
-      className: `flex w-full ${direction2 === "horizontal" ? "flex-wrap gap-y-1 gap-x-3" : "flex-col gap-1"}`,
-      ...props
-    },
-    children
-  );
-  const RadioOption = ({ checked, htmlFor, children, ...props }) => /* @__PURE__ */ React__namespace.createElement(
-    "label",
-    {
-      className: "cursor-pointer flex group items-center gap-2",
-      htmlFor,
-      ...props
-    },
-    /* @__PURE__ */ React__namespace.createElement(
-      "span",
-      {
-        className: `relative h-[19px] w-[19px] rounded border text-indigo-600 focus:ring-indigo-500 transition ease-out duration-150 ${checked ? "border-blue-500 bg-blue-500 shadow-sm group-hover:bg-blue-400 group-hover:border-blue-400" : "border-gray-200 bg-white shadow-inner group-hover:bg-gray-100"}`
-      },
-      /* @__PURE__ */ React__namespace.createElement(
-        BiCheck,
-        {
-          className: `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[17px] h-[17px] transition ease-out duration-150 ${checked ? "opacity-100 text-white group-hover:opacity-80" : "text-blue-500 opacity-0 grou-hover:opacity-30"}`
-        }
-      )
-    ),
-    /* @__PURE__ */ React__namespace.createElement(
-      "span",
-      {
-        className: `relative transition ease-out duration-150 ${checked ? "text-gray-800 opacity-100" : "text-gray-700 opacity-70 group-hover:opacity-100"}`
-      },
-      children
-    )
-  );
-  const CheckboxGroup = ({
-    input,
-    field,
-    options,
-    disabled = false
-  }) => {
-    const checkboxOptions = options || field.options;
-    const toProps2 = (option) => {
-      if (typeof option === "object")
-        return option;
-      return { value: option, label: option };
-    };
-    const toComponent2 = (option) => {
-      const optionId = `field-${field.name}-option-${option.value}`;
-      const checked = input.value ? input.value.includes(option.value) : false;
-      return /* @__PURE__ */ React__namespace.createElement("div", { key: option.value }, /* @__PURE__ */ React__namespace.createElement(
-        "input",
-        {
-          className: "absolute w-0 h-0 opacity-0 cursor-pointer",
-          type: "checkbox",
-          name: input.name,
-          id: optionId,
-          value: option.value,
-          checked,
-          disabled,
-          onChange: (event) => {
-            if (event.target.checked === true) {
-              input.onChange([...input.value, event.target.value]);
-            } else {
-              input.onChange([
-                ...input.value.filter((v) => v !== event.target.value)
-              ]);
-            }
-          }
-        }
-      ), /* @__PURE__ */ React__namespace.createElement(
-        "label",
-        {
-          className: "cursor-pointer flex group items-center gap-2",
-          htmlFor: optionId
-        },
-        /* @__PURE__ */ React__namespace.createElement(
-          "span",
-          {
-            className: `relative h-[18px] w-[18px] rounded border text-indigo-600 focus:ring-indigo-500 transition ease-out duration-150 ${checked ? "border-blue-500 bg-blue-500 shadow-sm group-hover:bg-blue-400 group-hover:border-blue-400" : "border-gray-200 bg-white shadow-inner group-hover:bg-gray-100"}`
-          },
-          /* @__PURE__ */ React__namespace.createElement(
-            BiCheck,
-            {
-              className: `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[17px] h-[17px] transition ease-out duration-150 ${checked ? "opacity-100 text-white group-hover:opacity-80" : "text-blue-500 opacity-0 grou-hover:opacity-30"}`
-            }
-          )
-        ),
-        /* @__PURE__ */ React__namespace.createElement(
-          "span",
-          {
-            className: `relative transition ease-out duration-150 ${checked ? "text-gray-800 opacity-100" : "text-gray-700 opacity-70 group-hover:opacity-100"}`
-          },
-          option.label
-        )
-      ));
-    };
-    return /* @__PURE__ */ React__namespace.createElement(
-      "div",
-      {
-        className: `flex w-full ${field.direction === "horizontal" ? "flex-wrap gap-y-1 gap-x-3" : "flex-col gap-1"}`,
-        id: input.name
-      },
-      checkboxOptions == null ? void 0 : checkboxOptions.map(toProps2).map(toComponent2)
-    );
-  };
-  const Input = ({ ...props }) => {
-    return /* @__PURE__ */ React.createElement("input", { className: textFieldClasses, ...props });
-  };
-  const NumberInput = ({
-    onChange,
-    value,
-    step
-  }) => /* @__PURE__ */ React__namespace.createElement(
-    Input,
-    {
-      type: "number",
-      step,
-      value,
-      onChange: (event) => {
-        const inputValue = event.target.value;
-        const newValue = inputValue === "" ? void 0 : inputValue;
-        if (onChange) {
-          const syntheticEvent = {
-            ...event,
-            target: {
-              ...event.target,
-              value: newValue
-            }
-          };
-          onChange(syntheticEvent);
-        }
-      }
-    }
-  );
-  function cn$1(...inputs) {
-    return tailwindMerge.twMerge(clsx.clsx(inputs));
-  }
-  const Button$1 = ({
-    variant = "secondary",
-    as: Tag2 = "button",
-    size: size2 = "medium",
-    busy,
-    disabled,
-    rounded = "full",
-    children,
-    className = "",
-    ...props
-  }) => {
-    const baseClasses = "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out ";
-    const variantClasses = {
-      primary: `shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark border-0`,
-      secondary: `shadow text-gray-500 hover:tina-orange-dark bg-gray-50 hover:bg-white border border-gray-100`,
-      white: `shadow text-gray-500 hover:tina-orange-dark bg-white hover:bg-gray-50 border border-gray-100`,
-      ghost: `text-gray-500 hover:tina-orange-dark hover:shadow border border-transparent border-0 hover:border hover:border-gray-200 bg-transparent`,
-      danger: `shadow text-white bg-red-500 hover:bg-red-600 focus:ring-red-500`,
-      accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`,
-      custom: ""
-    };
-    const state = busy ? `busy` : disabled ? `disabled` : `default`;
-    const stateClasses = {
-      disabled: `pointer-events-none opacity-30 cursor-not-allowed`,
-      busy: `pointer-events-none opacity-70 cursor-wait`,
-      default: ``
-    };
-    const roundedClasses = {
-      full: `rounded`,
-      left: `rounded-l`,
-      right: `rounded-r`,
-      custom: "",
-      none: ""
-    };
-    const sizeClasses = {
-      small: `text-xs h-8 px-3`,
-      medium: `text-sm h-10 px-8`,
-      custom: ``
-    };
-    return /* @__PURE__ */ React__namespace.createElement(
-      Tag2,
-      {
-        className: cn$1(
-          baseClasses,
-          variantClasses[variant],
-          sizeClasses[size2],
-          stateClasses[state],
-          roundedClasses[rounded],
-          className
-        ),
-        ...props
-      },
-      children
-    );
-  };
-  const IconButton = ({
-    variant = "secondary",
-    size: size2 = "medium",
-    busy,
-    disabled,
-    children,
-    className,
-    ...props
-  }) => {
-    const baseClasses = "icon-parent inline-flex items-center border border-transparent text-sm font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center inline-flex justify-center transition-all duration-150 ease-out rounded-full";
-    const variantClasses = {
-      primary: `shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark`,
-      secondary: `shadow text-gray-500 hover:text-blue-500 bg-gray-50 hover:bg-white border border-gray-200`,
-      white: `shadow text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-200`,
-      ghost: `text-gray-500 hover:text-blue-500 hover:shadow border border-transparent hover:border-gray-200 bg-transparent`,
-      accent: `shadow text-white bg-orange-500 hover:bg-orange-600 focus:ring-orange-500`
-    };
-    const state = busy ? `busy` : disabled ? `disabled` : `default`;
-    const stateClasses = {
-      disabled: `pointer-events-none	opacity-30 cursor-not-allowed`,
-      busy: `pointer-events-none opacity-70 cursor-wait`,
-      default: ``
-    };
-    const sizeClasses = {
-      small: `h-7 w-7`,
-      medium: `h-9 w-9`,
-      custom: ``
-    };
-    return /* @__PURE__ */ React__namespace.createElement(
-      "button",
-      {
-        className: cn$1(
-          baseClasses,
-          variantClasses[variant],
-          sizeClasses[size2],
-          stateClasses[state],
-          className
-        ),
-        ...props
-      },
-      children
-    );
-  };
-  function FontLoader() {
-    React__namespace.useEffect(() => {
-      const link = document.createElement("link");
-      link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Libre+Baskerville:wght@400;500;600;700&display=swap";
-      link.rel = "stylesheet";
-      document.head.appendChild(link);
-      return () => {
-        document.head.removeChild(link);
-      };
-    }, []);
-    return null;
-  }
-  function classNames(...classes) {
-    return classes.filter(Boolean).join(" ");
-  }
-  const OverflowMenu$1 = ({ toolbarItems: toolbarItems2, className = "w-full" }) => {
-    const [open, setOpen] = React.useState(false);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, toolbarItems2.length > 0 && /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(
-      PopoverPrimitive__namespace.Trigger,
-      {
-        className: `cursor-pointer relative justify-center inline-flex items-center p-3 text-sm font-medium focus:outline-1 focus:outline-blue-200 pointer-events-auto ${open ? `text-blue-400` : `text-gray-300 hover:text-blue-500`} ${className}}`
-      },
-      /* @__PURE__ */ React.createElement(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          className: "h-5 w-5",
-          fill: "none",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor"
-        },
-        /* @__PURE__ */ React.createElement(
-          "path",
-          {
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            strokeWidth: 2,
-            d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-          }
-        )
-      )
-    ), /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React.createElement(PopoverPrimitive__namespace.Content, { style: { zIndex: 2e4 }, align: "end" }, /* @__PURE__ */ React.createElement("div", { className: "mt-0 -mr-1 rounded shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1" }, toolbarItems2.map((toolbarItem) => {
-      return /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          "data-test": `${toolbarItem.name}OverflowButton`,
-          key: toolbarItem.name,
-          onMouseDown: (event) => {
-            event.preventDefault();
-            toolbarItem.onMouseDown(event);
-            setOpen(false);
-          },
-          className: classNames(
-            toolbarItem.active ? "bg-gray-50 text-blue-500" : "bg-white text-gray-600",
-            "hover:bg-gray-50 hover:text-blue-500 cursor-pointer pointer-events-auto px-4 py-2 text-sm w-full flex items-center whitespace-nowrap",
-            toolbarItem.className ?? ""
-          )
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "mr-2 opacity-80" }, toolbarItem.Icon),
-        " ",
-        toolbarItem.label
-      );
-    }))))));
-  };
-  function BsArrowRightShort(props) {
-    return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" }, "child": [] }] })(props);
-  }
-  function BsCheckCircleFill(props) {
-    return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" }, "child": [] }] })(props);
-  }
-  function BsExclamationOctagonFill(props) {
-    return GenIcon({ "tag": "svg", "attr": { "fill": "currentColor", "viewBox": "0 0 16 16" }, "child": [{ "tag": "path", "attr": { "d": "M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2" }, "child": [] }] })(props);
-  }
-  const MessageIcon = ({
-    type = "success",
-    className = ""
-  }) => {
-    const icons = {
-      success: BiCheckCircle,
-      warning: BiError,
-      error: BiError,
-      info: BiInfoCircle
-    };
-    const Icon = icons[type];
-    return /* @__PURE__ */ React.createElement(Icon, { className });
-  };
-  const Message = ({
-    children,
-    type = "success",
-    size: size2 = "medium",
-    className = "",
-    link,
-    linkLabel = "Learn More"
-  }) => {
-    const containerClasses = {
-      success: "bg-gradient-to-r from-green-50 to-green-100 border-green-200",
-      warning: "bg-gradient-to-r from-yellow-50 to-yellow-100 border-yellow-200",
-      error: "bg-gradient-to-r from-red-50 to-red-100 border-red-200",
-      info: "bg-gradient-to-r from-blue-50 to-blue-100 border-blue-100"
-    };
-    const textClasses = {
-      success: "text-green-700",
-      warning: "text-yellow-700",
-      error: "text-red-700",
-      info: "text-blue-700"
-    };
-    const iconClasses = {
-      success: "text-green-400",
-      warning: "text-yellow-400",
-      error: "text-red-400",
-      info: "text-blue-400"
-    };
-    const sizeClasses = {
-      small: "px-3 py-1.5 text-xs",
-      medium: "px-4 py-2.5 text-sm"
-    };
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `rounded-lg border shadow-sm ${sizeClasses[size2]} ${containerClasses[type]} ${className}`
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-        MessageIcon,
-        {
-          type,
-          className: `${size2 === "small" ? "w-5" : "w-6"} h-auto flex-shrink-0 ${iconClasses[type]}`
-        }
-      ), /* @__PURE__ */ React.createElement("div", { className: `flex-1 ${textClasses[type]}` }, children)), link && /* @__PURE__ */ React.createElement(
-        "a",
-        {
-          href: link,
-          target: "_blank",
-          className: "flex-shrink-0 flex items-center gap-1 text-blue-600 underline decoration-blue-200 hover:text-blue-500 hover:decoration-blue-500 transition-all ease-out duration-150"
-        },
-        linkLabel,
-        " ",
-        /* @__PURE__ */ React.createElement(BsArrowRightShort, { className: "w-4 h-auto" })
-      ))
-    );
-  };
-  function cn(...inputs) {
-    return tailwindMerge.twMerge(clsx.clsx(inputs));
-  }
-  function DropdownMenu({
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Root, { "data-slot": "dropdown-menu", ...props });
-  }
-  function DropdownMenuTrigger({
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(
-      DropdownMenuPrimitive__namespace.Trigger,
-      {
-        "data-slot": "dropdown-menu-trigger",
-        ...props
-      }
-    );
-  }
-  function DropdownMenuContent({
-    className,
-    sideOffset = 4,
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Portal, null, /* @__PURE__ */ React__namespace.createElement(
-      DropdownMenuPrimitive__namespace.Content,
+          }
+        }
+      ))
+    )), labels && /* @__PURE__ */ React__namespace.createElement(
+      "span",
       {
-        "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
-      }
+        className: `text-sm ${checked ? "text-blue-500 font-bold" : "text-gray-300"}`
+      },
+      labels.true
     ));
-  }
-  function DropdownMenuItem({
-    className,
-    inset,
-    variant = "default",
-    ...props
-  }) {
+  };
+  const ToggleInput = ({ disabled, ...props }) => {
     return /* @__PURE__ */ React__namespace.createElement(
-      DropdownMenuPrimitive__namespace.Item,
+      "input",
       {
-        "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
-        ),
+        className: `absolute left-0 top-0 w-12 h-8 opacity-0 m-0 ${disabled ? `cursor-not-allowed pointer-events-none` : `cursor-pointer z-20`}`,
         ...props
       }
     );
+  };
+  function MdCheckCircle(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 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }, "child": [] }] })(props);
   }
-  function DropdownMenuSeparator({
-    className,
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(
-      DropdownMenuPrimitive__namespace.Separator,
-      {
-        "data-slot": "dropdown-menu-separator",
-        className: cn("bg-border -mx-1 my-1 h-px", className),
-        ...props
+  function MdInfo(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 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }, "child": [] }] })(props);
+  }
+  function MdError(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 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }, "child": [] }] })(props);
+  }
+  function MdWarning(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": "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }, "child": [] }] })(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);
+  }
+  function MdArrowForward(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 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" }, "child": [] }] })(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);
+  }
+  function MdOutlineSettings(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.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.566.566 0 0 0-.18-.03c-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" }, "child": [] }] })(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);
+  }
+  function MdOutlinePhotoLibrary(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": "M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z" }, "child": [] }] })(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 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,
+    options,
+    className = ""
+  }) => {
+    const selectOptions = options || field.options;
+    const ref = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+      if (ref.current && (field == null ? void 0 : field.experimental_focusIntent)) {
+        ref.current.focus();
       }
-    );
+    }, [field == null ? void 0 : field.experimental_focusIntent, ref]);
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "relative group w-full h-full md:w-auto" }, /* @__PURE__ */ React__namespace.createElement(
+      "select",
+      {
+        id: input.name,
+        ref,
+        value: input.value,
+        onChange: input.onChange,
+        className: `${selectFieldClasses} ${input.value ? "text-gray-700" : "text-gray-300"} } ${className}`,
+        ...input
+      },
+      selectOptions ? selectOptions.map(toProps$1).map(toComponent) : /* @__PURE__ */ React__namespace.createElement("option", null, input.value)
+    ), /* @__PURE__ */ React__namespace.createElement(MdKeyboardArrowDown, { className: "absolute top-1/2 right-2 w-6 h-auto -translate-y-1/2 text-gray-300 group-hover:text-blue-500 transition duration-150 ease-out pointer-events-none" }));
+  };
+  function toProps$1(option) {
+    if (typeof option === "object")
+      return option;
+    return { value: option, label: option };
   }
-  const DropdownButton = React__namespace.forwardRef(
-    ({
-      variant = "primary",
-      size: size2 = "medium",
-      busy,
-      disabled,
-      rounded = "full",
-      children,
-      className = "",
-      onMainAction,
-      items: items2,
-      showSplitButton = true,
+  function toComponent(option) {
+    return /* @__PURE__ */ React__namespace.createElement("option", { key: option.value, value: option.value }, option.label);
+  }
+  const RadioGroup = ({
+    input,
+    field,
+    options
+  }) => {
+    const radioOptions = options || field.options;
+    const radioRefs = {};
+    const toProps2 = (option) => {
+      if (typeof option === "object")
+        return option;
+      return { value: option, label: option };
+    };
+    const toComponent2 = (option) => {
+      const optionId = `field-${field.name}-option-${option.value}`;
+      const checked = option.value === input.value;
+      return /* @__PURE__ */ React__namespace.createElement(
+        "div",
+        {
+          key: option.value,
+          ref: (ref) => {
+            radioRefs[`radio_${option.value}`] = ref;
+          }
+        },
+        /* @__PURE__ */ React__namespace.createElement(
+          "input",
+          {
+            className: "absolute w-0 h-0 opacity-0 cursor-pointer",
+            type: "radio",
+            id: optionId,
+            name: input.name,
+            value: option.value,
+            onChange: (event) => {
+              input.onChange(event.target.value);
+            },
+            checked
+          }
+        ),
+        /* @__PURE__ */ React__namespace.createElement(RadioOption, { htmlFor: optionId, checked }, option.label)
+      );
+    };
+    return /* @__PURE__ */ React__namespace.createElement(RadioOptions, { id: input.name, direction: field.direction }, radioOptions ? radioOptions.map(toProps2).map(toComponent2) : input.value);
+  };
+  const RadioOptions = ({ direction: direction2, children, ...props }) => /* @__PURE__ */ React__namespace.createElement(
+    "div",
+    {
+      className: `flex w-full ${direction2 === "horizontal" ? "flex-wrap gap-y-1 gap-x-3" : "flex-col gap-1"}`,
       ...props
-    }, ref) => {
-      const [open, setOpen] = React__namespace.useState(false);
-      if (!onMainAction || !showSplitButton) {
-        return /* @__PURE__ */ React__namespace.createElement(DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
-          Button$1,
+    },
+    children
+  );
+  const RadioOption = ({ checked, htmlFor, children, ...props }) => /* @__PURE__ */ React__namespace.createElement(
+    "label",
+    {
+      className: "cursor-pointer flex group items-center gap-2",
+      htmlFor,
+      ...props
+    },
+    /* @__PURE__ */ React__namespace.createElement(
+      "span",
+      {
+        className: `relative h-[19px] w-[19px] rounded border text-indigo-600 focus:ring-indigo-500 transition ease-out duration-150 ${checked ? "border-blue-500 bg-blue-500 shadow-sm group-hover:bg-blue-400 group-hover:border-blue-400" : "border-gray-200 bg-white shadow-inner group-hover:bg-gray-100"}`
+      },
+      /* @__PURE__ */ React__namespace.createElement(
+        BiCheck,
+        {
+          className: `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[17px] h-[17px] transition ease-out duration-150 ${checked ? "opacity-100 text-white group-hover:opacity-80" : "text-blue-500 opacity-0 grou-hover:opacity-30"}`
+        }
+      )
+    ),
+    /* @__PURE__ */ React__namespace.createElement(
+      "span",
+      {
+        className: `relative transition ease-out duration-150 ${checked ? "text-gray-800 opacity-100" : "text-gray-700 opacity-70 group-hover:opacity-100"}`
+      },
+      children
+    )
+  );
+  const CheckboxGroup = ({
+    input,
+    field,
+    options,
+    disabled = false
+  }) => {
+    const checkboxOptions = options || field.options;
+    const toProps2 = (option) => {
+      if (typeof option === "object")
+        return option;
+      return { value: option, label: option };
+    };
+    const toComponent2 = (option) => {
+      const optionId = `field-${field.name}-option-${option.value}`;
+      const checked = input.value ? input.value.includes(option.value) : false;
+      return /* @__PURE__ */ React__namespace.createElement("div", { key: option.value }, /* @__PURE__ */ React__namespace.createElement(
+        "input",
+        {
+          className: "absolute w-0 h-0 opacity-0 cursor-pointer",
+          type: "checkbox",
+          name: input.name,
+          id: optionId,
+          value: option.value,
+          checked,
+          disabled,
+          onChange: (event) => {
+            if (event.target.checked === true) {
+              input.onChange([...input.value, event.target.value]);
+            } else {
+              input.onChange([
+                ...input.value.filter((v) => v !== event.target.value)
+              ]);
+            }
+          }
+        }
+      ), /* @__PURE__ */ React__namespace.createElement(
+        "label",
+        {
+          className: "cursor-pointer flex group items-center gap-2",
+          htmlFor: optionId
+        },
+        /* @__PURE__ */ React__namespace.createElement(
+          "span",
           {
-            variant,
-            size: size2,
-            busy,
-            disabled,
-            rounded,
-            className: cn$1("gap-2", className),
-            ...props
+            className: `relative h-[18px] w-[18px] rounded border text-indigo-600 focus:ring-indigo-500 transition ease-out duration-150 ${checked ? "border-blue-500 bg-blue-500 shadow-sm group-hover:bg-blue-400 group-hover:border-blue-400" : "border-gray-200 bg-white shadow-inner group-hover:bg-gray-100"}`
           },
-          children,
           /* @__PURE__ */ React__namespace.createElement(
-            lucideReact.ChevronDownIcon,
+            BiCheck,
             {
-              className: cn$1(
-                "h-4 w-4 transition-transform duration-200",
-                open && "rotate-180"
-              )
+              className: `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[17px] h-[17px] transition ease-out duration-150 ${checked ? "opacity-100 text-white group-hover:opacity-80" : "text-blue-500 opacity-0 grou-hover:opacity-30"}`
             }
           )
-        )), /* @__PURE__ */ React__namespace.createElement(DropdownMenuContent, { align: "end", side: "bottom", className: "z-[100000]" }, items2.map((item, index) => /* @__PURE__ */ React__namespace.createElement(
-          DropdownMenuItem,
-          {
-            key: index,
-            onClick: item.onClick,
-            disabled: item.disabled,
-            variant: item.variant
-          },
-          item.icon && item.icon,
-          item.label
-        ))));
-      }
-      return /* @__PURE__ */ React__namespace.createElement("div", { className: cn$1("inline-flex", className) }, /* @__PURE__ */ React__namespace.createElement(
-        Button$1,
-        {
-          variant,
-          size: size2,
-          busy,
-          disabled,
-          rounded: "left",
-          onClick: onMainAction,
-          className: "border-r-0 w-full",
-          ...props
-        },
-        children
-      ), /* @__PURE__ */ React__namespace.createElement(DropdownMenu, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__namespace.createElement(DropdownMenuTrigger, null, /* @__PURE__ */ React__namespace.createElement(
-        Button$1,
-        {
-          variant,
-          size: size2,
-          busy,
-          disabled,
-          rounded: "right",
-          className: "px-4 border-l",
-          style: { borderColor: "#00000030" },
-          "aria-label": "More options"
-        },
+        ),
         /* @__PURE__ */ React__namespace.createElement(
-          lucideReact.ChevronDownIcon,
-          {
-            className: cn$1(
-              "h-4 w-4 transition-transform duration-200 fill-none",
-              open && "rotate-180"
-            ),
-            style: { fill: "none" }
-          }
-        )
-      )), /* @__PURE__ */ React__namespace.createElement(DropdownMenuContent, { align: "end", side: "bottom" }, items2.map((item, index) => {
-        var _a2;
-        return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, { key: index }, /* @__PURE__ */ React__namespace.createElement(
-          DropdownMenuItem,
+          "span",
           {
-            onClick: item.onClick,
-            disabled: item.disabled,
-            variant: item.variant
+            className: `relative transition ease-out duration-150 ${checked ? "text-gray-800 opacity-100" : "text-gray-700 opacity-70 group-hover:opacity-100"}`
           },
-          item.icon && item.icon,
-          item.label
-        ), item.variant === "destructive" && index < items2.length - 1 && ((_a2 = items2[index + 1]) == null ? void 0 : _a2.variant) !== "destructive" && /* @__PURE__ */ React__namespace.createElement(DropdownMenuSeparator, null));
-      }))));
+          option.label
+        )
+      ));
+    };
+    return /* @__PURE__ */ React__namespace.createElement(
+      "div",
+      {
+        className: `flex w-full ${field.direction === "horizontal" ? "flex-wrap gap-y-1 gap-x-3" : "flex-col gap-1"}`,
+        id: input.name
+      },
+      checkboxOptions == null ? void 0 : checkboxOptions.map(toProps2).map(toComponent2)
+    );
+  };
+  const Input = ({ ...props }) => {
+    return /* @__PURE__ */ React.createElement("input", { className: textFieldClasses, ...props });
+  };
+  const NumberInput = ({
+    onChange,
+    value,
+    step
+  }) => /* @__PURE__ */ React__namespace.createElement(
+    Input,
+    {
+      type: "number",
+      step,
+      value,
+      onChange: (event) => {
+        const inputValue = event.target.value;
+        const newValue = inputValue === "" ? void 0 : inputValue;
+        if (onChange) {
+          const syntheticEvent = {
+            ...event,
+            target: {
+              ...event.target,
+              value: newValue
+            }
+          };
+          onChange(syntheticEvent);
+        }
+      }
     }
   );
-  DropdownButton.displayName = "DropdownButton";
   function useCMS() {
     return useCMS$1();
   }
@@ -40292,19 +40570,25 @@ Please wrap them with useCallback or configure the deps array correctly.`
           /* @__PURE__ */ React.createElement(AddIcon, { className: "w-5/6 h-auto" })
         )
       },
-      /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(reactBeautifulDnd.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$2,
+      /* @__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$2,
+          {
+            key: index2,
+            tinaForm,
+            field,
+            item,
+            index: index2,
+            isMin,
+            fixedLength,
+            ...itemProps(item)
+          }
+        ))
+      ), provider.placeholder))))
     );
   };
   const Item$2 = ({
@@ -40324,14 +40608,20 @@ Please wrap them with useCallback or configure the deps array correctly.`
     const title = label || `${field.label || field.name} Item`;
     const { dispatch: setHoveredField } = useEvent("field:hover");
     const { dispatch: setFocusedField } = useEvent("field:focus");
-    return /* @__PURE__ */ React.createElement(reactBeautifulDnd.Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       ItemHeader,
       {
         provider,
         isDragging: snapshot.isDragging,
         ...p2
       },
-      /* @__PURE__ */ React.createElement(DragHandle, { isDragging: snapshot.isDragging }),
+      /* @__PURE__ */ React.createElement(
+        DragHandle,
+        {
+          isDragging: snapshot.isDragging,
+          dragHandleProps: provider.dragHandleProps
+        }
+      ),
       /* @__PURE__ */ React.createElement(
         ItemClickTarget,
         {
@@ -40395,17 +40685,16 @@ Please wrap them with useCallback or configure the deps array correctly.`
     provider,
     ...props
   }) => {
+    var _a2, _b;
     return /* @__PURE__ */ React.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 ?? {}
         }
       },
@@ -40423,10 +40712,14 @@ Please wrap them with useCallback or configure the deps array correctly.`
       /* @__PURE__ */ React.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.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.createElement(ReorderIcon, { className: "fill-current w-7 h-auto" }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DragIcon, { className: "fill-current w-7 h-auto group-hover:opacity-0 transition-opacity duration-150 ease-out" }), /* @__PURE__ */ React.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" }))
@@ -40878,39 +41171,45 @@ Please wrap them with useCallback or configure the deps array correctly.`
           }
         ))
       },
-      /* @__PURE__ */ React__namespace.createElement(ListPanel, null, /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__namespace.createElement("div", { ref: provider.innerRef, className: "edit-page--list-parent" }, items2.length === 0 && /* @__PURE__ */ React__namespace.createElement(EmptyList, null), items2.map((block2, index2) => {
-        const template = field.templates[block2._template];
-        if (!template) {
+      /* @__PURE__ */ React__namespace.createElement(ListPanel, null, /* @__PURE__ */ React__namespace.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__namespace.createElement("div", { ref: provider.innerRef, className: "edit-page--list-parent" }, items2.length === 0 && /* @__PURE__ */ React__namespace.createElement(EmptyList, null), /* @__PURE__ */ React__namespace.createElement(
+        SortableProvider,
+        {
+          items: items2.map((_, index2) => `${field.name}.${index2}`)
+        },
+        items2.map((block2, index2) => {
+          const template = field.templates[block2._template];
+          if (!template) {
+            return /* @__PURE__ */ React__namespace.createElement(
+              InvalidBlockListItem,
+              {
+                key: index2,
+                index: index2,
+                field,
+                tinaForm
+              }
+            );
+          }
+          const itemProps = (item) => {
+            if (!template.itemProps)
+              return {};
+            return template.itemProps(item);
+          };
           return /* @__PURE__ */ React__namespace.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__namespace.createElement(
-          BlockListItem,
-          {
-            key: index2,
-            block: block2,
-            template,
-            index: index2,
-            field,
-            tinaForm,
-            isMin,
-            fixedLength,
-            ...itemProps(block2)
-          }
-        );
-      }), provider.placeholder)))
+        })
+      ), provider.placeholder)))
     );
   };
   const BlockListItem = ({
@@ -40928,7 +41227,13 @@ Please wrap them with useCallback or configure the deps array correctly.`
     }, [tinaForm, field, index]);
     const { dispatch: setHoveredField } = useEvent("field:hover");
     const { dispatch: setFocusedField } = useEvent("field:focus");
-    return /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React__namespace.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React__namespace.createElement(
+      DragHandle,
+      {
+        isDragging: snapshot.isDragging,
+        dragHandleProps: provider.dragHandleProps
+      }
+    ), /* @__PURE__ */ React__namespace.createElement(
       ItemClickTarget,
       {
         onClick: () => {
@@ -40969,7 +41274,13 @@ Please wrap them with useCallback or configure the deps array correctly.`
     const removeItem = React__namespace.useCallback(() => {
       tinaForm.mutators.remove(field.name, index);
     }, [tinaForm, field, index]);
-    return /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React__namespace.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React__namespace.createElement(ItemClickTarget, null, /* @__PURE__ */ React__namespace.createElement(GroupLabel, { error: true }, "Invalid Block")), /* @__PURE__ */ React__namespace.createElement(ItemDeleteButton, { onClick: removeItem })));
+    return /* @__PURE__ */ React__namespace.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React__namespace.createElement(
+      DragHandle,
+      {
+        isDragging: snapshot.isDragging,
+        dragHandleProps: provider.dragHandleProps
+      }
+    ), /* @__PURE__ */ React__namespace.createElement(ItemClickTarget, null, /* @__PURE__ */ React__namespace.createElement(GroupLabel, { error: true }, "Invalid Block")), /* @__PURE__ */ React__namespace.createElement(ItemDeleteButton, { onClick: removeItem })));
   };
   const BlocksField = Blocks;
   const BlocksFieldPlugin = {
@@ -41036,19 +41347,25 @@ Please wrap them with useCallback or configure the deps array correctly.`
         tinaForm,
         actions: (!fixedLength || fixedLength && !isMax) && /* @__PURE__ */ React__namespace.createElement(IconButton, { onClick: addItem, variant: "primary", size: "small" }, /* @__PURE__ */ React__namespace.createElement(AddIcon, { className: "w-5/6 h-auto" }))
       },
-      /* @__PURE__ */ React__namespace.createElement(ListPanel, null, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__namespace.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React__namespace.createElement(EmptyList, null), items2.map((item, index2) => /* @__PURE__ */ React__namespace.createElement(
-        Item$1,
+      /* @__PURE__ */ React__namespace.createElement(ListPanel, null, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__namespace.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React__namespace.createElement(EmptyList, null), /* @__PURE__ */ React__namespace.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__namespace.createElement(
+          Item$1,
+          {
+            key: index2,
+            tinaForm,
+            field,
+            item,
+            index: index2,
+            isMin,
+            fixedLength,
+            ...itemProps(item)
+          }
+        ))
+      ), provider.placeholder))))
     );
   };
   const Item$1 = ({
@@ -41074,7 +41391,13 @@ Please wrap them with useCallback or configure the deps array correctly.`
         name: `${field.name}.${index}`
       }
     ];
-    return /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging, ...p2 }, /* @__PURE__ */ React__namespace.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React__namespace.createElement(ItemClickTarget, null, /* @__PURE__ */ React__namespace.createElement(FieldsBuilder, { padding: false, form: tinaForm, fields })), (!fixedLength || fixedLength && !isMin) && /* @__PURE__ */ React__namespace.createElement(ItemDeleteButton, { disabled: isMin, onClick: removeItem })));
+    return /* @__PURE__ */ React__namespace.createElement(Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React__namespace.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging, ...p2 }, /* @__PURE__ */ React__namespace.createElement(
+      DragHandle,
+      {
+        isDragging: snapshot.isDragging,
+        dragHandleProps: provider.dragHandleProps
+      }
+    ), /* @__PURE__ */ React__namespace.createElement(ItemClickTarget, null, /* @__PURE__ */ React__namespace.createElement(FieldsBuilder, { padding: false, form: tinaForm, fields })), (!fixedLength || fixedLength && !isMin) && /* @__PURE__ */ React__namespace.createElement(ItemDeleteButton, { disabled: isMin, onClick: removeItem })));
   };
   const ListField = List;
   const ListFieldPlugin = {
@@ -42706,30 +43029,6 @@ Please wrap them with useCallback or configure the deps array correctly.`
     },
     parse: parse$2
   };
-  function AiFillWarning(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zM480 416c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v184c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V416zm32 352a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z" }, "child": [] }] })(props);
-  }
-  function AiOutlineLoading(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" }, "child": [] }] })(props);
-  }
-  function FaCircle(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" }, "child": [] }] })(props);
-  }
-  function FaFile(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 384 512" }, "child": [{ "tag": "path", "attr": { "d": "M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z" }, "child": [] }] })(props);
-  }
-  function FaFolder(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z" }, "child": [] }] })(props);
-  }
-  function FaLock(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z" }, "child": [] }] })(props);
-  }
-  function FaSpinner(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z" }, "child": [] }] })(props);
-  }
-  function FaUnlock(props) {
-    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 448 512" }, "child": [{ "tag": "path", "attr": { "d": "M400 256H152V152.9c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v16c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-16C376 68 307.5-.3 223.5 0 139.5.3 72 69.5 72 153.5V256H48c-26.5 0-48 21.5-48 48v160c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z" }, "child": [] }] })(props);
-  }
   function GrCircleQuestion(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "strokeWidth": "2", "d": "M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,15 L12,14 C12,13 12,12.5 13,12 C14,11.5 15,11 15,9.5 C15,8.5 14,7 12,7 C10,7 9,8.26413718 9,10 M12,16 L12,18" }, "child": [] }] })(props);
   }
@@ -42981,6 +43280,38 @@ Please wrap them with useCallback or configure the deps array correctly.`
       " 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__namespace.createElement(MdAccessTime, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-amber-600" }),
+      info: /* @__PURE__ */ React__namespace.createElement(MdOutlineDataSaverOff, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-blue-600" }),
+      success: /* @__PURE__ */ React__namespace.createElement(MdCheckCircle, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-green-600" }),
+      error: /* @__PURE__ */ React__namespace.createElement(MdWifiOff, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-red-700" })
+    };
+    return /* @__PURE__ */ React__namespace.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, "-");
@@ -43224,7 +43555,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
       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__namespace.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-end space-x-4" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-stretch space-x-4" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
       "label",
       {
         htmlFor: "search",
@@ -43247,7 +43578,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
         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__namespace.createElement(MdOutlineClear, { className: "w-5 h-auto text-gray-600" })
-    ))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(
+    ))), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React__namespace.createElement(
       "label",
       {
         htmlFor: "branch-type",
@@ -43275,7 +43606,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
           }
         ]
       }
-    ))), filteredBranchList.length === 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "block relative text-gray-300 italic py-1" }, "No branches to display"), filteredBranchList.length > 0 && /* @__PURE__ */ React__namespace.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__namespace.createElement(
+    ))), filteredBranchList.length === 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "block relative text-gray-300 italic py-1" }, "No branches to display"), filteredBranchList.length > 0 && /* @__PURE__ */ React__namespace.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__namespace.createElement("table", { className: "w-full" }, /* @__PURE__ */ React__namespace.createElement("thead", { className: "bg-gray-100 border-b-2 border-gray-200" }, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", { className: tableHeadingStyle }, "Branch Name"), /* @__PURE__ */ React__namespace.createElement("th", { className: tableHeadingStyle }, "Last Updated"), /* @__PURE__ */ React__namespace.createElement("th", null), /* @__PURE__ */ React__namespace.createElement("th", null))), /* @__PURE__ */ React__namespace.createElement("tbody", null, filteredBranchList.map((branch) => /* @__PURE__ */ React__namespace.createElement(
       BranchItem,
       {
         key: branch.name,
@@ -43286,7 +43617,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
         previewFunction,
         cms
       }
-    ))));
+    ))))));
   };
   const BranchItem = ({
     branch,
@@ -43322,15 +43653,15 @@ Please wrap them with useCallback or configure the deps array correctly.`
     const isCurrentBranch = branch.name === currentBranch;
     const indexingStatus = (_a2 = branch == null ? void 0 : branch.indexStatus) == null ? void 0 : _a2.status;
     return /* @__PURE__ */ React__namespace.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__namespace.createElement("div", { className: "w-1/2" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-0" }, branch.protected && /* @__PURE__ */ React__namespace.createElement(BiLock, { className: "w-5 h-auto opacity-70 text-blue-500" })), /* @__PURE__ */ React__namespace.createElement("div", { className: "truncate flex-1" }, branch.name)), indexingStatus !== "complete" && /* @__PURE__ */ React__namespace.createElement("div", { className: "w-fit" }, /* @__PURE__ */ React__namespace.createElement(IndexStatus, { indexingStatus: branch.indexStatus.status }))),
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1" }, creatingPR ? /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs font-bold text-blue-600" }, "Creating PR"), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm leading-tight text-blue-500" }, "Please wait...")), /* @__PURE__ */ React__namespace.createElement(FaSpinner, { className: "w-3 h-auto animate-spin text-blue-500" })) : /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs font-bold" }, "Last Updated"), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm leading-tight" }, dateFns.formatDistanceToNow(new Date(branch.indexStatus.timestamp), {
+      /* @__PURE__ */ React__namespace.createElement("td", { className: "pl-3 pr-3 py-1.5 min-w-0" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-1" }, branch.protected && /* @__PURE__ */ React__namespace.createElement(BiLock, { className: "w-5 h-auto opacity-70 text-blue-500 flex-shrink-0" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm leading-tight truncate" }, branch.name)), indexingStatus !== "complete" && /* @__PURE__ */ React__namespace.createElement("div", { className: "w-fit mt-1" }, /* @__PURE__ */ React__namespace.createElement(IndexStatus, { indexingStatus: branch.indexStatus.status })))),
+      /* @__PURE__ */ React__namespace.createElement("td", { className: "px-3 py-1.5 min-w-0" }, creatingPR ? /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs font-bold text-blue-600" }, "Creating PR"), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm leading-tight text-blue-500" }, "Please wait...")), /* @__PURE__ */ React__namespace.createElement(FaSpinner, { className: "w-3 h-auto animate-spin text-blue-500" })) : /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm leading-tight whitespace-nowrap" }, dateFns.formatDistanceToNow(new Date(branch.indexStatus.timestamp), {
         addSuffix: true
-      })))),
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center" }, indexingStatus === "complete" && !isCurrentBranch && /* @__PURE__ */ React__namespace.createElement(
+      }))),
+      /* @__PURE__ */ React__namespace.createElement("td", { className: "px-3 py-1.5 text-left" }, indexingStatus === "complete" && !isCurrentBranch && /* @__PURE__ */ React__namespace.createElement(
         Button$1,
         {
           variant: "white",
@@ -43338,12 +43669,13 @@ Please wrap them with useCallback or configure the deps array correctly.`
           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__namespace.createElement(BiPencil, { className: "h-4 w-auto text-blue-500 opacity-70 -mt-px" }),
         " ",
         "Select"
-      ), /* @__PURE__ */ React__namespace.createElement("div", { className: "ml-auto" }, /* @__PURE__ */ React__namespace.createElement(
+      ), indexingStatus === "complete" && isCurrentBranch && /* @__PURE__ */ React__namespace.createElement(Badge, { calloutStyle: "info", className: "w-fit", displayIcon: false }, /* @__PURE__ */ React__namespace.createElement("span", null, "Selected"))),
+      /* @__PURE__ */ React__namespace.createElement("td", { className: "px-3 py-1.5 text-right" }, /* @__PURE__ */ React__namespace.createElement(
         OverflowMenu$1,
         {
           toolbarItems: [
@@ -43374,7 +43706,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
             }
           ].filter(Boolean)
         }
-      )))
+      ))
     );
   };
   const IndexStatus = ({ indexingStatus }) => {
@@ -45430,7 +45762,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
     className = "",
     ...props
   }) => {
-    const commonAlertStyles = "ml-8 text-sm px-4 py-3 rounded-md border";
+    const commonAlertStyles = "text-sm px-4 py-3 rounded-md border";
     const styles = {
       warning: `text-amber-700 bg-amber-100 border-amber-700/20`,
       info: `text-blue-600 bg-blue-100/50 border-blue-600/20`,
@@ -46202,7 +46534,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
     requiredArgs(1, arguments);
     return formatDistance(dirtyDate, Date.now(), options);
   }
-  const version$1 = "2.9.1";
+  const version$1 = "2.9.5";
   const VersionInfo = () => {
     var _a2, _b, _c, _d, _e, _f;
     const cms = useCMS();
@@ -47842,7 +48174,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
     if (!alerts.all.length) {
       return null;
     }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 p-6 flex flex-col items-center z-[999999]" }, alerts.all.filter((alert) => {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.createElement(Alert, { key: alert.id, level: alert.level }, alert.level === "info" && /* @__PURE__ */ React.createElement(MdInfo, { className: "w-5 h-auto opacity-70" }), alert.level === "success" && /* @__PURE__ */ React.createElement(MdCheckCircle, { className: "w-5 h-auto opacity-70" }), alert.level === "warn" && /* @__PURE__ */ React.createElement(MdWarning, { className: "w-5 h-auto opacity-70" }), /* @__PURE__ */ React.createElement("p", { className: "m-0 flex-1 max-w-[680px] text-left" }, parseUrlsInText(alert.message.toString())), /* @__PURE__ */ React.createElement(
@@ -47886,10 +48218,10 @@ Please wrap them with useCallback or configure the deps array correctly.`
     ...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",
@@ -47912,7 +48244,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
       /* @__PURE__ */ React.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
         }
       )
@@ -47924,7 +48256,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
       className: "border-none bg-transparent p-0 outline-none flex items-center",
       ...styleProps
     },
-    /* @__PURE__ */ React.createElement(BiX, { className: "w-5 auto flex-grow-0 flex-shrink-0" })
+    /* @__PURE__ */ React.createElement(BiX, { className: "w-5 auto flex-grow-0 flex-shrink-0 text-gray-700" })
   );
   function CursorPaginator({
     navigateNext,
@@ -48194,6 +48526,18 @@ Please wrap them with useCallback or configure the deps array correctly.`
     ), open && /* @__PURE__ */ React__namespace.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__namespace.createElement(
       "button",
       {
@@ -48209,6 +48553,18 @@ Please wrap them with useCallback or configure the deps array correctly.`
       /* @__PURE__ */ React__namespace.createElement(BiLinkExternal, { className: "h-5 w-auto" })
     );
   };
+  const EDITORIAL_WORKFLOW_STATUS = {
+    QUEUED: "queued",
+    PROCESSING: "processing",
+    SETTING_UP: "setting_up",
+    CREATING_BRANCH: "creating_branch",
+    INDEXING: "indexing",
+    CONTENT_GENERATION: "content_generation",
+    CREATING_PR: "creating_pr",
+    COMPLETE: "complete",
+    ERROR: "error",
+    TIMEOUT: "timeout"
+  };
   const num123 = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
   const numFas = ["۱", "۲", "۳", "۴", "۵", "۶", "۷", "۸", "۹", "۰"];
   const numKor = ["０", "１", "２", "３", "４", "５", "６", "７", "８", "９"];
@@ -63320,7 +63676,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
       const schemaFromCloud = await this.api.getSchema();
       const schema1 = schemaFromCloud;
       const schema2 = graphql$1.buildSchema(graphql$1.print(localSchema));
-      const diffOutput = await core$1.diff(schema1, schema2);
+      const diffOutput = await core$2.diff(schema1, schema2);
       if (diffOutput.length > 0) {
         return false;
       } else {
@@ -63622,367 +63978,6 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
       );
     }
   }
-  const ProgressBar = ({
-    progress,
-    className = "",
-    color = "blue"
-  }) => {
-    const clampedProgress = Math.min(Math.max(progress, 0), 100);
-    const colorClass = color === "green" ? "bg-green-500" : "bg-blue-500";
-    return /* @__PURE__ */ React__namespace.createElement("div", { className: `w-full ${className}` }, /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2" }, /* @__PURE__ */ React__namespace.createElement(
-      "div",
-      {
-        className: `${colorClass} h-2 rounded-full transition-all duration-300 ease-out`,
-        style: { width: `${clampedProgress}%` }
-      }
-    )));
-  };
-  const EDITORIAL_WORKFLOW_STATUS = {
-    QUEUED: "queued",
-    PROCESSING: "processing",
-    SETTING_UP: "setting_up",
-    CREATING_BRANCH: "creating_branch",
-    INDEXING: "indexing",
-    CONTENT_GENERATION: "content_generation",
-    CREATING_PR: "creating_pr",
-    COMPLETE: "complete",
-    ERROR: "error",
-    TIMEOUT: "timeout"
-  };
-  const FormActionMenu = ({ actions, form }) => {
-    const [actionMenuVisibility, setActionMenuVisibility] = React.useState(false);
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(MoreActionsButton, { onClick: () => setActionMenuVisibility((p2) => !p2) }), /* @__PURE__ */ React__namespace.createElement(ActionsOverlay, { open: actionMenuVisibility }, /* @__PURE__ */ React__namespace.createElement(
-      Dismissible,
-      {
-        click: true,
-        escape: true,
-        disabled: !actionMenuVisibility,
-        onDismiss: () => {
-          setActionMenuVisibility((p2) => !p2);
-        }
-      },
-      actions.map((Action, i2) => (
-        // TODO: `i` will suppress warnings but this indicates that maybe
-        //        Actions should just be componets
-        /* @__PURE__ */ React__namespace.createElement(Action, { form, key: i2 })
-      ))
-    )));
-  };
-  const MoreActionsButton = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
-    "button",
-    {
-      className: `h-16 w-10 self-stretch bg-transparent bg-center bg-[length:auto_18px] -mr-4 ml-2 outline-none cursor-pointer transition-opacity duration-100 ease-out flex justify-center items-center hover:bg-gray-50 hover:fill-gray-700 ${className}`,
-      ...props
-    },
-    /* @__PURE__ */ React__namespace.createElement(EllipsisVerticalIcon, null)
-  );
-  const ActionsOverlay = ({ open, className = "", style = {}, ...props }) => /* @__PURE__ */ React__namespace.createElement(
-    "div",
-    {
-      className: `min-w-[192px] rounded-3xl border border-solid border-[#efefef] block absolute bottom-5 right-5 ${open ? "opacity-100" : "opacity-0"} transition-all duration-100 ease-out origin-bottom-right shadow-[0_2px_3px_rgba(0,0,0,0.05)] bg-white overflow-hidden z-10 ${className}`,
-      style: {
-        transform: open ? "translate3d(0, -28px, 0) scale3d(1, 1, 1)" : "translate3d(0, 0, 0) scale3d(0.5, 0.5, 1)",
-        pointerEvents: open ? "all" : "none",
-        ...style
-      },
-      ...props
-    }
-  );
-  const ActionButton = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
-    "button",
-    {
-      className: `relative text-center text-[13px] px-3 h-10 font-normal w-full bg-none cursor-pointer outline-none border-0 transition-all duration-[150ms] ease-out hover:text-blue-500 hover:bg-gray50 [&:not(:last-child)]: border-b-[1px] border-solid border-b-[#edecf3] ${className}`,
-      ...props
-    }
-  );
-  const FormPortalContext = React__namespace.createContext(() => {
-    return null;
-  });
-  function useFormPortal() {
-    return React__namespace.useContext(FormPortalContext);
-  }
-  const FormPortalProvider = ({
-    children
-  }) => {
-    const wrapperRef = React__namespace.useRef(null);
-    const zIndexRef = React__namespace.useRef(0);
-    const FormPortal = React__namespace.useCallback(
-      (props) => {
-        if (!wrapperRef.current)
-          return null;
-        return ReactDOM.createPortal(
-          props.children({ zIndexShift: zIndexRef.current += 1 }),
-          wrapperRef.current
-        );
-      },
-      [wrapperRef, zIndexRef]
-    );
-    return /* @__PURE__ */ React__namespace.createElement(FormPortalContext.Provider, { value: FormPortal }, /* @__PURE__ */ React__namespace.createElement("div", { ref: wrapperRef, className: "relative w-full flex-1 overflow-hidden" }, children));
-  };
-  const LoadingDots = ({
-    dotSize = 8,
-    color = "white"
-  }) => {
-    return /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color }), /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color, delay: 0.3 }), /* @__PURE__ */ React__namespace.createElement(SingleDot, { dotSize, color, delay: 0.5 }));
-  };
-  const SingleDot = ({ delay = 0, color, dotSize }) => /* @__PURE__ */ React__namespace.createElement(
-    "span",
-    {
-      className: "inline-block mr-1",
-      style: {
-        animation: "loading-dots-scale-up-and-down 2s linear infinite",
-        animationDelay: `${delay}s`,
-        background: color,
-        width: dotSize,
-        height: dotSize,
-        borderRadius: dotSize
-      }
-    }
-  );
-  const ResetForm = ({
-    pristine,
-    reset: reset2,
-    children,
-    ...props
-  }) => {
-    const [open, setOpen] = React__namespace.useState(false);
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
-      Button$1,
-      {
-        onClick: () => {
-          setOpen((p2) => !p2);
-        },
-        disabled: pristine,
-        ...props
-      },
-      children
-    ), open && /* @__PURE__ */ React__namespace.createElement(ResetModal, { reset: reset2, close: () => setOpen(false) }));
-  };
-  const ResetModal = ({ close: close2, reset: reset2 }) => {
-    return /* @__PURE__ */ React__namespace.createElement(Modal, null, /* @__PURE__ */ React__namespace.createElement(ModalPopup, null, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: close2 }, "Reset"), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React__namespace.createElement("p", null, "Are you sure you want to reset all changes?")), /* @__PURE__ */ React__namespace.createElement(ModalActions, null, /* @__PURE__ */ React__namespace.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
-      Button$1,
-      {
-        style: { flexGrow: 3 },
-        variant: "primary",
-        onClick: async () => {
-          await reset2();
-          close2();
-        }
-      },
-      "Reset"
-    ))));
-  };
-  const NoFieldsPlaceholder = () => /* @__PURE__ */ React__namespace.createElement(
-    "div",
-    {
-      className: "relative flex flex-col items-center justify-center text-center p-5 pb-16 w-full h-full overflow-y-auto",
-      style: {
-        animationName: "fade-in",
-        animationDelay: "300ms",
-        animationTimingFunction: "ease-out",
-        animationIterationCount: 1,
-        animationFillMode: "both",
-        animationDuration: "150ms"
-      }
-    },
-    /* @__PURE__ */ React__namespace.createElement(Emoji, { className: "block pb-5" }, "🤔"),
-    /* @__PURE__ */ React__namespace.createElement("h3", { className: "font-sans font-normal text-lg block pb-5" }, "Hey, you don't have any fields added to this form."),
-    /* @__PURE__ */ React__namespace.createElement("p", { className: "block pb-5" }, /* @__PURE__ */ React__namespace.createElement(
-      "a",
-      {
-        className: "text-center rounded-3xl border border-solid border-gray-100 shadow-[0_2px_3px_rgba(0,0,0,0.12)] font-normal cursor-pointer text-[12px] transition-all duration-100 ease-out bg-white text-gray-700 py-3 pr-5 pl-14 relative no-underline inline-block hover:text-blue-500",
-        href: "https://tinacms.org/docs/fields",
-        target: "_blank",
-        rel: "noopener noreferrer"
-      },
-      /* @__PURE__ */ React__namespace.createElement(
-        Emoji,
-        {
-          className: "absolute left-5 top-1/2 origin-center -translate-y-1/2 transition-all duration-100 ease-out",
-          style: { fontSize: 24 }
-        },
-        "📖"
-      ),
-      " ",
-      "Field Setup Guide"
-    ))
-  );
-  const FormKeyBindings = ({ onSubmit }) => {
-    React.useEffect(() => {
-      const handleKeyDown = (e3) => {
-        if ((e3.metaKey || e3.ctrlKey) && e3.key === "s") {
-          e3.preventDefault();
-          onSubmit();
-        }
-      };
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [onSubmit]);
-    return null;
-  };
-  const FormBuilder = ({
-    form,
-    onPristineChange,
-    ...rest
-  }) => {
-    const cms = useCMS$1();
-    const hideFooter = !!rest.hideFooter;
-    const [createBranchModalOpen, setCreateBranchModalOpen] = React__namespace.useState(false);
-    const tinaForm = form.tinaForm;
-    const finalForm2 = form.tinaForm.finalForm;
-    React__namespace.useEffect(() => {
-      var _a2;
-      const collection = cms.api.tina.schema.getCollectionByFullPath(
-        tinaForm.path
-      );
-      if ((_a2 = collection == null ? void 0 : collection.ui) == null ? void 0 : _a2.beforeSubmit) {
-        tinaForm.beforeSubmit = (values) => collection.ui.beforeSubmit({ cms, form: tinaForm, values });
-      } else {
-        tinaForm.beforeSubmit = void 0;
-      }
-    }, [tinaForm.path]);
-    const moveArrayItem = React__namespace.useCallback(
-      (result) => {
-        if (!result.destination || !finalForm2)
-          return;
-        const name = result.type;
-        finalForm2.mutators.move(
-          name,
-          result.source.index,
-          result.destination.index
-        );
-      },
-      [tinaForm]
-    );
-    React__namespace.useEffect(() => {
-      const unsubscribe = finalForm2.subscribe(
-        ({ pristine }) => {
-          if (onPristineChange) {
-            onPristineChange(pristine);
-          }
-        },
-        { pristine: true }
-      );
-      return () => {
-        unsubscribe();
-      };
-    }, [finalForm2]);
-    const fieldGroup = tinaForm.getActiveField(form.activeFieldName);
-    return /* @__PURE__ */ React__namespace.createElement(
-      reactFinalForm.Form,
-      {
-        key: tinaForm.id,
-        form: tinaForm.finalForm,
-        onSubmit: tinaForm.onSubmit
-      },
-      ({
-        handleSubmit,
-        pristine,
-        invalid,
-        submitting,
-        dirtySinceLastSubmit,
-        hasValidationErrors
-      }) => {
-        const usingProtectedBranch = cms.api.tina.usingProtectedBranch();
-        const canSubmit = !pristine && !submitting && !hasValidationErrors && !(invalid && !dirtySinceLastSubmit);
-        const safeSubmit = async () => {
-          if (canSubmit) {
-            await handleSubmit();
-          }
-        };
-        const safeHandleSubmit = async () => {
-          if (usingProtectedBranch) {
-            setCreateBranchModalOpen(true);
-          } else {
-            safeSubmit();
-          }
-        };
-        return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, createBranchModalOpen && /* @__PURE__ */ React__namespace.createElement(
-          CreateBranchModal,
-          {
-            safeSubmit,
-            crudType: tinaForm.crudType,
-            path: tinaForm.path,
-            values: tinaForm.values,
-            close: () => setCreateBranchModalOpen(false)
-          }
-        ), /* @__PURE__ */ React__namespace.createElement(reactBeautifulDnd.DragDropContext, { onDragEnd: moveArrayItem }, /* @__PURE__ */ React__namespace.createElement(FormKeyBindings, { onSubmit: safeHandleSubmit }), /* @__PURE__ */ React__namespace.createElement(FormPortalProvider, null, /* @__PURE__ */ React__namespace.createElement(FormWrapper, { id: tinaForm.id }, (tinaForm == null ? void 0 : tinaForm.fields.length) ? /* @__PURE__ */ React__namespace.createElement(
-          FieldsBuilder,
-          {
-            form: tinaForm,
-            activeFieldName: form.activeFieldName,
-            fields: fieldGroup.fields
-          }
-        ) : /* @__PURE__ */ React__namespace.createElement(NoFieldsPlaceholder, null))), !hideFooter && /* @__PURE__ */ React__namespace.createElement("div", { className: "relative flex-none w-full h-16 px-6 bg-white border-t border-gray-100 flex items-center justify-end" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1 w-full justify-end gap-2	flex items-center max-w-form" }, tinaForm.reset && /* @__PURE__ */ React__namespace.createElement(
-          ResetForm,
-          {
-            pristine,
-            reset: async () => {
-              finalForm2.reset();
-              await tinaForm.reset();
-            }
-          },
-          tinaForm.buttons.reset
-        ), /* @__PURE__ */ React__namespace.createElement(
-          Button$1,
-          {
-            onClick: safeHandleSubmit,
-            disabled: !canSubmit,
-            busy: submitting,
-            variant: "primary"
-          },
-          submitting && /* @__PURE__ */ React__namespace.createElement(LoadingDots, null),
-          !submitting && tinaForm.buttons.save
-        ), tinaForm.actions.length > 0 && /* @__PURE__ */ React__namespace.createElement(
-          FormActionMenu,
-          {
-            form: tinaForm,
-            actions: tinaForm.actions
-          }
-        )))));
-      }
-    );
-  };
-  const FormStatus = ({ pristine }) => {
-    const pristineClass = pristine ? "text-green-500" : "text-red-500";
-    return /* @__PURE__ */ React__namespace.createElement(FaCircle, { className: cn("h-3", pristineClass) });
-  };
-  const FormWrapper = ({
-    id: id2,
-    children
-  }) => {
-    return /* @__PURE__ */ React__namespace.createElement(
-      "div",
-      {
-        "data-test": `form:${id2 == null ? void 0 : id2.replace(/\\/g, "/")}`,
-        className: "h-full overflow-y-auto max-h-full bg-gray-50"
-      },
-      /* @__PURE__ */ React__namespace.createElement("div", { className: "py-5 px-6" }, children)
-    );
-  };
-  const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
-    "span",
-    {
-      className: `text-[40px] leading-none inline-block ${className}`,
-      ...props
-    }
-  );
-  const CreateBranchModel = ({
-    close: close2,
-    safeSubmit,
-    relativePath: relativePath2,
-    values,
-    crudType
-  }) => /* @__PURE__ */ React__namespace.createElement(
-    CreateBranchModal,
-    {
-      close: close2,
-      safeSubmit,
-      path: relativePath2,
-      values,
-      crudType
-    }
-  );
   const pathRelativeToCollection = (collectionPath, fullPath) => {
     const normalizedCollectionPath = collectionPath.replace(/\\/g, "/");
     const normalizedFullPath = fullPath.replace(/\\/g, "/");
@@ -64011,7 +64006,6 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
     const [isExecuting, setIsExecuting] = React__namespace.useState(false);
     const [errorMessage, setErrorMessage] = React__namespace.useState("");
     const [currentStep, setCurrentStep] = React__namespace.useState(0);
-    const [statusMessage, setStatusMessage] = React__namespace.useState("");
     const [elapsedTime, setElapsedTime] = React__namespace.useState(0);
     React__namespace.useEffect(() => {
       let interval;
@@ -64055,7 +64049,6 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
         setDisabled(true);
         setIsExecuting(true);
         setCurrentStep(1);
-        setStatusMessage("Initializing workflow...");
         let graphql2 = "";
         if (crudType === "create") {
           graphql2 = CREATE_DOCUMENT_GQL;
@@ -64080,8 +64073,6 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
             }
           },
           onStatusUpdate: (status) => {
-            const message = status.message || `Status: ${status.status}`;
-            setStatusMessage(message);
             switch (status.status) {
               case EDITORIAL_WORKFLOW_STATUS.SETTING_UP:
               case EDITORIAL_WORKFLOW_STATUS.CREATING_BRANCH:
@@ -64118,9 +64109,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
       }
     };
     const renderProgressIndicator = () => {
-      var _a2;
-      const progressPercentage = (currentStep - 1) / steps.length * 100;
-      return /* @__PURE__ */ React__namespace.createElement("div", { className: "py-6" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex justify-between mb-4 relative px-5 sm:gap-x-8" }, /* @__PURE__ */ React__namespace.createElement(
+      return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex justify-between my-8 relative px-5 sm:gap-x-8" }, /* @__PURE__ */ React__namespace.createElement(
         "div",
         {
           className: "absolute top-5 h-0.5 bg-gray-200 -z-10",
@@ -64129,7 +64118,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
       ), currentStep > 1 && currentStep <= steps.length && /* @__PURE__ */ React__namespace.createElement(
         "div",
         {
-          className: "absolute top-5 h-0.5 bg-blue-500 -z-10 transition-all duration-500",
+          className: "absolute top-5 h-0.5 bg-tina-orange -z-10 transition-all duration-500",
           style: {
             left: "50px",
             width: `calc((100% - 100px) * ${(currentStep - 1) / (steps.length - 1)})`
@@ -64157,7 +64146,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
           /* @__PURE__ */ React__namespace.createElement(
             "div",
             {
-              className: `w-10 h-10 rounded-full flex items-center justify-center font-medium mb-3 border-2 transition-all duration-300 ${isCompleted ? "bg-green-500 border-green-500 text-white" : isActive ? "bg-blue-500 border-blue-500 text-white" : "bg-white border-gray-200 text-gray-400"}`
+              className: `w-10 h-10 rounded-full flex items-center justify-center font-medium mb-3 border-2 transition-all duration-300 select-none ${isCompleted ? "bg-green-500 border-green-500 text-white" : isActive ? "bg-tina-orange border-tina-orange text-white" : "bg-white border-gray-200 text-gray-400"}`
             },
             isCompleted ? /* @__PURE__ */ React__namespace.createElement(
               "svg",
@@ -64178,7 +64167,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
           ),
           /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center max-w-24" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-semibold leading-tight" }, step.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs text-gray-400 mt-1 leading-tight" }, step.description))
         );
-      })), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-medium text-gray-700" }, "Step ", currentStep > steps.length ? steps.length : currentStep, " of", " ", steps.length), isExecuting && currentStep > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500" }, /* @__PURE__ */ React__namespace.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React__namespace.createElement(
+      })), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs text-gray-500" }, "Estimated time: 1-2 min "), isExecuting && currentStep > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500" }, /* @__PURE__ */ React__namespace.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React__namespace.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -64186,28 +64175,14 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
           clipRule: "evenodd"
         }
       )), formatTime(elapsedTime))), /* @__PURE__ */ React__namespace.createElement(
-        ProgressBar,
-        {
-          progress: progressPercentage,
-          className: "mb-4",
-          color: currentStep > steps.length ? "green" : "blue"
-        }
-      ), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-2 mb-2" }, currentStep >= 4 ? /* @__PURE__ */ React__namespace.createElement(
-        "svg",
+        "a",
         {
-          className: "w-4 h-4 text-green-500",
-          fill: "currentColor",
-          viewBox: "0 0 20 20"
+          className: "underline text-tina-orange-dark font-medium text-xs",
+          href: "https://tina.io/docs/tinacloud/editorial-workflow",
+          target: "_blank"
         },
-        /* @__PURE__ */ React__namespace.createElement(
-          "path",
-          {
-            fillRule: "evenodd",
-            d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-            clipRule: "evenodd"
-          }
-        )
-      ) : /* @__PURE__ */ React__namespace.createElement(AiOutlineLoading, { className: "text-blue-500 animate-spin" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm font-medium text-gray-700" }, statusMessage || `${(_a2 = steps[currentStep - 1]) == null ? void 0 : _a2.name}...`)), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-left" }, /* @__PURE__ */ React__namespace.createElement("p", { className: "text-xs text-gray-500" }, "Estimated time: 1-2 minutes")));
+        "Learn more about Editorial Workflow"
+      ));
     };
     const renderStateContent = () => {
       if (isExecuting) {
@@ -64230,14 +64205,13 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
             value: newBranchName,
             onChange: (e3) => {
               setErrorMessage("");
-              setStatusMessage("");
               setNewBranchName(e3.target.value);
             }
           }
         ));
       }
     };
-    return /* @__PURE__ */ React__namespace.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React__namespace.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: isExecuting ? void 0 : close2 }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React__namespace.createElement(TinaIcon, { className: "w-8 h-auto mr-1 text-blue-500 text-tina-orange" }), "Save changes to new branch"))), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, renderStateContent()), !isExecuting && /* @__PURE__ */ React__namespace.createElement(ModalActions, { align: "end" }, /* @__PURE__ */ React__namespace.createElement(Button$1, { variant: "secondary", className: "w-full sm:w-auto" }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React__namespace.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: isExecuting ? void 0 : close2 }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center" }, "Save changes to new branch"))), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, renderStateContent()), !isExecuting && /* @__PURE__ */ React__namespace.createElement(ModalActions, { align: "end" }, /* @__PURE__ */ React__namespace.createElement(Button$1, { variant: "secondary", className: "w-full sm:w-auto" }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
       DropdownButton,
       {
         variant: "primary",
@@ -64281,6 +64255,217 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
       }
     )));
   };
+  const NoFieldsPlaceholder = () => /* @__PURE__ */ React__namespace.createElement(
+    "div",
+    {
+      className: "relative flex flex-col items-center justify-center text-center p-5 pb-16 w-full h-full overflow-y-auto",
+      style: {
+        animationName: "fade-in",
+        animationDelay: "300ms",
+        animationTimingFunction: "ease-out",
+        animationIterationCount: 1,
+        animationFillMode: "both",
+        animationDuration: "150ms"
+      }
+    },
+    /* @__PURE__ */ React__namespace.createElement(Emoji, { className: "block pb-5" }, "🤔"),
+    /* @__PURE__ */ React__namespace.createElement("h3", { className: "font-sans font-normal text-lg block pb-5" }, "Hey, you don't have any fields added to this form."),
+    /* @__PURE__ */ React__namespace.createElement("p", { className: "block pb-5" }, /* @__PURE__ */ React__namespace.createElement(
+      "a",
+      {
+        className: "text-center rounded-3xl border border-solid border-gray-100 shadow-[0_2px_3px_rgba(0,0,0,0.12)] font-normal cursor-pointer text-[12px] transition-all duration-100 ease-out bg-white text-gray-700 py-3 pr-5 pl-14 relative no-underline inline-block hover:text-blue-500",
+        href: "https://tinacms.org/docs/fields",
+        target: "_blank",
+        rel: "noopener noreferrer"
+      },
+      /* @__PURE__ */ React__namespace.createElement(
+        Emoji,
+        {
+          className: "absolute left-5 top-1/2 origin-center -translate-y-1/2 transition-all duration-100 ease-out",
+          style: { fontSize: 24 }
+        },
+        "📖"
+      ),
+      " ",
+      "Field Setup Guide"
+    ))
+  );
+  const FormKeyBindings = ({ onSubmit }) => {
+    React.useEffect(() => {
+      const handleKeyDown = (e3) => {
+        if ((e3.metaKey || e3.ctrlKey) && e3.key === "s") {
+          e3.preventDefault();
+          onSubmit();
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [onSubmit]);
+    return null;
+  };
+  const FormBuilder = ({
+    form,
+    onPristineChange,
+    ...rest
+  }) => {
+    const cms = useCMS$1();
+    const hideFooter = !!rest.hideFooter;
+    const [createBranchModalOpen, setCreateBranchModalOpen] = React__namespace.useState(false);
+    const tinaForm = form.tinaForm;
+    const finalForm2 = form.tinaForm.finalForm;
+    React__namespace.useEffect(() => {
+      var _a2;
+      const collection = cms.api.tina.schema.getCollectionByFullPath(
+        tinaForm.path
+      );
+      if ((_a2 = collection == null ? void 0 : collection.ui) == null ? void 0 : _a2.beforeSubmit) {
+        tinaForm.beforeSubmit = (values) => collection.ui.beforeSubmit({ cms, form: tinaForm, values });
+      } else {
+        tinaForm.beforeSubmit = void 0;
+      }
+    }, [tinaForm.path]);
+    const moveArrayItem = React__namespace.useCallback(
+      (result) => {
+        if (!result.destination || !finalForm2)
+          return;
+        const name = result.type;
+        finalForm2.mutators.move(
+          name,
+          result.source.index,
+          result.destination.index
+        );
+      },
+      [tinaForm]
+    );
+    React__namespace.useEffect(() => {
+      const unsubscribe = finalForm2.subscribe(
+        ({ pristine }) => {
+          if (onPristineChange) {
+            onPristineChange(pristine);
+          }
+        },
+        { pristine: true }
+      );
+      return () => {
+        unsubscribe();
+      };
+    }, [finalForm2]);
+    const fieldGroup = tinaForm.getActiveField(form.activeFieldName);
+    return /* @__PURE__ */ React__namespace.createElement(
+      reactFinalForm.Form,
+      {
+        key: tinaForm.id,
+        form: tinaForm.finalForm,
+        onSubmit: tinaForm.onSubmit
+      },
+      ({
+        handleSubmit,
+        pristine,
+        invalid,
+        submitting,
+        dirtySinceLastSubmit,
+        hasValidationErrors
+      }) => {
+        const usingProtectedBranch = cms.api.tina.usingProtectedBranch();
+        const canSubmit = !pristine && !submitting && !hasValidationErrors && !(invalid && !dirtySinceLastSubmit);
+        const safeSubmit = async () => {
+          if (canSubmit) {
+            await handleSubmit();
+          }
+        };
+        const safeHandleSubmit = async () => {
+          if (usingProtectedBranch) {
+            setCreateBranchModalOpen(true);
+          } else {
+            safeSubmit();
+          }
+        };
+        return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, createBranchModalOpen && /* @__PURE__ */ React__namespace.createElement(
+          CreateBranchModal,
+          {
+            safeSubmit,
+            crudType: tinaForm.crudType,
+            path: tinaForm.path,
+            values: tinaForm.values,
+            close: () => setCreateBranchModalOpen(false)
+          }
+        ), /* @__PURE__ */ React__namespace.createElement(DragDropContext, { onDragEnd: moveArrayItem }, /* @__PURE__ */ React__namespace.createElement(FormKeyBindings, { onSubmit: safeHandleSubmit }), /* @__PURE__ */ React__namespace.createElement(FormPortalProvider, null, /* @__PURE__ */ React__namespace.createElement(FormWrapper, { id: tinaForm.id }, (tinaForm == null ? void 0 : tinaForm.fields.length) ? /* @__PURE__ */ React__namespace.createElement(
+          FieldsBuilder,
+          {
+            form: tinaForm,
+            activeFieldName: form.activeFieldName,
+            fields: fieldGroup.fields
+          }
+        ) : /* @__PURE__ */ React__namespace.createElement(NoFieldsPlaceholder, null))), !hideFooter && /* @__PURE__ */ React__namespace.createElement("div", { className: "relative flex-none w-full h-16 px-6 bg-white border-t border-gray-100 flex items-center justify-end" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-1 w-full justify-end gap-2	flex items-center max-w-form" }, tinaForm.reset && /* @__PURE__ */ React__namespace.createElement(
+          ResetForm,
+          {
+            pristine,
+            reset: async () => {
+              finalForm2.reset();
+              await tinaForm.reset();
+            }
+          },
+          tinaForm.buttons.reset
+        ), /* @__PURE__ */ React__namespace.createElement(
+          Button$1,
+          {
+            onClick: safeHandleSubmit,
+            disabled: !canSubmit,
+            busy: submitting,
+            variant: "primary"
+          },
+          submitting && /* @__PURE__ */ React__namespace.createElement(LoadingDots, null),
+          !submitting && tinaForm.buttons.save
+        ), tinaForm.actions.length > 0 && /* @__PURE__ */ React__namespace.createElement(
+          FormActionMenu,
+          {
+            form: tinaForm,
+            actions: tinaForm.actions
+          }
+        )))));
+      }
+    );
+  };
+  const FormStatus = ({ pristine }) => {
+    const pristineClass = pristine ? "text-green-500" : "text-red-500";
+    return /* @__PURE__ */ React__namespace.createElement(FaCircle, { className: cn("h-3", pristineClass) });
+  };
+  const FormWrapper = ({
+    id: id2,
+    children
+  }) => {
+    return /* @__PURE__ */ React__namespace.createElement(
+      "div",
+      {
+        "data-test": `form:${id2 == null ? void 0 : id2.replace(/\\/g, "/")}`,
+        className: "h-full overflow-y-auto max-h-full bg-gray-50"
+      },
+      /* @__PURE__ */ React__namespace.createElement("div", { className: "py-5 px-6" }, children)
+    );
+  };
+  const Emoji = ({ className = "", ...props }) => /* @__PURE__ */ React__namespace.createElement(
+    "span",
+    {
+      className: `text-[40px] leading-none inline-block ${className}`,
+      ...props
+    }
+  );
+  const CreateBranchModel = ({
+    close: close2,
+    safeSubmit,
+    relativePath: relativePath2,
+    values,
+    crudType
+  }) => /* @__PURE__ */ React__namespace.createElement(
+    CreateBranchModal,
+    {
+      close: close2,
+      safeSubmit,
+      path: relativePath2,
+      values,
+      crudType
+    }
+  );
   const NestedForm = (props) => {
     const FormPortal = useFormPortal();
     const id2 = React.useMemo(() => uuid(), [props.id, props.initialValues]);
@@ -65615,9 +65800,9 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
           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.cn("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"
         }
@@ -120635,7 +120820,7 @@ This will work when developing locally but NOT when deployed to production.
     headerClassName,
     children
   }) => {
-    return /* @__PURE__ */ React.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.createElement("div", { className: `py-2 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React.createElement(BranchButton, null), /* @__PURE__ */ React.createElement(BranchPreviewButton, null))), children);
+    return /* @__PURE__ */ React.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.createElement("div", { className: `py-2 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement(BranchButton, null), /* @__PURE__ */ React.createElement(BranchPreviewButton, null))), children);
   };
   const PageHeader = ({
     children
@@ -120703,7 +120888,7 @@ This will work when developing locally but NOT when deployed to production.
     folder,
     collectionName
   }) => {
-    return /* @__PURE__ */ React.createElement(react$1.Menu, { as: "div", className: "relative inline-block text-left" }, () => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(react$1.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.createElement(BiPlus, { className: "w-5 h-full ml-1 opacity-70" }))), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react$1.Menu, { as: "div", className: "relative inline-block text-left w-full md:w-auto" }, () => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(react$1.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.createElement(BiPlus, { className: "w-5 h-full ml-1 opacity-70" }))), /* @__PURE__ */ React.createElement(
       react$1.Transition,
       {
         enter: "transition ease-out duration-100",
@@ -120831,6 +121016,9 @@ This will work when developing locally but NOT when deployed to production.
         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.createElement(GetCMS, null, (cms) => {
       return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(
         GetCollection,
@@ -120860,7 +121048,7 @@ This will work when developing locally but NOT when deployed to production.
           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;
@@ -120995,6 +121183,7 @@ This will work when developing locally but NOT when deployed to production.
                   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(
@@ -121027,7 +121216,7 @@ This will work when developing locally but NOT when deployed to production.
               },
               close: () => setFolderModalOpen(false)
             }
-          ), /* @__PURE__ */ React.createElement(PageHeader, null, /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4 items-baseline" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, !search && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
+          ), /* @__PURE__ */ React.createElement(PageHeader, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, !search && /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
             "label",
             {
               htmlFor: "sort",
@@ -121099,7 +121288,7 @@ This will work when developing locally but NOT when deployed to production.
               className: "underline hover:text-blue-700 transition-all duration-150"
             },
             "Read the docs"
-          ))))), allowCreate && /* @__PURE__ */ React.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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(
+          ))))), allowCreate && /* @__PURE__ */ React.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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
             reactRouterDom.Link,
             {
               onMouseDown: (evt) => {
@@ -121117,7 +121306,7 @@ This will work when developing locally but NOT when deployed to production.
               },
               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,
@@ -121125,7 +121314,7 @@ This will work when developing locally but NOT when deployed to production.
             },
             /* @__PURE__ */ React.createElement(FaFolder, { className: "mr-2" }),
             "Add Folder"
-          ))), collection.templates && /* @__PURE__ */ React.createElement(
+          )), collection.templates && /* @__PURE__ */ React.createElement(
             TooltipContent,
             {
               side: "top",
@@ -121166,175 +121355,225 @@ This will work when developing locally but NOT when deployed to production.
               templates: collection.templates,
               folder
             }
-          ))))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React.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.createElement("div", { className: "w-full overflow-x-auto shadow-md rounded-md" }, (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React.createElement("table", { className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg" }, /* @__PURE__ */ React.createElement("tbody", null, folder.name && !search ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React.createElement(
-            Breadcrumb,
-            {
-              folder,
-              navigate,
-              collectionName
-            }
-          ))) : null, documents.length > 0 && documents.map((document2) => {
-            var _a3;
-            if (document2.node.__typename === "Folder") {
-              return /* @__PURE__ */ React.createElement(
-                "tr",
-                {
-                  key: `folder-${document2.node.path}`
-                },
-                /* @__PURE__ */ React.createElement("td", { className: "pl-5 pr-3 py-3" }, /* @__PURE__ */ React.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.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
-                  /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Name"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block truncate" }, /* @__PURE__ */ React.createElement("span", null, document2.node.name)))
-                )),
-                /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3", colSpan: 4 }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Path"), /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, document2.node.path.substring(2).split("/").map((node2) => {
-                  return /* @__PURE__ */ React.createElement("span", { key: node2 }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-300 pr-0.5" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "pr-0.5" }, node2));
-                })))
-              );
-            }
-            const hasTitle = Boolean(
-              document2.node._sys.title
+          ))))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React.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.createElement("div", { className: "w-full overflow-x-auto shadow-md rounded-md" }, (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React.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.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.createElement(React.Fragment, null, hasAnyDocuments && /* @__PURE__ */ React.createElement("thead", { className: tableHeadingStyle2 }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.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.createElement(
-                "td",
-                {
-                  className: "pl-5 pr-3 py-3",
-                  colSpan: hasTitle ? 1 : 2
-                },
-                /* @__PURE__ */ React.createElement(
-                  "a",
+              hasAnyTitles ? "Title" : "Filename"
+            ), hasAnyTitles && /* @__PURE__ */ React.createElement(
+              "th",
+              {
+                className: tableHeadingCellStyle
+              },
+              "Filename"
+            ), /* @__PURE__ */ React.createElement("th", { className: tableHeadingCellStyle }, "Extension"), /* @__PURE__ */ React.createElement("th", { className: tableHeadingCellStyle }, "Template"), /* @__PURE__ */ React.createElement("th", null))), !hasAnyDocuments && hasAnyFolders && /* @__PURE__ */ React.createElement("thead", { className: tableHeadingStyle2 }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", { className: tableHeadingCellStyle }, "Name"), /* @__PURE__ */ React.createElement(
+              "th",
+              {
+                className: tableHeadingCellStyle,
+                colSpan: 4
+              },
+              "Path"
+            ))), /* @__PURE__ */ React.createElement("tbody", null, folder.name && !search ? /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React.createElement(
+              Breadcrumb,
+              {
+                folder,
+                navigate,
+                collectionName
+              }
+            ))) : null, documents.length > 0 && documents.map((document2) => {
+              var _a3;
+              if (document2.node.__typename === "Folder") {
+                return /* @__PURE__ */ React.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.createElement(BiFile, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
-                  /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block truncate mb-1" }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, hasTitle ? (_a3 = document2.node._sys) == null ? void 0 : _a3.title : document2.node._sys.filename)), /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400" }, document2.node._sys.path))
-                )
-              ),
-              hasTitle && /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Filename"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document2.node._sys.filename))),
-              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Extension"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
-              /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Template"), /* @__PURE__ */ React.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
-              /* @__PURE__ */ React.createElement("td", { className: "w-0" }, /* @__PURE__ */ React.createElement(
-                OverflowMenu$1,
-                {
-                  toolbarItems: [
+                  /* @__PURE__ */ React.createElement("td", { className: "pl-5 pr-3 py-3" }, /* @__PURE__ */ React.createElement(
+                    "a",
                     {
-                      name: "edit",
-                      label: "Edit in Admin",
-                      Icon: /* @__PURE__ */ React.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.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.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
+                    /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "leading-5 block truncate" }, /* @__PURE__ */ React.createElement("span", null, document2.node.name)))
+                  )),
+                  /* @__PURE__ */ React.createElement(
+                    "td",
+                    {
+                      className: "px-3 py-3",
+                      colSpan: 4
                     },
-                    allowDelete && {
-                      name: "rename",
-                      label: "Rename",
-                      Icon: /* @__PURE__ */ React.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.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-400 truncate" }, document2.node.path.substring(2).split("/").map((node2) => {
+                      return /* @__PURE__ */ React.createElement("span", { key: node2 }, /* @__PURE__ */ React.createElement("span", { className: "text-gray-300 pr-0.5" }, "/"), /* @__PURE__ */ React.createElement("span", { className: "pr-0.5" }, node2));
+                    }))
+                  )
+                );
+              }
+              const hasTitle = Boolean(
+                document2.node._sys.title
+              );
+              const subfolders = document2.node._sys.breadcrumbs.slice(0, -1).join("/");
+              return /* @__PURE__ */ React.createElement(
+                "tr",
+                {
+                  className: tableRowStyle,
+                  key: `document-${document2.node._sys.relativePath}`
+                },
+                /* @__PURE__ */ React.createElement(
+                  "td",
+                  {
+                    className: "pl-5 pr-3 py-3",
+                    colSpan: hasTitle ? 1 : 2
+                  },
+                  /* @__PURE__ */ React.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.createElement(
-                        BiTrash,
-                        {
-                          size: "1.3rem",
-                          className: "text-red-500"
+                    /* @__PURE__ */ React.createElement(BiFile, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
+                    /* @__PURE__ */ React.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React.createElement("span", { className: "leading-5 block truncate mb-1" }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, hasTitle ? (_a3 = document2.node._sys) == null ? void 0 : _a3.title : document2.node._sys.filename)), /* @__PURE__ */ React.createElement("span", { className: "block text-xs text-gray-400" }, document2.node._sys.path))
+                  )
+                ),
+                hasTitle && /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, document2.node._sys.filename))),
+                /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
+                /* @__PURE__ */ React.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
+                /* @__PURE__ */ React.createElement("td", { className: "w-0" }, /* @__PURE__ */ React.createElement(
+                  OverflowMenu$1,
+                  {
+                    toolbarItems: [
+                      {
+                        name: "edit",
+                        label: "Edit in Admin",
+                        Icon: /* @__PURE__ */ React.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.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.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.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.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React.createElement(
+                    ].filter(Boolean)
+                  }
+                ))
+              );
+            })));
+          })())), documents.length === 0 && /* @__PURE__ */ React.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React.createElement(
             CursorPaginator,
             {
               variant: "white",
@@ -121494,20 +121733,47 @@ This will work when developing locally but NOT when deployed to production.
     close: close2,
     createFunc,
     folderName,
-    setFolderName
+    setFolderName,
+    validationRegex
   }) => {
+    const [isFolderNameValid, setIsFolderNameValid] = React.useState(false);
+    const [isInteracted, setIsInteracted] = React.useState(false);
+    React.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.createElement(Modal, null, /* @__PURE__ */ React.createElement(PopupModal, null, /* @__PURE__ */ React.createElement(ModalHeader, { close: close2 }, "Create Folder"), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 2 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
+    ), !isFolderNameValid && isInteracted && /* @__PURE__ */ React.createElement("p", { className: "text-red-500 text-sm pl-1" }, "Folder name is not valid – please enter a valid folder name."))), /* @__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",
+        disabled: !isFolderNameValid,
         onClick: async () => {
           await createFunc();
           close2();