tinacms 2.9.1 → 2.9.3

package/dist/index.mjs

@@ -15,7 +15,7 @@ import { isHotkey } from "is-hotkey";
 import clsx$1, { clsx } from "clsx";
 import { Slot } from "@radix-ui/react-slot";
 import { isLangSupported, formatCodeBlock, insertEmptyCodeBlock, unwrapCodeBlock, isCodeBlockEmpty, isSelectionAtCodeBlockStart } from "@udecode/plate-code-block";
-import { X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, PaintBucket, Quote, ChevronRight, ChevronsUpDown, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Settings, Strikethrough, Subscript, Superscript, Table, Text as Text$2, Underline, Link2Off, Eye, SeparatorHorizontal, Moon, SunMedium, Twitter, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, LoaderCircle, TriangleAlert, EllipsisVertical, List as List$1, ListOrdered, Grid3x3Icon, Link, Unlink } from "lucide-react";
+import { X, Search, ChevronDown, Check, AlertTriangle, BracesIcon, Plus, AlignCenter as AlignCenter$1, AlignJustify, AlignLeft as AlignLeft$1, AlignRight as AlignRight$1, PaintBucket, Quote, ChevronRight, ChevronsUpDown, FileCode, Baseline, RectangleVertical, Combine, Ungroup, MessageSquare, MessageSquarePlus, Trash, GripVertical, Edit2, Smile, ExternalLink, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Indent, Keyboard, WrapText, Minus, MoreHorizontal, Outdent, Pilcrow, RotateCcw, RectangleHorizontal, Settings, Strikethrough, Subscript, Superscript, Table, Text as Text$2, Underline, Link2Off, Eye, SeparatorHorizontal, Moon, SunMedium, Twitter, PaintBucketIcon, CombineIcon, SquareSplitHorizontalIcon, Grid2X2Icon, Trash2Icon, ArrowUp, ArrowDown, XIcon, ArrowLeft, ArrowRight, EraserIcon, ChevronDownIcon as ChevronDownIcon$1, LoaderCircle, TriangleAlert, EllipsisVertical, GitBranchIcon, List as List$1, ListOrdered, Grid3x3Icon, Link, Unlink } from "lucide-react";
 import mermaid from "mermaid";
 import { cva } from "class-variance-authority";
 import { Command as Command$2 } from "cmdk";
@@ -100,8 +100,14 @@ const Modal = (props) => {
     portalNode
   );
 };
-const ModalActions = ({ children }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between gap-4 items-center px-5 pb-5 rounded-b-md" }, children);
+const ModalActions = ({ align = "between", children }) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `w-full flex flex-wrap-reverse justify-${align} gap-4 items-center px-5 pb-5 rounded-b-md`
+    },
+    children
+  );
 };
 const ModalBody = ({ className = "", padded = false, ...props }) => /* @__PURE__ */ React__default.createElement(
   "div",
@@ -716,12 +722,84 @@ const CircleCheck = ({ ...props }) => /* @__PURE__ */ React.createElement(
   },
   /* @__PURE__ */ React.createElement("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-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" })
 );
+const TinaExtendedIcon = ({ ...props }) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    viewBox: "0 0 1020 254",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M115.685 110.921C132.719 98.699 135.293 42.2913 140.63 20.6271C145.968 -1.03697 168.043 0.0618098 168.043 0.0618098C168.043 0.0618098 162.312 10.0353 164.649 17.478C166.987 24.9207 183 31.5735 183 31.5735L179.546 40.6787C179.546 40.6787 172.334 39.7562 168.043 48.3408C156.833 70.7637 176.368 136.236 176.368 136.236C176.368 136.236 145.007 180.759 145.007 214.282C145.007 235.763 155.174 253.765 155.174 253.765H140.907C140.907 253.765 119.978 228.858 115.685 216.41C111.393 203.962 113.109 191.515 113.109 191.515C113.109 191.515 90.3595 190.227 70.1863 191.515C50.0132 192.802 36.5597 210.144 34.1316 219.844C31.7036 229.544 30.6978 253.765 30.6978 253.765H19.4169C12.5507 232.576 7.09751 224.982 10.0558 214.282C18.2501 184.647 16.6405 167.839 14.7433 160.352C12.846 152.866 0 146.331 0 146.331C6.29266 133.511 16.4152 127.265 40.3455 126.708C67.9751 126.066 98.6519 123.142 115.685 110.921Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M44.113 213.041C44.113 213.041 47.0281 240.018 62.5148 253.765H75.7865C62.5148 238.73 61.0676 199.54 61.0676 199.54C54.3171 201.738 44.9715 209.607 44.113 213.041Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M290 124V153.6H261.6V195.6C261.6 205 265 208.6 277.2 208.6C281.4 208.6 286.6 208.2 291.6 207.8V237C286.2 238.2 277.4 239.6 266.4 239.6C231.6 239.6 225.2 219.6 225.2 204.2V153.6H207.2V124H225.2V106.2L259.6 90.4H261.6V124H290Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M320.581 81.2H359.781V110.4H320.581V81.2ZM302.781 153.6V124H359.581V236H323.181V153.6H302.781Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M420.022 138.8H423.622C427.222 127.6 435.022 120 457.022 120C480.022 120 497.422 131.2 497.422 158.4V236H461.022V169.2C461.022 157 454.222 151.4 443.022 151.4C430.422 151.4 423.422 157.6 423.422 172.8V236H387.022V124H420.022V138.8Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M592.605 219H590.605C584.805 229.8 571.005 238.8 554.005 238.8C529.005 238.8 516.205 226.4 516.205 207C516.205 187.8 527.605 176.6 548.805 173.2L580.405 168.2C587.405 167 589.205 163.2 589.205 159.8V157.6C589.205 152.6 585.605 146.4 573.605 146.4C563.405 146.4 557.405 151 556.805 158.8H522.005C523.405 136.2 538.805 120 572.005 120C606.805 120 624.005 134 624.005 156.4V206.8H636.605V236H592.605V219ZM589.205 192.4V183H587.205C585.205 185.2 582.405 186.8 578.005 187.8L563.205 191.4C556.605 193 553.405 196.8 553.405 203C553.405 210.4 558.205 214.2 567.805 214.2C582.005 214.2 589.205 204.4 589.205 192.4Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M726.356 200H747.356C743.756 227.8 728.556 240 700.956 240C666.356 240 650.756 219.6 650.756 180C650.756 145.8 662.756 120 700.956 120C732.956 120 743.556 137.2 746.356 160H725.156C723.156 145.4 716.156 136.6 700.956 136.6C680.956 136.6 671.356 149.8 671.356 180C671.356 208 679.356 223 700.956 223C715.956 223 724.156 214.6 726.356 200Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M846.18 139.6H848.18C851.78 128 860.38 120 874.38 120C892.98 120 900.58 132.4 900.58 158.4V236H880.58V161.6C880.58 148 877.78 138.8 865.78 138.8C854.18 138.8 847.78 148.8 847.78 167.4V236H828.18V161.6C828.18 148.2 824.98 138.8 813.58 138.8C799.78 138.8 795.18 149.8 795.18 169.2V236H775.18V124H793.98V139.6H796.38C800.58 127.2 807.78 120 821.98 120C835.38 120 842.78 126.8 846.18 139.6Z",
+      fill: "#EC4815"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M1018.2 155H996.6C995.2 143.4 989.2 135.6 973.6 135.6C961.6 135.6 951 140.6 951 151.8C951 159.4 954.8 164.6 965.8 167.2L988.4 172.4C1009 177 1020 188 1020 205.2C1020 224.8 1007 240 975.6 240C947.8 240 931 229.6 927 205H950C953.2 219.2 961.6 224.4 976 224.4C988 224.4 999.2 220 999.2 207.2C999.2 199.6 994.4 193.8 982 190.8L955.6 184.6C940.4 181 930.6 171.2 930.6 154C930.6 134 945.8 120 974 120C1006 120 1016.4 137.8 1018.2 155Z",
+      fill: "#EC4815"
+    }
+  )
+);
 const ModalHeader = ({ children, close: close2 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "h-14 flex items-center justify-between px-5 border-b border-gray-200 m-0" }, /* @__PURE__ */ React.createElement(ModalTitle, null, children), close2 && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "h-14 flex items-center px-5 border-b border-gray-200 m-0" }, /* @__PURE__ */ React.createElement(TinaIcon, { className: "w-10 h-auto -ml-1 mr-1 my-1 fill-tina-orange" }), /* @__PURE__ */ React.createElement(ModalTitle, null, children), close2 && /* @__PURE__ */ React.createElement(
     "div",
     {
       onClick: close2,
-      className: "flex items-center fill-gray-400 cursor-pointer transition-colors duration-100 ease-out hover:fill-gray-700"
+      className: "ml-auto flex justify-self-end items-center fill-gray-400 cursor-pointer transition-colors duration-100 ease-out hover:fill-gray-700"
     },
     /* @__PURE__ */ React.createElement(CloseIcon, { className: "w-6 h-auto" })
   ));
@@ -36981,7 +37059,7 @@ const DropdownMenuLabel = withVariants(
   dropdownMenuLabelVariants,
   ["inset"]
 );
-const DropdownMenuSeparator = withCn(
+const DropdownMenuSeparator$1 = withCn(
   DropdownMenuPrimitive.Separator,
   "-mx-1 my-1 h-px bg-muted"
 );
@@ -38915,9 +38993,6 @@ 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 MdOutlineSaveAlt(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 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67 2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z" }, "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);
 }
@@ -39155,10 +39230,10 @@ const Button$1 = ({
 }) => {
   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-blue-500 hover:bg-blue-600 focus:ring-blue-500 border-0`,
-    secondary: `shadow text-gray-500 hover:text-blue-500 bg-gray-50 hover:bg-white border border-gray-100`,
-    white: `shadow text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-100`,
-    ghost: `text-gray-500 hover:text-blue-500 hover:shadow border border-transparent border-0 hover:border hover:border-gray-200 bg-transparent`,
+    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: ""
@@ -39208,7 +39283,7 @@ const IconButton = ({
 }) => {
   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-blue-500 hover:bg-blue-600 focus:ring-blue-500`,
+    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`,
@@ -39380,6 +39455,176 @@ const Message = ({
     ))
   );
 };
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-base max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ));
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer text-gray-700 hover:text-blue-500",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+const DropdownButton = React.forwardRef(
+  ({
+    variant = "primary",
+    size: size2 = "medium",
+    busy,
+    disabled,
+    rounded = "full",
+    children,
+    className = "",
+    onMainAction,
+    items: items2,
+    showSplitButton = true,
+    ...props
+  }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    if (!onMainAction || !showSplitButton) {
+      return /* @__PURE__ */ React.createElement(DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+        Button$1,
+        {
+          variant,
+          size: size2,
+          busy,
+          disabled,
+          rounded,
+          className: cn$1("gap-2", className),
+          ...props
+        },
+        children,
+        /* @__PURE__ */ React.createElement(
+          ChevronDownIcon$1,
+          {
+            className: cn$1(
+              "h-4 w-4 transition-transform duration-200",
+              open && "rotate-180"
+            )
+          }
+        )
+      )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom", className: "z-[100000]" }, items2.map((item, index) => /* @__PURE__ */ React.createElement(
+        DropdownMenuItem,
+        {
+          key: index,
+          onClick: item.onClick,
+          disabled: item.disabled,
+          variant: item.variant
+        },
+        item.icon && item.icon,
+        item.label
+      ))));
+    }
+    return /* @__PURE__ */ React.createElement("div", { className: cn$1("inline-flex", className) }, /* @__PURE__ */ React.createElement(
+      Button$1,
+      {
+        variant,
+        size: size2,
+        busy,
+        disabled,
+        rounded: "left",
+        onClick: onMainAction,
+        className: "border-r-0 w-full",
+        ...props
+      },
+      children
+    ), /* @__PURE__ */ React.createElement(DropdownMenu, { open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, null, /* @__PURE__ */ React.createElement(
+      Button$1,
+      {
+        variant,
+        size: size2,
+        busy,
+        disabled,
+        rounded: "right",
+        className: "px-4 border-l",
+        style: { borderColor: "#00000030" },
+        "aria-label": "More options"
+      },
+      /* @__PURE__ */ React.createElement(
+        ChevronDownIcon$1,
+        {
+          className: cn$1(
+            "h-4 w-4 transition-transform duration-200 fill-none",
+            open && "rotate-180"
+          ),
+          style: { fill: "none" }
+        }
+      )
+    )), /* @__PURE__ */ React.createElement(DropdownMenuContent, { align: "end", side: "bottom" }, items2.map((item, index) => {
+      var _a2;
+      return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, /* @__PURE__ */ React.createElement(
+        DropdownMenuItem,
+        {
+          onClick: item.onClick,
+          disabled: item.disabled,
+          variant: item.variant
+        },
+        item.icon && item.icon,
+        item.label
+      ), item.variant === "destructive" && index < items2.length - 1 && ((_a2 = items2[index + 1]) == null ? void 0 : _a2.variant) !== "destructive" && /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null));
+    }))));
+  }
+);
+DropdownButton.displayName = "DropdownButton";
 function useCMS() {
   return useCMS$1();
 }
@@ -43253,7 +43498,7 @@ let Alerts$1 = class Alerts {
       ...eventsToAlerts
     };
   }
-  add(level, message, timeout = 4e3) {
+  add(level, message, timeout = 8e3) {
     const alert = {
       level,
       message,
@@ -44304,9 +44549,6 @@ const CopyField = ({ label, description, value }) => {
     )
   ), description && /* @__PURE__ */ React__default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, description));
 };
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 const checkerboardStyle = {
   backgroundImage: "linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%)",
   backgroundSize: "12px 12px",
@@ -45239,14 +45481,14 @@ const Callout = ({
     children
   );
 };
-const LocalWarning = () => {
+const LocalWarning = ({ className = "" }) => {
   var _a2, _b;
   const cms = useCMS$1();
   const isLocalMode = (_b = (_a2 = cms.api) == null ? void 0 : _a2.tina) == null ? void 0 : _b.isLocalMode;
   if (!isLocalMode) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(Callout, { calloutStyle: "warning", className: "w-fit" }, /* @__PURE__ */ React.createElement("a", { href: "https://tina.io/docs/r/what-is-tinacloud/", target: "_blank" }, "You are in local mode"));
+  return /* @__PURE__ */ React.createElement(Callout, { calloutStyle: "warning", className: cn("w-fit", className) }, /* @__PURE__ */ React.createElement("a", { href: "https://tina.io/docs/r/what-is-tinacloud/", target: "_blank" }, "You are in local mode"));
 };
 const BillingWarning = () => {
   var _a2;
@@ -45987,7 +46229,7 @@ function formatDistanceToNow(dirtyDate, options) {
   requiredArgs(1, arguments);
   return formatDistance2(dirtyDate, Date.now(), options);
 }
-const version$1 = "2.9.1";
+const version$1 = "2.9.3";
 const VersionInfo = () => {
   var _a2, _b, _c, _d, _e, _f;
   const cms = useCMS();
@@ -46223,7 +46465,7 @@ const Nav = ({
         toggleMenu();
       }
     },
-    /* @__PURE__ */ React.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
+    /* @__PURE__ */ React.createElement(BiMenu, { className: "h-8 w-auto text-gray-600" })
   )), /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -46244,8 +46486,8 @@ const Nav = ({
           toggleMenu();
         }
       },
-      /* @__PURE__ */ React.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
-    ), /* @__PURE__ */ React.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800/80 flex-1 gap-1" }, /* @__PURE__ */ React.createElement(TinaIcon, { className: "w-10 h-auto -ml-1 fill-orange-500" }), /* @__PURE__ */ React.createElement("span", null, "TinaCMS"))),
+      /* @__PURE__ */ React.createElement(BiMenu, { className: "h-8 w-auto text-gray-600" })
+    ), /* @__PURE__ */ React.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800/80 flex-1 gap-1" }, /* @__PURE__ */ React.createElement(TinaExtendedIcon, { className: "h-8 w-auto fill-orange-500" }))),
     children,
     /* @__PURE__ */ React.createElement("div", { className: "flex flex-col px-6 flex-1 overflow-auto" }, showCollections && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h4", { className: "flex space-x-1 justify-items-start uppercase font-sans font-bold text-sm mb-3 mt-8 text-gray-700" }, /* @__PURE__ */ React.createElement("span", null, "Collections"), isLocalMode && /* @__PURE__ */ React.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(
       "a",
@@ -46495,60 +46737,6 @@ function BreadcrumbEllipsis({
     /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "More")
   );
 }
-function DropdownMenu({
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
-}
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Trigger,
-    {
-      "data-slot": "dropdown-menu-trigger",
-      ...props
-    }
-  );
-}
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Content,
-    {
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-base max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-        className
-      ),
-      ...props
-    }
-  ));
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(
-    DropdownMenuPrimitive.Item,
-    {
-      "data-slot": "dropdown-menu-item",
-      "data-inset": inset,
-      "data-variant": variant,
-      className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
 const Item = ({
   item,
   depth,
@@ -46817,7 +47005,6 @@ const FormBreadcrumbs = ({
     DropdownMenuItem,
     {
       key: breadcrumb.formId,
-      className: "cursor-pointer text-gray-700 hover:text-blue-500",
       onClick: (e3) => {
         e3.preventDefault();
         goBack(breadcrumb.formId, breadcrumb.formName);
@@ -47145,7 +47332,7 @@ const updateBodyDisplacement = ({
 };
 const SidebarHeader = ({ isLocalMode }) => {
   const { toggleSidebarOpen, toggleMenu } = React.useContext(SidebarContext);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "p-2 flex-grow-0 w-full" }, !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "p-2 flex-grow-0 w-full" }, !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "w-full flex justify-between items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex overflow-hidden py-1" }, /* @__PURE__ */ React.createElement(
     "button",
     {
       className: "p-2 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded",
@@ -47153,8 +47340,8 @@ const SidebarHeader = ({ isLocalMode }) => {
       title: "Open navigation menu",
       "aria-label": "Open navigation menu"
     },
-    /* @__PURE__ */ React.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
-  ), /* @__PURE__ */ React.createElement(BranchButton, null), /* @__PURE__ */ React.createElement("div", { className: "px-4" }, /* @__PURE__ */ React.createElement(LocalWarning, null))), /* @__PURE__ */ React.createElement("div", { className: "flex" }, /* @__PURE__ */ React.createElement(BranchPreviewButton, null), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(BiMenu, { className: "h-8 w-auto text-gray-600" })
+  ), /* @__PURE__ */ React.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500 mr-2" }), /* @__PURE__ */ React.createElement(BranchButton, { className: "overflow-hidden mr-2" }), /* @__PURE__ */ React.createElement(LocalWarning, { className: "px-4" })), /* @__PURE__ */ React.createElement("div", { className: "flex" }, /* @__PURE__ */ React.createElement(BranchPreviewButton, null), /* @__PURE__ */ React.createElement(
     "button",
     {
       type: "button",
@@ -48001,10 +48188,7 @@ const BranchModal = ({ close: close2 }) => {
     }
   ))));
 };
-const trimPrefix = (branchName) => {
-  return branchName.replace(/^tina\//, "");
-};
-const BranchButton = () => {
+const BranchButton = ({ className = "" }) => {
   const [open, setOpen] = React.useState(false);
   const { currentBranch } = useBranchData();
   const cms = useCMS();
@@ -48014,22 +48198,19 @@ const BranchButton = () => {
   }
   const isProtected = cms.api.tina.usingProtectedBranch();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "button",
+    Button$1,
     {
+      variant: "secondary",
+      size: "custom",
       className: cn(
-        `pointer-events-auto px-3 py-3 flex shrink gap-1 items-center justify-between form-select text-sm shadow transition-color duration-150 ease-out rounded-lg`,
-        `focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out `,
-        isProtected ? "text-white hover:text-blue-50 bg-blue-500 hover:bg-blue-400 border-0" : "text-gray-500 hover:text-blue-500 bg-white hover:bg-gray-50 border border-gray-100"
+        "pointer-events-auto px-3 py-3 flex shrink gap-1 items-center justify-between",
+        className
       ),
-      onClick: () => setOpen(true)
+      onClick: () => setOpen(true),
+      title: currentBranch
     },
-    isProtected ? /* @__PURE__ */ React.createElement(BiLockAlt, { className: "flex-shrink-0 h-4 w-auto opacity-70 text-white" }) : /* @__PURE__ */ React.createElement(
-      BiGitBranch,
-      {
-        className: `flex-shrink-0 h-4 w-auto opacity-70 text-zinc-400`
-      }
-    ),
-    /* @__PURE__ */ React.createElement("span", { className: "truncate max-w-full -mr-1" }, trimPrefix(currentBranch)),
+    isProtected ? /* @__PURE__ */ React.createElement(BiLockAlt, { className: "flex-shrink-0 h-6 w-auto opacity-70" }) : /* @__PURE__ */ React.createElement(BiGitBranch, { className: "flex-shrink-0 h-6 w-auto opacity-70 text-zinc-400" }),
+    /* @__PURE__ */ React.createElement("span", { className: "truncate max-w-full -mr-1" }, currentBranch),
     /* @__PURE__ */ React.createElement(
       BiChevronDown,
       {
@@ -48059,7 +48240,7 @@ const BranchPreviewButton = (props) => {
       className: "p-2 text-gray-500 hover:text-blue-500 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded",
       ...props,
       onClick: () => {
-        window.open(previewUrl, "_blank");
+        window.open("", "_blank");
       },
       title: "Preview site in new tab"
     },
@@ -64034,13 +64215,7 @@ const CreateBranchModal = ({
             )
           ) : isActive ? /* @__PURE__ */ React.createElement(AiOutlineLoading, { className: "animate-spin text-lg" }) : stepNumber
         ),
-        /* @__PURE__ */ React.createElement("div", { className: "text-center max-w-24" }, /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: `text-sm font-semibold leading-tight ${isActive ? "text-blue-600" : isCompleted ? "text-green-600" : "text-gray-400"}`
-          },
-          step.name
-        ), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-400 mt-1 leading-tight" }, step.description))
+        /* @__PURE__ */ React.createElement("div", { className: "text-center max-w-24" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-semibold leading-tight" }, step.name), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-400 mt-1 leading-tight" }, step.description))
       );
     })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-medium text-gray-700" }, "Step ", currentStep > steps.length ? steps.length : currentStep, " of", " ", steps.length), isExecuting && currentStep > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500" }, /* @__PURE__ */ React.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React.createElement(
       "path",
@@ -64077,17 +64252,19 @@ const CreateBranchModal = ({
     if (isExecuting) {
       return renderProgressIndicator();
     } else {
-      return /* @__PURE__ */ React.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-red-700 py-2 px-3 mb-4 bg-red-50 border border-red-200 rounded" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-700 mb-4 max-w-sm" }, "To make changes, you need to create a copy then get it approved and merged for it to go live. Learn more about", " ", /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-red-700 py-2 px-3 mb-4 bg-red-50 border border-red-200 rounded" }, /* @__PURE__ */ React.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-700 mb-4 max-w-sm" }, "To make changes, create a copy then get it approved and merged for it to go live.", " ", /* @__PURE__ */ React.createElement(
         "a",
         {
-          className: "underline hover:text-tina-orange",
+          className: "underline text-tina-orange-dark font-medium",
           href: "https://tina.io/docs/tinacloud/editorial-workflow",
           target: "_blank"
         },
         "Editorial Workflow"
-      ), "."), /* @__PURE__ */ React.createElement(
+      )), /* @__PURE__ */ React.createElement(
         PrefixedTextField,
         {
+          name: "new-branch-name",
+          label: "Branch Name",
           placeholder: "e.g. {{PAGE-NAME}}-updates",
           value: newBranchName,
           onChange: (e3) => {
@@ -64099,42 +64276,49 @@ const CreateBranchModal = ({
       ));
     }
   };
-  return /* @__PURE__ */ React.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React.createElement(ModalHeader, { close: isExecuting ? void 0 : close2 }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(BiGitBranch, { className: "w-6 h-auto mr-1 text-blue-500 opacity-70" }), "Create Branch"))), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, renderStateContent()), !isExecuting && /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(Button$1, { style: { flexGrow: 1 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React.createElement(
-    Button$1,
+  return /* @__PURE__ */ React.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React.createElement(ModalHeader, { close: isExecuting ? void 0 : close2 }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, "Save changes to new branch"))), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, renderStateContent()), !isExecuting && /* @__PURE__ */ React.createElement(ModalActions, { align: "end" }, /* @__PURE__ */ React.createElement(Button$1, { variant: "secondary", className: "w-full sm:w-auto" }, "Cancel"), /* @__PURE__ */ React.createElement(
+    DropdownButton,
     {
       variant: "primary",
-      style: { flexGrow: 2 },
+      align: "start",
+      className: "w-full sm:w-auto",
       disabled: newBranchName === "" || disabled,
-      onClick: executeEditorialWorkflow
-    },
-    "Continue"
-  ), /* @__PURE__ */ React.createElement(
-    OverflowMenu$1,
-    {
-      className: "-ml-2",
-      toolbarItems: [
+      onMainAction: executeEditorialWorkflow,
+      items: [
         {
-          name: "override",
           label: "Save to Protected Branch",
-          Icon: /* @__PURE__ */ React.createElement(MdOutlineSaveAlt, { size: "1rem" }),
-          onMouseDown: () => {
+          onClick: () => {
             close2();
             safeSubmit();
-          }
+          },
+          icon: /* @__PURE__ */ React.createElement(TriangleAlert, { className: "w-4 h-4" })
         }
       ]
-    }
+    },
+    /* @__PURE__ */ React.createElement(
+      GitBranchIcon,
+      {
+        className: "w-4 h-4 mr-1",
+        style: { fill: "none" }
+      }
+    ),
+    "Save to a new branch"
   ))));
 };
-const PrefixedTextField = ({ prefix = "tina/", ...props }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "border border-gray-200 focus-within:border-blue-200 bg-gray-100 focus-within:bg-blue-100 rounded shadow-sm focus-within:shadow-outline overflow-hidden flex items-stretch divide-x divide-gray-200 focus-within:divide-blue-100 w-full transition-all ease-out duration-150" }, /* @__PURE__ */ React.createElement("span", { className: "pl-3 pr-2 py-2 font-medium text-base text-gray-700 opacity-50" }, prefix), /* @__PURE__ */ React.createElement(
+const PrefixedTextField = ({
+  label = null,
+  prefix = "tina/",
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, label && /* @__PURE__ */ React.createElement(FieldLabel, { name: props.name }, label), /* @__PURE__ */ React.createElement("div", { className: "border border-gray-200 focus-within:border-blue-200 bg-gray-100 focus-within:bg-blue-100 rounded shadow-sm focus-within:shadow-outline overflow-hidden flex items-stretch divide-x divide-gray-200 focus-within:divide-blue-100 w-full transition-all ease-out duration-150" }, /* @__PURE__ */ React.createElement("span", { className: "pl-3 pr-2 py-2 text-base text-tina-orange-dark bg-tina-orange-light" }, prefix), /* @__PURE__ */ React.createElement(
     "input",
     {
+      id: props.name,
       type: "text",
       className: "shadow-inner focus:outline-none block text-base placeholder:text-gray-300 px-3 py-2 text-gray-600 flex-1 bg-white focus:text-gray-900",
       ...props
     }
-  ));
+  )));
 };
 const NestedForm = (props) => {
   const FormPortal = useFormPortal();
@@ -65470,9 +65654,9 @@ const editorVariants = cva(
         ai: "w-full px-0 text-base md:text-sm",
         aiChat: "max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm",
         comment: cn$2("rounded-none border-none bg-transparent text-sm"),
-        default: "size-full px-16 pt-2 text-base sm:px-[max(24px,calc(50%-350px))]",
-        demo: "size-full px-16 pt-2 text-base sm:px-[max(24px,calc(50%-350px))]",
-        fullWidth: "size-full px-16 pt-4 pb-72 text-base sm:px-12",
+        default: "size-full px-2 sm:px-4 pt-2 text-base",
+        demo: "size-full px-2 sm:px-4 pt-2 text-base h-[650px]",
+        fullWidth: "size-full px-2 sm:px-4 pt-4 pb-72 text-base",
         none: "",
         select: "px-3 py-2 text-base data-readonly:w-fit"
       }
@@ -65904,7 +66088,7 @@ const EmbedButton = ({ editor, templates }) => {
       className: "w-full p-2 border border-gray-300 rounded",
       onChange: filterChange
     }
-  ), /* @__PURE__ */ React__default.createElement(DropdownMenuSeparator, null), filteredTemplates.map((template) => /* @__PURE__ */ React__default.createElement(
+  ), /* @__PURE__ */ React__default.createElement(DropdownMenuSeparator$1, null), filteredTemplates.map((template) => /* @__PURE__ */ React__default.createElement(
     DropdownMenuItem$1,
     {
       key: template.name,
@@ -119276,7 +119460,7 @@ class LocalSearchClient {
   }
 }
 function ModalBuilder(modalProps) {
-  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(ModalPopup, null, /* @__PURE__ */ React__default.createElement(ModalHeader, null, /* @__PURE__ */ React__default.createElement(TinaIcon, { className: "w-10 h-auto -ml-1 mr-1 my-1 fill-orange-500" }), modalProps.title), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, modalProps.message && (typeof modalProps.message === "string" ? /* @__PURE__ */ React__default.createElement("p", null, modalProps.message) : modalProps.message), modalProps.error && /* @__PURE__ */ React__default.createElement(ErrorLabel, null, modalProps.error), modalProps.children), /* @__PURE__ */ React__default.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React__default.createElement(AsyncButton, { key: action.name, ...action })))));
+  return /* @__PURE__ */ React__default.createElement(Modal, null, /* @__PURE__ */ React__default.createElement(ModalPopup, null, /* @__PURE__ */ React__default.createElement(ModalHeader, null, modalProps.title), /* @__PURE__ */ React__default.createElement(ModalBody, { padded: true }, modalProps.message && (typeof modalProps.message === "string" ? /* @__PURE__ */ React__default.createElement("p", null, modalProps.message) : modalProps.message), modalProps.error && /* @__PURE__ */ React__default.createElement(ErrorLabel, null, modalProps.error), modalProps.children), /* @__PURE__ */ React__default.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React__default.createElement(AsyncButton, { key: action.name, ...action })))));
 }
 const ErrorLabel = ({ style = {}, ...props }) => /* @__PURE__ */ React__default.createElement("p", { style: { ...style, color: "var(--tina-color-error)" }, ...props });
 const AsyncButton = ({ name, primary, action }) => {
@@ -120490,7 +120674,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 pl-4 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React__default.createElement(LocalWarning, null), /* @__PURE__ */ React__default.createElement(BillingWarning, null), /* @__PURE__ */ React__default.createElement("div", { className: "flex justify-between items-center" }, /* @__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(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);
 };
 const PageHeader = ({
   children
@@ -120972,7 +121156,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-blue-500 bg-white hover:bg-[#f1f5f9] focus:ring-white focus:ring-blue-500 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 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",
               collection.templates && "opacity-50 pointer-events-none cursor-not-allowed"
             ),
             "aria-disabled": !!collection.templates,
@@ -121010,7 +121194,7 @@ const CollectionListPage = () => {
               "new",
               collectionName
             ].join("/")}`,
-            className: "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-white bg-blue-500 hover:bg-blue-600 w-full md:w-auto text-sm h-10 px-6"
+            className: "inline-flex items-center font-medium focus:ring-2 focus:outline-none focus:ring-tina-orange-dark focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-white bg-tina-orange-dark hover:bg-tina-orange w-full md:w-auto text-sm h-10 px-6"
           },
           /* @__PURE__ */ React__default.createElement(FaFile, { className: "mr-2" }),
           "Add File"
@@ -122578,6 +122762,7 @@ export {
   Dismissible,
   DragHandle,
   DragIcon,
+  DropdownButton,
   DummyMediaStore,
   DuplicateIcon,
   EditIcon,
@@ -122707,6 +122892,7 @@ export {
   TinaCloudAuthProvider,
   TinaCloudAuthWall,
   TinaCloudProvider,
+  TinaExtendedIcon,
   TinaField,
   TinaForm,
   TinaIcon,