Migrate to twenty-ui - navigation/menu-item (#8213)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7536](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7536).

 --- 

### Description

Migrate all menu items components to twenty ui and update imports.

```typescript
MenuItem
MenuItemAvata
MenuItemCommand
MenuItemCommandHotKeys
MenuItemDraggable
MenuItemMultiSelect
MenuItemMultiSelectAvatar
MenuItemMultiSelectTag
MenuItemNavigate
MenuItemSelect
MenuItemSelectAvatar
MenuItemSelectColor
MenuItemSelectTag
MenuItemSuggestion
MenuItemToggle
```

\
Also migrate all other dependent components and utilities like
`Checkbox` & `Toggle`\
\
Fixes twentyhq/private-issues#82

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx

@@ -10,10 +10,10 @@ import { ActionMenuDropdownHotkeyScope } from '@/action-menu/types/ActionMenuDro
 import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+import { MenuItem } from 'twenty-ui';
 
 type StyledContainerProps = {
   position: PositionType;

packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenuBarEntry.tsx

@@ -1,8 +1,7 @@
+import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
+import { MOBILE_VIEWPORT, MenuItemAccent } from 'twenty-ui';
-import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
-import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
 
 type RecordShowActionMenuBarEntryProps = {
   entry: ActionMenuEntry;

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordShowActionMenuBar.stories.tsx

@@ -8,13 +8,13 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
 import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
-import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
 import { userEvent, waitFor, within } from '@storybook/test';
 import {
   ComponentDecorator,
   IconFileExport,
   IconHeart,
   IconTrash,
+  MenuItemAccent,
 } from 'twenty-ui';
 
 const deleteMock = jest.fn();

packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts

@@ -1,7 +1,5 @@
 import { MouseEvent, ReactNode } from 'react';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, MenuItemAccent } from 'twenty-ui';
-
-import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
 
 export type ActionMenuEntry = {
   type: 'standard' | 'workflow-run';

packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx

@@ -1,9 +1,8 @@
 import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
-import { MenuItemAvatar } from '@/ui/navigation/menu-item/components/MenuItemAvatar';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { IconPlus } from 'twenty-ui';
+import { IconPlus, MenuItemAvatar } from 'twenty-ui';
 
 export const MessageThreadSubscriberDropdownAddSubscriberMenuItem = ({
   workspaceMember,

packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx

@@ -1,5 +1,5 @@
 import { offset } from '@floating-ui/react';
-import { IconMinus, IconPlus } from 'twenty-ui';
+import { IconMinus, IconPlus, MenuItem, MenuItemAvatar } from 'twenty-ui';
 
 import { MessageThreadSubscriberDropdownAddSubscriber } from '@/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriber';
 import { MessageThreadSubscribersChip } from '@/activities/emails/components/MessageThreadSubscribersChip';
@@ -10,8 +10,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemAvatar } from '@/ui/navigation/menu-item/components/MenuItemAvatar';
 import { useState } from 'react';
 
 export const MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID =

packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx

@@ -4,13 +4,13 @@ import {
   IconPencil,
   IconTrash,
   LightIconButton,
+  MenuItem,
 } from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type AttachmentDropdownProps = {
   onDownload: () => void;

packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx

@@ -1,9 +1,8 @@
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
-import { IconArrowUpRight, IconComponent } from 'twenty-ui';
+import { IconArrowUpRight, IconComponent, MenuItemCommand } from 'twenty-ui';
 
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItemCommand } from '@/ui/navigation/menu-item/components/MenuItemCommand';
 
 import { useCommandMenu } from '../hooks/useCommandMenu';
 

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx

@@ -4,7 +4,6 @@ import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dr
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
@@ -13,7 +12,13 @@ import { availableFilterDefinitionsComponentState } from '@/views/states/availab
 import { ViewFilterGroup } from '@/views/types/ViewFilterGroup';
 import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLogicalOperator';
 import { useCallback } from 'react';
-import { IconLibraryPlus, IconPlus, isDefined, LightButton } from 'twenty-ui';
+import {
+  IconLibraryPlus,
+  IconPlus,
+  isDefined,
+  LightButton,
+  MenuItem,
+} from 'twenty-ui';
 import { v4 } from 'uuid';
 
 type AdvancedFilterAddFilterRuleSelectProps = {

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRuleOptionsDropdown.tsx

@@ -4,10 +4,9 @@ import { useCurrentViewViewFilterGroup } from '@/object-record/advanced-filter/h
 import { useDeleteCombinedViewFilterGroup } from '@/object-record/advanced-filter/hooks/useDeleteCombinedViewFilterGroup';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
 import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
-import { isDefined } from 'twenty-ui';
+import { isDefined, MenuItem } from 'twenty-ui';
 
 type AdvancedFilterRuleOptionsDropdownProps =
   | {

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterViewFilterOperandSelect.tsx

@@ -6,12 +6,11 @@ import { SelectControl } from '@/ui/input/components/SelectControl';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
 import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import styled from '@emotion/styled';
-import { isDefined } from 'twenty-ui';
+import { isDefined, MenuItem } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   flex: 1;

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/AdvancedFilterButton.tsx

@@ -3,8 +3,6 @@ import { useUpsertCombinedViewFilterGroup } from '@/object-record/advanced-filte
 import { OBJECT_FILTER_DROPDOWN_ID } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId';
 import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dropdown/utils/getOperandsForFilterType';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
-import { StyledMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
@@ -12,7 +10,12 @@ import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedVie
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { ViewFilterGroupLogicalOperator } from '@/views/types/ViewFilterGroupLogicalOperator';
 import styled from '@emotion/styled';
-import { IconFilter, Pill } from 'twenty-ui';
+import {
+  IconFilter,
+  MenuItemLeftContent,
+  Pill,
+  StyledMenuItemBase,
+} from 'twenty-ui';
 import { v4 } from 'uuid';
 
 export const StyledContainer = styled.div`

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectCompositeFieldSubMenu.tsx

@@ -12,11 +12,16 @@ import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dr
 import { SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsCompositeFieldTypeConfigs';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { IconApps, IconChevronLeft, isDefined, useIcons } from 'twenty-ui';
+import {
+  IconApps,
+  IconChevronLeft,
+  isDefined,
+  MenuItem,
+  useIcons,
+} from 'twenty-ui';
 
 export const ObjectFilterDropdownFilterSelectCompositeFieldSubMenu = () => {
   const [searchText] = useState('');

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelectMenuItem.tsx

@@ -13,11 +13,10 @@ import { getOperandsForFilterDefinition } from '@/object-record/object-filter-dr
 import { isCompositeField } from '@/object-record/object-filter-dropdown/utils/isCompositeField';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useRecoilValue } from 'recoil';
-import { useIcons } from 'twenty-ui';
+import { MenuItemSelect, useIcons } from 'twenty-ui';
 
 export type ObjectFilterDropdownFilterSelectMenuItemProps = {
   filterDefinition: FilterDefinition;

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx

@@ -3,8 +3,8 @@ import { v4 } from 'uuid';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
+import { MenuItem } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
 import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx

@@ -13,10 +13,10 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+
-import { MenuItemMultiSelect } from '@/ui/navigation/menu-item/components/MenuItemMultiSelect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import { MenuItem, MenuItemMultiSelect } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
 export const EMPTY_FILTER_VALUE = '';

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx

@@ -1,9 +1,8 @@
-import { IconFilterOff } from 'twenty-ui';
+import { IconFilterOff, MenuItem } from 'twenty-ui';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 export const ObjectFilterDropdownRecordRemoveFilterMenuItem = () => {
   const { emptyFilterButKeepDefinition } = useFilterDropdown();

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { IconChevronDown, useIcons } from 'twenty-ui';
+import { IconChevronDown, MenuItem, useIcons } from 'twenty-ui';
 
 import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
 import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
@@ -14,7 +14,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx

@@ -4,8 +4,8 @@ import { useCallback, useRef } from 'react';
 import { useRecordGroupActions } from '@/object-record/record-group/hooks/useRecordGroupActions';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { MenuItem } from 'twenty-ui';
 
 const StyledMenuContainer = styled.div`
   position: absolute;

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import React, { useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
-import { IconCheck, IconPlus, LightIconButton } from 'twenty-ui';
+import { IconCheck, IconPlus, LightIconButton, MenuItem } from 'twenty-ui';
 
 import { PhoneRecord } from '@/object-record/record-field/types/FieldMetadata';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@@ -11,7 +11,6 @@ import {
 } from '@/ui/layout/dropdown/components/DropdownMenuInput';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx

@@ -1,6 +1,5 @@
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown';
 import { useState } from 'react';
 import {
@@ -8,6 +7,7 @@ import {
   IconBookmarkPlus,
   IconPencil,
   IconTrash,
+  MenuItem,
 } from 'twenty-ui';
 
 type MultiItemFieldMenuItemProps<T> = {

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx

@@ -12,9 +12,9 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItemMultiSelectTag } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectTag';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { MenuItemMultiSelectTag } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageKanbanAddMenuItem.tsx

@@ -1,8 +1,7 @@
 import { RecordGroupDefinitionType } from '@/object-record/record-group/types/RecordGroupDefinition';
 import { useRecordIndexPageKanbanAddMenuItem } from '@/object-record/record-index/hooks/useRecordIndexPageKanbanAddMenuItem';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import styled from '@emotion/styled';
-import { Tag } from 'twenty-ui';
+import { MenuItem, Tag } from 'twenty-ui';
 
 const StyledMenuItem = styled(MenuItem)`
   width: calc(100% - 2 * var(--horizontal-padding));

packages/twenty-front/src/modules/object-record/record-index/options/components/RecordIndexOptionsDropdownContent.tsx

@@ -9,6 +9,9 @@ import {
   IconRotate2,
   IconSettings,
   IconTag,
+  MenuItem,
+  MenuItemNavigate,
+  MenuItemToggle,
   UndecoratedLink,
   useIcons,
 } from 'twenty-ui';
@@ -36,9 +39,6 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemNavigate } from '@/ui/navigation/menu-item/components/MenuItemNavigate';
-import { MenuItemToggle } from '@/ui/navigation/menu-item/components/MenuItemToggle';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx

@@ -10,6 +10,7 @@ import {
   IconTrash,
   IconUnlink,
   LightIconButton,
+  MenuItem,
 } from 'twenty-ui';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@@ -38,7 +39,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
 const StyledListItem = styled(RecordDetailRecordsListItem)<{

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx

@@ -4,13 +4,13 @@ import {
   IconEyeOff,
   IconFilter,
   IconSortDescending,
+  MenuItem,
 } from 'twenty-ui';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
 import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useContext } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
-import { IconSettings, UndecoratedLink, useIcons } from 'twenty-ui';
+import { IconSettings, MenuItem, UndecoratedLink, useIcons } from 'twenty-ui';
 
 import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
@@ -12,7 +12,6 @@ import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefin
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 

packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx

@@ -1,13 +1,12 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { Avatar } from 'twenty-ui';
+import { Avatar, MenuItemMultiSelectAvatar } from 'twenty-ui';
 
 import { useObjectRecordMultiSelectScopedStates } from '@/activities/hooks/useObjectRecordMultiSelectScopedStates';
 import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
 import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx

@@ -1,11 +1,10 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { Avatar } from 'twenty-ui';
+import { Avatar, MenuItemSelectAvatar } from 'twenty-ui';
 
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
 
 type SelectableMenuItemSelectProps = {
   entity: EntityForSelect;

packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx

@@ -2,7 +2,7 @@ import { isNonEmptyString } from '@sniptt/guards';
 import { Fragment, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { IconComponent, IconPlus } from 'twenty-ui';
+import { IconComponent, IconPlus, MenuItem, MenuItemSelect } from 'twenty-ui';
 
 import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect';
 import { SINGLE_ENTITY_SELECT_BASE_LIST } from '@/object-record/relation-picker/constants/SingleEntitySelectBaseList';
@@ -12,8 +12,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { AvatarChip } from 'twenty-ui';
+import { AvatarChip, MenuItem, MenuItemMultiSelectAvatar } from 'twenty-ui';
 
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
@@ -11,8 +11,6 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 const StyledAvatarChip = styled(AvatarChip)`

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx

@@ -5,7 +5,7 @@ import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
-import { H2Title, Toggle, Card } from 'twenty-ui';
+import { Card, H2Title, Toggle } from 'twenty-ui';
 import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
 
 const StyledDetailsContainer = styled.div`

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx

@@ -6,6 +6,7 @@ import {
   IconRefresh,
   IconTrash,
   LightIconButton,
+  MenuItem,
 } from 'twenty-ui';
 
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
@@ -16,7 +17,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsAccountsRowDropdownMenuProps = {
   account: ConnectedAccount;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx

@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+
+import { Card, CardContent, Toggle } from 'twenty-ui';
+
+type Parameter = {
+  value: boolean;
+  title: string;
+  description: string;
+  onToggle: (value: boolean) => void;
+};
+
+type SettingsAccountsToggleSettingCardProps = {
+  parameters: Parameter[];
+};
+
+const StyledCardContent = styled(CardContent)`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+  cursor: pointer;
+
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.lighter};
+  }
+`;
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledDescription = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+`;
+
+const StyledToggle = styled(Toggle)`
+  margin-left: auto;
+`;
+
+export const SettingsAccountsToggleSettingCard = ({
+  parameters,
+}: SettingsAccountsToggleSettingCardProps) => (
+  <Card rounded>
+    {parameters.map((parameter, index) => (
+      <StyledCardContent
+        key={index}
+        divider={index < parameters.length - 1}
+        onClick={() => parameter.onToggle(!parameter.value)}
+      >
+        <div>
+          <StyledTitle>{parameter.title}</StyledTitle>
+          <StyledDescription>{parameter.description}</StyledDescription>
+        </div>
+        <StyledToggle value={parameter.value} onChange={parameter.onToggle} />
+      </StyledCardContent>
+    ))}
+  </Card>
+);

packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx

@@ -3,7 +3,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
@@ -12,7 +11,7 @@ import {
   useParams,
   useSearchParams,
 } from 'react-router-dom';
-import { Button, IconChevronDown, isDefined } from 'twenty-ui';
+import { Button, IconChevronDown, isDefined, MenuItem } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx

@@ -10,6 +10,8 @@ import {
   IconX,
   LightIconButton,
   MAIN_COLOR_NAMES,
+  MenuItem,
+  MenuItemSelectColor,
 } from 'twenty-ui';
 import { v4 } from 'uuid';
 
@@ -22,8 +24,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useRecoilValue } from 'recoil';

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx

@@ -5,13 +5,13 @@ import {
   IconPencil,
   IconTextSize,
   LightIconButton,
+  MenuItem,
 } from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsObjectFieldActiveActionDropdownProps = {
   isCustomField?: boolean;

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx

@@ -5,13 +5,13 @@ import {
   IconPencil,
   IconTrash,
   LightIconButton,
+  MenuItem,
 } from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 type SettingsObjectFieldInactiveActionDropdownProps = {

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx

@@ -5,6 +5,7 @@ import {
   IconDotsVertical,
   IconPencil,
   LightIconButton,
+  MenuItem,
   useIcons,
 } from 'twenty-ui';
 
@@ -18,7 +19,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsObjectSummaryCardProps = {
   objectMetadataItem: ObjectMetadataItem;

packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx

@@ -3,13 +3,13 @@ import {
   IconDotsVertical,
   IconTrash,
   LightIconButton,
+  MenuItem,
 } from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsObjectInactiveMenuDropDownProps = {
   isCustomObject: boolean;

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx

@@ -3,13 +3,13 @@ import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/inte
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import styled from '@emotion/styled';
 import {
   IconDotsVertical,
   IconPencil,
   IconTrash,
   LightIconButton,
+  MenuItem,
   UndecoratedLink,
 } from 'twenty-ui';
 

packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx

@@ -4,7 +4,7 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
-import { IconLink, Toggle, Card } from 'twenty-ui';
+import { Card, IconLink, Toggle } from 'twenty-ui';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
 const StyledToggle = styled(Toggle)`

packages/twenty-front/src/modules/settings/security/components/SettingsSecuritySSORowDropdownMenu.tsx

@@ -5,6 +5,7 @@ import {
   IconDotsVertical,
   IconTrash,
   LightIconButton,
+  MenuItem,
 } from 'twenty-ui';
 
 import { useDeleteSSOIdentityProvider } from '@/settings/security/hooks/useDeleteSSOIdentityProvider';
@@ -16,7 +17,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { UnwrapRecoilValue } from 'recoil';
 import { SsoIdentityProviderStatus } from '~/generated/graphql';
 import { isDefined } from '~/utils/isDefined';

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow.tsx

@@ -6,7 +6,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import {
@@ -16,6 +15,7 @@ import {
   IconTrash,
   IconX,
   LightIconButton,
+  MenuItem,
   OverflowingTextWithTooltip,
 } from 'twenty-ui';
 

packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -1,5 +1,3 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
@@ -9,7 +7,9 @@ import {
   size,
   useFloating,
 } from '@floating-ui/react';
-import { AppTooltip } from 'twenty-ui';
+import React, { useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { AppTooltip, MenuItem, MenuItemSelect } from 'twenty-ui';
 import { ReadonlyDeep } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -18,8 +18,6 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useUpdateEffect } from '~/hooks/useUpdateEffect';
 

packages/twenty-front/src/modules/support/components/SupportDropdown.tsx

@@ -3,8 +3,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { IconHelpCircle, IconMessage, MenuItem } from 'twenty-ui';
-import { IconHelpCircle, IconMessage } from 'twenty-ui';
 
 export const SupportDropdown = () => {
   const dropdownId = `support-field-active-action-dropdown`;

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -1,13 +1,12 @@
 import styled from '@emotion/styled';
 import { MouseEvent, useMemo, useRef, useState } from 'react';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, MenuItem } from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 import { SelectControl } from '@/ui/input/components/SelectControl';
 import { isDefined } from '~/utils/isDefined';

packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx

@@ -6,7 +6,6 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { MenuItemSelectTag } from '@/ui/navigation/menu-item/components/MenuItemSelectTag';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useTheme } from '@emotion/react';
@@ -20,7 +19,7 @@ import {
 } from '@floating-ui/react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
-import { TagColor, isDefined } from 'twenty-ui';
+import { MenuItemSelectTag, TagColor, isDefined } from 'twenty-ui';
 
 const StyledRelationPickerContainer = styled.div`
   left: -1px;

packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx

@@ -4,9 +4,8 @@ import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
 
+import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui';
 import { Currency } from './CurrencyPickerDropdownButton';
 
 export const CurrencyPickerDropdownSelect = ({

packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx

@@ -2,12 +2,15 @@ import styled from '@emotion/styled';
 import { DateTime } from 'luxon';
 import ReactDatePicker from 'react-datepicker';
 import { Key } from 'ts-key-enum';
-import { IconCalendarX, OVERLAY_BACKGROUND } from 'twenty-ui';
+import {
+  IconCalendarX,
+  MenuItemLeftContent,
+  OVERLAY_BACKGROUND,
+  StyledHoverableMenuItemBase,
+} from 'twenty-ui';
 
 import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
-import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase';
 import { isDefined } from '~/utils/isDefined';
 
 import { AbsoluteDatePickerHeader } from '@/ui/input/components/internal/date/components/AbsoluteDatePickerHeader';

packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownSelect.tsx

@@ -1,15 +1,14 @@
-import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
+import { useMemo, useState } from 'react';
 
 import { Country } from '@/ui/input/components/internal/types/Country';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
 
 import 'react-phone-number-input/style.css';
+import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui';
 
 const StyledIconContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx

@@ -1,10 +1,9 @@
 import { SuggestionMenuProps } from '@blocknote/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, MenuItemSuggestion } from 'twenty-ui';
 
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { MenuItemSuggestion } from '@/ui/navigation/menu-item/components/MenuItemSuggestion';
 
 export type SuggestionItem = {
   title: string;

packages/twenty-front/src/modules/ui/input/relation-picker/components/CreateNewButton.tsx

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-
+import { MenuItem } from 'twenty-ui';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 const StyledCreateNewButton = styled(MenuItem)<{ hovered?: boolean }>`
   ${({ hovered, theme }) =>

packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableItem.stories.tsx

@@ -1,9 +1,8 @@
 import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator, IconBell } from 'twenty-ui';
+import { ComponentDecorator, IconBell, MenuItemDraggable } from 'twenty-ui';
 
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
-import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
 
 const meta: Meta<typeof DraggableItem> = {
   title: 'UI/Layout/DraggableList/DraggableItem',

packages/twenty-front/src/modules/ui/layout/draggable-list/components/__stories__/DraggableList.stories.tsx

@@ -1,10 +1,8 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator, IconBell } from 'twenty-ui';
-
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
-import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator, IconBell, MenuItemDraggable } from 'twenty-ui';
 
 const meta: Meta<typeof DraggableList> = {
   title: 'UI/Layout/DraggableList/DraggableList',

packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -3,12 +3,16 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 import { PlayFunction } from '@storybook/types';
 import { useState } from 'react';
-import { Avatar, Button, ComponentDecorator } from 'twenty-ui';
+import {
+  Avatar,
+  Button,
+  ComponentDecorator,
+  MenuItem,
+  MenuItemMultiSelectAvatar,
+  MenuItemSelectAvatar,
+} from 'twenty-ui';
 
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
-import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
 
 import { Dropdown } from '../Dropdown';
 import { DropdownMenuHeader } from '../DropdownMenuHeader';

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -1,5 +1,11 @@
 import styled from '@emotion/styled';
-import { IconButton, IconCheckbox, IconNotes, IconPlus } from 'twenty-ui';
+import {
+  IconButton,
+  IconCheckbox,
+  IconNotes,
+  IconPlus,
+  MenuItem,
+} from 'twenty-ui';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
@@ -7,7 +13,6 @@ import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID } from '@/ui/layout/show-page/constants/ShowPageAddButtonDropdownId';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { Dropdown } from '../../dropdown/components/Dropdown';

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx

@@ -6,13 +6,13 @@ import {
   IconDotsVertical,
   IconRestore,
   IconTrash,
+  MenuItem,
 } from 'twenty-ui';
 
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 
 import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord';

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemWithOptionDropdown.tsx

@@ -1,3 +1,5 @@
+import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useTheme } from '@emotion/react';
 import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react';
 import {
@@ -6,16 +8,11 @@ import {
   IconDotsVertical,
   LightIconButton,
   LightIconButtonProps,
-} from 'twenty-ui';
+  MenuItemAccent,
-
+  MenuItemLeftContent,
-import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
-import {
   StyledHoverableMenuItemBase,
   StyledMenuItemLeftContent,
-} from '../internals/components/StyledMenuItemBase';
+} from 'twenty-ui';
-import { MenuItemAccent } from '../types/MenuItemAccent';
 
 export type MenuItemIconButton = {
   Wrapper?: FunctionComponent<{ iconButton: ReactElement }>;

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx

@@ -3,7 +3,6 @@ import { Workspaces } from '@/auth/states/workspaces';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemSelectAvatar';
 import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
 import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
 import { MULTI_WORKSPACE_DROPDOWN_ID } from '@/ui/navigation/navigation-drawer/constants/MulitWorkspaceDropdownId';
@@ -14,7 +13,7 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { IconChevronDown } from 'twenty-ui';
+import { IconChevronDown, MenuItemSelectAvatar } from 'twenty-ui';
 import { getImageAbsoluteURI } from '~/utils/image/getImageAbsoluteURI';
 
 const StyledLogo = styled.div<{ logo: string }>`

packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx

@@ -1,10 +1,15 @@
 import styled from '@emotion/styled';
-import { Button, ButtonGroup, IconChevronDown, IconPlus } from 'twenty-ui';
+import {
+  Button,
+  ButtonGroup,
+  IconChevronDown,
+  IconPlus,
+  MenuItem,
+} from 'twenty-ui';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';

packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx

@@ -10,6 +10,7 @@ import {
   IconEye,
   IconEyeOff,
   IconInfoCircle,
+  MenuItemDraggable,
   useIcons,
 } from 'twenty-ui';
 
@@ -19,7 +20,6 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenuSubheader } from '@/ui/layout/dropdown/components/StyledDropdownMenuSubheader';
-import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy';
 import { isDefined } from '~/utils/isDefined';

packages/twenty-front/src/modules/views/components/ViewGroupsVisibilityDropdownSection.tsx

@@ -4,7 +4,7 @@ import {
   ResponderProvided,
 } from '@hello-pangea/dnd';
 import { useRef } from 'react';
-import { IconEye, IconEyeOff, Tag } from 'twenty-ui';
+import { IconEye, IconEyeOff, MenuItemDraggable, Tag } from 'twenty-ui';
 
 import {
   RecordGroupDefinition,
@@ -14,7 +14,6 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenuSubheader } from '@/ui/layout/dropdown/components/StyledDropdownMenuSubheader';
-import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
 import { isDefined } from '~/utils/isDefined';
 
 type ViewGroupsVisibilityDropdownSectionProps = {

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx

@@ -6,6 +6,8 @@ import {
   IconPencil,
   IconPlus,
   LightIconButtonAccent,
+  MenuItem,
+  MenuItemDraggable,
   useIcons,
 } from 'twenty-ui';
 
@@ -14,8 +16,6 @@ import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableLi
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useChangeView } from '@/views/hooks/useChangeView';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';

packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx

@@ -1,8 +1,8 @@
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { ACTIONS } from '@/workflow/constants/Actions';
 import { useCreateStep } from '@/workflow/hooks/useCreateStep';
 import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
 import styled from '@emotion/styled';
+import { MenuItem } from 'twenty-ui';
 
 const StyledActionListContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx

@@ -1,7 +1,6 @@
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { TRIGGER_STEP_ID } from '@/workflow/constants/TriggerStepId';
 import { TRIGGER_TYPES } from '@/workflow/constants/TriggerTypes';
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/hooks/useUpdateWorkflowVersionTrigger';
@@ -10,6 +9,7 @@ import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
 import { getTriggerDefaultDefinition } from '@/workflow/utils/getTriggerDefaultDefinition';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
+import { MenuItem } from 'twenty-ui';
 
 const StyledActionListContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepItem.tsx

@@ -1,6 +1,5 @@
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
 import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
+import { MenuItem, MenuItemSelect } from 'twenty-ui';
 
 type SearchVariablesDropdownStepItemProps = {
   steps: StepOutputSchema[];

packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx

@@ -1,9 +1,8 @@
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
-import { MenuItemSelect } from '@/ui/navigation/menu-item/components/MenuItemSelect';
 import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
 import { isObject } from '@sniptt/guards';
 import { useState } from 'react';
-import { IconChevronLeft } from 'twenty-ui';
+import { IconChevronLeft, MenuItemSelect } from 'twenty-ui';
 
 type SearchVariablesDropdownStepSubItemProps = {
   step: StepOutputSchema;

packages/twenty-front/tsup.ui.index.tsx

@@ -10,16 +10,6 @@ export * from './src/modules/ui/input/components/Select';
 export * from './src/modules/ui/input/components/TextArea';
 export * from './src/modules/ui/input/components/TextInput';
 export * from './src/modules/ui/input/editor/components/BlockEditor';
-export * from './src/modules/ui/navigation/menu-item/components/MenuItem';
-export * from './src/modules/ui/navigation/menu-item/components/MenuItemCommand';
-export * from './src/modules/ui/navigation/menu-item/components/MenuItemDraggable';
-export * from './src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect';
-export * from './src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
-export * from './src/modules/ui/navigation/menu-item/components/MenuItemNavigate';
-export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelect';
-export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar';
-export * from './src/modules/ui/navigation/menu-item/components/MenuItemSelectColor';
-export * from './src/modules/ui/navigation/menu-item/components/MenuItemToggle';
 export * from './src/modules/ui/navigation/step-bar/components/StepBar';
 
 declare module '@emotion/react' {

packages/twenty-ui/src/input/components/Checkbox.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
+import { IconCheck, IconMinus } from '@ui/display';
 import * as React from 'react';
-import { IconCheck, IconMinus } from '@ui/display/icon/components/TablerIcons';
 
 export enum CheckboxVariant {
   Primary = 'primary',

packages/twenty-ui/src/navigation/index.ts

@@ -8,5 +8,23 @@ export * from './link/components/SocialLink';
 export * from './link/components/UndecoratedLink';
 export * from './link/constants/Cal';
 export * from './link/constants/GithubLink';
+export * from './menu-item/components/MenuItem';
+export * from './menu-item/components/MenuItemAvatar';
+export * from './menu-item/components/MenuItemCommand';
+export * from './menu-item/components/MenuItemCommandHotKeys';
+export * from './menu-item/components/MenuItemDraggable';
+export * from './menu-item/components/MenuItemMultiSelect';
+export * from './menu-item/components/MenuItemMultiSelectAvatar';
+export * from './menu-item/components/MenuItemMultiSelectTag';
+export * from './menu-item/components/MenuItemNavigate';
+export * from './menu-item/components/MenuItemSelect';
+export * from './menu-item/components/MenuItemSelectAvatar';
+export * from './menu-item/components/MenuItemSelectColor';
+export * from './menu-item/components/MenuItemSelectTag';
+export * from './menu-item/components/MenuItemSuggestion';
+export * from './menu-item/components/MenuItemToggle';
+export * from './menu-item/internals/components/MenuItemLeftContent';
+export * from './menu-item/internals/components/StyledMenuItemBase';
+export * from './menu-item/types/MenuItemAccent';
 export * from './navigation-bar/components/NavigationBar';
 export * from './navigation-bar/components/NavigationBarItem';

packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx

@@ -1,11 +1,8 @@
 import { useTheme } from '@emotion/react';
+import { IconChevronRight, IconComponent } from '@ui/display';
+import { LightIconButtonProps } from '@ui/input/button/components/LightIconButton';
+import { LightIconButtonGroup } from '@ui/input/button/components/LightIconButtonGroup';
 import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react';
-import {
-  IconChevronRight,
-  IconComponent,
-  LightIconButtonGroup,
-  LightIconButtonProps,
-} from 'twenty-ui';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {

packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx

@@ -1,29 +1,20 @@
 import { useTheme } from '@emotion/react';
-import { FunctionComponent, MouseEvent, ReactElement } from 'react';
 import {
   Avatar,
   AvatarProps,
   IconChevronRight,
-  IconComponent,
-  LightIconButtonGroup,
-  LightIconButtonProps,
   OverflowingTextWithTooltip,
-  isDefined,
+} from '@ui/display';
-} from 'twenty-ui';
+import { LightIconButtonGroup } from '@ui/input';
-
+import { MenuItemIconButton } from '@ui/navigation/menu-item/components/MenuItem';
+import { isDefined } from '@ui/utilities';
+import { MouseEvent } from 'react';
 import {
   StyledHoverableMenuItemBase,
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 import { MenuItemAccent } from '../types/MenuItemAccent';
 
-export type MenuItemIconButton = {
-  Wrapper?: FunctionComponent<{ iconButton: ReactElement }>;
-  Icon: IconComponent;
-  accent?: LightIconButtonProps['accent'];
-  onClick?: (event: MouseEvent<any>) => void;
-};
-
 export type MenuItemAvatarProps = {
   accent?: MenuItemAccent;
   className?: string;

packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx

@@ -1,14 +1,13 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
-
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import {
   StyledMenuItemLabel,
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 
+import { IconComponent } from '@ui/display';
+import { useIsMobile } from '@ui/utilities/responsive/hooks/useIsMobile';
 import { MenuItemCommandHotKeys } from './MenuItemCommandHotKeys';
 
 const StyledMenuItemLabelText = styled(StyledMenuItemLabel)`

packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx

@@ -1,11 +1,11 @@
-import { IconComponent, LightIconButtonGroup } from 'twenty-ui';
-
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
 import { MenuItemAccent } from '../types/MenuItemAccent';
 
-import { MenuItemIconButton } from './MenuItem';
+import { IconComponent } from '@ui/display';
+import { LightIconButtonGroup } from '@ui/input';
 import { ReactNode } from 'react';
+import { MenuItemIconButton } from './MenuItem';
 
 export type MenuItemDraggableProps = {
   LeftIcon?: IconComponent | undefined;

packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelect.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/styled';
-import { Checkbox, IconComponent, Tag, ThemeColor } from 'twenty-ui';
-
-import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
 
+import { IconComponent, Tag } from '@ui/display';
+import { Checkbox } from '@ui/input/components/Checkbox';
+import { MenuItemLeftContent } from '@ui/navigation/menu-item/internals/components/MenuItemLeftContent';
+import { ThemeColor } from '@ui/theme';
 import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
 
 const StyledLeftContentWithCheckboxContainer = styled.div`

packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
-import { Checkbox, OverflowingTextWithTooltip } from 'twenty-ui';
 
+import { OverflowingTextWithTooltip } from '@ui/display';
+import { Checkbox } from '@ui/input/components/Checkbox';
 import {
   StyledMenuItemBase,
   StyledMenuItemLabel,

packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectTag.tsx

@@ -1,11 +1,6 @@
-import {
+import { Tag } from '@ui/display';
-  Checkbox,
+import { Checkbox, CheckboxShape, CheckboxSize } from '@ui/input';
-  CheckboxShape,
+import { ThemeColor } from '@ui/theme';
-  CheckboxSize,
-  Tag,
-  ThemeColor,
-} from 'twenty-ui';
-
 import {
   StyledMenuItemBase,
   StyledMenuItemLeftContent,

packages/twenty-ui/src/navigation/menu-item/components/MenuItemNavigate.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
-import { IconChevronRight, IconComponent } from 'twenty-ui';
 
+import { IconChevronRight, IconComponent } from '@ui/display';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {
   StyledMenuItemBase,

packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx

@@ -1,7 +1,7 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCheck, IconChevronRight, IconComponent } from 'twenty-ui';
 
+import { IconCheck, IconChevronRight, IconComponent } from '@ui/display';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
 

packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
-import { IconCheck, OverflowingTextWithTooltip } from 'twenty-ui';
+import { ReactNode } from 'react';
 
 import {
   StyledMenuItemLabel,
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 
+import { IconCheck, OverflowingTextWithTooltip } from '@ui/display';
 import { StyledMenuItemSelect } from './MenuItemSelect';
 
 type MenuItemSelectAvatarProps = {

packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx

@@ -1,16 +1,12 @@
 import { useTheme } from '@emotion/react';
-import {
-  ColorSample,
-  ColorSampleVariant,
-  IconCheck,
-  ThemeColor,
-} from 'twenty-ui';
 
 import {
   StyledMenuItemLabel,
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 
+import { ColorSample, ColorSampleVariant, IconCheck } from '@ui/display';
+import { ThemeColor } from '@ui/theme';
 import { StyledMenuItemSelect } from './MenuItemSelect';
 
 type MenuItemSelectColorProps = {

packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx

@@ -1,8 +1,9 @@
 import { useTheme } from '@emotion/react';
-import { IconCheck, Tag, ThemeColor } from 'twenty-ui';
 
 import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase';
 
+import { IconCheck, Tag } from '@ui/display';
+import { ThemeColor } from '@ui/theme';
 import { StyledMenuItemSelect } from './MenuItemSelect';
 
 type MenuItemSelectTagProps = {

packages/twenty-ui/src/navigation/menu-item/components/MenuItemSuggestion.tsx

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
 import { MouseEvent } from 'react';
-import { HOVER_BACKGROUND, IconComponent } from 'twenty-ui';
 
+import { IconComponent } from '@ui/display';
+import { HOVER_BACKGROUND } from '@ui/theme';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase';
 

packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx

@@ -1,5 +1,5 @@
-import { IconComponent, Toggle, ToggleSize } from 'twenty-ui';
+import { IconComponent } from '@ui/display';
-
+import { Toggle, ToggleSize } from '@ui/input';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {
   StyledMenuItemBase,

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItem.stories.tsx

@@ -1,12 +1,12 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
+
+import { IconBell } from '@ui/display';
 import {
   CatalogDecorator,
   CatalogStory,
   ComponentDecorator,
-  IconBell,
+} from '@ui/testing';
-} from 'twenty-ui';
-
 import { MenuItemAccent } from '../../types/MenuItemAccent';
 import { MenuItem } from '../MenuItem';
 

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx

@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
+
+import { IconBell } from '@ui/display';
 import {
   CatalogDecorator,
   CatalogStory,
   ComponentDecorator,
-  IconBell,
+} from '@ui/testing';
-} from 'twenty-ui';
-
 import { MenuItemCommand } from '../MenuItemCommand';
 
 const meta: Meta<typeof MenuItemCommand> = {

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx

@@ -1,14 +1,13 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
+
+import { IconBell, IconMinus } from '@ui/display';
 import {
   CatalogDecorator,
   CatalogDimension,
   CatalogOptions,
   ComponentDecorator,
-  IconBell,
+} from '@ui/testing';
-  IconMinus,
-} from 'twenty-ui';
-
 import { MenuItemAccent } from '../../types/MenuItemAccent';
 import { MenuItemDraggable } from '../MenuItemDraggable';
 

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx

@@ -1,13 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react';
+
+import { IconBell } from '@ui/display';
 import {
   CatalogDecorator,
   CatalogDimension,
   CatalogOptions,
   CatalogStory,
   ComponentDecorator,
-  IconBell,
+} from '@ui/testing';
-} from 'twenty-ui';
-
 import { MenuItemMultiSelect } from '../MenuItemMultiSelect';
 
 const meta: Meta<typeof MenuItemMultiSelect> = {

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx

@@ -1,15 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
+
+import { Avatar } from '@ui/display';
 import {
-  Avatar,
+  AVATAR_URL_MOCK,
   CatalogDecorator,
   CatalogDimension,
   CatalogOptions,
   CatalogStory,
   ComponentDecorator,
-} from 'twenty-ui';
+} from '@ui/testing';
-
-import { avatarUrl } from '~/testing/mock-data/users';
-
 import { MenuItemMultiSelectAvatar } from '../MenuItemMultiSelectAvatar';
 
 const meta: Meta<typeof MenuItemMultiSelectAvatar> = {
@@ -24,7 +23,7 @@ type Story = StoryObj<typeof MenuItemMultiSelectAvatar>;
 export const Default: Story = {
   args: {
     text: 'First option',
-    avatar: <Avatar avatarUrl={avatarUrl} placeholder="L" />,
+    avatar: <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />,
   },
   decorators: [ComponentDecorator],
 };
@@ -43,7 +42,7 @@ export const Catalog: CatalogStory<Story, typeof MenuItemMultiSelectAvatar> = {
           values: [true, false],
           props: (withAvatar: boolean) => ({
             avatar: withAvatar ? (
-              <Avatar avatarUrl={avatarUrl} placeholder="L" />
+              <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />
             ) : (
               <Avatar avatarUrl={''} placeholder="L" />
             ),

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx

@@ -1,14 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+
+import { IconBell } from '@ui/display';
+import { MenuItemNavigate } from '../MenuItemNavigate';
+
 import {
   CatalogDecorator,
   CatalogDimension,
   CatalogOptions,
   CatalogStory,
   ComponentDecorator,
-  IconBell,
+} from '@ui/testing';
-} from 'twenty-ui';
-
-import { MenuItemNavigate } from '../MenuItemNavigate';
 
 const meta: Meta<typeof MenuItemNavigate> = {
   title: 'UI/Navigation/MenuItem/MenuItemNavigate',

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx

@@ -1,15 +1,15 @@
 import { Meta, StoryObj } from '@storybook/react';
+
 import {
   CatalogDecorator,
   CatalogDimension,
   CatalogOptions,
   CatalogStory,
   ComponentDecorator,
-  IconBell,
+} from '@ui/testing';
-} from 'twenty-ui';
-
 import { MenuItemSelect } from '../MenuItemSelect';
 
+import { IconBell } from '@ui/display';
 const meta: Meta<typeof MenuItemSelect> = {
   title: 'UI/Navigation/MenuItem/MenuItemSelect',
   component: MenuItemSelect,

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx

@@ -1,15 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
+
+import { Avatar } from '@ui/display';
 import {
-  Avatar,
+  AVATAR_URL_MOCK,
   CatalogDecorator,
   CatalogDimension,
   CatalogOptions,
   CatalogStory,
   ComponentDecorator,
-} from 'twenty-ui';
+} from '@ui/testing';
-
-import { avatarUrl } from '~/testing/mock-data/users';
-
 import { MenuItemSelectAvatar } from '../MenuItemSelectAvatar';
 
 const meta: Meta<typeof MenuItemSelectAvatar> = {
@@ -20,11 +19,10 @@ const meta: Meta<typeof MenuItemSelectAvatar> = {
 export default meta;
 
 type Story = StoryObj<typeof MenuItemSelectAvatar>;
-
 export const Default: Story = {
   args: {
     text: 'First option',
-    avatar: <Avatar avatarUrl={avatarUrl} placeholder="L" />,
+    avatar: <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />,
   },
   argTypes: {
     className: { control: false },
@@ -46,7 +44,7 @@ export const Catalog: CatalogStory<Story, typeof MenuItemSelectAvatar> = {
           values: [true, false],
           props: (withAvatar: boolean) => ({
             avatar: withAvatar ? (
-              <Avatar avatarUrl={avatarUrl} placeholder="L" />
+              <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />
             ) : (
               <Avatar avatarUrl={''} placeholder="L" />
             ),

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx

@@ -1,15 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
+
+import { ColorSampleVariant } from '@ui/display';
 import {
   CatalogDecorator,
   CatalogDimension,
   CatalogOptions,
   CatalogStory,
-  ColorSampleVariant,
   ComponentDecorator,
-  MAIN_COLOR_NAMES,
+} from '@ui/testing';
-  ThemeColor,
+import { MAIN_COLOR_NAMES, ThemeColor } from '@ui/theme';
-} from 'twenty-ui';
-
 import { MenuItemSelectColor } from '../MenuItemSelectColor';
 
 const meta: Meta<typeof MenuItemSelectColor> = {

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectTag.stories.tsx

@@ -1,13 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react';
+
 import {
   CatalogDecorator,
   CatalogDimension,
   CatalogOptions,
   CatalogStory,
   ComponentDecorator,
-  ThemeColor,
+} from '@ui/testing';
-} from 'twenty-ui';
+import { ThemeColor } from '@ui/theme';
-
 import { MenuItemSelectTag } from '../MenuItemSelectTag';
 
 const meta: Meta<typeof MenuItemSelectTag> = {

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx

@@ -1,13 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react';
+
+import { IconBell } from '@ui/display';
 import {
   CatalogDecorator,
   CatalogDimension,
   CatalogOptions,
   CatalogStory,
   ComponentDecorator,
-  IconBell,
+} from '@ui/testing';
-} from 'twenty-ui';
-
 import { MenuItemToggle } from '../MenuItemToggle';
 
 const meta: Meta<typeof MenuItemToggle> = {

packages/twenty-ui/src/navigation/menu-item/components/index.ts

@@ -0,0 +1,15 @@
+export * from './MenuItem';
+export * from './MenuItemAvatar';
+export * from './MenuItemCommand';
+export * from './MenuItemCommandHotKeys';
+export * from './MenuItemDraggable';
+export * from './MenuItemMultiSelect';
+export * from './MenuItemMultiSelectAvatar';
+export * from './MenuItemMultiSelectTag';
+export * from './MenuItemNavigate';
+export * from './MenuItemSelect';
+export * from './MenuItemSelectAvatar';
+export * from './MenuItemSelectColor';
+export * from './MenuItemSelectTag';
+export * from './MenuItemSuggestion';
+export * from './MenuItemToggle';

packages/twenty-ui/src/navigation/menu-item/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './internals/components/MenuItemLeftContent';
+export * from './internals/components/StyledMenuItemBase';
+export * from './types/MenuItemAccent';

packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx

@@ -1,12 +1,12 @@
 import { useTheme } from '@emotion/react';
 import { isString } from '@sniptt/guards';
 import { ReactNode } from 'react';
+
 import {
   IconComponent,
   IconGripVertical,
   OverflowingTextWithTooltip,
-} from 'twenty-ui';
+} from '@ui/display';
-
 import {
   StyledDraggableItem,
   StyledMenuItemLabel,