tinacms 0.0.0-d900f4e-20251117211602 → 0.0.0-d9487bf-20251119052214

package/dist/index.mjs

@@ -40,7 +40,9 @@ import setFieldData from "final-form-set-field-data";
 import { Field, Form as Form$1 } from "react-final-form";
 import PropTypes from "prop-types";
 import { twMerge } from "tailwind-merge";
-import { Droppable, Draggable, DragDropContext } from "react-beautiful-dnd";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates, useSortable, SortableContext, verticalListSortingStrategy, defaultAnimateLayoutChanges } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import * as pkg$1 from "react-color";
 import * as pkg from "color-string";
 import { buildSchema, print, getIntrospectionQuery, buildClientSchema, parse as parse$4 } from "graphql";
@@ -38987,6 +38989,128 @@ const DropdownButton = React.forwardRef(
   }
 );
 DropdownButton.displayName = "DropdownButton";
+const DragDropContext = ({
+  onDragEnd,
+  children
+}) => {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 5
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    const activeIdStr = String(active.id);
+    const overIdStr = String(over.id);
+    const activeFieldName = activeIdStr.substring(
+      0,
+      activeIdStr.lastIndexOf(".")
+    );
+    const overFieldName = overIdStr.substring(0, overIdStr.lastIndexOf("."));
+    const activeIndex = parseInt(
+      activeIdStr.substring(activeIdStr.lastIndexOf(".") + 1)
+    );
+    const overIndex = parseInt(
+      overIdStr.substring(overIdStr.lastIndexOf(".") + 1)
+    );
+    if (activeFieldName === overFieldName) {
+      const result = {
+        destination: {
+          index: overIndex
+        },
+        source: {
+          index: activeIndex
+        },
+        type: activeFieldName
+      };
+      onDragEnd(result);
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragEnd: handleDragEnd
+    },
+    children
+  );
+};
+const Droppable = ({
+  droppableId,
+  type,
+  children
+}) => {
+  const ref = React__default.useRef(null);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children({
+    innerRef: ref,
+    placeholder: null
+  }));
+};
+const Draggable = ({
+  draggableId,
+  children
+}) => {
+  const animateLayoutChanges = (args) => {
+    const { isSorting, wasDragging } = args;
+    if (wasDragging) {
+      return false;
+    }
+    if (isSorting) {
+      return defaultAnimateLayoutChanges(args);
+    }
+    return true;
+  };
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+    setActivatorNodeRef
+  } = useSortable({
+    id: draggableId,
+    animateLayoutChanges
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    ...isDragging && { zIndex: 9999 }
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children(
+    {
+      innerRef: { current: null },
+      draggableProps: {
+        ref: setNodeRef,
+        style,
+        ...attributes
+      },
+      dragHandleProps: {
+        ref: setActivatorNodeRef,
+        ...listeners
+      }
+    },
+    {
+      isDragging
+    }
+  ));
+};
+const SortableProvider = ({
+  items: items2,
+  children
+}) => {
+  return /* @__PURE__ */ React__default.createElement(SortableContext, { items: items2, strategy: verticalListSortingStrategy }, children);
+};
 function FaCircle(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" }, "child": [] }] })(props);
 }
@@ -39533,6 +39657,9 @@ function MdWarning(props) {
 function MdVpnKey(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12.65 10A5.99 5.99 0 0 0 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 0 0 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" }, "child": [] }] })(props);
 }
+function MdAccessTime(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" }, "child": [] }] })(props);
+}
 function MdKeyboardArrowDown(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" }, "child": [] }] })(props);
 }
@@ -39542,6 +39669,9 @@ function MdArrowForward(props) {
 function MdSyncProblem(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M3 12c0 2.21.91 4.2 2.36 5.64L3 20h6v-6l-2.24 2.24A6.003 6.003 0 0 1 5 12a5.99 5.99 0 0 1 4-5.65V4.26C5.55 5.15 3 8.27 3 12zm8 5h2v-2h-2v2zM21 4h-6v6l2.24-2.24A6.003 6.003 0 0 1 19 12a5.99 5.99 0 0 1-4 5.65v2.09c3.45-.89 6-4.01 6-7.74 0-2.21-.91-4.2-2.36-5.64L21 4zm-10 9h2V7h-2v6z" }, "child": [] }] })(props);
 }
+function MdWifiOff(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M24 .01c0-.01 0-.01 0 0L0 0v24h24V.01zM0 0h24v24H0V0zm0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M22.99 9C19.15 5.16 13.8 3.76 8.84 4.78l2.52 2.52c3.47-.17 6.99 1.05 9.63 3.7l2-2zm-4 4a9.793 9.793 0 0 0-4.49-2.56l3.53 3.53.96-.97zM2 3.05 5.07 6.1C3.6 6.82 2.22 7.78 1 9l1.99 2c1.24-1.24 2.67-2.16 4.2-2.77l2.24 2.24A9.684 9.684 0 0 0 5 13v.01L6.99 15a7.042 7.042 0 0 1 4.92-2.06L18.98 20l1.27-1.26L3.29 1.79 2 3.05zM9 17l3 3 3-3a4.237 4.237 0 0 0-6 0z" }, "child": [] }] })(props);
+}
 function MdOutlineHelpOutline(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" }, "child": [] }] })(props);
 }
@@ -39551,6 +39681,9 @@ function MdOutlineSettings(props) {
 function MdOutlineClear(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" }, "child": [] }] })(props);
 }
+function MdOutlineDataSaverOff(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.48 2.54l2.6 1.53c.56-1.24.88-2.62.88-4.07 0-5.18-3.95-9.45-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53A6.95 6.95 0 0 1 12 19z" }, "child": [] }] })(props);
+}
 function MdOutlineCloud(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11A2.98 2.98 0 0 1 22 15c0 1.65-1.35 3-3 3H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95A5.469 5.469 0 0 1 12 6m0-2C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96A7.49 7.49 0 0 0 12 4z" }, "child": [] }] })(props);
 }
@@ -39560,7 +39693,7 @@ function MdOutlinePhotoLibrary(props) {
 function MdOutlinePerson(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }, "child": [] }] })(props);
 }
-const selectFieldClasses = "shadow appearance-none bg-white block pl-3 pr-8 py-2 truncate w-full text-base cursor-pointer border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded";
+const selectFieldClasses = "shadow appearance-none h-full bg-white block pl-3 pr-8 py-2 truncate w-full text-base cursor-pointer border border-gray-200 focus:outline-none focus:shadow-outline focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded";
 const Select = ({
   input,
   field,
@@ -39574,7 +39707,7 @@ const Select = ({
       ref.current.focus();
     }
   }, [field == null ? void 0 : field.experimental_focusIntent, ref]);
-  return /* @__PURE__ */ React.createElement("div", { className: "relative group w-full md:w-auto" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "relative group w-full h-full md:w-auto" }, /* @__PURE__ */ React.createElement(
     "select",
     {
       id: input.name,
@@ -40466,19 +40599,25 @@ const Group$1 = ({ tinaForm, form, field, input, meta, index }) => {
         /* @__PURE__ */ React__default.createElement(AddIcon, { className: "w-5/6 h-auto" })
       )
     },
-    /* @__PURE__ */ React__default.createElement(ListPanel, null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__default.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React__default.createElement(EmptyList, null), items2.map((item, index2) => /* @__PURE__ */ React__default.createElement(
-      Item$2,
+    /* @__PURE__ */ React__default.createElement(ListPanel, null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React__default.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React__default.createElement(EmptyList, null), /* @__PURE__ */ React__default.createElement(
+      SortableProvider,
       {
-        key: index2,
-        tinaForm,
-        field,
-        item,
-        index: index2,
-        isMin,
-        fixedLength,
-        ...itemProps(item)
-      }
-    )), provider.placeholder))))
+        items: items2.map((_, index2) => `${field.name}.${index2}`)
+      },
+      items2.map((item, index2) => /* @__PURE__ */ React__default.createElement(
+        Item$2,
+        {
+          key: index2,
+          tinaForm,
+          field,
+          item,
+          index: index2,
+          isMin,
+          fixedLength,
+          ...itemProps(item)
+        }
+      ))
+    ), provider.placeholder))))
   );
 };
 const Item$2 = ({
@@ -40505,7 +40644,13 @@ const Item$2 = ({
       isDragging: snapshot.isDragging,
       ...p2
     },
-    /* @__PURE__ */ React__default.createElement(DragHandle, { isDragging: snapshot.isDragging }),
+    /* @__PURE__ */ React__default.createElement(
+      DragHandle,
+      {
+        isDragging: snapshot.isDragging,
+        dragHandleProps: provider.dragHandleProps
+      }
+    ),
     /* @__PURE__ */ React__default.createElement(
       ItemClickTarget,
       {
@@ -40569,17 +40714,16 @@ const ItemHeader = ({
   provider,
   ...props
 }) => {
+  var _a2, _b;
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      ref: provider.innerRef,
+      ref: (_a2 = provider.draggableProps) == null ? void 0 : _a2.ref,
       ...provider.draggableProps,
-      ...provider.dragHandleProps,
       ...props,
       className: `relative group cursor-pointer flex justify-between items-stretch bg-white border border-gray-100 -mb-px overflow-visible p-0 text-sm font-normal ${isDragging ? "rounded shadow text-blue-600" : "text-gray-600 first:rounded-t last:rounded-b"} ${props.className ?? ""}`,
       style: {
-        ...provider.draggableProps.style ?? {},
-        ...provider.dragHandleProps.style ?? {},
+        ...((_b = provider.draggableProps) == null ? void 0 : _b.style) ?? {},
         ...props.style ?? {}
       }
     },
@@ -40597,10 +40741,14 @@ const ItemDeleteButton = ({ onClick, disabled = false }) => {
     /* @__PURE__ */ React__default.createElement(TrashIcon, { className: "h-5 w-auto fill-current text-red-500 transition-colors duration-150 ease-out" })
   );
 };
-const DragHandle = ({ isDragging }) => {
+const DragHandle = ({
+  isDragging,
+  dragHandleProps
+}) => {
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
+      ...dragHandleProps,
       className: `relative w-8 px-1 py-2.5 flex items-center justify-center hover:bg-gray-50 group cursor-[grab] ${isDragging ? `text-blue-500` : `text-gray-200 hover:text-gray-600`}`
     },
     isDragging ? /* @__PURE__ */ React__default.createElement(ReorderIcon, { className: "fill-current w-7 h-auto" }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(DragIcon, { className: "fill-current w-7 h-auto group-hover:opacity-0 transition-opacity duration-150 ease-out" }), /* @__PURE__ */ React__default.createElement(ReorderIcon, { className: "fill-current w-7 h-auto absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-150 ease-out" }))
@@ -41052,39 +41200,45 @@ const Blocks = ({
         }
       ))
     },
-    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef, className: "edit-page--list-parent" }, items2.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), items2.map((block2, index2) => {
-      const template = field.templates[block2._template];
-      if (!template) {
+    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef, className: "edit-page--list-parent" }, items2.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), /* @__PURE__ */ React.createElement(
+      SortableProvider,
+      {
+        items: items2.map((_, index2) => `${field.name}.${index2}`)
+      },
+      items2.map((block2, index2) => {
+        const template = field.templates[block2._template];
+        if (!template) {
+          return /* @__PURE__ */ React.createElement(
+            InvalidBlockListItem,
+            {
+              key: index2,
+              index: index2,
+              field,
+              tinaForm
+            }
+          );
+        }
+        const itemProps = (item) => {
+          if (!template.itemProps)
+            return {};
+          return template.itemProps(item);
+        };
         return /* @__PURE__ */ React.createElement(
-          InvalidBlockListItem,
+          BlockListItem,
           {
             key: index2,
+            block: block2,
+            template,
             index: index2,
             field,
-            tinaForm
+            tinaForm,
+            isMin,
+            fixedLength,
+            ...itemProps(block2)
           }
         );
-      }
-      const itemProps = (item) => {
-        if (!template.itemProps)
-          return {};
-        return template.itemProps(item);
-      };
-      return /* @__PURE__ */ React.createElement(
-        BlockListItem,
-        {
-          key: index2,
-          block: block2,
-          template,
-          index: index2,
-          field,
-          tinaForm,
-          isMin,
-          fixedLength,
-          ...itemProps(block2)
-        }
-      );
-    }), provider.placeholder)))
+      })
+    ), provider.placeholder)))
   );
 };
 const BlockListItem = ({
@@ -41102,7 +41256,13 @@ const BlockListItem = ({
   }, [tinaForm, field, index]);
   const { dispatch: setHoveredField } = useEvent("field:hover");
   const { dispatch: setFocusedField } = useEvent("field:focus");
-  return /* @__PURE__ */ React.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React.createElement(
+    DragHandle,
+    {
+      isDragging: snapshot.isDragging,
+      dragHandleProps: provider.dragHandleProps
+    }
+  ), /* @__PURE__ */ React.createElement(
     ItemClickTarget,
     {
       onClick: () => {
@@ -41143,7 +41303,13 @@ const InvalidBlockListItem = ({
   const removeItem = React.useCallback(() => {
     tinaForm.mutators.remove(field.name, index);
   }, [tinaForm, field, index]);
-  return /* @__PURE__ */ React.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React.createElement(ItemClickTarget, null, /* @__PURE__ */ React.createElement(GroupLabel, { error: true }, "Invalid Block")), /* @__PURE__ */ React.createElement(ItemDeleteButton, { onClick: removeItem })));
+  return /* @__PURE__ */ React.createElement(Draggable, { key: index, draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging }, /* @__PURE__ */ React.createElement(
+    DragHandle,
+    {
+      isDragging: snapshot.isDragging,
+      dragHandleProps: provider.dragHandleProps
+    }
+  ), /* @__PURE__ */ React.createElement(ItemClickTarget, null, /* @__PURE__ */ React.createElement(GroupLabel, { error: true }, "Invalid Block")), /* @__PURE__ */ React.createElement(ItemDeleteButton, { onClick: removeItem })));
 };
 const BlocksField = Blocks;
 const BlocksFieldPlugin = {
@@ -41210,19 +41376,25 @@ const List = ({ tinaForm, form, field, input, meta, index }) => {
       tinaForm,
       actions: (!fixedLength || fixedLength && !isMax) && /* @__PURE__ */ React.createElement(IconButton, { onClick: addItem, variant: "primary", size: "small" }, /* @__PURE__ */ React.createElement(AddIcon, { className: "w-5/6 h-auto" }))
     },
-    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), items2.map((item, index2) => /* @__PURE__ */ React.createElement(
-      Item$1,
+    /* @__PURE__ */ React.createElement(ListPanel, null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Droppable, { droppableId: field.name, type: field.name }, (provider) => /* @__PURE__ */ React.createElement("div", { ref: provider.innerRef }, items2.length === 0 && /* @__PURE__ */ React.createElement(EmptyList, null), /* @__PURE__ */ React.createElement(
+      SortableProvider,
       {
-        key: index2,
-        tinaForm,
-        field,
-        item,
-        index: index2,
-        isMin,
-        fixedLength,
-        ...itemProps(item)
-      }
-    )), provider.placeholder))))
+        items: items2.map((_, index2) => `${field.name}.${index2}`)
+      },
+      items2.map((item, index2) => /* @__PURE__ */ React.createElement(
+        Item$1,
+        {
+          key: index2,
+          tinaForm,
+          field,
+          item,
+          index: index2,
+          isMin,
+          fixedLength,
+          ...itemProps(item)
+        }
+      ))
+    ), provider.placeholder))))
   );
 };
 const Item$1 = ({
@@ -41248,7 +41420,13 @@ const Item$1 = ({
       name: `${field.name}.${index}`
     }
   ];
-  return /* @__PURE__ */ React.createElement(Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging, ...p2 }, /* @__PURE__ */ React.createElement(DragHandle, { isDragging: snapshot.isDragging }), /* @__PURE__ */ React.createElement(ItemClickTarget, null, /* @__PURE__ */ React.createElement(FieldsBuilder, { padding: false, form: tinaForm, fields })), (!fixedLength || fixedLength && !isMin) && /* @__PURE__ */ React.createElement(ItemDeleteButton, { disabled: isMin, onClick: removeItem })));
+  return /* @__PURE__ */ React.createElement(Draggable, { draggableId: `${field.name}.${index}`, index }, (provider, snapshot) => /* @__PURE__ */ React.createElement(ItemHeader, { provider, isDragging: snapshot.isDragging, ...p2 }, /* @__PURE__ */ React.createElement(
+    DragHandle,
+    {
+      isDragging: snapshot.isDragging,
+      dragHandleProps: provider.dragHandleProps
+    }
+  ), /* @__PURE__ */ React.createElement(ItemClickTarget, null, /* @__PURE__ */ React.createElement(FieldsBuilder, { padding: false, form: tinaForm, fields })), (!fixedLength || fixedLength && !isMin) && /* @__PURE__ */ React.createElement(ItemDeleteButton, { disabled: isMin, onClick: removeItem })));
 };
 const ListField = List;
 const ListFieldPlugin = {
@@ -43131,6 +43309,38 @@ const CreateBranch = ({ currentBranch, newBranchName, onCreateBranch, setNewBran
     " Create Branch"
   )));
 };
+const Badge = ({
+  children,
+  calloutStyle = "warning",
+  className = "",
+  displayIcon = true,
+  ...props
+}) => {
+  const commonAlertStyles = "text-xs px-2 py-0.5 flex items-center rounded-md border";
+  const styles = {
+    warning: `text-amber-700 bg-amber-100 border-amber-700/20`,
+    info: `text-blue-600 bg-blue-100/50 border-blue-600/20`,
+    success: `text-green-600 bg-green-100/50 border-green-600/20`,
+    error: `text-red-700 bg-red-100/50 border-red-700/20`
+  };
+  const icon = {
+    warning: /* @__PURE__ */ React.createElement(MdAccessTime, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-amber-600" }),
+    info: /* @__PURE__ */ React.createElement(MdOutlineDataSaverOff, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-blue-600" }),
+    success: /* @__PURE__ */ React.createElement(MdCheckCircle, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-green-600" }),
+    error: /* @__PURE__ */ React.createElement(MdWifiOff, { className: "w-5 h-auto inline-block mr-1 opacity-70 text-red-700" })
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn$1(commonAlertStyles, styles[calloutStyle], className),
+      ...props
+    },
+    displayIcon && icon[calloutStyle],
+    " ",
+    children
+  );
+};
+const tableHeadingStyle = "px-3 py-3 text-left text-xs font-bold text-gray-700 tracking-wider";
 function formatBranchName(str) {
   const pattern = /[^/\w-]+/g;
   const formattedStr = str.replace(pattern, "-");
@@ -43374,7 +43584,7 @@ const BranchSelector = ({
     filter2
   ).sort(sortBranchListFn(sortValue));
   const previewFunction = (_d = (_c = (_b = (_a2 = cms.api.tina.schema) == null ? void 0 : _a2.config) == null ? void 0 : _b.config) == null ? void 0 : _c.ui) == null ? void 0 : _d.previewUrl;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-end space-x-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch space-x-4" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
     "label",
     {
       htmlFor: "search",
@@ -43397,7 +43607,7 @@ const BranchSelector = ({
       className: "outline-none focus:outline-none bg-transparent border-0 p-0 m-0 absolute right-2.5 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-100 transition-all ease-out duration-150"
     },
     /* @__PURE__ */ React.createElement(MdOutlineClear, { className: "w-5 h-auto text-gray-600" })
-  ))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement(
     "label",
     {
       htmlFor: "branch-type",
@@ -43425,7 +43635,7 @@ const BranchSelector = ({
         }
       ]
     }
-  ))), filteredBranchList.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "block relative text-gray-300 italic py-1" }, "No branches to display"), filteredBranchList.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "min-w-[192px] max-h-[24rem] overflow-y-auto flex flex-col w-full h-full rounded-lg shadow-inner bg-white border border-gray-200" }, filteredBranchList.map((branch) => /* @__PURE__ */ React.createElement(
+  ))), filteredBranchList.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "block relative text-gray-300 italic py-1" }, "No branches to display"), filteredBranchList.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "min-w-[192px] max-h-[24rem] overflow-y-auto w-full h-full rounded-lg shadow-inner bg-white border border-gray-200" }, /* @__PURE__ */ React.createElement("table", { className: "w-full" }, /* @__PURE__ */ React.createElement("thead", { className: "bg-gray-100 border-b-2 border-gray-200" }, /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("th", { className: tableHeadingStyle }, "Branch Name"), /* @__PURE__ */ React.createElement("th", { className: tableHeadingStyle }, "Last Updated"), /* @__PURE__ */ React.createElement("th", null), /* @__PURE__ */ React.createElement("th", null))), /* @__PURE__ */ React.createElement("tbody", null, filteredBranchList.map((branch) => /* @__PURE__ */ React.createElement(
     BranchItem,
     {
       key: branch.name,
@@ -43436,7 +43646,7 @@ const BranchSelector = ({
       previewFunction,
       cms
     }
-  ))));
+  ))))));
 };
 const BranchItem = ({
   branch,
@@ -43472,15 +43682,15 @@ const BranchItem = ({
   const isCurrentBranch = branch.name === currentBranch;
   const indexingStatus = (_a2 = branch == null ? void 0 : branch.indexStatus) == null ? void 0 : _a2.status;
   return /* @__PURE__ */ React.createElement(
-    "div",
+    "tr",
     {
-      className: `relative text-base py-1.5 px-3 flex items-center gap-1.5 border-l-0 border-t-0 border-r-0 border-gray-50 w-full outline-none transition-all ease-out duration-150 ${indexingStatus !== "complete" ? "bg-gray-50 text-gray-400" : isCurrentBranch ? "border-blue-500 border-l-5 bg-blue-50 text-blue-800 border-b-0" : "border-b-2"}`
+      className: `text-base border-l-0 border-t-0 border-r-0 outline-none transition-all ease-out duration-150 ${indexingStatus !== "complete" ? "bg-gray-50 text-gray-400" : isCurrentBranch ? "bg-blue-50 text-blue-800 border-b-0" : "border-b-2 border-gray-50"}`
     },
-    /* @__PURE__ */ React.createElement("div", { className: "w-1/2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex-0" }, branch.protected && /* @__PURE__ */ React.createElement(BiLock, { className: "w-5 h-auto opacity-70 text-blue-500" })), /* @__PURE__ */ React.createElement("div", { className: "truncate flex-1" }, branch.name)), indexingStatus !== "complete" && /* @__PURE__ */ React.createElement("div", { className: "w-fit" }, /* @__PURE__ */ React.createElement(IndexStatus, { indexingStatus: branch.indexStatus.status }))),
-    /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, creatingPR ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-blue-600" }, "Creating PR"), /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight text-blue-500" }, "Please wait...")), /* @__PURE__ */ React.createElement(FaSpinner, { className: "w-3 h-auto animate-spin text-blue-500" })) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold" }, "Last Updated"), /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight" }, formatDistanceToNow$1(new Date(branch.indexStatus.timestamp), {
+    /* @__PURE__ */ React.createElement("td", { className: "pl-3 pr-3 py-1.5 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, branch.protected && /* @__PURE__ */ React.createElement(BiLock, { className: "w-5 h-auto opacity-70 text-blue-500 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight truncate" }, branch.name)), indexingStatus !== "complete" && /* @__PURE__ */ React.createElement("div", { className: "w-fit mt-1" }, /* @__PURE__ */ React.createElement(IndexStatus, { indexingStatus: branch.indexStatus.status })))),
+    /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 min-w-0" }, creatingPR ? /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-bold text-blue-600" }, "Creating PR"), /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight text-blue-500" }, "Please wait...")), /* @__PURE__ */ React.createElement(FaSpinner, { className: "w-3 h-auto animate-spin text-blue-500" })) : /* @__PURE__ */ React.createElement("span", { className: "text-sm leading-tight whitespace-nowrap" }, formatDistanceToNow$1(new Date(branch.indexStatus.timestamp), {
       addSuffix: true
-    })))),
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, indexingStatus === "complete" && !isCurrentBranch && /* @__PURE__ */ React.createElement(
+    }))),
+    /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 text-left" }, indexingStatus === "complete" && !isCurrentBranch && /* @__PURE__ */ React.createElement(
       Button$1,
       {
         variant: "white",
@@ -43488,12 +43698,13 @@ const BranchItem = ({
         onClick: () => {
           onChange(branch.name);
         },
-        className: "mr-auto cursor-pointer text-sm h-9 px-4 flex items-center gap-1"
+        className: "cursor-pointer text-sm h-9 px-4 flex items-center gap-1"
       },
       /* @__PURE__ */ React.createElement(BiPencil, { className: "h-4 w-auto text-blue-500 opacity-70 -mt-px" }),
       " ",
       "Select"
-    ), /* @__PURE__ */ React.createElement("div", { className: "ml-auto" }, /* @__PURE__ */ React.createElement(
+    ), indexingStatus === "complete" && isCurrentBranch && /* @__PURE__ */ React.createElement(Badge, { calloutStyle: "info", className: "w-fit", displayIcon: false }, /* @__PURE__ */ React.createElement("span", null, "Selected"))),
+    /* @__PURE__ */ React.createElement("td", { className: "px-3 py-1.5 text-right" }, /* @__PURE__ */ React.createElement(
       OverflowMenu$1,
       {
         toolbarItems: [
@@ -43524,7 +43735,7 @@ const BranchItem = ({
           }
         ].filter(Boolean)
       }
-    )))
+    ))
   );
 };
 const IndexStatus = ({ indexingStatus }) => {
@@ -46352,7 +46563,7 @@ function formatDistanceToNow(dirtyDate, options) {
   requiredArgs(1, arguments);
   return formatDistance2(dirtyDate, Date.now(), options);
 }
-const version$1 = "2.9.4";
+const version$1 = "2.9.5";
 const VersionInfo = () => {
   var _a2, _b, _c, _d, _e, _f;
   const cms = useCMS();
@@ -120638,7 +120849,7 @@ const PageWrapper = ({
   headerClassName,
   children
 }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React__default.createElement("div", { className: `py-2 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React__default.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React__default.createElement(BranchButton, null), /* @__PURE__ */ React__default.createElement(BranchPreviewButton, null))), children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React__default.createElement("div", { className: `py-2 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React__default.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement(BranchButton, null), /* @__PURE__ */ React__default.createElement(BranchPreviewButton, null))), children);
 };
 const PageHeader = ({
   children
@@ -120706,7 +120917,7 @@ const TemplateMenu = ({
   folder,
   collectionName
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Menu, { as: "div", className: "relative inline-block text-left" }, () => /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(MenuButton, { className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6" }, "Create New ", /* @__PURE__ */ React__default.createElement(BiPlus, { className: "w-5 h-full ml-1 opacity-70" }))), /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Menu, { as: "div", className: "relative inline-block text-left w-full md:w-auto" }, () => /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(MenuButton, { className: "w-full md:w-auto icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out  shadow text-white bg-tina-orange-dark hover:bg-tina-orange focus:ring-tina-orange-dark text-sm h-10 px-6" }, "Create New ", /* @__PURE__ */ React__default.createElement(BiPlus, { className: "w-5 h-full ml-1 opacity-70" }))), /* @__PURE__ */ React__default.createElement(
     Transition,
     {
       enter: "transition ease-out duration-100",
@@ -120834,6 +121045,9 @@ const CollectionListPage = () => {
       booleanEquals: null
     }));
   }, [collectionName]);
+  const tableRowStyle = "hover:bg-gray-50/50 border-b-2 border-gray-50 transition-colors duration-300";
+  const tableHeadingCellStyle = "px-3 py-3 text-left text-xs font-bold text-gray-700 tracking-wider";
+  const tableHeadingStyle2 = "bg-gray-100 border-b-2 border-gray-200";
   return /* @__PURE__ */ React__default.createElement(GetCMS, null, (cms) => {
     return /* @__PURE__ */ React__default.createElement(PageWrapper, null, /* @__PURE__ */ React__default.createElement(
       GetCollection,
@@ -121030,7 +121244,7 @@ const CollectionListPage = () => {
             },
             close: () => setFolderModalOpen(false)
           }
-        ), /* @__PURE__ */ React__default.createElement(PageHeader, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React__default.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4 items-baseline" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !search && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React__default.createElement(
+        ), /* @__PURE__ */ React__default.createElement(PageHeader, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, /* @__PURE__ */ React__default.createElement("h3", { className: "font-sans text-2xl text-tina-orange" }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col lg:flex-row justify-between lg:items-end pt-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4" }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !search && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2 items-start w-full md:w-auto" }, /* @__PURE__ */ React__default.createElement(
           "label",
           {
             htmlFor: "sort",
@@ -121102,7 +121316,7 @@ const CollectionListPage = () => {
             className: "underline hover:text-blue-700 transition-all duration-150"
           },
           "Read the docs"
-        ))))), allowCreate && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-end gap-2 md:gap-0 pt-4 lg:pt-0" }, allowCreateNestedFolder && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(
+        ))))), allowCreate && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-end gap-2 md:gap-0 pt-4 lg:pt-0" }, allowCreateNestedFolder && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
           Link$1,
           {
             onMouseDown: (evt) => {
@@ -121120,7 +121334,7 @@ const CollectionListPage = () => {
             },
             to: "/collections/new-folder",
             className: cn$1(
-              "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-gray-500 hover:tina-orange-dark bg-white hover:bg-gray-50 border border-gray-100 focus:ring-white focus:ring-tina-orange-dark w-full md:w-auto text-sm h-10 px-6 mr-4",
+              "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-gray-500 bg-white hover:bg-gray-50 border border-gray-100 focus:ring-white focus:ring-blue-500 w-full md:w-auto text-sm h-10 px-6 mr-4",
               collection.templates && "opacity-50 pointer-events-none cursor-not-allowed"
             ),
             "aria-disabled": !!collection.templates,
@@ -121128,7 +121342,7 @@ const CollectionListPage = () => {
           },
           /* @__PURE__ */ React__default.createElement(FaFolder, { className: "mr-2" }),
           "Add Folder"
-        ))), collection.templates && /* @__PURE__ */ React__default.createElement(
+        )), collection.templates && /* @__PURE__ */ React__default.createElement(
           TooltipContent,
           {
             side: "top",
@@ -121169,175 +121383,225 @@ const CollectionListPage = () => {
             templates: collection.templates,
             folder
           }
-        ))))), /* @__PURE__ */ React__default.createElement(PageBody, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React__default.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React__default.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), /* @__PURE__ */ React__default.createElement("div", { className: "w-full overflow-x-auto shadow-md rounded-md" }, (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React__default.createElement("table", { className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg" }, /* @__PURE__ */ React__default.createElement("tbody", null, folder.name && !search ? /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React__default.createElement(
-          Breadcrumb,
-          {
-            folder,
-            navigate,
-            collectionName
-          }
-        ))) : null, documents.length > 0 && documents.map((document2) => {
-          var _a3;
-          if (document2.node.__typename === "Folder") {
-            return /* @__PURE__ */ React__default.createElement(
-              "tr",
-              {
-                key: `folder-${document2.node.path}`
-              },
-              /* @__PURE__ */ React__default.createElement("td", { className: "pl-5 pr-3 py-3" }, /* @__PURE__ */ React__default.createElement(
-                "a",
-                {
-                  className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
-                  onClick: () => {
-                    navigate(
-                      `/${[
-                        "collections",
-                        collectionName,
-                        document2.node.path
-                      ].join("/")}`,
-                      { replace: true }
-                    );
-                  }
-                },
-                /* @__PURE__ */ React__default.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
-                /* @__PURE__ */ React__default.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Name"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block truncate" }, /* @__PURE__ */ React__default.createElement("span", null, document2.node.name)))
-              )),
-              /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3", colSpan: 4 }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Path"), /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, document2.node.path.substring(2).split("/").map((node3) => {
-                return /* @__PURE__ */ React__default.createElement("span", { key: node3 }, /* @__PURE__ */ React__default.createElement("span", { className: "text-gray-300 pr-0.5" }, "/"), /* @__PURE__ */ React__default.createElement("span", { className: "pr-0.5" }, node3));
-              })))
-            );
-          }
-          const hasTitle = Boolean(
-            document2.node._sys.title
+        ))))), /* @__PURE__ */ React__default.createElement(PageBody, null, /* @__PURE__ */ React__default.createElement("div", { className: "w-full mx-auto max-w-screen-xl" }, sortField && !sortField.required && /* @__PURE__ */ React__default.createElement("p", { className: "mb-4 text-gray-500" }, /* @__PURE__ */ React__default.createElement("em", null, "Sorting on a non-required field. Some documents may be excluded (if they don't have a value for", " ", sortName, ")")), /* @__PURE__ */ React__default.createElement("div", { className: "w-full overflow-x-auto shadow-md rounded-md" }, (folder.name && !search || documents.length > 0) && /* @__PURE__ */ React__default.createElement("table", { className: "table-auto shadow bg-white border border-gray-200 w-full max-w-full rounded-lg" }, (() => {
+          const hasAnyDocuments = documents.some(
+            (doc) => doc.node.__typename !== "Folder"
           );
-          const subfolders = document2.node._sys.breadcrumbs.slice(0, -1).join("/");
-          return /* @__PURE__ */ React__default.createElement(
-            "tr",
+          const hasAnyFolders = documents.some(
+            (doc) => doc.node.__typename === "Folder"
+          );
+          const hasAnyTitles = documents.some(
+            (doc) => {
+              var _a3;
+              return doc.node.__typename !== "Folder" && Boolean((_a3 = doc.node._sys) == null ? void 0 : _a3.title);
+            }
+          );
+          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, hasAnyDocuments && /* @__PURE__ */ React__default.createElement("thead", { className: tableHeadingStyle2 }, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement(
+            "th",
             {
-              className: "hover:bg-gray-100 transition-colors duration-300",
-              key: `document-${document2.node._sys.relativePath}`
+              className: tableHeadingCellStyle,
+              colSpan: hasAnyTitles ? 1 : 2
             },
-            /* @__PURE__ */ React__default.createElement(
-              "td",
-              {
-                className: "pl-5 pr-3 py-3",
-                colSpan: hasTitle ? 1 : 2
-              },
-              /* @__PURE__ */ React__default.createElement(
-                "a",
+            hasAnyTitles ? "Title" : "Filename"
+          ), hasAnyTitles && /* @__PURE__ */ React__default.createElement(
+            "th",
+            {
+              className: tableHeadingCellStyle
+            },
+            "Filename"
+          ), /* @__PURE__ */ React__default.createElement("th", { className: tableHeadingCellStyle }, "Extension"), /* @__PURE__ */ React__default.createElement("th", { className: tableHeadingCellStyle }, "Template"), /* @__PURE__ */ React__default.createElement("th", null))), !hasAnyDocuments && hasAnyFolders && /* @__PURE__ */ React__default.createElement("thead", { className: tableHeadingStyle2 }, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", { className: tableHeadingCellStyle }, "Name"), /* @__PURE__ */ React__default.createElement(
+            "th",
+            {
+              className: tableHeadingCellStyle,
+              colSpan: 4
+            },
+            "Path"
+          ))), /* @__PURE__ */ React__default.createElement("tbody", null, folder.name && !search ? /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", { colSpan: 5 }, /* @__PURE__ */ React__default.createElement(
+            Breadcrumb,
+            {
+              folder,
+              navigate,
+              collectionName
+            }
+          ))) : null, documents.length > 0 && documents.map((document2) => {
+            var _a3;
+            if (document2.node.__typename === "Folder") {
+              return /* @__PURE__ */ React__default.createElement(
+                "tr",
                 {
-                  className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
-                  onClick: () => {
-                    handleNavigate(
-                      navigate,
-                      cms,
-                      collection,
-                      collectionDefinition,
-                      document2.node
-                    );
-                  }
+                  className: tableRowStyle,
+                  key: `folder-${document2.node.path}`
                 },
-                /* @__PURE__ */ React__default.createElement(BiFile, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
-                /* @__PURE__ */ React__default.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block truncate mb-1" }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, hasTitle ? (_a3 = document2.node._sys) == null ? void 0 : _a3.title : document2.node._sys.filename)), /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400" }, document2.node._sys.path))
-              )
-            ),
-            hasTitle && /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Filename"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, document2.node._sys.filename))),
-            /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Extension"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
-            /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400 mb-1 uppercase" }, "Template"), /* @__PURE__ */ React__default.createElement("span", { className: "h-5 leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
-            /* @__PURE__ */ React__default.createElement("td", { className: "w-0" }, /* @__PURE__ */ React__default.createElement(
-              OverflowMenu$1,
-              {
-                toolbarItems: [
+                /* @__PURE__ */ React__default.createElement("td", { className: "pl-5 pr-3 py-3" }, /* @__PURE__ */ React__default.createElement(
+                  "a",
                   {
-                    name: "edit",
-                    label: "Edit in Admin",
-                    Icon: /* @__PURE__ */ React__default.createElement(BiEdit, { size: "1.3rem" }),
-                    onMouseDown: () => {
-                      const pathToDoc = document2.node._sys.breadcrumbs;
-                      if (folder.fullyQualifiedName) {
-                        pathToDoc.unshift("~");
-                      }
+                    className: "text-blue-600 flex items-center gap-3 cursor-pointer truncate",
+                    onClick: () => {
                       navigate(
                         `/${[
                           "collections",
-                          "edit",
                           collectionName,
-                          ...pathToDoc
+                          document2.node.path
                         ].join("/")}`,
                         { replace: true }
                       );
                     }
                   },
-                  allowCreate && {
-                    name: "duplicate",
-                    label: "Duplicate",
-                    Icon: /* @__PURE__ */ React__default.createElement(BiCopy, { size: "1.3rem" }),
-                    onMouseDown: () => {
-                      const pathToDoc = document2.node._sys.breadcrumbs;
-                      if (folder.fullyQualifiedName) {
-                        pathToDoc.unshift("~");
-                      }
-                      navigate(
-                        `/${[
-                          "collections",
-                          "duplicate",
-                          collectionName,
-                          ...pathToDoc
-                        ].join("/")}`,
-                        { replace: true }
-                      );
-                    }
+                  /* @__PURE__ */ React__default.createElement(BiFolder, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
+                  /* @__PURE__ */ React__default.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block truncate" }, /* @__PURE__ */ React__default.createElement("span", null, document2.node.name)))
+                )),
+                /* @__PURE__ */ React__default.createElement(
+                  "td",
+                  {
+                    className: "px-3 py-3",
+                    colSpan: 4
                   },
-                  allowDelete && {
-                    name: "rename",
-                    label: "Rename",
-                    Icon: /* @__PURE__ */ React__default.createElement(BiRename, { size: "1.3rem" }),
-                    onMouseDown: () => {
-                      setVars((old) => ({
-                        ...old,
-                        collection: collectionName,
-                        relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
-                          "/"
-                        ),
-                        relativePath: document2.node._sys.breadcrumbs.join(
-                          "/"
-                        ) + document2.node._sys.extension,
-                        newRelativePath: ""
-                      }));
-                      setRenameModalOpen(true);
+                  /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-400 truncate" }, document2.node.path.substring(2).split("/").map((node3) => {
+                    return /* @__PURE__ */ React__default.createElement("span", { key: node3 }, /* @__PURE__ */ React__default.createElement("span", { className: "text-gray-300 pr-0.5" }, "/"), /* @__PURE__ */ React__default.createElement("span", { className: "pr-0.5" }, node3));
+                  }))
+                )
+              );
+            }
+            const hasTitle = Boolean(
+              document2.node._sys.title
+            );
+            const subfolders = document2.node._sys.breadcrumbs.slice(0, -1).join("/");
+            return /* @__PURE__ */ React__default.createElement(
+              "tr",
+              {
+                className: tableRowStyle,
+                key: `document-${document2.node._sys.relativePath}`
+              },
+              /* @__PURE__ */ React__default.createElement(
+                "td",
+                {
+                  className: "pl-5 pr-3 py-3",
+                  colSpan: hasTitle ? 1 : 2
+                },
+                /* @__PURE__ */ React__default.createElement(
+                  "a",
+                  {
+                    className: "text-blue-600 flex items-center gap-3 cursor-pointer truncate",
+                    onClick: () => {
+                      handleNavigate(
+                        navigate,
+                        cms,
+                        collection,
+                        collectionDefinition,
+                        document2.node
+                      );
                     }
                   },
-                  allowDelete && {
-                    name: "delete",
-                    label: "Delete",
-                    Icon: /* @__PURE__ */ React__default.createElement(
-                      BiTrash,
-                      {
-                        size: "1.3rem",
-                        className: "text-red-500"
+                  /* @__PURE__ */ React__default.createElement(BiFile, { className: "inline-block h-6 w-auto flex-shrink-0 opacity-70" }),
+                  /* @__PURE__ */ React__default.createElement("span", { className: "truncate block" }, /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block truncate mb-1" }, !folderView && !hasTitle && subfolders && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, hasTitle ? (_a3 = document2.node._sys) == null ? void 0 : _a3.title : document2.node._sys.filename)), /* @__PURE__ */ React__default.createElement("span", { className: "block text-xs text-gray-400" }, document2.node._sys.path))
+                )
+              ),
+              hasTitle && /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900 truncate" }, !folderView && subfolders && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-gray-400" }, `${subfolders}/`), /* @__PURE__ */ React__default.createElement("span", null, document2.node._sys.filename))),
+              /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.extension)),
+              /* @__PURE__ */ React__default.createElement("td", { className: "px-3 py-3" }, /* @__PURE__ */ React__default.createElement("span", { className: "leading-5 block text-sm font-medium text-gray-900" }, document2.node._sys.template)),
+              /* @__PURE__ */ React__default.createElement("td", { className: "w-0" }, /* @__PURE__ */ React__default.createElement(
+                OverflowMenu$1,
+                {
+                  toolbarItems: [
+                    {
+                      name: "edit",
+                      label: "Edit in Admin",
+                      Icon: /* @__PURE__ */ React__default.createElement(BiEdit, { size: "1.3rem" }),
+                      onMouseDown: () => {
+                        const pathToDoc = document2.node._sys.breadcrumbs;
+                        if (folder.fullyQualifiedName) {
+                          pathToDoc.unshift(
+                            "~"
+                          );
+                        }
+                        navigate(
+                          `/${[
+                            "collections",
+                            "edit",
+                            collectionName,
+                            ...pathToDoc
+                          ].join("/")}`,
+                          { replace: true }
+                        );
+                      }
+                    },
+                    allowCreate && {
+                      name: "duplicate",
+                      label: "Duplicate",
+                      Icon: /* @__PURE__ */ React__default.createElement(BiCopy, { size: "1.3rem" }),
+                      onMouseDown: () => {
+                        const pathToDoc = document2.node._sys.breadcrumbs;
+                        if (folder.fullyQualifiedName) {
+                          pathToDoc.unshift(
+                            "~"
+                          );
+                        }
+                        navigate(
+                          `/${[
+                            "collections",
+                            "duplicate",
+                            collectionName,
+                            ...pathToDoc
+                          ].join("/")}`,
+                          { replace: true }
+                        );
+                      }
+                    },
+                    allowDelete && {
+                      name: "rename",
+                      label: "Rename",
+                      Icon: /* @__PURE__ */ React__default.createElement(BiRename, { size: "1.3rem" }),
+                      onMouseDown: () => {
+                        setVars((old) => ({
+                          ...old,
+                          collection: collectionName,
+                          relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
+                            "/"
+                          ),
+                          relativePath: document2.node._sys.breadcrumbs.join(
+                            "/"
+                          ) + document2.node._sys.extension,
+                          newRelativePath: ""
+                        }));
+                        setRenameModalOpen(
+                          true
+                        );
+                      }
+                    },
+                    allowDelete && {
+                      name: "delete",
+                      label: "Delete",
+                      Icon: /* @__PURE__ */ React__default.createElement(
+                        BiTrash,
+                        {
+                          size: "1.3rem",
+                          className: "text-red-500"
+                        }
+                      ),
+                      className: "text-red-500",
+                      onMouseDown: () => {
+                        setVars((old) => ({
+                          ...old,
+                          collection: collectionName,
+                          relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
+                            "/"
+                          ),
+                          relativePath: document2.node._sys.breadcrumbs.join(
+                            "/"
+                          ) + document2.node._sys.extension,
+                          newRelativePath: ""
+                        }));
+                        setDeleteModalOpen(
+                          true
+                        );
                       }
-                    ),
-                    className: "text-red-500",
-                    onMouseDown: () => {
-                      setVars((old) => ({
-                        ...old,
-                        collection: collectionName,
-                        relativePathWithoutExtension: document2.node._sys.breadcrumbs.join(
-                          "/"
-                        ),
-                        relativePath: document2.node._sys.breadcrumbs.join(
-                          "/"
-                        ) + document2.node._sys.extension,
-                        newRelativePath: ""
-                      }));
-                      setDeleteModalOpen(true);
                     }
-                  }
-                ].filter(Boolean)
-              }
-            ))
-          );
-        })))), documents.length === 0 && /* @__PURE__ */ React__default.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React__default.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React__default.createElement(
+                  ].filter(Boolean)
+                }
+              ))
+            );
+          })));
+        })())), documents.length === 0 && /* @__PURE__ */ React__default.createElement(NoDocumentsPlaceholder, null), /* @__PURE__ */ React__default.createElement("div", { className: "pt-4" }, /* @__PURE__ */ React__default.createElement(
           CursorPaginator,
           {
             variant: "white",