tinacms 2.9.1 → 2.9.3

package/dist/index.js

@@ -73,8 +73,14 @@ var __publicField = (obj, key, value) => {
       portalNode
     );
   };
-  const ModalActions = ({ children }) => {
-    return /* @__PURE__ */ React__namespace.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__namespace.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.createElement(
     "div",
@@ -689,12 +695,84 @@ var __publicField = (obj, key, value) => {
     },
     /* @__PURE__ */ React__namespace.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__namespace.createElement(
+    "svg",
+    {
+      viewBox: "0 0 1020 254",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props
+    },
+    /* @__PURE__ */ React__namespace.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__namespace.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__namespace.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__namespace.createElement(
+      "path",
+      {
+        d: "M320.581 81.2H359.781V110.4H320.581V81.2ZM302.781 153.6V124H359.581V236H323.181V153.6H302.781Z",
+        fill: "#EC4815"
+      }
+    ),
+    /* @__PURE__ */ React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement("div", { className: "h-14 flex items-center justify-between px-5 border-b border-gray-200 m-0" }, /* @__PURE__ */ React__namespace.createElement(ModalTitle, null, children), close2 && /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement("div", { className: "h-14 flex items-center px-5 border-b border-gray-200 m-0" }, /* @__PURE__ */ React__namespace.createElement(TinaIcon, { className: "w-10 h-auto -ml-1 mr-1 my-1 fill-tina-orange" }), /* @__PURE__ */ React__namespace.createElement(ModalTitle, null, children), close2 && /* @__PURE__ */ React__namespace.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__namespace.createElement(CloseIcon, { className: "w-6 h-auto" })
     ));
@@ -36954,7 +37032,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
     dropdownMenuLabelVariants,
     ["inset"]
   );
-  const DropdownMenuSeparator = cn$2.withCn(
+  const DropdownMenuSeparator$1 = cn$2.withCn(
     DropdownMenuPrimitive__namespace.Separator,
     "-mx-1 my-1 h-px bg-muted"
   );
@@ -38888,9 +38966,6 @@ Please wrap them with useCallback or configure the deps array correctly.`
   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);
   }
@@ -39128,10 +39203,10 @@ Please wrap them with useCallback or configure the deps array correctly.`
   }) => {
     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: ""
@@ -39181,7 +39256,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
   }) => {
     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`,
@@ -39353,6 +39428,176 @@ Please wrap them with useCallback or configure the deps array correctly.`
       ))
     );
   };
+  function cn(...inputs) {
+    return tailwindMerge.twMerge(clsx.clsx(inputs));
+  }
+  function DropdownMenu({
+    ...props
+  }) {
+    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Root, { "data-slot": "dropdown-menu", ...props });
+  }
+  function DropdownMenuTrigger({
+    ...props
+  }) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      DropdownMenuPrimitive__namespace.Trigger,
+      {
+        "data-slot": "dropdown-menu-trigger",
+        ...props
+      }
+    );
+  }
+  function DropdownMenuContent({
+    className,
+    sideOffset = 4,
+    ...props
+  }) {
+    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Portal, null, /* @__PURE__ */ React__namespace.createElement(
+      DropdownMenuPrimitive__namespace.Content,
+      {
+        "data-slot": "dropdown-menu-content",
+        sideOffset,
+        className: cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-base max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        ),
+        ...props
+      }
+    ));
+  }
+  function DropdownMenuItem({
+    className,
+    inset,
+    variant = "default",
+    ...props
+  }) {
+    return /* @__PURE__ */ React__namespace.createElement(
+      DropdownMenuPrimitive__namespace.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__namespace.createElement(
+      DropdownMenuPrimitive__namespace.Separator,
+      {
+        "data-slot": "dropdown-menu-separator",
+        className: cn("bg-border -mx-1 my-1 h-px", className),
+        ...props
+      }
+    );
+  }
+  const DropdownButton = React__namespace.forwardRef(
+    ({
+      variant = "primary",
+      size: size2 = "medium",
+      busy,
+      disabled,
+      rounded = "full",
+      children,
+      className = "",
+      onMainAction,
+      items: items2,
+      showSplitButton = true,
+      ...props
+    }, ref) => {
+      const [open, setOpen] = React__namespace.useState(false);
+      if (!onMainAction || !showSplitButton) {
+        return /* @__PURE__ */ React__namespace.createElement(DropdownMenu, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React__namespace.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React__namespace.createElement(
+          Button$1,
+          {
+            variant,
+            size: size2,
+            busy,
+            disabled,
+            rounded,
+            className: cn$1("gap-2", className),
+            ...props
+          },
+          children,
+          /* @__PURE__ */ React__namespace.createElement(
+            lucideReact.ChevronDownIcon,
+            {
+              className: cn$1(
+                "h-4 w-4 transition-transform duration-200",
+                open && "rotate-180"
+              )
+            }
+          )
+        )), /* @__PURE__ */ React__namespace.createElement(DropdownMenuContent, { align: "end", side: "bottom", className: "z-[100000]" }, items2.map((item, index) => /* @__PURE__ */ React__namespace.createElement(
+          DropdownMenuItem,
+          {
+            key: index,
+            onClick: item.onClick,
+            disabled: item.disabled,
+            variant: item.variant
+          },
+          item.icon && item.icon,
+          item.label
+        ))));
+      }
+      return /* @__PURE__ */ React__namespace.createElement("div", { className: cn$1("inline-flex", className) }, /* @__PURE__ */ React__namespace.createElement(
+        Button$1,
+        {
+          variant,
+          size: size2,
+          busy,
+          disabled,
+          rounded: "left",
+          onClick: onMainAction,
+          className: "border-r-0 w-full",
+          ...props
+        },
+        children
+      ), /* @__PURE__ */ React__namespace.createElement(DropdownMenu, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__namespace.createElement(DropdownMenuTrigger, null, /* @__PURE__ */ React__namespace.createElement(
+        Button$1,
+        {
+          variant,
+          size: size2,
+          busy,
+          disabled,
+          rounded: "right",
+          className: "px-4 border-l",
+          style: { borderColor: "#00000030" },
+          "aria-label": "More options"
+        },
+        /* @__PURE__ */ React__namespace.createElement(
+          lucideReact.ChevronDownIcon,
+          {
+            className: cn$1(
+              "h-4 w-4 transition-transform duration-200 fill-none",
+              open && "rotate-180"
+            ),
+            style: { fill: "none" }
+          }
+        )
+      )), /* @__PURE__ */ React__namespace.createElement(DropdownMenuContent, { align: "end", side: "bottom" }, items2.map((item, index) => {
+        var _a2;
+        return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, { key: index }, /* @__PURE__ */ React__namespace.createElement(
+          DropdownMenuItem,
+          {
+            onClick: item.onClick,
+            disabled: item.disabled,
+            variant: item.variant
+          },
+          item.icon && item.icon,
+          item.label
+        ), item.variant === "destructive" && index < items2.length - 1 && ((_a2 = items2[index + 1]) == null ? void 0 : _a2.variant) !== "destructive" && /* @__PURE__ */ React__namespace.createElement(DropdownMenuSeparator, null));
+      }))));
+    }
+  );
+  DropdownButton.displayName = "DropdownButton";
   function useCMS() {
     return useCMS$1();
   }
@@ -43226,7 +43471,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
         ...eventsToAlerts
       };
     }
-    add(level, message, timeout = 4e3) {
+    add(level, message, timeout = 8e3) {
       const alert = {
         level,
         message,
@@ -44277,9 +44522,6 @@ Please wrap them with useCallback or configure the deps array correctly.`
       )
     ), description && /* @__PURE__ */ React.createElement("p", { className: "mt-2 text-sm text-gray-500" }, description));
   };
-  function cn(...inputs) {
-    return tailwindMerge.twMerge(clsx.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",
@@ -45212,14 +45454,14 @@ Please wrap them with useCallback or configure the deps array correctly.`
       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__namespace.createElement(Callout, { calloutStyle: "warning", className: "w-fit" }, /* @__PURE__ */ React__namespace.createElement("a", { href: "https://tina.io/docs/r/what-is-tinacloud/", target: "_blank" }, "You are in local mode"));
+    return /* @__PURE__ */ React__namespace.createElement(Callout, { calloutStyle: "warning", className: cn("w-fit", className) }, /* @__PURE__ */ React__namespace.createElement("a", { href: "https://tina.io/docs/r/what-is-tinacloud/", target: "_blank" }, "You are in local mode"));
   };
   const BillingWarning = () => {
     var _a2;
@@ -45960,7 +46202,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
     requiredArgs(1, arguments);
     return formatDistance(dirtyDate, Date.now(), options);
   }
-  const version$1 = "2.9.1";
+  const version$1 = "2.9.3";
   const VersionInfo = () => {
     var _a2, _b, _c, _d, _e, _f;
     const cms = useCMS();
@@ -46196,7 +46438,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
           toggleMenu();
         }
       },
-      /* @__PURE__ */ React__namespace.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
+      /* @__PURE__ */ React__namespace.createElement(BiMenu, { className: "h-8 w-auto text-gray-600" })
     )), /* @__PURE__ */ React__namespace.createElement(
       "div",
       {
@@ -46217,8 +46459,8 @@ Please wrap them with useCallback or configure the deps array correctly.`
             toggleMenu();
           }
         },
-        /* @__PURE__ */ React__namespace.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
-      ), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800/80 flex-1 gap-1" }, /* @__PURE__ */ React__namespace.createElement(TinaIcon, { className: "w-10 h-auto -ml-1 fill-orange-500" }), /* @__PURE__ */ React__namespace.createElement("span", null, "TinaCMS"))),
+        /* @__PURE__ */ React__namespace.createElement(BiMenu, { className: "h-8 w-auto text-gray-600" })
+      ), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-left inline-flex items-center text-xl tracking-wide text-gray-800/80 flex-1 gap-1" }, /* @__PURE__ */ React__namespace.createElement(TinaExtendedIcon, { className: "h-8 w-auto fill-orange-500" }))),
       children,
       /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col px-6 flex-1 overflow-auto" }, showCollections && /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.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__namespace.createElement("span", null, "Collections"), isLocalMode && /* @__PURE__ */ React__namespace.createElement("span", { className: "flex items-center" }, /* @__PURE__ */ React__namespace.createElement(
         "a",
@@ -46468,60 +46710,6 @@ Please wrap them with useCallback or configure the deps array correctly.`
       /* @__PURE__ */ React__namespace.createElement("span", { className: "sr-only" }, "More")
     );
   }
-  function DropdownMenu({
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Root, { "data-slot": "dropdown-menu", ...props });
-  }
-  function DropdownMenuTrigger({
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(
-      DropdownMenuPrimitive__namespace.Trigger,
-      {
-        "data-slot": "dropdown-menu-trigger",
-        ...props
-      }
-    );
-  }
-  function DropdownMenuContent({
-    className,
-    sideOffset = 4,
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(DropdownMenuPrimitive__namespace.Portal, null, /* @__PURE__ */ React__namespace.createElement(
-      DropdownMenuPrimitive__namespace.Content,
-      {
-        "data-slot": "dropdown-menu-content",
-        sideOffset,
-        className: cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-base max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        ),
-        ...props
-      }
-    ));
-  }
-  function DropdownMenuItem({
-    className,
-    inset,
-    variant = "default",
-    ...props
-  }) {
-    return /* @__PURE__ */ React__namespace.createElement(
-      DropdownMenuPrimitive__namespace.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,
@@ -46790,7 +46978,6 @@ Please wrap them with useCallback or configure the deps array correctly.`
       DropdownMenuItem,
       {
         key: breadcrumb.formId,
-        className: "cursor-pointer text-gray-700 hover:text-blue-500",
         onClick: (e3) => {
           e3.preventDefault();
           goBack(breadcrumb.formId, breadcrumb.formName);
@@ -47118,7 +47305,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
   };
   const SidebarHeader = ({ isLocalMode }) => {
     const { toggleSidebarOpen, toggleMenu } = React__namespace.useContext(SidebarContext);
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("div", { className: "p-2 flex-grow-0 w-full" }, !isLocalMode && /* @__PURE__ */ React__namespace.createElement(BillingWarning, null), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full flex justify-between items-center" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex" }, /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement("div", { className: "p-2 flex-grow-0 w-full" }, !isLocalMode && /* @__PURE__ */ React__namespace.createElement(BillingWarning, null), /* @__PURE__ */ React__namespace.createElement("div", { className: "w-full flex justify-between items-center" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex overflow-hidden py-1" }, /* @__PURE__ */ React__namespace.createElement(
       "button",
       {
         className: "p-2 hover:bg-gray-100 transition-colors duration-150 ease-in-out rounded",
@@ -47126,8 +47313,8 @@ Please wrap them with useCallback or configure the deps array correctly.`
         title: "Open navigation menu",
         "aria-label": "Open navigation menu"
       },
-      /* @__PURE__ */ React__namespace.createElement(BiMenu, { className: "h-6 w-auto text-gray-600" })
-    ), /* @__PURE__ */ React__namespace.createElement(BranchButton, null), /* @__PURE__ */ React__namespace.createElement("div", { className: "px-4" }, /* @__PURE__ */ React__namespace.createElement(LocalWarning, null))), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex" }, /* @__PURE__ */ React__namespace.createElement(BranchPreviewButton, null), /* @__PURE__ */ React__namespace.createElement(
+      /* @__PURE__ */ React__namespace.createElement(BiMenu, { className: "h-8 w-auto text-gray-600" })
+    ), /* @__PURE__ */ React__namespace.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500 mr-2" }), /* @__PURE__ */ React__namespace.createElement(BranchButton, { className: "overflow-hidden mr-2" }), /* @__PURE__ */ React__namespace.createElement(LocalWarning, { className: "px-4" })), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex" }, /* @__PURE__ */ React__namespace.createElement(BranchPreviewButton, null), /* @__PURE__ */ React__namespace.createElement(
       "button",
       {
         type: "button",
@@ -47974,10 +48161,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
       }
     ))));
   };
-  const trimPrefix = (branchName) => {
-    return branchName.replace(/^tina\//, "");
-  };
-  const BranchButton = () => {
+  const BranchButton = ({ className = "" }) => {
     const [open, setOpen] = React__namespace.useState(false);
     const { currentBranch } = useBranchData();
     const cms = useCMS();
@@ -47987,22 +48171,19 @@ Please wrap them with useCallback or configure the deps array correctly.`
     }
     const isProtected = cms.api.tina.usingProtectedBranch();
     return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.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__namespace.createElement(BiLockAlt, { className: "flex-shrink-0 h-4 w-auto opacity-70 text-white" }) : /* @__PURE__ */ React__namespace.createElement(
-        BiGitBranch,
-        {
-          className: `flex-shrink-0 h-4 w-auto opacity-70 text-zinc-400`
-        }
-      ),
-      /* @__PURE__ */ React__namespace.createElement("span", { className: "truncate max-w-full -mr-1" }, trimPrefix(currentBranch)),
+      isProtected ? /* @__PURE__ */ React__namespace.createElement(BiLockAlt, { className: "flex-shrink-0 h-6 w-auto opacity-70" }) : /* @__PURE__ */ React__namespace.createElement(BiGitBranch, { className: "flex-shrink-0 h-6 w-auto opacity-70 text-zinc-400" }),
+      /* @__PURE__ */ React__namespace.createElement("span", { className: "truncate max-w-full -mr-1" }, currentBranch),
       /* @__PURE__ */ React__namespace.createElement(
         BiChevronDown,
         {
@@ -48032,7 +48213,7 @@ Please wrap them with useCallback or configure the deps array correctly.`
         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"
       },
@@ -64007,13 +64188,7 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
               )
             ) : isActive ? /* @__PURE__ */ React__namespace.createElement(AiOutlineLoading, { className: "animate-spin text-lg" }) : stepNumber
           ),
-          /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center max-w-24" }, /* @__PURE__ */ React__namespace.createElement(
-            "div",
-            {
-              className: `text-sm font-semibold leading-tight ${isActive ? "text-blue-600" : isCompleted ? "text-green-600" : "text-gray-400"}`
-            },
-            step.name
-          ), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs text-gray-400 mt-1 leading-tight" }, step.description))
+          /* @__PURE__ */ React__namespace.createElement("div", { className: "text-center max-w-24" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-semibold leading-tight" }, step.name), /* @__PURE__ */ React__namespace.createElement("div", { className: "text-xs text-gray-400 mt-1 leading-tight" }, step.description))
         );
       })), /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-medium text-gray-700" }, "Step ", currentStep > steps.length ? steps.length : currentStep, " of", " ", steps.length), isExecuting && currentStep > 0 && /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center gap-1 text-sm text-gray-500" }, /* @__PURE__ */ React__namespace.createElement("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React__namespace.createElement(
         "path",
@@ -64050,17 +64225,19 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
       if (isExecuting) {
         return renderProgressIndicator();
       } else {
-        return /* @__PURE__ */ React__namespace.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React__namespace.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__namespace.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React__namespace.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React__namespace.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__namespace.createElement(
+        return /* @__PURE__ */ React__namespace.createElement("div", { className: "max-w-sm" }, errorMessage && /* @__PURE__ */ React__namespace.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__namespace.createElement(BiError, { className: "w-5 h-auto text-red-400 flex-shrink-0" }), /* @__PURE__ */ React__namespace.createElement("span", { className: "text-sm" }, /* @__PURE__ */ React__namespace.createElement("b", null, "Error:"), " ", errorMessage)), /* @__PURE__ */ React__namespace.createElement("p", { className: "text-lg text-gray-700 font-bold mb-2" }, "First, let's create a copy"), /* @__PURE__ */ React__namespace.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__namespace.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__namespace.createElement(
+        )), /* @__PURE__ */ React__namespace.createElement(
           PrefixedTextField,
           {
+            name: "new-branch-name",
+            label: "Branch Name",
             placeholder: "e.g. {{PAGE-NAME}}-updates",
             value: newBranchName,
             onChange: (e3) => {
@@ -64072,42 +64249,49 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
         ));
       }
     };
-    return /* @__PURE__ */ React__namespace.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React__namespace.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: isExecuting ? void 0 : close2 }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React__namespace.createElement(BiGitBranch, { className: "w-6 h-auto mr-1 text-blue-500 opacity-70" }), "Create Branch"))), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, renderStateContent()), !isExecuting && /* @__PURE__ */ React__namespace.createElement(ModalActions, null, /* @__PURE__ */ React__namespace.createElement(Button$1, { style: { flexGrow: 1 }, onClick: close2 }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
-      Button$1,
+    return /* @__PURE__ */ React__namespace.createElement(Modal, { className: "flex" }, /* @__PURE__ */ React__namespace.createElement(PopupModal, { className: "w-auto" }, /* @__PURE__ */ React__namespace.createElement(ModalHeader, { close: isExecuting ? void 0 : close2 }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center justify-between w-full" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex items-center" }, "Save changes to new branch"))), /* @__PURE__ */ React__namespace.createElement(ModalBody, { padded: true }, renderStateContent()), !isExecuting && /* @__PURE__ */ React__namespace.createElement(ModalActions, { align: "end" }, /* @__PURE__ */ React__namespace.createElement(Button$1, { variant: "secondary", className: "w-full sm:w-auto" }, "Cancel"), /* @__PURE__ */ React__namespace.createElement(
+      DropdownButton,
       {
         variant: "primary",
-        style: { flexGrow: 2 },
+        align: "start",
+        className: "w-full sm:w-auto",
         disabled: newBranchName === "" || disabled,
-        onClick: executeEditorialWorkflow
-      },
-      "Continue"
-    ), /* @__PURE__ */ React__namespace.createElement(
-      OverflowMenu$1,
-      {
-        className: "-ml-2",
-        toolbarItems: [
+        onMainAction: executeEditorialWorkflow,
+        items: [
           {
-            name: "override",
             label: "Save to Protected Branch",
-            Icon: /* @__PURE__ */ React__namespace.createElement(MdOutlineSaveAlt, { size: "1rem" }),
-            onMouseDown: () => {
+            onClick: () => {
               close2();
               safeSubmit();
-            }
+            },
+            icon: /* @__PURE__ */ React__namespace.createElement(lucideReact.TriangleAlert, { className: "w-4 h-4" })
           }
         ]
-      }
+      },
+      /* @__PURE__ */ React__namespace.createElement(
+        lucideReact.GitBranchIcon,
+        {
+          className: "w-4 h-4 mr-1",
+          style: { fill: "none" }
+        }
+      ),
+      "Save to a new branch"
     ))));
   };
-  const PrefixedTextField = ({ prefix = "tina/", ...props }) => {
-    return /* @__PURE__ */ React__namespace.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__namespace.createElement("span", { className: "pl-3 pr-2 py-2 font-medium text-base text-gray-700 opacity-50" }, prefix), /* @__PURE__ */ React__namespace.createElement(
+  const PrefixedTextField = ({
+    label = null,
+    prefix = "tina/",
+    ...props
+  }) => {
+    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, label && /* @__PURE__ */ React__namespace.createElement(FieldLabel, { name: props.name }, label), /* @__PURE__ */ React__namespace.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__namespace.createElement("span", { className: "pl-3 pr-2 py-2 text-base text-tina-orange-dark bg-tina-orange-light" }, prefix), /* @__PURE__ */ React__namespace.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();
@@ -65443,9 +65627,9 @@ mutation DeleteDocument($collection: String!, $relativePath: String!){
           ai: "w-full px-0 text-base md:text-sm",
           aiChat: "max-h-[min(70vh,320px)] w-full max-w-[700px] overflow-y-auto px-3 py-2 text-base md:text-sm",
           comment: cn$2.cn("rounded-none border-none bg-transparent text-sm"),
-          default: "size-full px-16 pt-2 text-base sm:px-[max(24px,calc(50%-350px))]",
-          demo: "size-full px-16 pt-2 text-base sm:px-[max(24px,calc(50%-350px))]",
-          fullWidth: "size-full px-16 pt-4 pb-72 text-base sm:px-12",
+          default: "size-full px-2 sm:px-4 pt-2 text-base",
+          demo: "size-full px-2 sm:px-4 pt-2 text-base h-[650px]",
+          fullWidth: "size-full px-2 sm:px-4 pt-4 pb-72 text-base",
           none: "",
           select: "px-3 py-2 text-base data-readonly:w-fit"
         }
@@ -65877,7 +66061,7 @@ flowchart TD
         className: "w-full p-2 border border-gray-300 rounded",
         onChange: filterChange
       }
-    ), /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null), filteredTemplates.map((template) => /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React.createElement(DropdownMenuSeparator$1, null), filteredTemplates.map((template) => /* @__PURE__ */ React.createElement(
       DropdownMenuItem$1,
       {
         key: template.name,
@@ -119249,7 +119433,7 @@ mutation addPendingDocumentMutation(
     }
   }
   function ModalBuilder(modalProps) {
-    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, null, /* @__PURE__ */ React.createElement(TinaIcon, { className: "w-10 h-auto -ml-1 mr-1 my-1 fill-orange-500" }), modalProps.title), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, modalProps.message && (typeof modalProps.message === "string" ? /* @__PURE__ */ React.createElement("p", null, modalProps.message) : modalProps.message), modalProps.error && /* @__PURE__ */ React.createElement(ErrorLabel, null, modalProps.error), modalProps.children), /* @__PURE__ */ React.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React.createElement(AsyncButton, { key: action.name, ...action })))));
+    return /* @__PURE__ */ React.createElement(Modal, null, /* @__PURE__ */ React.createElement(ModalPopup, null, /* @__PURE__ */ React.createElement(ModalHeader, null, modalProps.title), /* @__PURE__ */ React.createElement(ModalBody, { padded: true }, modalProps.message && (typeof modalProps.message === "string" ? /* @__PURE__ */ React.createElement("p", null, modalProps.message) : modalProps.message), modalProps.error && /* @__PURE__ */ React.createElement(ErrorLabel, null, modalProps.error), modalProps.children), /* @__PURE__ */ React.createElement(ModalActions, null, modalProps.actions.map((action) => /* @__PURE__ */ React.createElement(AsyncButton, { key: action.name, ...action })))));
   }
   const ErrorLabel = ({ style = {}, ...props }) => /* @__PURE__ */ React.createElement("p", { style: { ...style, color: "var(--tina-color-error)" }, ...props });
   const AsyncButton = ({ name, primary, action }) => {
@@ -120463,7 +120647,7 @@ This will work when developing locally but NOT when deployed to production.
     headerClassName,
     children
   }) => {
-    return /* @__PURE__ */ React.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React.createElement("div", { className: `py-2 pl-4 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React.createElement(BranchButton, null), /* @__PURE__ */ React.createElement(BranchPreviewButton, null))), children);
+    return /* @__PURE__ */ React.createElement("div", { className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100" }, /* @__PURE__ */ React.createElement("div", { className: `py-2 pr-4 w-full ${headerClassName}` }, /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React.createElement(TinaIcon, { className: "self-center h-10 min-w-10 w-auto text-orange-500" }), /* @__PURE__ */ React.createElement(BranchButton, null), /* @__PURE__ */ React.createElement(BranchPreviewButton, null))), children);
   };
   const PageHeader = ({
     children
@@ -120945,7 +121129,7 @@ This will work when developing locally but NOT when deployed to production.
               },
               to: "/collections/new-folder",
               className: cn$1(
-                "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-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,
@@ -120983,7 +121167,7 @@ This will work when developing locally but NOT when deployed to production.
                 "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.createElement(FaFile, { className: "mr-2" }),
             "Add File"
@@ -122558,6 +122742,7 @@ This will work when developing locally but NOT when deployed to production.
   exports2.Dismissible = Dismissible;
   exports2.DragHandle = DragHandle;
   exports2.DragIcon = DragIcon;
+  exports2.DropdownButton = DropdownButton;
   exports2.DummyMediaStore = DummyMediaStore;
   exports2.DuplicateIcon = DuplicateIcon;
   exports2.EditIcon = EditIcon;
@@ -122686,6 +122871,7 @@ This will work when developing locally but NOT when deployed to production.
   exports2.TinaCloudAuthProvider = TinaCloudAuthProvider;
   exports2.TinaCloudAuthWall = TinaCloudAuthWall;
   exports2.TinaCloudProvider = TinaCloudProvider;
+  exports2.TinaExtendedIcon = TinaExtendedIcon;
   exports2.TinaField = TinaField;
   exports2.TinaForm = TinaForm;
   exports2.TinaIcon = TinaIcon;