Rename twenty-ui to twenty-ui-deprecated and twenty-new-ui to twenty-ui to prepare package release (#21315)

## Description

Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name
**`twenty-ui`** (v0.1.0, publishable) and renames the old package to
**`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports →
`twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates
twenty-front's `Toggle` to the new package (first consumer) as a
drop-in.

## Next steps
- Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` +
`.yarnrc.yml`), then tag `ui/v0.1.0` to publish.
- Continue migrating components from `twenty-ui-deprecated` →
`twenty-ui`.

packages/twenty-front/src/modules/side-panel/components/SidePanelAskAiInfo.tsx

@@ -4,8 +4,8 @@ import { useAtomComponentFamilyStateValue } from '@/ui/utilities/state/jotai/hoo
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { OverflowingTextWithTooltip } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { OverflowingTextWithTooltip } from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledPageTitle = styled.div`
   color: ${themeCssVariables.font.color.primary};

packages/twenty-front/src/modules/side-panel/components/SidePanelBackButton.tsx

@@ -7,10 +7,10 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { styled } from '@linaria/react';
-import { IconChevronLeft } from 'twenty-ui/display';
-import { IconButton } from 'twenty-ui/input';
-import { MenuItem } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconChevronLeft } from 'twenty-ui-deprecated/display';
+import { IconButton } from 'twenty-ui-deprecated/input';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledNavigationIcon = styled.div`
   align-items: center;

packages/twenty-front/src/modules/side-panel/components/SidePanelContainer.tsx

@@ -11,7 +11,7 @@ import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/u
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledSidePanelContainer = styled.div<{ isMobile: boolean }>`
   display: flex;

packages/twenty-front/src/modules/side-panel/components/SidePanelContextChip.tsx

@@ -4,8 +4,8 @@ import { isNonEmptyString } from '@sniptt/guards';
 import { Fragment } from 'react/jsx-runtime';
 import { type SidePanelPages } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { OverflowingTextWithTooltip } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { OverflowingTextWithTooltip } from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledChip = styled.button<{
   withText: boolean;

packages/twenty-front/src/modules/side-panel/components/SidePanelContextChipIconWrapper.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledSidePanelContextChipIconWrapper = styled.div`
   align-items: center;

packages/twenty-front/src/modules/side-panel/components/SidePanelContextRecordChipAvatars.tsx

@@ -4,8 +4,11 @@ import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { Avatar } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { Avatar } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 const StyledIconWrapper = styled.div<{ withIconBackground?: boolean }>`
   align-items: center;
   background: ${({ withIconBackground }) =>

packages/twenty-front/src/modules/side-panel/components/SidePanelFolderInfo.tsx

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { NavigationMenuItemType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { TintedIconTile, useIcons } from 'twenty-ui/display';
+import { TintedIconTile, useIcons } from 'twenty-ui-deprecated/display';
 
 import { FOLDER_ICON_DEFAULT } from '@/navigation-menu-item/common/constants/FolderIconDefault';
 import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';

packages/twenty-front/src/modules/side-panel/components/SidePanelForDesktop.tsx

@@ -19,7 +19,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { styled } from '@linaria/react';
 import { useCallback, useState } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledSidePanelWrapper = styled.div<{
   isOpen: boolean;

packages/twenty-front/src/modules/side-panel/components/SidePanelGroup.tsx

@@ -1,8 +1,8 @@
 import { styled } from '@linaria/react';
 import React from 'react';
-import { Label } from 'twenty-ui/display';
+import { Label } from 'twenty-ui-deprecated/display';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledGroupHeadingContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/side-panel/components/SidePanelGroupFormContainer.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledFormContainer = styled.div`
   padding-inline: ${themeCssVariables.spacing[1]};

packages/twenty-front/src/modules/side-panel/components/SidePanelItemWithAddToNavigationDrag.tsx

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { type ReactNode, lazy, Suspense, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui-deprecated/display';
 
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { addToNavPayloadRegistryState } from '@/navigation-menu-item/common/states/addToNavPayloadRegistryState';

packages/twenty-front/src/modules/side-panel/components/SidePanelLinkInfo.tsx

@@ -1,7 +1,7 @@
 import { useLingui } from '@lingui/react/macro';
 import { NavigationMenuItemType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { IconLink, IconWorld } from 'twenty-ui/display';
+import { IconLink, IconWorld } from 'twenty-ui-deprecated/display';
 
 import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
 import { LinkIconWithLinkOverlay } from '@/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay';

packages/twenty-front/src/modules/side-panel/components/SidePanelList.tsx

@@ -9,7 +9,10 @@ import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomStat
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  MOBILE_VIEWPORT,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 export type SidePanelListProps = {
   selectableItemIds: string[];

packages/twenty-front/src/modules/side-panel/components/SidePanelMultipleRecordsInfo.tsx

@@ -2,8 +2,8 @@ import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageIn
 import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
 import { t } from '@lingui/core/macro';
 import { useContext } from 'react';
-import { IconPencil } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { IconPencil } from 'twenty-ui-deprecated/display';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 
 type SidePanelMultipleRecordsInfoProps = {
   sidePanelPageInstanceId: string;

packages/twenty-front/src/modules/side-panel/components/SidePanelObjectFilterDropdown.tsx

@@ -1,7 +1,7 @@
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconFilter } from 'twenty-ui/display';
-import { IconButton } from 'twenty-ui/input';
+import { IconFilter } from 'twenty-ui-deprecated/display';
+import { IconButton } from 'twenty-ui-deprecated/input';
 
 import { SidePanelObjectFilterDropdownContent } from '@/side-panel/components/SidePanelObjectFilterDropdownContent';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';

packages/twenty-front/src/modules/side-panel/components/SidePanelObjectFilterDropdownContent.tsx

@@ -1,8 +1,11 @@
 import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
 import { OBJECTS_WITH_CHANNEL_VISIBILITY_CONSTRAINTS } from 'twenty-shared/constants';
-import { IconCube, TintedIconTile } from 'twenty-ui/display';
-import { MenuItemSelectAvatar, MenuItemToggle } from 'twenty-ui/navigation';
+import { IconCube, TintedIconTile } from 'twenty-ui-deprecated/display';
+import {
+  MenuItemSelectAvatar,
+  MenuItemToggle,
+} from 'twenty-ui-deprecated/navigation';
 
 import { ObjectMetadataIcon } from '@/object-metadata/components/ObjectMetadataIcon';
 import { useReadableObjectMetadataItems } from '@/object-metadata/hooks/useReadableObjectMetadataItems';

packages/twenty-front/src/modules/side-panel/components/SidePanelObjectViewRecordInfo.tsx

@@ -1,5 +1,5 @@
 import { useLingui } from '@lingui/react/macro';
-import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { OverflowingTextWithTooltip } from 'twenty-ui-deprecated/display';
 
 import { SidePanelPageInfoLayout } from '@/side-panel/components/SidePanelPageInfoLayout';
 import { NavigationMenuItemIcon } from '@/navigation-menu-item/display/components/NavigationMenuItemIcon';

packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx

@@ -3,7 +3,7 @@ import { isDefined } from 'twenty-shared/utils';
 import {
   IconColumnInsertRight,
   OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 
 import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState';
 import { useNavigationMenuItemEditSectionItems } from '@/navigation-menu-item/edit/hooks/useNavigationMenuItemEditSectionItems';
@@ -22,7 +22,10 @@ import { NavigationMenuItemType, SidePanelPages } from 'twenty-shared/types';
 
 import { type SidePanelContextChipProps } from '@/side-panel/components/SidePanelContextChip';
 import { useContext } from 'react';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 const StyledPageTitle = styled.div`
   color: ${themeCssVariables.font.color.primary};
   font-size: ${themeCssVariables.font.size.sm};

packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfoLayout.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 export const StyledPageInfoContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/side-panel/components/SidePanelPageLayoutInfoContent.tsx

@@ -19,8 +19,8 @@ import { isNonEmptyString } from '@sniptt/guards';
 import { useContext, useState } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { useIcons } from 'twenty-ui-deprecated/display';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 import { SidePanelPageInfoLayout } from './SidePanelPageInfoLayout';
 
 const StyledClickableIconWrapper = styled.div`

packages/twenty-front/src/modules/side-panel/components/SidePanelRecordInfo.tsx

@@ -19,8 +19,8 @@ import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/use
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { AppPath } from 'twenty-shared/types';
 import { getAppPath } from 'twenty-shared/utils';
-import { Avatar } from 'twenty-ui/display';
-import { UndecoratedLink } from 'twenty-ui/navigation';
+import { Avatar } from 'twenty-ui-deprecated/display';
+import { UndecoratedLink } from 'twenty-ui-deprecated/navigation';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 

packages/twenty-front/src/modules/side-panel/components/SidePanelRouter.tsx

@@ -11,7 +11,7 @@ import { styled } from '@linaria/react';
 import { motion } from 'framer-motion';
 import React, { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledSidePanelContent = styled.div`
   flex: 1;

packages/twenty-front/src/modules/side-panel/components/SidePanelSubViewWithSearch.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
 
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledSubViewContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/side-panel/components/SidePanelToggleButton.tsx

@@ -9,10 +9,20 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { motion } from 'framer-motion';
 import { useContext } from 'react';
-import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
-import { AnimatedButton } from 'twenty-ui/input';
-import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  AppTooltip,
+  TooltipDelay,
+  TooltipPosition,
+} from 'twenty-ui-deprecated/display';
+import { AnimatedButton } from 'twenty-ui-deprecated/input';
+import {
+  getOsControlSymbol,
+  useIsMobile,
+} from 'twenty-ui-deprecated/utilities';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledButtonWrapper = styled.div<{ alignToTop: boolean }>`
   align-items: ${({ alignToTop }) => (alignToTop ? 'center' : 'initial')};

packages/twenty-front/src/modules/side-panel/components/SidePanelTopBar.tsx

@@ -20,10 +20,13 @@ import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useContext, useRef } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
-import { IconX } from 'twenty-ui/display';
-import { IconButton } from 'twenty-ui/input';
-import { useIsMobile } from 'twenty-ui/utilities';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconX } from 'twenty-ui-deprecated/display';
+import { IconButton } from 'twenty-ui-deprecated/input';
+import { useIsMobile } from 'twenty-ui-deprecated/utilities';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledInputContainer = styled.div<{ isMobile: boolean }>`
   align-items: center;

packages/twenty-front/src/modules/side-panel/components/SidePanelTopBarRightCornerIcon.tsx

@@ -7,10 +7,10 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { SidePanelPages } from 'twenty-shared/types';
-import { IconEdit } from 'twenty-ui/display';
-import { IconButton } from 'twenty-ui/input';
-import { useIsMobile } from 'twenty-ui/utilities';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconEdit } from 'twenty-ui-deprecated/display';
+import { IconButton } from 'twenty-ui-deprecated/input';
+import { useIsMobile } from 'twenty-ui-deprecated/utilities';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledIconButtonContainer = styled.div`
   color: ${themeCssVariables.font.color.secondary};

packages/twenty-front/src/modules/side-panel/components/SidePanelWorkflowStepInfo.tsx

@@ -22,9 +22,9 @@ import { useContext, useState } from 'react';
 import { CoreObjectNameSingular, SidePanelPages } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui-deprecated/display';
 import { SidePanelPageInfoLayout } from './SidePanelPageInfoLayout';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 
 export const SidePanelWorkflowStepInfo = ({
   sidePanelPageInstanceId,

packages/twenty-front/src/modules/side-panel/components/hooks/usePageLayoutHeaderInfo.ts

@@ -15,8 +15,8 @@ import {
   IconTable,
   type IconComponent,
   useIcons,
-} from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 import { PageLayoutTabLayoutMode } from '~/generated-metadata/graphql';
 
 type PageLayoutHeaderInfo = {

packages/twenty-front/src/modules/side-panel/constants/SidePanelAnimationVariants.ts

@@ -1,4 +1,4 @@
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 export const SIDE_PANEL_ANIMATION_VARIANTS = {
   fullScreen: {

packages/twenty-front/src/modules/side-panel/hooks/__tests__/useNavigateSidePanel.test.tsx

@@ -9,7 +9,7 @@ import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
 import { SidePanelPages } from 'twenty-shared/types';
-import { Icon123, useIcons } from 'twenty-ui/display';
+import { Icon123, useIcons } from 'twenty-ui-deprecated/display';
 import { getJestMetadataAndApolloMocksAndCommandMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndCommandMenuWrapper';
 import { getTestEnrichedObjectMetadataItemsMock } from '~/testing/utils/getTestEnrichedObjectMetadataItemsMock';
 

packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenAskAiPageInSidePanel.test.tsx

@@ -6,7 +6,7 @@ import { useOpenAskAiPageInSidePanel } from '@/side-panel/hooks/useOpenAskAiPage
 import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { SidePanelPages } from 'twenty-shared/types';
-import { IconSparkles } from 'twenty-ui/display';
+import { IconSparkles } from 'twenty-ui-deprecated/display';
 
 const navigateSidePanelMenuMock = jest.fn();
 

packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenCalendarEventInSidePanel.test.tsx

@@ -7,7 +7,7 @@ import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/s
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { SidePanelPages } from 'twenty-shared/types';
-import { IconCalendarEvent } from 'twenty-ui/display';
+import { IconCalendarEvent } from 'twenty-ui-deprecated/display';
 import { getJestMetadataAndApolloMocksAndCommandMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndCommandMenuWrapper';
 import { getTestEnrichedObjectMetadataItemsMock } from '~/testing/utils/getTestEnrichedObjectMetadataItemsMock';
 

packages/twenty-front/src/modules/side-panel/hooks/__tests__/useOpenRecordInSidePanel.test.tsx

@@ -15,7 +15,7 @@ import { sidePanelNavigationMorphItemsByPageState } from '@/side-panel/states/si
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { ContextStorePageType, SidePanelPages } from 'twenty-shared/types';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui-deprecated/display';
 import { getJestMetadataAndApolloMocksAndCommandMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndCommandMenuWrapper';
 import { getTestEnrichedObjectMetadataItemsMock } from '~/testing/utils/getTestEnrichedObjectMetadataItemsMock';
 

packages/twenty-front/src/modules/side-panel/hooks/__tests__/useSidePanelCloseAnimationCompleteCleanup.test.tsx

@@ -16,7 +16,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { SidePanelPages } from 'twenty-shared/types';
-import { IconList } from 'twenty-ui/display';
+import { IconList } from 'twenty-ui-deprecated/display';
 
 const mockCloseDropdown = jest.fn();
 const mockResetSelectedItem = jest.fn();

packages/twenty-front/src/modules/side-panel/hooks/__tests__/useSidePanelHistory.test.tsx

@@ -11,7 +11,7 @@ import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
 import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { SidePanelPages } from 'twenty-shared/types';
-import { IconList, IconSearch } from 'twenty-ui/display';
+import { IconList, IconSearch } from 'twenty-ui-deprecated/display';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <JotaiProvider store={jotaiStore}>

packages/twenty-front/src/modules/side-panel/hooks/__tests__/useUpdateSidePanelPageInfo.test.tsx

@@ -6,7 +6,7 @@ import { renderHook } from '@testing-library/react';
 import { Provider as JotaiProvider } from 'jotai';
 import { act } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
-import { IconArrowDown, IconDotsVertical } from 'twenty-ui/display';
+import { IconArrowDown, IconDotsVertical } from 'twenty-ui-deprecated/display';
 
 const mockedPageInfo = {
   title: 'Initial Title',

packages/twenty-front/src/modules/side-panel/hooks/useNavigateSidePanel.ts

@@ -14,7 +14,7 @@ import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentTyp
 import { useStore } from 'jotai';
 import { useCallback } from 'react';
 import { type SidePanelPages } from 'twenty-shared/types';
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui-deprecated/display';
 import { v4 } from 'uuid';
 
 export type SidePanelNavigationStackItem = {

packages/twenty-front/src/modules/side-panel/hooks/useOpenAskAiPageInSidePanel.ts

@@ -4,7 +4,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { t } from '@lingui/core/macro';
 import { useCallback } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
-import { IconSparkles } from 'twenty-ui/display';
+import { IconSparkles } from 'twenty-ui-deprecated/display';
 import { v4 } from 'uuid';
 
 export const useOpenAskAiPageInSidePanel = () => {

packages/twenty-front/src/modules/side-panel/hooks/useOpenCalendarEventInSidePanel.ts

@@ -3,7 +3,7 @@ import { viewableRecordIdComponentState } from '@/side-panel/pages/record-page/s
 import { t } from '@lingui/core/macro';
 import { useCallback } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
-import { IconCalendarEvent } from 'twenty-ui/display';
+import { IconCalendarEvent } from 'twenty-ui-deprecated/display';
 import { v4 } from 'uuid';
 import { useStore } from 'jotai';
 

packages/twenty-front/src/modules/side-panel/hooks/useOpenComposeEmailInSidePanel.ts

@@ -6,7 +6,7 @@ import {
   type IconComponent,
   IconArrowBackUp,
   IconMail,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import { v4 } from 'uuid';
 
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';

packages/twenty-front/src/modules/side-panel/hooks/useOpenFrontComponentInSidePanel.ts

@@ -3,7 +3,7 @@ import { viewableFrontComponentIdComponentState } from '@/side-panel/pages/front
 import { viewableFrontComponentRecordContextComponentState } from '@/side-panel/pages/front-component/states/viewableFrontComponentRecordContextComponentState';
 import { useStore } from 'jotai';
 import { SidePanelPages } from 'twenty-shared/types';
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui-deprecated/display';
 import { v4 } from 'uuid';
 
 export const useOpenFrontComponentInSidePanel = () => {

packages/twenty-front/src/modules/side-panel/hooks/useOpenMergeRecordsPageInSidePanel.tsx

@@ -8,7 +8,7 @@ import { SidePanelPages } from 'twenty-shared/types';
 
 import { msg, t } from '@lingui/core/macro';
 import { useCallback } from 'react';
-import { IconArrowMerge } from 'twenty-ui/display';
+import { IconArrowMerge } from 'twenty-ui-deprecated/display';
 import { v4 } from 'uuid';
 import { useStore } from 'jotai';
 

packages/twenty-front/src/modules/side-panel/hooks/useOpenRecordInSidePanel.ts

@@ -25,7 +25,7 @@ import { t } from '@lingui/core/macro';
 import { useStore } from 'jotai';
 import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui-deprecated/display';
 import { v4 } from 'uuid';
 
 export const useOpenRecordInSidePanel = () => {

packages/twenty-front/src/modules/side-panel/hooks/useOpenRecordsSearchPageInSidePanel.ts

@@ -3,7 +3,7 @@ import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedSta
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { t } from '@lingui/core/macro';
 import { SidePanelPages } from 'twenty-shared/types';
-import { IconSearch } from 'twenty-ui/display';
+import { IconSearch } from 'twenty-ui-deprecated/display';
 import { v4 } from 'uuid';
 
 export const useOpenRecordsSearchPageInSidePanel = () => {

packages/twenty-front/src/modules/side-panel/hooks/useOpenRichTextInSidePanel.ts

@@ -4,7 +4,7 @@ import { t } from '@lingui/core/macro';
 import { useStore } from 'jotai';
 import { useCallback } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
-import { IconPencil } from 'twenty-ui/display';
+import { IconPencil } from 'twenty-ui-deprecated/display';
 
 export const useOpenRichTextInSidePanel = () => {
   const { navigateSidePanelMenu, openSidePanelMenu } = useSidePanelMenu();

packages/twenty-front/src/modules/side-panel/hooks/useOpenUpdateMultipleRecordsPageInSidePanel.tsx

@@ -3,7 +3,7 @@ import { SidePanelPages } from 'twenty-shared/types';
 
 import { msg, t } from '@lingui/core/macro';
 import { useCallback } from 'react';
-import { IconBoxMultiple } from 'twenty-ui/display';
+import { IconBoxMultiple } from 'twenty-ui-deprecated/display';
 
 type UseOpenUpdateMultipleRecordsPageInSidePanelProps = {
   contextStoreInstanceId: string;

packages/twenty-front/src/modules/side-panel/hooks/useSidePanelContextChips.tsx

@@ -12,7 +12,10 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { useContext, useMemo } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 export const useSidePanelContextChips = () => {
   const { theme } = useContext(ThemeContext);

packages/twenty-front/src/modules/side-panel/hooks/useSidePanelMenu.ts

@@ -17,7 +17,10 @@ import { useStore } from 'jotai';
 import { useCallback } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { IconColumnInsertRight, IconDotsVertical } from 'twenty-ui/display';
+import {
+  IconColumnInsertRight,
+  IconDotsVertical,
+} from 'twenty-ui-deprecated/display';
 
 export const useSidePanelMenu = () => {
   const store = useStore();

packages/twenty-front/src/modules/side-panel/hooks/useUpdateSidePanelPageInfo.ts

@@ -1,7 +1,10 @@
 import { sidePanelNavigationStackState } from '@/side-panel/states/sidePanelNavigationStackState';
 import { sidePanelPageInfoState } from '@/side-panel/states/sidePanelPageInfoState';
 import { useCallback } from 'react';
-import { type IconComponent, IconDotsVertical } from 'twenty-ui/display';
+import {
+  type IconComponent,
+  IconDotsVertical,
+} from 'twenty-ui-deprecated/display';
 import { useStore } from 'jotai';
 
 export const useUpdateSidePanelPageInfo = () => {

packages/twenty-front/src/modules/side-panel/pages/common/components/SidePanelSubPageNavigationHeader.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
-import { IconChevronLeft } from 'twenty-ui/display';
-import { IconButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconChevronLeft } from 'twenty-ui-deprecated/display';
+import { IconButton } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/side-panel/pages/compose-email/components/SidePanelComposeEmailPage.tsx

@@ -13,9 +13,9 @@ import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotke
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { IconSend } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
-import { getOsControlSymbol } from 'twenty-ui/utilities';
+import { IconSend } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
+import { getOsControlSymbol } from 'twenty-ui-deprecated/utilities';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/CanvasTabSettingsContent.tsx

@@ -20,7 +20,7 @@ import {
   IconPinned,
   IconRefreshDot,
   IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 
 const RESET_TAB_TO_DEFAULT_MODAL_ID = 'reset-canvas-tab-to-default-modal';
 const RESET_TAB_TO_DEFAULT_MENU_ITEM_ID =

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/ChartFiltersSettings.tsx

@@ -16,7 +16,7 @@ import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/h
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useStore } from 'jotai';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledChartFiltersPageContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/ChartLimitInfoBanner.tsx

@@ -1,6 +1,6 @@
 import { getChartLimitMessage } from '@/side-panel/pages/page-layout/utils/getChartLimitMessage';
 import { t } from '@lingui/core/macro';
-import { SidePanelInformationBanner } from 'twenty-ui/display';
+import { SidePanelInformationBanner } from 'twenty-ui-deprecated/display';
 import { type WidgetConfigurationType } from '~/generated-metadata/graphql';
 
 type ChartLimitInfoBannerProps = {

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/ChartTypeSelectionSection.tsx

@@ -3,8 +3,8 @@ import { styled } from '@linaria/react';
 
 import { GraphType } from '@/side-panel/pages/page-layout/types/GraphType';
 import { t } from '@lingui/core/macro';
-import { MenuPicker } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MenuPicker } from 'twenty-ui-deprecated/navigation';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const graphTypeOptions = [
   GraphType.VERTICAL_BAR,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/NewFieldDefaultVisibilityToggle.tsx

@@ -3,7 +3,7 @@ import { useGetNewFieldDefaultVisibility } from '@/page-layout/widgets/fields/ho
 import { useUpdateNewFieldDefaultVisibility } from '@/page-layout/widgets/fields/hooks/useUpdateNewFieldDefaultVisibility';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useLingui } from '@lingui/react/macro';
-import { IconEye } from 'twenty-ui/display';
+import { IconEye } from 'twenty-ui-deprecated/display';
 
 export const NewFieldDefaultVisibilityToggle = ({
   pageLayoutId,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/RegularTabSettingsContent.tsx

@@ -14,7 +14,7 @@ import {
   IconPinned,
   IconRefreshDot,
   IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 
 const RESET_TAB_TO_DEFAULT_MODAL_ID = 'reset-regular-tab-to-default-modal';
 const RESET_TAB_TO_DEFAULT_MENU_ITEM_ID =

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelFieldRelationTableFieldsSubPage.tsx

@@ -4,7 +4,7 @@ import { usePageLayoutIdFromContextStore } from '@/side-panel/pages/page-layout/
 import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
 import { styled } from '@linaria/react';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelFieldsLayoutSubPage.tsx

@@ -5,7 +5,7 @@ import { usePageLayoutIdFromContextStore } from '@/side-panel/pages/page-layout/
 import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
 import { styled } from '@linaria/react';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import {
   type FieldsConfiguration,
   WidgetConfigurationType,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutDashboardWidgetTypeSelect.tsx

@@ -32,7 +32,7 @@ import {
   IconChartPie,
   IconFrame,
   IconTable,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import { type FrontComponent, WidgetType } from '~/generated-metadata/graphql';
 
 export const SidePanelPageLayoutDashboardWidgetTypeSelect = () => {

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutRecordPageWidgetTypeSelect.tsx

@@ -31,7 +31,7 @@ import { useStore } from 'jotai';
 import { useCallback } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { IconApps, IconList } from 'twenty-ui/display';
+import { IconApps, IconList } from 'twenty-ui-deprecated/display';
 import { v4 as uuidv4 } from 'uuid';
 import {
   type FrontComponent,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/WidgetSettingsFooter.tsx

@@ -10,8 +10,8 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { useLingui } from '@lingui/react/macro';
 import { useId } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconCopyPlus, IconTrash } from 'twenty-ui/display';
-import { MenuItem } from 'twenty-ui/navigation';
+import { IconCopyPlus, IconTrash } from 'twenty-ui-deprecated/display';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';
 
 export const WidgetSettingsFooter = ({
   pageLayoutId,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/WidgetSettingsManageSection.tsx

@@ -26,7 +26,7 @@ import {
   IconRefreshDot,
   IconSwitchHorizontal,
   IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 
 const RESET_WIDGET_TO_DEFAULT_MODAL_ID = 'reset-widget-to-default-modal';
 const RESET_WIDGET_TO_DEFAULT_MENU_ITEM_ID =

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/WidgetSettingsPlacementSection.tsx

@@ -25,7 +25,7 @@ import {
   IconChevronUp,
   IconRowInsertBottom,
   IconRowInsertTop,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import { PageLayoutTabLayoutMode } from '~/generated-metadata/graphql';
 
 type WidgetSettingsPlacementSectionProps = {

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dashboard/SidePanelDashboardRecordTableSettings.tsx

@@ -23,7 +23,7 @@ import {
   IconFilter,
   IconListDetails,
   IconTable,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import { WidgetConfigurationType } from '~/generated-metadata/graphql';
 
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/CanvasTabWidgetVisibilityDropdownContent.tsx

@@ -11,7 +11,7 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 
 type CanvasTabWidgetVisibilityDropdownContentProps = {
   widgetId: string;

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectableListItem.tsx

@@ -13,7 +13,7 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { isDefined } from 'twenty-shared/utils';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 
 const isExtendedAggregateOperation = (
   operation: AggregateChartOperation,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAggregateOperationSelectionDropdownContent.tsx

@@ -22,7 +22,7 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronLeft } from 'twenty-ui/display';
+import { IconChevronLeft } from 'twenty-ui-deprecated/display';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
 
 export const ChartAggregateOperationSelectionDropdownContent = ({

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartAxisNameSelectionDropdownContent.tsx

@@ -11,7 +11,7 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import { AxisNameDisplay } from '~/generated-metadata/graphql';
 
 export const ChartAxisNameSelectionDropdownContent = () => {

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx

@@ -4,10 +4,13 @@ import { generateGroupColor } from '@/page-layout/widgets/graph/utils/generateGr
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { ColorSample } from 'twenty-ui/display';
-import { MenuItemSelect } from 'twenty-ui/navigation';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
-import { type ThemeColor } from 'twenty-ui/theme';
+import { ColorSample } from 'twenty-ui-deprecated/display';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';
 type ChartColorGradientOptionProps = {
   colorOption: {
     id: string;

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx

@@ -5,11 +5,14 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useContext } from 'react';
-import { ColorSample } from 'twenty-ui/display';
-import { MenuItemSelect } from 'twenty-ui/navigation';
-import { getMainColorNameFromPaletteColorName } from 'twenty-ui/utilities';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
-import { type ThemeColor } from 'twenty-ui/theme';
+import { ColorSample } from 'twenty-ui-deprecated/display';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
+import { getMainColorNameFromPaletteColorName } from 'twenty-ui-deprecated/utilities';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';
 type ChartColorPaletteOptionProps = {
   selectedItemId: string | null;
   currentColor: string | null | undefined;

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx

@@ -17,7 +17,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import { capitalize, isDefined } from 'twenty-shared/utils';
-import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui/theme';
+import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui-deprecated/theme';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
 
 type ColorOption = {

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDataSourceDropdownContent.tsx

@@ -22,8 +22,8 @@ import { t } from '@lingui/core/macro';
 import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronLeft, IconSettings } from 'twenty-ui/display';
-import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
+import { IconChevronLeft, IconSettings } from 'twenty-ui-deprecated/display';
+import { MenuItem, MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
 
 const ADVANCED_OBJECTS_MENU_ITEM_ID = 'advanced-objects';

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartDateGranularitySelectionDropdownContent.tsx

@@ -15,7 +15,7 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { ObjectRecordGroupByDateGranularity } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import {
   type FieldsConfiguration,
   type WidgetConfiguration,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartFieldSelectionForAggregateOperationDropdownContent.tsx

@@ -16,8 +16,8 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
-import { useIcons } from 'twenty-ui/display';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { useIcons } from 'twenty-ui-deprecated/display';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
 
 export const ChartFieldSelectionForAggregateOperationDropdownContent = () => {

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionCompositeFieldView.tsx

@@ -12,8 +12,8 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { IconChevronLeft, useIcons } from 'twenty-ui/display';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { IconChevronLeft, useIcons } from 'twenty-ui-deprecated/display';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 
 type ChartGroupByFieldSelectionCompositeFieldViewProps = {
   compositeField: FieldMetadataItem;

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionDropdownContentBase.tsx

@@ -23,8 +23,8 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { t } from '@lingui/core/macro';
 import { useMemo, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { useIcons } from 'twenty-ui-deprecated/display';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import { RelationType } from '~/generated-metadata/graphql';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
 

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartGroupByFieldSelectionRelationFieldView.tsx

@@ -18,8 +18,8 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { t } from '@lingui/core/macro';
 import { useMemo, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronLeft, useIcons } from 'twenty-ui/display';
-import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
+import { IconChevronLeft, useIcons } from 'twenty-ui-deprecated/display';
+import { MenuItem, MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
 
 type ChartGroupByFieldSelectionRelationFieldViewProps = {

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartManualSortSubMenuContent.tsx

@@ -15,9 +15,9 @@ import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { Tag } from 'twenty-ui/components';
-import { IconChevronLeft } from 'twenty-ui/display';
-import { MenuItemDraggable } from 'twenty-ui/navigation';
+import { Tag } from 'twenty-ui-deprecated/components';
+import { IconChevronLeft } from 'twenty-ui-deprecated/display';
+import { MenuItemDraggable } from 'twenty-ui-deprecated/navigation';
 import { type WidgetConfiguration } from '~/generated-metadata/graphql';
 import { moveArrayItem } from '~/utils/array/moveArrayItem';
 

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioAggregateOperationSelectableListItem.tsx

@@ -8,7 +8,7 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { isDefined } from 'twenty-shared/utils';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 
 export const ChartRatioAggregateOperationSelectableListItem = ({
   label,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionBooleanSelectableListItem.tsx

@@ -8,8 +8,8 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { IconCheck, IconX } from 'twenty-ui/display';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { IconCheck, IconX } from 'twenty-ui-deprecated/display';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import { AggregateOperations } from '~/generated-metadata/graphql';
 
 export const ChartRatioOptionBooleanSelectableListItem = ({

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionSelectSelectableListItem.tsx

@@ -8,8 +8,8 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { MenuItemSelectTag } from 'twenty-ui/navigation';
-import { type ThemeColor } from 'twenty-ui/theme';
+import { MenuItemSelectTag } from 'twenty-ui-deprecated/navigation';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';
 import { AggregateOperations } from '~/generated-metadata/graphql';
 
 export const ChartRatioOptionSelectSelectableListItem = ({

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartRatioOptionValueSelectionDropdownContent.tsx

@@ -15,8 +15,8 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronLeft } from 'twenty-ui/display';
-import { type ThemeColor } from 'twenty-ui/theme';
+import { IconChevronLeft } from 'twenty-ui-deprecated/display';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
 

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartSortByGroupByFieldDropdownContent.tsx

@@ -20,7 +20,7 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { isDefined } from 'twenty-shared/utils';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import {
   GraphOrderBy,
   type GraphOrderBy as GraphOrderByType,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/ChartSortBySelectionDropdownContent.tsx

@@ -21,7 +21,7 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { type CompositeFieldSubFieldName } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import {
   type BarChartConfiguration,
   GraphOrderBy,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/FieldWidgetFieldDropdownContent.tsx

@@ -21,8 +21,8 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
-import { useIcons } from 'twenty-ui/display';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { useIcons } from 'twenty-ui-deprecated/display';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import { type FieldConfiguration } from '~/generated-metadata/graphql';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
 

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/FieldWidgetLayoutDropdownContent.tsx

@@ -21,8 +21,8 @@ import {
   IconLayoutKanban,
   IconListDetails,
   IconTable,
-} from 'twenty-ui/display';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+} from 'twenty-ui-deprecated/display';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import {
   FieldDisplayMode,
   type FieldConfiguration,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/MoveToTabDropdownContent.tsx

@@ -7,7 +7,7 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { MenuItem } from 'twenty-ui/navigation';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';
 import { PageLayoutTabLayoutMode } from '~/generated-metadata/graphql';
 
 export const MoveToTabDropdownContent = () => {

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/WidgetVisibilityDropdownContent.tsx

@@ -13,7 +13,7 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 
 export const WidgetVisibilityDropdownContent = () => {
   const { pageLayoutId } = usePageLayoutIdFromContextStore();

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/record-page/SidePanelRecordPageFieldSettings.tsx

@@ -24,7 +24,7 @@ import {
   IconLayoutSidebarRight,
   IconList,
   IconListDetails,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import {
   FieldDisplayMode,
   type FieldConfiguration,

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/record-page/SidePanelRecordPageFieldsSettings.tsx

@@ -17,7 +17,10 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronDown, IconLayoutSidebarRight } from 'twenty-ui/display';
+import {
+  IconChevronDown,
+  IconLayoutSidebarRight,
+} from 'twenty-ui-deprecated/display';
 import { type FieldsConfiguration } from '~/generated-metadata/graphql';
 
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/record-table-settings/RecordTableDataSourceDropdownContent.tsx

@@ -21,7 +21,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { MenuItemSelect } from 'twenty-ui/navigation';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
 import { filterBySearchQuery } from '~/utils/filterBySearchQuery';
 
 export const RecordTableDataSourceDropdownContent = () => {

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/record-table-settings/RecordTableFieldsDropdownHiddenFieldsContent.tsx

@@ -11,8 +11,12 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronLeft, IconEye, useIcons } from 'twenty-ui/display';
-import { MenuItem } from 'twenty-ui/navigation';
+import {
+  IconChevronLeft,
+  IconEye,
+  useIcons,
+} from 'twenty-ui-deprecated/display';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';
 import { v4 } from 'uuid';
 import { sortByProperty } from '~/utils/array/sortByProperty';
 

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/record-table-settings/RecordTableFieldsDropdownVisibleFieldsContent.tsx

@@ -13,8 +13,11 @@ import { useAtomComponentSelectorValue } from '@/ui/utilities/state/jotai/hooks/
 import { type DropResult } from '@hello-pangea/dnd';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconEyeOff, useIcons } from 'twenty-ui/display';
-import { MenuItemDraggable, MenuItemNavigate } from 'twenty-ui/navigation';
+import { IconEyeOff, useIcons } from 'twenty-ui-deprecated/display';
+import {
+  MenuItemDraggable,
+  MenuItemNavigate,
+} from 'twenty-ui-deprecated/navigation';
 import { sortByProperty } from '~/utils/array/sortByProperty';
 
 type RecordTableFieldsDropdownVisibleFieldsContentProps = {

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/record-table-settings/RecordTableSettingsFieldVisibility.tsx

@@ -6,9 +6,9 @@ import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableLi
 import { type DropResult } from '@hello-pangea/dnd';
 import { styled } from '@linaria/react';
 import { useMemo } from 'react';
-import { IconEye, IconEyeOff, useIcons } from 'twenty-ui/display';
-import { MenuItemDraggable } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconEye, IconEyeOff, useIcons } from 'twenty-ui-deprecated/display';
+import { MenuItemDraggable } from 'twenty-ui-deprecated/navigation';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledFieldListContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/record-table-settings/RecordTableSettingsFilters.tsx

@@ -10,7 +10,7 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledFilterSettingsContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/record-table-settings/RecordTableSettingsSorts.tsx

@@ -10,9 +10,9 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
-import { type SelectOption } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useIcons } from 'twenty-ui-deprecated/display';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { ViewSortDirection } from '~/generated-metadata/graphql';
 
 const StyledSortSettingsContainer = styled.div`

packages/twenty-front/src/modules/side-panel/pages/page-layout/components/record-table-settings/RecordTableSettingsSortsContent.tsx

@@ -4,10 +4,10 @@ import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomC
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconArrowsSort, IconTrash } from 'twenty-ui/display';
-import { Button, type SelectOption } from 'twenty-ui/input';
+import { IconArrowsSort, IconTrash } from 'twenty-ui-deprecated/display';
+import { Button, type SelectOption } from 'twenty-ui-deprecated/input';
 import { Select } from '@/ui/input/components/Select';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { v4 as uuidv4 } from 'uuid';
 import { ViewSortDirection } from '~/generated-metadata/graphql';
 

packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/AggregateSortByOptions.ts

@@ -2,7 +2,7 @@ import {
   IconHandMove,
   IconSortAscending,
   IconSortDescending,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import { GraphOrderBy } from '~/generated-metadata/graphql';
 
 export const AGGREGATE_SORT_BY_OPTIONS = [

packages/twenty-front/src/modules/side-panel/pages/page-layout/constants/GraphTypeInformation.ts

@@ -13,7 +13,7 @@ import {
   IconChartPie,
   type IconComponent,
   IconSum,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import { BarChartLayout } from '~/generated-metadata/graphql';
 
 export const GRAPH_TYPE_INFORMATION: Record<