Merge branch 'feat-base-ui-migration' of https://github.com/makeplane/plane into chore-base-ui-menu

fix: removed all instances of headless ui's Menu
chore: implemented menu using base ui
2025-08-14 18:43:32 +05:30 · 2025-08-13 15:56:07 +05:30 · 2025-08-12 18:29:29 +05:30 · 2025-08-12 01:22:18 +05:30 · 2025-08-12 01:03:42 +05:30 · 2025-08-11 18:47:15 +05:30
16 changed files with 623 additions and 1031 deletions
@@ -1,14 +1,13 @@
 "use client";

-import { Fragment, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme as useNextTheme } from "next-themes";
 import { LogOut, UserCog2, Palette } from "lucide-react";
-import { Menu, Transition } from "@headlessui/react";
 // plane internal packages
 import { API_BASE_URL } from "@plane/constants";
 import { AuthService } from "@plane/services";
-import { Avatar } from "@plane/ui";
+import { Avatar, CustomMenu } from "@plane/ui";
 import { getFileURL, cn } from "@plane/utils";
 // hooks
 import { useTheme, useUser } from "@/hooks/store";
@@ -33,42 +32,32 @@ export const AdminSidebarDropdown = observer(() => {
  const handleSignOut = () => signOut();

  const getSidebarMenuItems = () => (
-    <Menu.Items
-      className={cn(
-        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none",
-        {
-          "left-4": isSidebarCollapsed,
-        }
-      )}
-    >
+    <>
      <div className="flex flex-col gap-2.5 pb-2">
        <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
      </div>
      <div className="py-2">
-        <Menu.Item
-          as="button"
-          type="button"
+        <CustomMenu.MenuItem
          className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
          onClick={handleThemeSwitch}
        >
          <Palette className="h-4 w-4 stroke-[1.5]" />
          Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
-        </Menu.Item>
+        </CustomMenu.MenuItem>
      </div>
-      <div className="py-2">
+      <CustomMenu.MenuItem className="w-full">
        <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`} onSubmit={handleSignOut}>
          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-          <Menu.Item
-            as="button"
+          <button
            type="submit"
-            className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+            className="flex w-full items-center gap-2 rounded px-2 hover:bg-custom-sidebar-background-80"
          >
            <LogOut className="h-4 w-4 stroke-[1.5]" />
            Sign out
-          </Menu.Item>
+          </button>
        </form>
-      </div>
-    </Menu.Items>
+      </CustomMenu.MenuItem>
+    </>
  );

  useEffect(() => {
@@ -84,30 +73,20 @@ export const AdminSidebarDropdown = observer(() => {
            isSidebarCollapsed ? "justify-center" : ""
          }`}
        >
-          <Menu as="div" className="flex-shrink-0">
-            <Menu.Button
-              className={cn("grid place-items-center outline-none", {
-                "cursor-default": !isSidebarCollapsed,
-              })}
-            >
+          <CustomMenu
+            optionsClassName="relative flex-shrink-0 overflow-auto"
+            customButtonClassName={cn("grid place-items-center outline-none", {
+              "cursor-default": !isSidebarCollapsed,
+            })}
+            disabled={!isSidebarCollapsed}
+            customButton={
              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
                <UserCog2 className="h-5 w-5 text-custom-text-200" />
              </div>
-            </Menu.Button>
-            {isSidebarCollapsed && (
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-100"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
-              >
-                {getSidebarMenuItems()}
-              </Transition>
-            )}
-          </Menu>
+            }
+          >
+            {getSidebarMenuItems()}
+          </CustomMenu>

          {!isSidebarCollapsed && (
            <div className="flex w-full gap-2">
@@ -118,8 +97,9 @@ export const AdminSidebarDropdown = observer(() => {
      </div>

      {!isSidebarCollapsed && currentUser && (
-        <Menu as="div" className="relative flex-shrink-0">
-          <Menu.Button className="grid place-items-center outline-none">
+        <CustomMenu
+          optionsClassName="relative flex-shrink-0 overflow-auto"
+          customButton={
            <Avatar
              name={currentUser.display_name}
              src={getFileURL(currentUser.avatar_url)}
@@ -127,20 +107,10 @@ export const AdminSidebarDropdown = observer(() => {
              shape="square"
              className="!text-base"
            />
-          </Menu.Button>
-
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            {getSidebarMenuItems()}
-          </Transition>
-        </Menu>
+          }
+        >
+          {getSidebarMenuItems()}
+        </CustomMenu>
      )}
    </div>
  );
@@ -2,10 +2,10 @@ import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Check, MessageSquare, MoreVertical, X } from "lucide-react";
-import { Menu, Transition } from "@headlessui/react";
 // plane imports
 import { EditorRefApi } from "@plane/editor";
 import { TIssuePublicComment } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
 import { getFileURL } from "@plane/utils";
 // components
 import { LiteTextEditor } from "@/components/editor";
@@ -156,60 +156,20 @@ export const CommentCard: React.FC<Props> = observer((props) => {
      </div>

      {!isInIframe && currentUser?.id === comment?.actor_detail?.id && (
-        <Menu as="div" className="relative w-min text-left">
-          <Menu.Button
-            type="button"
-            onClick={() => {}}
-            className="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-custom-background-80 hover:text-custom-text-100"
+        <CustomMenu
+          className="relative w-min text-left"
+          customButtonClassName="relative grid cursor-pointer place-items-center rounded p-1 text-custom-text-200 outline-none hover:bg-custom-background-80 hover:text-custom-text-100"
+          customButton={<MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />}
+        >
+          <CustomMenu.MenuItem
+            onClick={() => {
+              setIsEditing(true);
+            }}
          >
-            <MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
-          </Menu.Button>
-
-          <Transition
-            as={React.Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items className="absolute right-0 z-10 mt-1 max-h-36 min-w-[8rem] origin-top-right overflow-auto overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 p-1 text-xs shadow-lg focus:outline-none">
-              <Menu.Item>
-                {({ active }) => (
-                  <div className="py-1">
-                    <button
-                      type="button"
-                      onClick={() => {
-                        setIsEditing(true);
-                      }}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
-                        active ? "bg-custom-background-80" : ""
-                      }`}
-                    >
-                      Edit
-                    </button>
-                  </div>
-                )}
-              </Menu.Item>
-              <Menu.Item>
-                {({ active }) => (
-                  <div className="py-1">
-                    <button
-                      type="button"
-                      onClick={handleDelete}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
-                        active ? "bg-custom-background-80" : ""
-                      }`}
-                    >
-                      Delete
-                    </button>
-                  </div>
-                )}
-              </Menu.Item>
-            </Menu.Items>
-          </Transition>
-        </Menu>
+            Edit
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem onClick={handleDelete}>Delete</CustomMenu.MenuItem>
+        </CustomMenu>
      )}
    </div>
  );
@@ -2,9 +2,9 @@

 import { FC, useState } from "react";
 import { observer } from "mobx-react";
-import { Menu, Transition } from "@headlessui/react";
 // ui
-import { cn, getFileURL } from "@plane/utils";
+import { CustomMenu } from "@plane/ui";
+import { getFileURL } from "@plane/utils";
 // helpers
 // hooks
 import { useUser } from "@/hooks/store";
@@ -33,45 +33,32 @@ export const SwitchAccountDropdown: FC<TSwitchAccountDropdownProps> = observer((
  return (
    <>
      <SwitchAccountModal isOpen={showSwitchAccountModal} onClose={() => setShowSwitchAccountModal(false)} />
-      <Menu as="div" className="relative">
-        <Menu.Button className="flex items-center gap-x-2.5 px-2 py-1.5 rounded-lg bg-custom-background-90 z-10">
-          <div className="size-6 rounded-full bg-green-700 flex items-center justify-center text-white font-semibold text-sm capitalize">
-            {user?.avatar_url ? (
-              <img
-                src={getFileURL(user?.avatar_url)}
-                alt={user?.display_name}
-                className="w-full h-full rounded-full object-cover"
-              />
-            ) : (
-              <>{fullName?.[0] ?? "R"}</>
-            )}
-          </div>
-          <span className="text-sm font-medium text-custom-text-200">{displayName}</span>
-        </Menu.Button>
-        <Transition
-          enter="transition duration-100 ease-out"
-          enterFrom="transform scale-95 opacity-0"
-          enterTo="transform scale-100 opacity-100"
-          leave="transition duration-75 ease-out"
-          leaveFrom="transform scale-100 opacity-100"
-          leaveTo="transform scale-95 opacity-0"
+      <CustomMenu
+        customButtonClassName="flex items-center gap-x-2.5 px-2 py-1.5 rounded-lg bg-custom-background-90 z-10 w-max"
+        customButton={
+          <>
+            <div className="size-6 rounded-full bg-green-700 flex items-center justify-center text-white font-semibold text-sm capitalize">
+              {user?.avatar_url ? (
+                <img
+                  src={getFileURL(user?.avatar_url)}
+                  alt={user?.display_name}
+                  className="w-full h-full rounded-full object-cover"
+                />
+              ) : (
+                <>{fullName?.[0] ?? "R"}</>
+              )}
+            </div>
+            <span className="text-sm font-medium text-custom-text-200">{displayName}</span>
+          </>
+        }
+      >
+        <CustomMenu.MenuItem
+          className="text-red-500 px-1 py-1.5 whitespace-nowrap text-left rounded w-full"
+          onClick={() => setShowSwitchAccountModal(true)}
        >
-          <Menu.Items className="absolute z-10 right-0 rounded-md border-[0.5px] border-custom-border-300 mt-2 bg-custom-background-100 px-2 py-2.5 text-sm min-w-[12rem] shadow-custom-shadow-rg">
-            <Menu.Item
-              as="button"
-              type="button"
-              className={({ active }) =>
-                cn("text-red-500 px-1 py-1.5 whitespace-nowrap text-left rounded w-full", {
-                  "bg-custom-background-80": active,
-                })
-              }
-              onClick={() => setShowSwitchAccountModal(true)}
-            >
-              Wrong e-mail address?
-            </Menu.Item>
-          </Menu.Items>
-        </Transition>
-      </Menu>
+          Wrong e-mail address?
+        </CustomMenu.MenuItem>
+      </CustomMenu>
    </>
  );
 });
@@ -4,10 +4,10 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { Check, Settings, UserPlus } from "lucide-react";
 // plane imports
-import { Menu } from "@headlessui/react";
 import { EUserPermissions } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { IWorkspace } from "@plane/types";
+import { CustomMenu } from "@plane/ui";
 import { cn, getFileURL, getUserRole } from "@plane/utils";
 // helpers
 // plane web imports
@@ -38,8 +38,7 @@ const SidebarDropdownItem = observer((props: TProps) => {
      className="w-full"
      id={workspace.id}
    >
-      <Menu.Item
-        as="div"
+      <CustomMenu.MenuItem
        className={cn("px-4 py-2", {
          "bg-custom-sidebar-background-90": workspace.id === activeWorkspace?.id,
          "hover:bg-custom-sidebar-background-90": workspace.id !== activeWorkspace?.id,
@@ -111,7 +110,7 @@ const SidebarDropdownItem = observer((props: TProps) => {
            </div>
          </>
        )}
-      </Menu.Item>
+      </CustomMenu.MenuItem>
    </Link>
  );
 });
@@ -1,18 +1,14 @@
 "use client";

-import { Fragment, Ref, useState, useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { usePopper } from "react-popper";
 // icons
 import { LogOut, PanelLeftDashed, Settings } from "lucide-react";
-// ui
-import { Menu, Transition } from "@headlessui/react";
 // plane imports
 import { GOD_MODE_URL } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { Avatar, TOAST_TYPE, setToast } from "@plane/ui";
+import { Avatar, CustomMenu, TOAST_TYPE, setToast } from "@plane/ui";
 import { getFileURL } from "@plane/utils";
 // hooks
 import { useAppTheme, useUser } from "@/hooks/store";
@@ -37,15 +33,6 @@ export const UserMenuRoot = observer((props: Props) => {
  // translation
  const { t } = useTranslation();
  // local state
-  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
-  // popper-js refs
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  // popper-js init
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "right",
-    modifiers: [{ name: "preventOverflow", options: { padding: 12 } }],
-  });

  const handleSignOut = async () => {
    await signOut().catch(() =>
@@ -57,103 +44,70 @@ export const UserMenuRoot = observer((props: Props) => {
    );
  };

-  // Toggle sidebar dropdown state when either menu is open
-  useEffect(() => {
-    if (isUserMenuOpen) toggleAnySidebarDropdown(true);
+  const handleOpenChange = (open: boolean) => {
+    if (open) toggleAnySidebarDropdown(true);
    else toggleAnySidebarDropdown(false);
-  }, [isUserMenuOpen]);
+  };

  return (
-    <Menu as="div" className="relative flex-shrink-0">
-      {({ open, close }: { open: boolean; close: () => void }) => {
-        // Update local state directly
-        if (isUserMenuOpen !== open) {
-          setIsUserMenuOpen(open);
-        }
-
-        return (
-          <>
-            <Menu.Button
-              className="grid place-items-center outline-none"
-              ref={setReferenceElement}
-              aria-label={t("aria_labels.projects_sidebar.open_user_menu")}
+    <CustomMenu
+      className="relative flex-shrink-0"
+      handleOpenChange={handleOpenChange}
+      customButtonClassName="grid place-items-center outline-none"
+      optionsClassName="px-1 py-2"
+      customButton={
+        <Avatar
+          name={currentUser?.display_name}
+          src={getFileURL(currentUser?.avatar_url ?? "")}
+          size={size === "sm" ? 24 : 28}
+          shape="circle"
+          className="!text-base"
+        />
+      }
+    >
+      <>
+        <div className="flex flex-col gap-2.5 pb-2 border-b border-custom-border-100">
+          <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
+          <Link href={`/${workspaceSlug}/settings/account`}>
+            <CustomMenu.MenuItem className="flex gap-2">
+              <Settings className="h-4 w-4 stroke-[1.5]" />
+              <span>{t("settings")}</span>
+            </CustomMenu.MenuItem>
+          </Link>
+          {isEnabled && (
+            <CustomMenu.MenuItem
+              className="flex w-full items-center gap-2 rounded hover:bg-custom-sidebar-background-80"
+              onClick={() => {
+                if (sidebarPeek) toggleSidebarPeek(false);
+                toggleAppRail();
+              }}
            >
-              <Avatar
-                name={currentUser?.display_name}
-                src={getFileURL(currentUser?.avatar_url ?? "")}
-                size={size === "sm" ? 24 : 28}
-                shape="circle"
-                className="!text-base"
-              />
-            </Menu.Button>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Menu.Items
-                className="absolute left-0 z-[21] mt-1 flex w-44 origin-top-left flex-col divide-y
-              divide-custom-sidebar-border-200 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
-                ref={setPopperElement as Ref<HTMLDivElement>}
-                style={styles.popper}
-                {...attributes.popper}
-              >
-                <div className="flex flex-col gap-2.5 pb-2">
-                  <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
-                  <Link href={`/${workspaceSlug}/settings/account`}>
-                    <Menu.Item as="div">
-                      <span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
-                        <Settings className="h-4 w-4 stroke-[1.5]" />
-                        <span>{t("settings")}</span>
-                      </span>
-                    </Menu.Item>
-                  </Link>
-                  {isEnabled && (
-                    <Menu.Item
-                      as="button"
-                      type="button"
-                      className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-                      onClick={() => {
-                        if (sidebarPeek) toggleSidebarPeek(false);
-                        toggleAppRail();
-                      }}
-                    >
-                      <PanelLeftDashed className="h-4 w-4 stroke-[1.5]" />
-                      <span>{shouldRenderAppRail ? "Undock AppRail" : "Dock AppRail"}</span>
-                    </Menu.Item>
-                  )}
-                </div>
-                <div className={`pt-2 ${isUserInstanceAdmin || false ? "pb-2" : ""}`}>
-                  <Menu.Item
-                    as="button"
-                    type="button"
-                    className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-                    onClick={handleSignOut}
-                  >
-                    <LogOut className="size-4 stroke-[1.5]" />
-                    {t("sign_out")}
-                  </Menu.Item>
-                </div>
-                {isUserInstanceAdmin && (
-                  <div className="p-2 pb-0">
-                    <Link href={GOD_MODE_URL}>
-                      <Menu.Item as="button" type="button" className="w-full">
-                        <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
-                          {t("enter_god_mode")}
-                        </span>
-                      </Menu.Item>
-                    </Link>
-                  </div>
-                )}
-              </Menu.Items>
-            </Transition>
-          </>
-        );
-      }}
-    </Menu>
+              <PanelLeftDashed className="h-4 w-4 stroke-[1.5]" />
+              <span>{shouldRenderAppRail ? "Undock AppRail" : "Dock AppRail"}</span>
+            </CustomMenu.MenuItem>
+          )}
+        </div>
+        <div className={`pt-2 ${isUserInstanceAdmin || false ? "pb-2" : ""}`}>
+          <CustomMenu.MenuItem
+            className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+            onClick={handleSignOut}
+          >
+            <LogOut className="size-4 stroke-[1.5]" />
+            {t("sign_out")}
+          </CustomMenu.MenuItem>
+        </div>
+        {isUserInstanceAdmin && (
+          <div className="p-2 pb-0">
+            <Link href={GOD_MODE_URL}>
+              <CustomMenu.MenuItem className="w-full">
+                <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
+                  {t("enter_god_mode")}
+                </span>
+              </CustomMenu.MenuItem>
+            </Link>
+          </div>
+        )}
+      </>
+    </CustomMenu>
  );
 });
@@ -1,16 +1,14 @@
 "use client";

-import React, { Fragment, useState, useEffect } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { ChevronDown, CirclePlus, LogOut, Mails } from "lucide-react";
-// ui
-import { Menu, Transition } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { IWorkspace } from "@plane/types";
-import { Loader, TOAST_TYPE, setToast } from "@plane/ui";
+import { CustomMenu, Loader, TOAST_TYPE, setToast } from "@plane/ui";
 import { orderWorkspacesList, cn } from "@plane/utils";
 // helpers
 import { AppSidebarItem } from "@/components/sidebar";
@@ -39,7 +37,6 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
  // translation
  const { t } = useTranslation();
  // local state
-  const [isWorkspaceMenuOpen, setIsWorkspaceMenuOpen] = useState(false);

  const handleWorkspaceNavigation = (workspace: IWorkspace) => updateUserProfile({ last_workspace_id: workspace?.id });

@@ -61,156 +58,124 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
  const workspacesList = orderWorkspacesList(Object.values(workspaces ?? {}));
  // TODO: fix workspaces list scroll

-  // Toggle sidebar dropdown state when either menu is open
-  useEffect(() => {
-    if (isWorkspaceMenuOpen) toggleAnySidebarDropdown(true);
+  const handleOpenChange = (open: boolean) => {
+    if (open) toggleAnySidebarDropdown(true);
    else toggleAnySidebarDropdown(false);
-  }, [isWorkspaceMenuOpen]);
+  };

  const logo = activeWorkspace?.logo_url;
  const name = activeWorkspace?.name;

  return (
-    <Menu
-      as="div"
+    <CustomMenu
      className={cn("relative h-full flex ", {
        "justify-center text-center": renderLogoOnly,
        "flex-grow justify-stretch text-left truncate": !renderLogoOnly,
      })}
-    >
-      {({ open, close }: { open: boolean; close: () => void }) => {
-        // Update local state directly
-        if (isWorkspaceMenuOpen !== open) {
-          setIsWorkspaceMenuOpen(open);
-        }
-
-        return (
+      handleOpenChange={handleOpenChange}
+      customButtonClassName={
+        renderLogoOnly
+          ? "flex items-center justify-center size-8"
+          : cn(
+              "group/menu-button flex items-center  gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none ",
+              {
+                "justify-center text-center": renderLogoOnly,
+                "justify-between flex-grow": !renderLogoOnly,
+              }
+            )
+      }
+      aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
+      optionsClassName="max-h-fit p-0"
+      customButton={
+        renderLogoOnly ? (
+          <AppSidebarItem
+            variant="button"
+            item={{
+              icon: (
+                <WorkspaceLogo
+                  logo={activeWorkspace?.logo_url}
+                  name={activeWorkspace?.name}
+                  classNames="size-8 rounded-md"
+                />
+              ),
+            }}
+          />
+        ) : (
          <>
-            {renderLogoOnly ? (
-              <Menu.Button className="flex items-center justify-center size-8">
-                <AppSidebarItem
-                  variant="button"
-                  item={{
-                    icon: (
-                      <WorkspaceLogo
-                        logo={activeWorkspace?.logo_url}
-                        name={activeWorkspace?.name}
-                        classNames="size-8 rounded-md"
-                      />
-                    ),
-                  }}
-                />
-              </Menu.Button>
-            ) : (
-              <Menu.Button
-                className={cn(
-                  "group/menu-button flex items-center  gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none ",
-                  {
-                    "justify-center text-center": renderLogoOnly,
-                    "justify-between flex-grow": !renderLogoOnly,
-                  }
-                )}
-                aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
-              >
-                <div className="flex-grow flex items-center gap-2 truncate">
-                  <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
-                  <h4 className="truncate text-base font-medium text-custom-text-100">
-                    {activeWorkspace?.name ?? t("loading")}
-                  </h4>
-                </div>
-                <ChevronDown
-                  className={cn(
-                    "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
-                    { "rotate-180": open }
-                  )}
-                />
-              </Menu.Button>
-            )}
-
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="trnsform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Menu.Items as={Fragment}>
-                <div className="fixed top-12 left-4 z-[21] mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
-                  <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll">
-                    <span className="rounded-md text-left px-4 sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-text-400 truncate flex-shrink-0">
-                      {currentUser?.email}
-                    </span>
-                    {workspacesList ? (
-                      <div className="size-full flex flex-col items-start justify-start">
-                        {(activeWorkspace
-                          ? [
-                              activeWorkspace,
-                              ...workspacesList.filter((workspace) => workspace.id !== activeWorkspace?.id),
-                            ]
-                          : workspacesList
-                        ).map((workspace) => (
-                          <SidebarDropdownItem
-                            key={workspace.id}
-                            workspace={workspace}
-                            activeWorkspace={activeWorkspace}
-                            handleItemClick={handleItemClick}
-                            handleWorkspaceNavigation={handleWorkspaceNavigation}
-                            handleClose={close}
-                          />
-                        ))}
-                      </div>
-                    ) : (
-                      <div className="w-full">
-                        <Loader className="space-y-2">
-                          <Loader.Item height="30px" />
-                          <Loader.Item height="30px" />
-                        </Loader>
-                      </div>
-                    )}
-                  </div>
-                  <div className="w-full flex flex-col items-start justify-start gap-2 px-4 py-2 text-sm">
-                    {isWorkspaceCreationEnabled && (
-                      <Link href="/create-workspace" className="w-full">
-                        <Menu.Item
-                          as="div"
-                          className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                        >
-                          <CirclePlus className="size-4 flex-shrink-0" />
-                          {t("create_workspace")}
-                        </Menu.Item>
-                      </Link>
-                    )}
-
-                    <Link href="/invitations" className="w-full" onClick={handleItemClick}>
-                      <Menu.Item
-                        as="div"
-                        className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                      >
-                        <Mails className="h-4 w-4 flex-shrink-0" />
-                        {t("workspace_invites")}
-                      </Menu.Item>
-                    </Link>
-
-                    <div className="w-full">
-                      <Menu.Item
-                        as="button"
-                        type="button"
-                        className="flex w-full items-center gap-2 rounded px-2 py-1 text-sm font-medium text-red-600 hover:bg-custom-sidebar-background-80"
-                        onClick={handleSignOut}
-                      >
-                        <LogOut className="size-4 flex-shrink-0" />
-                        {t("sign_out")}
-                      </Menu.Item>
-                    </div>
-                  </div>
-                </div>
-              </Menu.Items>
-            </Transition>
+            <div className="flex-grow flex items-center gap-2 truncate">
+              <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
+              <h4 className="truncate text-base font-medium text-custom-text-100">
+                {activeWorkspace?.name ?? t("loading")}
+              </h4>
+            </div>
+            <ChevronDown
+              className={cn(
+                "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
+                { "rotate-180": open }
+              )}
+            />
          </>
-        );
-      }}
-    </Menu>
+        )
+      }
+    >
+      <>
+        <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll border-b border-custom-border-100">
+          <span className="rounded-md text-left px-4 sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-text-400 truncate flex-shrink-0">
+            {currentUser?.email}
+          </span>
+          {workspacesList ? (
+            <div className="size-full flex flex-col items-start justify-start">
+              {(activeWorkspace
+                ? [activeWorkspace, ...workspacesList.filter((workspace) => workspace.id !== activeWorkspace?.id)]
+                : workspacesList
+              ).map((workspace) => (
+                <SidebarDropdownItem
+                  key={workspace.id}
+                  workspace={workspace}
+                  activeWorkspace={activeWorkspace}
+                  handleItemClick={handleItemClick}
+                  handleWorkspaceNavigation={handleWorkspaceNavigation}
+                  handleClose={close}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="w-full">
+              <Loader className="space-y-2">
+                <Loader.Item height="30px" />
+                <Loader.Item height="30px" />
+              </Loader>
+            </div>
+          )}
+        </div>
+        <div className="w-full flex flex-col items-start justify-start gap-2 px-4 py-2 text-sm">
+          {isWorkspaceCreationEnabled && (
+            <Link href="/create-workspace" className="w-full">
+              <CustomMenu.MenuItem className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80">
+                <CirclePlus className="size-4 flex-shrink-0" />
+                {t("create_workspace")}
+              </CustomMenu.MenuItem>
+            </Link>
+          )}
+
+          <Link href="/invitations" className="w-full" onClick={handleItemClick}>
+            <CustomMenu.MenuItem className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80">
+              <Mails className="h-4 w-4 flex-shrink-0" />
+              {t("workspace_invites")}
+            </CustomMenu.MenuItem>
+          </Link>
+
+          <div className="w-full">
+            <CustomMenu.MenuItem
+              className="flex w-full items-center gap-2 rounded px-2 py-1 text-sm font-medium text-red-600 hover:bg-custom-sidebar-background-80"
+              onClick={handleSignOut}
+            >
+              <LogOut className="size-4 flex-shrink-0" />
+              {t("sign_out")}
+            </CustomMenu.MenuItem>
+          </div>
+        </div>
+      </>
+    </CustomMenu>
  );
 });
@@ -31,13 +31,15 @@
  "dependencies": {
    "@atlaskit/pragmatic-drag-and-drop": "^1.1.10",
    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
+    "@base-ui-components/react": "^1.0.0-beta.2",
    "@blueprintjs/core": "^4.16.3",
    "@blueprintjs/popover2": "^1.13.3",
+    "@base-ui-components/react": "^1.0.0-beta.2",
    "@headlessui/react": "^1.7.3",
    "@plane/constants": "*",
    "@plane/hooks": "*",
-    "@plane/utils": "*",
    "@plane/types": "*",
+    "@plane/utils": "*",
    "@popperjs/core": "^2.11.8",
    "@radix-ui/react-scroll-area": "^1.2.3",
    "clsx": "^2.0.0",
@@ -1,52 +1,19 @@
+import { Avatar as AvatarPrimitive } from "@base-ui-components/react/avatar";
 import React from "react";
-// ui
-import { Tooltip } from "../tooltip";
-// helpers
+// utils
 import { cn } from "../utils";

 export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;

 type Props = {
-  /**
-   * The name of the avatar which will be displayed on the tooltip
-   */
-  name?: string;
-  /**
-   * The background color if the avatar image fails to load
-   */
-  fallbackBackgroundColor?: string;
-  /**
-   * The text to display if the avatar image fails to load
-   */
+  name?: string; //The name of the avatar which will be displayed on the tooltip
+  fallbackBackgroundColor?: string; //The background color if the avatar image fails to load
  fallbackText?: string;
-  /**
-   * The text color if the avatar image fails to load
-   */
-  fallbackTextColor?: string;
-  /**
-   * Whether to show the tooltip or not
-   * @default true
-   */
+  fallbackTextColor?: string; //The text color if the avatar image fails to load
  showTooltip?: boolean;
-  /**
-   * The size of the avatars
-   * Possible values: "sm", "md", "base", "lg"
-   * @default "md"
-   */
-  size?: TAvatarSize;
-  /**
-   * The shape of the avatar
-   * Possible values: "circle", "square"
-   * @default "circle"
-   */
+  size?: TAvatarSize; //The size of the avatars
  shape?: "circle" | "square";
-  /**
-   * The source of the avatar image
-   */
-  src?: string;
-  /**
-   * The custom CSS class name to apply to the component
-   */
+  src?: string; //The source of the avatar image
  className?: string;
 };

@@ -129,41 +96,26 @@ export const Avatar: React.FC<Props> = (props) => {
  // get size details based on the size prop
  const sizeInfo = getSizeInfo(size);

+  const fallbackLetter = name?.[0]?.toUpperCase() ?? fallbackText ?? "?";
  return (
-    <Tooltip tooltipContent={fallbackText ?? name ?? "?"} disabled={!showTooltip}>
-      <div
-        className={cn("grid place-items-center overflow-hidden", getBorderRadius(shape), {
-          [sizeInfo.avatarSize]: !isAValidNumber(size),
-        })}
-        style={
-          isAValidNumber(size)
-            ? {
-                height: `${size}px`,
-                width: `${size}px`,
-              }
-            : {}
-        }
-        tabIndex={-1}
-      >
-        {src ? (
-          <img src={src} className={cn("h-full w-full", getBorderRadius(shape), className)} alt={name} />
-        ) : (
-          <div
-            className={cn(
-              sizeInfo.fontSize,
-              "grid h-full w-full place-items-center",
-              getBorderRadius(shape),
-              className
-            )}
-            style={{
-              backgroundColor: fallbackBackgroundColor ?? "#028375",
-              color: fallbackTextColor ?? "#ffffff",
-            }}
-          >
-            {name?.[0]?.toUpperCase() ?? fallbackText ?? "?"}
-          </div>
-        )}
-      </div>
-    </Tooltip>
+    <div
+      className={cn("grid place-items-center overflow-hidden", getBorderRadius(shape), {
+        [sizeInfo.avatarSize]: !isAValidNumber(size),
+      })}
+      tabIndex={-1}
+    >
+      <AvatarPrimitive.Root className={cn("h-full w-full", getBorderRadius(shape), className)}>
+        <AvatarPrimitive.Image src={src} width="48" height="48" />
+        <AvatarPrimitive.Fallback
+          className={cn(sizeInfo.fontSize, "grid h-full w-full place-items-center", getBorderRadius(shape), className)}
+          style={{
+            backgroundColor: fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
+            color: fallbackTextColor ?? "#ffffff",
+          }}
+        >
+          {fallbackLetter}
+        </AvatarPrimitive.Fallback>
+      </AvatarPrimitive.Root>
+    </div>
  );
 };
@@ -1,49 +1,8 @@
-import { Menu } from "@headlessui/react";
+import { Menu } from "@base-ui-components/react/menu";
 import { ChevronDown, ChevronRight, MoreHorizontal } from "lucide-react";
 import * as React from "react";
-import ReactDOM from "react-dom";
-import { usePopper } from "react-popper";
-// plane helpers
-import { useOutsideClickDetector } from "@plane/hooks";
-// helpers
 import { cn } from "../utils";
-// hooks
-import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
-// types
-import {
-  ICustomMenuDropdownProps,
-  ICustomMenuItemProps,
-  ICustomSubMenuProps,
-  ICustomSubMenuTriggerProps,
-  ICustomSubMenuContentProps,
-} from "./helper";
-
-interface PortalProps {
-  children: React.ReactNode;
-  container?: Element | null;
-  asChild?: boolean;
-}
-
-const Portal: React.FC<PortalProps> = ({ children, container, asChild = false }) => {
-  const [mounted, setMounted] = React.useState(false);
-
-  React.useEffect(() => {
-    setMounted(true);
-    return () => setMounted(false);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
-
-  const targetContainer = container || document.body;
-
-  if (asChild) {
-    return ReactDOM.createPortal(children, targetContainer);
-  }
-
-  return ReactDOM.createPortal(<div data-radix-portal="">{children}</div>, targetContainer);
-};
+import { ICustomMenuDropdownProps, ICustomMenuItemProps, ICustomSubMenuProps } from "./helper";

 // Context for main menu to communicate with submenus
 const MenuContext = React.createContext<{
@@ -51,7 +10,57 @@ const MenuContext = React.createContext<{
  registerSubmenu: (closeSubmenu: () => void) => () => void;
 } | null>(null);

-const CustomMenu = (props: ICustomMenuDropdownProps) => {
+// SubMenu context for closing submenu from nested items
+const SubMenuContext = React.createContext<{ closeSubmenu: () => void } | null>(null);
+
+// Hook to use submenu context
+const useSubMenu = () => React.useContext(SubMenuContext);
+
+// SubMenu implementation
+const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
+  const { children, trigger, disabled = false, className = "", contentClassName = "" } = props;
+
+  return (
+    <Menu.SubmenuRoot disabled={disabled}>
+      <Menu.SubmenuTrigger className={""}>
+        <span className="flex-1">{trigger}</span>
+        <ChevronRight />
+      </Menu.SubmenuTrigger>
+      <Menu.Portal>
+        <Menu.Positioner className={""} alignOffset={-4} sideOffset={-4}>
+          <Menu.Popup className={className}>{children} </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.SubmenuRoot>
+  );
+};
+
+const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
+  const { children, disabled = false, onClick, className } = props;
+  const submenuContext = useSubMenu();
+
+  return (
+    <Menu.Item
+      disabled={disabled}
+      className={cn(
+        "w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 cursor-pointer outline-none focus:bg-custom-background-80",
+        {
+          "text-custom-text-400": disabled,
+        },
+        className
+      )}
+      onClick={(e) => {
+        close();
+        onClick?.(e);
+        submenuContext?.closeSubmenu();
+      }}
+    >
+      {children}
+    </Menu.Item>
+  );
+};
+
+function CustomMenu(props: ICustomMenuDropdownProps) {
  const {
    ariaLabel,
    buttonClassName = "",
@@ -77,19 +86,13 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
    closeOnSelect,
    openOnHover = false,
    useCaptureForOutsideClick = false,
+    handleOpenChange = () => {},
  } = props;

-  const [referenceElement, setReferenceElement] = React.useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
  const [isOpen, setIsOpen] = React.useState(false);
  // refs
-  const dropdownRef = React.useRef<HTMLDivElement | null>(null);
  const submenuClosersRef = React.useRef<Set<() => void>>(new Set());

-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: placement ?? "auto",
-  });
-
  const closeAllSubmenus = React.useCallback(() => {
    submenuClosersRef.current.forEach((closeSubmenu) => closeSubmenu());
  }, []);
@@ -100,10 +103,8 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
      submenuClosersRef.current.delete(closeSubmenu);
    };
  }, []);
-
  const openDropdown = () => {
    setIsOpen(true);
-    if (referenceElement) referenceElement.focus();
  };

  const closeDropdown = React.useCallback(() => {
@@ -114,19 +115,6 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
    setIsOpen(false);
  }, [isOpen, closeAllSubmenus, onMenuClose]);

-  const selectActiveItem = () => {
-    const activeItem: HTMLElement | undefined | null = dropdownRef.current?.querySelector(
-      `[data-headlessui-state="active"] button`
-    );
-    activeItem?.click();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(openDropdown, closeDropdown, isOpen, selectActiveItem);
-
-  const handleOnClick = () => {
-    if (closeOnSelect) closeDropdown();
-  };
-
  const handleMenuButtonClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.stopPropagation();
    e.preventDefault();
@@ -138,390 +126,83 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
    if (menuButtonOnClick) menuButtonOnClick();
  };

-  const handleMouseEnter = () => {
-    if (openOnHover) openDropdown();
-  };
-
-  const handleMouseLeave = () => {
-    if (openOnHover && isOpen) {
-      setTimeout(() => {
-        // Only close if menu is still open
-        if (isOpen) {
-          closeDropdown();
-        }
-      }, 150); // Small delay to allow moving to submenu
-    }
-  };
-
-  useOutsideClickDetector(dropdownRef, closeDropdown, useCaptureForOutsideClick);
-
-  // Custom handler for submenu portal clicks
-  React.useEffect(() => {
-    const handleDocumentClick = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      const isSubmenuClick = target.closest('[data-prevent-outside-click="true"]');
-      const isMainMenuClick = dropdownRef.current?.contains(target);
-
-      // If it's a submenu click or main menu click, don't close
-      if (isSubmenuClick || isMainMenuClick) {
-        return;
-      }
-
-      // If menu is open and it's an outside click, close it
-      if (isOpen) {
-        closeDropdown();
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener("mousedown", handleDocumentClick, useCaptureForOutsideClick);
-
-      return () => {
-        document.removeEventListener("mousedown", handleDocumentClick, useCaptureForOutsideClick);
-      };
-    }
-  }, [isOpen, closeDropdown, useCaptureForOutsideClick]);
-
-  let menuItems = (
-    <Menu.Items
-      data-prevent-outside-click={!!portalElement}
-      className={cn(
-        "fixed z-30 translate-y-0",
-        menuItemsClassName
-      )} /** translate-y-0 is a hack to create new stacking context. Required for safari  */
-      static
-    >
-      <div
-        className={cn(
-          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
-          {
-            "max-h-60": maxHeight === "lg",
-            "max-h-48": maxHeight === "md",
-            "max-h-36": maxHeight === "rg",
-            "max-h-28": maxHeight === "sm",
-          },
-          optionsClassName
-        )}
-        ref={setPopperElement}
-        style={styles.popper}
-        {...attributes.popper}
-      >
-        <MenuContext.Provider value={{ closeAllSubmenus, registerSubmenu }}>{children}</MenuContext.Provider>
-      </div>
-    </Menu.Items>
-  );
-
-  if (portalElement) {
-    menuItems = ReactDOM.createPortal(menuItems, portalElement);
-  }
-
  return (
-    <Menu
-      as="div"
-      ref={dropdownRef}
-      tabIndex={tabIndex}
-      className={cn("relative w-min text-left", className)}
-      onKeyDownCapture={handleKeyDown}
-      onClick={handleOnClick}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      data-main-menu="true"
-    >
-      {({ open }) => (
+    <Menu.Root openOnHover={openOnHover} onOpenChange={handleOpenChange}>
+      {customButton ? (
+        <Menu.Trigger
+          type="button"
+          onClick={handleMenuButtonClick}
+          className={cn(customButtonClassName, "outline-none")}
+          tabIndex={customButtonTabIndex}
+          disabled={disabled}
+          aria-label={ariaLabel}
+        >
+          {customButton}
+        </Menu.Trigger>
+      ) : (
        <>
-          {customButton ? (
-            <Menu.Button as={React.Fragment}>
-              <button
-                ref={setReferenceElement}
-                type="button"
-                onClick={handleMenuButtonClick}
-                className={customButtonClassName}
-                tabIndex={customButtonTabIndex}
-                disabled={disabled}
-                aria-label={ariaLabel}
-              >
-                {customButton}
-              </button>
-            </Menu.Button>
+          {ellipsis || verticalEllipsis ? (
+            <Menu.Trigger
+              type="button"
+              onClick={handleMenuButtonClick}
+              disabled={disabled}
+              className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
+                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+              tabIndex={customButtonTabIndex}
+              aria-label={ariaLabel}
+            >
+              <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
+            </Menu.Trigger>
          ) : (
-            <>
-              {ellipsis || verticalEllipsis ? (
-                <Menu.Button as={React.Fragment}>
-                  <button
-                    ref={setReferenceElement}
-                    type="button"
-                    onClick={handleMenuButtonClick}
-                    disabled={disabled}
-                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 outline-none hover:text-custom-text-100 ${
-                      disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
-                    } ${buttonClassName}`}
-                    tabIndex={customButtonTabIndex}
-                    aria-label={ariaLabel}
-                  >
-                    <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
-                  </button>
-                </Menu.Button>
-              ) : (
-                <Menu.Button as={React.Fragment}>
-                  <button
-                    ref={setReferenceElement}
-                    type="button"
-                    className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-xs duration-300 ${
-                      open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
-                    } ${noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"} ${
-                      disabled
-                        ? "cursor-not-allowed text-custom-text-200"
-                        : "cursor-pointer hover:bg-custom-background-80"
-                    } ${buttonClassName}`}
-                    onClick={handleMenuButtonClick}
-                    tabIndex={customButtonTabIndex}
-                    disabled={disabled}
-                    aria-label={ariaLabel}
-                  >
-                    {label}
-                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
-                  </button>
-                </Menu.Button>
-              )}
-            </>
+            <Menu.Trigger
+              type="button"
+              className={`flex items-center justify-between gap-1 whitespace-nowrap rounded-md px-2.5 py-1 text-xs duration-300 outline-none ${
+                isOpen ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
+              } ${noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"} ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+              onClick={handleMenuButtonClick}
+              tabIndex={customButtonTabIndex}
+              disabled={disabled}
+              aria-label={ariaLabel}
+            >
+              {label}
+              {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
+            </Menu.Trigger>
          )}
-          {isOpen && menuItems}
        </>
      )}
-    </Menu>
-  );
-};
-
-// SubMenu context for closing submenu from nested items
-const SubMenuContext = React.createContext<{ closeSubmenu: () => void } | null>(null);
-
-// Hook to use submenu context
-const useSubMenu = () => React.useContext(SubMenuContext);
-
-// SubMenu implementation
-const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
-  const {
-    children,
-    trigger,
-    disabled = false,
-    className = "",
-    contentClassName = "",
-    placement = "right-start",
-  } = props;
-
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [referenceElement, setReferenceElement] = React.useState<HTMLSpanElement | null>(null);
-  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
-  const submenuRef = React.useRef<HTMLDivElement | null>(null);
-
-  const menuContext = React.useContext(MenuContext);
-
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement,
-    strategy: "fixed", // Use fixed positioning to escape overflow constraints
-    modifiers: [
-      {
-        name: "offset",
-        options: {
-          offset: [0, 4],
-        },
-      },
-      {
-        name: "flip",
-        options: {
-          fallbackPlacements: ["left-start", "right-end", "left-end", "top-start", "bottom-start"],
-        },
-      },
-      {
-        name: "preventOverflow",
-        options: {
-          padding: 8,
-        },
-      },
-    ],
-  });
-
-  const closeSubmenu = React.useCallback(() => {
-    setIsOpen(false);
-  }, []);
-
-  // Register this submenu with the main menu context
-  React.useEffect(() => {
-    if (menuContext) {
-      return menuContext.registerSubmenu(closeSubmenu);
-    }
-  }, [menuContext, closeSubmenu]);
-
-  const toggleSubmenu = () => {
-    if (!disabled) {
-      // Close other submenus when opening this one
-      if (!isOpen && menuContext) {
-        menuContext.closeAllSubmenus();
-      }
-      setIsOpen(!isOpen);
-    }
-  };
-
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    toggleSubmenu();
-  };
-
-  // Close submenu when clicking on other menu items
-  React.useEffect(() => {
-    const handleMenuItemClick = (e: Event) => {
-      const target = e.target as HTMLElement;
-      // Check if the click is on a menu item that's not part of this submenu
-      if (target.closest('[role="menuitem"]') && !submenuRef.current?.contains(target)) {
-        closeSubmenu();
-      }
-    };
-
-    document.addEventListener("click", handleMenuItemClick);
-    return () => {
-      document.removeEventListener("click", handleMenuItemClick);
-    };
-  }, [closeSubmenu]);
-
-  return (
-    <div ref={submenuRef} className={cn("relative", className)}>
-      <span ref={setReferenceElement} className="w-full">
-        <Menu.Item as="div" disabled={disabled}>
-          {({ active }) => (
-            <div
-              className={cn(
-                "w-full select-none rounded px-1 py-1.5 text-left text-custom-text-200 flex items-center justify-between cursor-pointer",
-                {
-                  "bg-custom-background-80": active && !disabled,
-                  "text-custom-text-400": disabled,
-                  "cursor-not-allowed": disabled,
-                }
-              )}
-              onClick={handleClick}
-            >
-              <span className="flex-1">{trigger}</span>
-              <ChevronRight className="h-3.5 w-3.5 flex-shrink-0" />
-            </div>
-          )}
-        </Menu.Item>
-      </span>
-
-      {isOpen && (
-        <Portal>
-          <div
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
+      <Menu.Portal>
+        <Menu.Positioner
+          align={"start"}
+          className={cn(
+            "fixed z-30 translate-y-0",
+            menuItemsClassName
+          )} /** translate-y-0 is a hack to create new stacking context. Required for safari  */
+        >
+          <Menu.Popup
+            tabIndex={tabIndex}
            className={cn(
-              "fixed z-30 min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-1 text-xs shadow-custom-shadow-lg",
-              "ring-1 ring-black ring-opacity-5", // Additional styling to make it stand out
-              contentClassName
+              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+              {
+                "max-h-60": maxHeight === "lg",
+                "max-h-48": maxHeight === "md",
+                "max-h-36": maxHeight === "rg",
+                "max-h-28": maxHeight === "sm",
+              },
+              optionsClassName
            )}
-            data-prevent-outside-click="true"
-            onMouseEnter={() => {
-              // Notify parent menu that we're hovering over submenu
-              const mainMenuElement = document.querySelector('[data-main-menu="true"]');
-              if (mainMenuElement) {
-                const mouseEnterEvent = new MouseEvent("mouseenter", { bubbles: true });
-                mainMenuElement.dispatchEvent(mouseEnterEvent);
-              }
-            }}
-            onMouseLeave={() => {
-              // Notify parent menu that we're leaving submenu
-              const mainMenuElement = document.querySelector('[data-main-menu="true"]');
-              if (mainMenuElement) {
-                const mouseLeaveEvent = new MouseEvent("mouseleave", { bubbles: true });
-                mainMenuElement.dispatchEvent(mouseLeaveEvent);
-              }
-            }}
+            data-main-menu="true"
          >
-            <SubMenuContext.Provider value={{ closeSubmenu }}>{children}</SubMenuContext.Provider>
-          </div>
-        </Portal>
-      )}
-    </div>
+            <MenuContext.Provider value={{ closeAllSubmenus, registerSubmenu }}>{children}</MenuContext.Provider>
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
  );
-};
+}

-const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
-  const { children, disabled = false, onClick, className } = props;
-  const submenuContext = useSubMenu();
-
-  return (
-    <Menu.Item as="div" disabled={disabled}>
-      {({ active, close }) => (
-        <button
-          type="button"
-          className={cn(
-            "w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200",
-            {
-              "bg-custom-background-80": active && !disabled,
-              "text-custom-text-400": disabled,
-            },
-            className
-          )}
-          onClick={(e) => {
-            close();
-            onClick?.(e);
-            // Close submenu if this item is inside a submenu
-            submenuContext?.closeSubmenu();
-          }}
-          disabled={disabled}
-        >
-          {children}
-        </button>
-      )}
-    </Menu.Item>
-  );
-};
-
-const SubMenuTrigger: React.FC<ICustomSubMenuTriggerProps> = (props) => {
-  const { children, disabled = false, className } = props;
-
-  return (
-    <Menu.Item as="div" disabled={disabled}>
-      {({ active }) => (
-        <div
-          className={cn(
-            "w-full select-none rounded px-1 py-1.5 text-left text-custom-text-200 flex items-center justify-between",
-            {
-              "bg-custom-background-80": active && !disabled,
-              "text-custom-text-400": disabled,
-              "cursor-pointer": !disabled,
-              "cursor-not-allowed": disabled,
-            },
-            className
-          )}
-        >
-          <span className="flex-1">{children}</span>
-          <ChevronRight className="h-3.5 w-3.5 flex-shrink-0" />
-        </div>
-      )}
-    </Menu.Item>
-  );
-};
-
-const SubMenuContent: React.FC<ICustomSubMenuContentProps> = (props) => {
-  const { children, className } = props;
-
-  return (
-    <div
-      className={cn(
-        "z-[15] min-w-[12rem] overflow-hidden rounded-md border border-custom-border-300 bg-custom-background-100 p-1 text-xs shadow-custom-shadow-rg",
-        className
-      )}
-    >
-      {children}
-    </div>
-  );
-};
-
-// Add all components as static properties for external use
-CustomMenu.Portal = Portal;
 CustomMenu.MenuItem = MenuItem;
 CustomMenu.SubMenu = SubMenu;
-CustomMenu.SubMenuTrigger = SubMenuTrigger;
-CustomMenu.SubMenuContent = SubMenuContent;
-
 export { CustomMenu };
@@ -39,6 +39,7 @@ export interface ICustomMenuDropdownProps extends IDropdownProps {
  portalElement?: Element | null;
  openOnHover?: boolean;
  ariaLabel?: string;
+  handleOpenChange?: (open: boolean) => void;
 }

 export interface ICustomSelectProps extends IDropdownProps {
@@ -1,4 +1,4 @@
-import { Tab } from "@headlessui/react";
+import { Tabs as BaseTabs } from "@base-ui-components/react/tabs";
 import { LucideProps } from "lucide-react";
 import React, { FC } from "react";
 // helpers
@@ -18,26 +18,17 @@ type TTabListProps = {
  tabClassName?: string;
  size?: "sm" | "md" | "lg";
  selectedTab?: string;
-  onTabChange?: (key: string) => void;
 };

-export const TabList: FC<TTabListProps> = ({
-  tabs,
-  tabListClassName,
-  tabClassName,
-  size = "md",
-  selectedTab,
-  onTabChange,
-}) => (
-  <Tab.List
-    as="div"
+export const TabList: FC<TTabListProps> = ({ tabs, tabListClassName, tabClassName, size = "md", selectedTab }) => (
+  <BaseTabs.List
    className={cn(
-      "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80/60",
+      "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80/60 relative",
      tabListClassName
    )}
  >
    {tabs.map((tab) => (
-      <Tab
+      <BaseTabs.Tab
        className={({ selected }) =>
          cn(
            "flex items-center justify-center p-1 min-w-fit w-full font-medium text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all rounded",
@@ -55,17 +46,13 @@ export const TabList: FC<TTabListProps> = ({
          )
        }
        key={tab.key}
-        onClick={() => {
-          if (!tab.disabled) {
-            onTabChange?.(tab.key);
-            tab.onClick?.();
-          }
-        }}
        disabled={tab.disabled}
      >
        {tab.icon && <tab.icon className="size-4" />}
        {tab.label}
-      </Tab>
+      </BaseTabs.Tab>
    ))}
-  </Tab.List>
+
+    <BaseTabs.Indicator className="absolute left-0 top-[50%] z-[-1] h-6 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-[50%] rounded-sm bg-custom-background-100 shadow-sm transition-[width,transform] duration-200 ease-in-out" />
+  </BaseTabs.List>
 );
@@ -1,5 +1,5 @@
-import { Tab } from "@headlessui/react";
-import React, { FC, Fragment, useEffect, useState } from "react";
+import { Tabs as BaseTabs } from "@base-ui-components/react/tabs";
+import React, { FC, useEffect, useState } from "react";
 // helpers
 import { useLocalStorage } from "@plane/hooks";
 import { cn } from "../utils";
@@ -40,49 +40,52 @@ export const Tabs: FC<TTabsProps> = (props: TTabsProps) => {
    size = "md",
    storeInLocalStorage = true,
  } = props;
-  // local storage
+
  const { storedValue, setValue } = useLocalStorage(
    storeInLocalStorage && storageKey ? `tab-${storageKey}` : `tab-${tabs[0]?.key}`,
    defaultTab
  );
-  // state
-  const [selectedTab, setSelectedTab] = useState(storedValue ?? defaultTab);
+
+  const [activeIndex, setActiveIndex] = useState(() => {
+    const initialTab = storedValue ?? defaultTab;
+    return tabs.findIndex((tab) => tab.key === initialTab);
+  });

  useEffect(() => {
-    if (storeInLocalStorage) {
-      setValue(selectedTab);
+    if (storeInLocalStorage && tabs[activeIndex]) {
+      setValue(tabs[activeIndex].key);
    }
-  }, [selectedTab, setValue, storeInLocalStorage, storageKey]);
+  }, [activeIndex, setValue, storeInLocalStorage, tabs]);

-  const currentTabIndex = (tabKey: string): number => tabs.findIndex((tab) => tab.key === tabKey);
-
-  const handleTabChange = (key: string) => {
-    setSelectedTab(key);
+  const handleTabChange = (index: number) => {
+    setActiveIndex(index);
+    if (!tabs[index].disabled) {
+      tabs[index].onClick?.();
+    }
  };

  return (
-    <div className="flex flex-col w-full h-full">
-      <Tab.Group defaultIndex={currentTabIndex(selectedTab)}>
-        <div className={cn("flex flex-col w-full h-full gap-2", containerClassName)}>
-          <div className={cn("flex w-full items-center gap-4", tabListContainerClassName)}>
-            <TabList
-              tabs={tabs}
-              tabListClassName={tabListClassName}
-              tabClassName={tabClassName}
-              size={size}
-              onTabChange={handleTabChange}
-            />
-            {actions && <div className="flex-grow">{actions}</div>}
-          </div>
-          <Tab.Panels as={Fragment}>
-            {tabs.map((tab) => (
-              <Tab.Panel key={tab.key} as="div" className={cn("relative outline-none", tabPanelClassName)}>
-                {tab.content}
-              </Tab.Panel>
-            ))}
-          </Tab.Panels>
-        </div>
-      </Tab.Group>
-    </div>
+    <BaseTabs.Root
+      value={activeIndex}
+      onValueChange={handleTabChange}
+      className={cn("flex flex-col w-full h-full overflow-hidden", containerClassName)}
+    >
+      <div className={cn("flex w-full items-center gap-4", tabListContainerClassName)}>
+        <TabList
+          tabs={tabs}
+          tabListClassName={tabListClassName}
+          tabClassName={tabClassName}
+          size={size}
+          selectedTab={tabs[activeIndex]?.key}
+        />
+        {actions && <div className="flex-grow">{actions}</div>}
+      </div>
+
+      {tabs.map((tab) => (
+        <BaseTabs.Panel key={tab.key} className={cn("relative  h-full overflow-auto", tabPanelClassName)}>
+          {tab.content}
+        </BaseTabs.Panel>
+      ))}
+    </BaseTabs.Root>
  );
 };
@@ -1,2 +1,3 @@
 export * from "./classname";
 export * from "./icons";
+export * from "./classname";
@@ -2,7 +2,11 @@
  "extends": "@plane/typescript-config/react-library.json",
  "compilerOptions": {
    "jsx": "react",
-    "lib": ["esnext", "dom"]
+    "lib": ["esnext", "dom"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
  },
  "include": ["."],
  "exclude": ["dist", "build", "node_modules"]
@@ -152,11 +152,11 @@

 "@babel/helpers@7.26.10", "@babel/helpers@^7.27.6":
  version "7.26.10"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.10.tgz#6baea3cd62ec2d0c1068778d63cb1314f6637384"
+  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.10.tgz#6baea3cd62ec2d0c1068778d63cb1314f6637384"
  integrity sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==
  dependencies:
-    "@babel/template" "^7.26.9"
-    "@babel/types" "^7.26.10"
+    "@babel/template" "^7.27.2"
+    "@babel/types" "^7.28.2"

 "@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.27.2", "@babel/parser@^7.28.0":
  version "7.28.0"
@@ -165,16 +165,21 @@
  dependencies:
    "@babel/types" "^7.28.0"

-"@babel/runtime@7.26.10", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+"@babel/runtime@7.26.10", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.23.9", "@babel/runtime@^7.27.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
  version "7.26.10"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.10.tgz#a07b4d8fa27af131a633d7b3524db803eb4764c2"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.10.tgz#a07b4d8fa27af131a633d7b3524db803eb4764c2"
  integrity sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==
  dependencies:
    regenerator-runtime "^0.14.0"

-"@babel/template@^7.26.9", "@babel/template@^7.27.2":
+"@babel/runtime@^7.27.6":
+  version "7.28.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.2.tgz#2ae5a9d51cc583bd1f5673b3bb70d6d819682473"
+  integrity sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==
+
+"@babel/template@^7.27.2":
  version "7.27.2"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.27.2.tgz#fa78ceed3c4e7b63ebf6cb39e5852fca45f6809d"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz#fa78ceed3c4e7b63ebf6cb39e5852fca45f6809d"
  integrity sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==
  dependencies:
    "@babel/code-frame" "^7.27.1"
@@ -194,22 +199,37 @@
    "@babel/types" "^7.28.0"
    debug "^4.3.1"

-"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.27.1", "@babel/types@^7.28.0":
-  version "7.28.1"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.1.tgz#2aaf3c10b31ba03a77ac84f52b3912a0edef4cf9"
-  integrity sha512-x0LvFTekgSX+83TI28Y9wYPUfzrnl2aT5+5QLnO6v7mSJYtEEevuDRN0F0uSHRk1G1IWZC43o00Y0xDDrpBGPQ==
-  dependencies:
-    "@babel/helper-string-parser" "^7.27.1"
-    "@babel/helper-validator-identifier" "^7.27.1"
-
-"@babel/types@^7.26.10":
+"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.26.10", "@babel/types@^7.27.1", "@babel/types@^7.28.0":
  version "7.28.2"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.28.2.tgz#da9db0856a9a88e0a13b019881d7513588cf712b"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz#da9db0856a9a88e0a13b019881d7513588cf712b"
  integrity sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==
  dependencies:
    "@babel/helper-string-parser" "^7.27.1"
    "@babel/helper-validator-identifier" "^7.27.1"

+"@base-ui-components/react@^1.0.0-beta.2":
+  version "1.0.0-beta.2"
+  resolved "https://registry.npmjs.org/@base-ui-components/react/-/react-1.0.0-beta.2.tgz#9a07bb6a462907b13aa35979e2b8235cc145adbc"
+  integrity sha512-jfAUfSgXvsfr8mQi7r/6gLG8U1Ybr77NN8WK5IXXM0c/hBvFDBtvUfwDJACV0gXiYbSKpA+dRzZz01V1tULobA==
+  dependencies:
+    "@babel/runtime" "^7.27.6"
+    "@base-ui-components/utils" "0.1.0"
+    "@floating-ui/react-dom" "^2.1.5"
+    "@floating-ui/utils" "^0.2.10"
+    reselect "^5.1.1"
+    tabbable "^6.2.0"
+    use-sync-external-store "^1.5.0"
+
+"@base-ui-components/utils@0.1.0":
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/@base-ui-components/utils/-/utils-0.1.0.tgz#56d0c801eb5afda7fe3f16b94b78cb75745d1eb1"
+  integrity sha512-9+uaWyF1o/PgXqHLJnC81IIG0HlV3o9eFCQ5hWZDMx5NHrFk0rrwqEFGQOB8lti/rnbxNPi+kYYw1D4e8xSn/Q==
+  dependencies:
+    "@babel/runtime" "^7.27.6"
+    "@floating-ui/utils" "^0.2.10"
+    reselect "^5.1.1"
+    use-sync-external-store "^1.5.0"
+
 "@blueprintjs/colors@^4.2.1":
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-4.2.1.tgz#603b2512caee84feddcb3dbd536534c140b9a1f3"
@@ -634,7 +654,14 @@
  dependencies:
    "@floating-ui/utils" "^0.2.10"

-"@floating-ui/dom@^1.7.1", "@floating-ui/dom@^1.7.2":
+"@floating-ui/core@^1.7.3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.7.3.tgz#462d722f001e23e46d86fd2bd0d21b7693ccb8b7"
+  integrity sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==
+  dependencies:
+    "@floating-ui/utils" "^0.2.10"
+
+"@floating-ui/dom@^1.7.1":
  version "1.7.2"
  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.2.tgz#3540b051cf5ce0d4f4db5fb2507a76e8ea5b4a45"
  integrity sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==
@@ -642,12 +669,27 @@
    "@floating-ui/core" "^1.7.2"
    "@floating-ui/utils" "^0.2.10"

-"@floating-ui/react-dom@^2.1.2":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.4.tgz#a0689be8978352fff2be2dfdd718cf668c488ec3"
-  integrity sha512-JbbpPhp38UmXDDAu60RJmbeme37Jbgsm7NrHGgzYYFKmblzRUh6Pa641dII6LsjwF4XlScDrde2UAzDo/b9KPw==
+"@floating-ui/dom@^1.7.3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.3.tgz#6174ac3409e6a064bbdf1f4bb07188ee9461f8cf"
+  integrity sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==
  dependencies:
-    "@floating-ui/dom" "^1.7.2"
+    "@floating-ui/core" "^1.7.3"
+    "@floating-ui/utils" "^0.2.10"
+
+"@floating-ui/react-dom@^2.1.2", "@floating-ui/react-dom@^2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.5.tgz#d11e3726d2eb385d8cf3216348742907c1d49fcf"
+  integrity sha512-HDO/1/1oH9fjj4eLgegrlH3dklZpHtUYYFiVwMUwfGvk9jWDRWqkklA2/NFScknrcNSspbV868WjXORvreDX+Q==
+  dependencies:
+    "@floating-ui/dom" "^1.7.3"
+
+"@floating-ui/react-dom@^2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.5.tgz#d11e3726d2eb385d8cf3216348742907c1d49fcf"
+  integrity sha512-HDO/1/1oH9fjj4eLgegrlH3dklZpHtUYYFiVwMUwfGvk9jWDRWqkklA2/NFScknrcNSspbV868WjXORvreDX+Q==
+  dependencies:
+    "@floating-ui/dom" "^1.7.3"

 "@floating-ui/react@^0.26.4":
  version "0.26.28"
@@ -2465,9 +2507,9 @@
    "@types/express-serve-static-core" "*"
    "@types/ws" "*"

-"@types/express@*", "@types/express@4.17.23", "@types/express@^4.17.21", "@types/express@^4.17.23":
+"@types/express@*", "@types/express@^4.17.21", "@types/express@^4.17.23":
  version "4.17.23"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.23.tgz#35af3193c640bfd4d7fe77191cd0ed411a433bef"
+  resolved "https://registry.npmjs.org/@types/express/-/express-4.17.23.tgz#35af3193c640bfd4d7fe77191cd0ed411a433bef"
  integrity sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ==
  dependencies:
    "@types/body-parser" "*"
@@ -2673,7 +2715,7 @@

 "@types/react-dom@18.3.0":
  version "18.3.0"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
  dependencies:
    "@types/react" "*"
@@ -2696,15 +2738,16 @@
  integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==

 "@types/react@*":
-  version "19.1.8"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.8.tgz#ff8395f2afb764597265ced15f8dddb0720ae1c3"
-  integrity sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==
+  version "18.3.18"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz#9b382c4cd32e13e463f97df07c2ee3bbcd26904b"
+  integrity sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==
  dependencies:
+    "@types/prop-types" "*"
    csstype "^3.0.2"

 "@types/react@18.3.1":
  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.1.tgz#fed43985caa834a2084d002e4771e15dfcbdbe8e"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.3.1.tgz#fed43985caa834a2084d002e4771e15dfcbdbe8e"
  integrity sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==
  dependencies:
    "@types/prop-types" "*"
@@ -3736,6 +3779,15 @@ bind-event-listener@^3.0.0:
  resolved "https://registry.yarnpkg.com/bind-event-listener/-/bind-event-listener-3.0.0.tgz#c90f9a7fcb65cac21045f810c20ef7e647a74921"
  integrity sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==

+bl@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
+  integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
+  dependencies:
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
 bluebird@^3.7.2:
  version "3.7.2"
  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
@@ -3764,9 +3816,17 @@ boolbase@^1.0.0:
  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
  integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==

-brace-expansion@2.0.2, brace-expansion@^1.1.7, brace-expansion@^2.0.1:
+brace-expansion@^1.1.7:
+  version "1.1.12"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.12.tgz#ab9b454466e5a8cc3a187beaad580412a9c5b843"
+  integrity sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brace-expansion@^2.0.1:
  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.2.tgz#54fc53237a613d854c7bd37463aad17df87214e7"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz#54fc53237a613d854c7bd37463aad17df87214e7"
  integrity sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==
  dependencies:
    balanced-match "^1.0.0"
@@ -3812,6 +3872,14 @@ buffer-from@^1.0.0:
  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==

+buffer@^5.5.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
 buffer@^6.0.3:
  version "6.0.3"
  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
@@ -3962,9 +4030,9 @@ check-error@^2.1.1:
  resolved "https://registry.yarnpkg.com/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
  integrity sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==

-chokidar@3.6.0, chokidar@^3.3.0, chokidar@^3.5.2, chokidar@^3.5.3, chokidar@^3.6.0, chokidar@^4.0.3:
+chokidar@^3.3.0, chokidar@^3.5.2, chokidar@^3.5.3, chokidar@^3.6.0:
  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
  dependencies:
    anymatch "~3.1.2"
@@ -3977,6 +4045,18 @@ chokidar@3.6.0, chokidar@^3.3.0, chokidar@^3.5.2, chokidar@^3.5.3, chokidar@^3.6
  optionalDependencies:
    fsevents "~2.3.2"

+chokidar@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.3.tgz#7be37a4c03c9aee1ecfe862a4a23b2c70c205d30"
+  integrity sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==
+  dependencies:
+    readdirp "^4.0.1"
+
+chownr@^1.1.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
+
 chromatic@^11.4.0:
  version "11.29.0"
  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.29.0.tgz#da556dbd3b043e8c6a3134d1afa3bb4ad7317410"
@@ -4173,6 +4253,11 @@ compute-scroll-into-view@^3.0.2:
  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz#02c3386ec531fb6a9881967388e53e8564f3e9aa"
  integrity sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==

+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
 concurrently@^9.0.1:
  version "9.2.0"
  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-9.2.0.tgz#233e3892ceb0b5db9fd49e9c8c739737a7b638b5"
@@ -4887,7 +4972,7 @@ encodeurl@~2.0.0:
  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==

-end-of-stream@^1.1.0:
+end-of-stream@^1.1.0, end-of-stream@^1.4.1:
  version "1.4.5"
  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.5.tgz#7344d711dea40e0b74abc2ed49778743ccedb08c"
  integrity sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==
@@ -5075,9 +5160,9 @@ esbuild-register@^3.5.0:
  dependencies:
    debug "^4.3.4"

-esbuild@0.25.0, "esbuild@^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0", esbuild@^0.25.0:
+"esbuild@^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0", esbuild@^0.25.0:
  version "0.25.0"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.25.0.tgz#0de1787a77206c5a79eeb634a623d39b5006ce92"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.25.0.tgz#0de1787a77206c5a79eeb634a623d39b5006ce92"
  integrity sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==
  optionalDependencies:
    "@esbuild/aix-ppc64" "0.25.0"
@@ -5755,6 +5840,11 @@ fresh@0.5.2:
  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
  integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==

+fs-constants@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
+  integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
+
 fs-extra@^10.0.0:
  version "10.1.0"
  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
@@ -6166,7 +6256,7 @@ icss-utils@^5.0.0, icss-utils@^5.1.0:
  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==

-ieee754@^1.2.1:
+ieee754@^1.1.13, ieee754@^1.2.1:
  version "1.2.1"
  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
@@ -6219,7 +6309,7 @@ inflight@^1.0.4:
    once "^1.3.0"
    wrappy "1"

-inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -7389,7 +7479,7 @@ minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.6:
  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==

-mkdirp-classic@^0.5.3:
+mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
  version "0.5.3"
  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
  integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
@@ -7458,9 +7548,14 @@ mz@^2.7.0:
    object-assign "^4.0.1"
    thenify-all "^1.0.0"

-nanoid@3.3.8, nanoid@^3.3.11, nanoid@^3.3.6:
+nanoid@^3.3.11:
+  version "3.3.11"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.11.tgz#4f4f112cefbe303202f2199838128936266d185b"
+  integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
+
+nanoid@^3.3.6:
  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==

 napi-build-utils@^2.0.0:
@@ -8473,9 +8568,9 @@ prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transfor
  dependencies:
    prosemirror-model "^1.21.0"

-prosemirror-view@1.40.0, prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.37.0, prosemirror-view@^1.39.1:
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.37.0, prosemirror-view@^1.39.1:
  version "1.40.0"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.40.0.tgz#212e627a0c4f0198ac9823a1232e0099c9a92865"
+  resolved "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.40.0.tgz#212e627a0c4f0198ac9823a1232e0099c9a92865"
  integrity sha512-2G3svX0Cr1sJjkD/DYWSe3cfV5VPVTBOxI9XQEGWJDFEpsZb/gh4MV29ctv+OJx2RFX4BLt09i+6zaGM/ldkCw==
  dependencies:
    prosemirror-model "^1.20.0"
@@ -8829,7 +8924,7 @@ read-cache@^1.0.0:
  dependencies:
    pify "^2.3.0"

-readable-stream@^3.4.0, readable-stream@^3.6.2:
+readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.2:
  version "3.6.2"
  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
@@ -8849,6 +8944,11 @@ readable-stream@^4.0.0:
    process "^0.11.10"
    string_decoder "^1.3.0"

+readdirp@^4.0.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.1.2.tgz#eb85801435fbf2a7ee58f19e0921b068fc69948d"
+  integrity sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==
+
 readdirp@~3.6.0:
  version "3.6.0"
  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -9001,6 +9101,11 @@ require-from-string@^2.0.2:
  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==

+reselect@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz#c766b1eb5d558291e5e550298adb0becc24bb72e"
+  integrity sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==
+
 resolve-from@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -9781,7 +9886,7 @@ symbol-tree@^3.2.4:
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==

-tabbable@^6.0.0:
+tabbable@^6.0.0, tabbable@^6.2.0:
  version "6.2.0"
  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
@@ -9829,9 +9934,19 @@ tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.2.tgz#ab4984340d30cb9989a490032f086dbb8b56d872"
  integrity sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==

-tar-fs@3.0.9, tar-fs@^2.0.0, tar-fs@^3.0.4:
+tar-fs@^2.0.0:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.3.tgz#fb3b8843a26b6f13a08e606f7922875eb1fbbf92"
+  integrity sha512-090nwYJDmlhwFwEW3QQl+vaNnxsO2yVsd45eTKRBzSzu+hlb1w2K9inVq5b0ngXuLVqQ4ApvsUHHnu/zQNkWAg==
+  dependencies:
+    chownr "^1.1.1"
+    mkdirp-classic "^0.5.2"
+    pump "^3.0.0"
+    tar-stream "^2.1.4"
+
+tar-fs@^3.0.4:
  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-3.0.9.tgz#d570793c6370d7078926c41fa422891566a0b617"
+  resolved "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.9.tgz#d570793c6370d7078926c41fa422891566a0b617"
  integrity sha512-XF4w9Xp+ZQgifKakjZYmFdkLoSWd34VGKcsTCwlNWM7QG3ZbaxnTsaBwnjFZqHRf/rROxaR8rXnbtwdvaDI+lA==
  dependencies:
    pump "^3.0.0"
@@ -9840,6 +9955,17 @@ tar-fs@3.0.9, tar-fs@^2.0.0, tar-fs@^3.0.4:
    bare-fs "^4.0.1"
    bare-path "^3.0.0"

+tar-stream@^2.1.4:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
+  integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
+  dependencies:
+    bl "^4.0.3"
+    end-of-stream "^1.4.1"
+    fs-constants "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+
 tar-stream@^3.1.5:
  version "3.1.7"
  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-3.1.7.tgz#24b3fb5eabada19fe7338ed6d26e5f7c482e792b"
@@ -10463,7 +10589,7 @@ use-sidecar@^1.1.3:
    detect-node-es "^1.1.0"
    tslib "^2.0.0"

-use-sync-external-store@^1, use-sync-external-store@^1.4.0:
+use-sync-external-store@^1, use-sync-external-store@^1.4.0, use-sync-external-store@^1.5.0:
  version "1.5.0"
  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz#55122e2a3edd2a6c106174c27485e0fd59bcfca0"
  integrity sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==
Author	SHA1	Message	Date
gakshita	51c33e7b13	Merge branch 'feat-base-ui-migration' of https://github.com/makeplane/plane into chore-base-ui-menu	2025-08-14 18:43:32 +05:30
gakshita	0502b7e833	fix: removed all instances of headless ui's Menu	2025-08-13 15:56:07 +05:30
gakshita	0b99dcee5a	chore: implemented menu using base ui	2025-08-12 18:29:29 +05:30
Jayash Tripathy	3272abac09	refactor: style cleanup	2025-08-12 01:22:18 +05:30
Jayash Tripathy	650df35840	Merge remote-tracking branch 'origin/preview' into feat-base-ui-migration	2025-08-12 01:03:42 +05:30
Jayash Tripathy	5e0d3c9108	Feat base UI tabs (#7569 ) * chore: added base-ui tabs * refactor: cleanup	2025-08-11 18:47:15 +05:30
sriramveeraghanta	70cdd49ea9	fix: update avatar component	2025-08-06 20:01:47 +05:30