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`.
2026-06-08 18:12:28 +02:00
parent a91e737e69
commit c596a5e342
2320 changed files with 6313 additions and 4856 deletions
@@ -40,7 +40,7 @@ import {
  WidthProvider,
 } from 'react-grid-layout';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const disabledTransitionsClass = css`
  .react-grid-layout {
@@ -11,7 +11,7 @@ import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTab
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { styled } from '@linaria/react';
 import { useMemo } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledGridOverlay = styled.div<{
  isDragSelecting?: boolean;
@@ -5,8 +5,11 @@ import {
  IconRadiusBottomRight,
  IconRadiusTopLeft,
  IconRadiusTopRight,
-} from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 type WidgetHandleAxis = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
 type WidgetHorizontalHandleAxis = 'n' | 's';
 type WidgetVerticalHandleAxis = 'e' | 'w';
@@ -9,7 +9,7 @@ import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { styled } from '@linaria/react';
 import { PageLayoutType } from '~/generated-metadata/graphql';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledContainer = styled.div`
  background: ${themeCssVariables.background.secondary};
@@ -10,8 +10,8 @@ import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { IconPlus, useIcons } from 'twenty-ui/display';
-import { TabButton } from 'twenty-ui/input';
+import { IconPlus, useIcons } from 'twenty-ui-deprecated/display';
+import { TabButton } from 'twenty-ui-deprecated/input';

 import { isPageLayoutTabDraggingComponentState } from '@/page-layout/states/isPageLayoutTabDraggingComponentState';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
@@ -48,7 +48,7 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { SidePanelPages } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { type PageLayoutType } from '~/generated-metadata/graphql';

 const StyledContainer = styled.div`
@@ -3,7 +3,7 @@ import { Droppable } from '@hello-pangea/dnd';

 import { PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS } from '@/page-layout/components/PageLayoutTabListDroppableIds';
 import { TabMoreButton } from '@/ui/layout/tab-list/components/TabMoreButton';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type PageLayoutTabListDroppableMoreButtonProps = {
  hiddenTabsCount: number;
@@ -16,8 +16,8 @@ import { useLingui } from '@lingui/react/macro';
 import { useCallback, useMemo } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { IconPlus, useIcons } from 'twenty-ui/display';
-import { MenuItem } from 'twenty-ui/navigation';
+import { IconPlus, useIcons } from 'twenty-ui-deprecated/display';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';

 type PageLayoutTabListNewTabDropdownContentProps = {
  onCreate: () => void;
@@ -28,7 +28,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
 import { useContext } from 'react';
 import { SidePanelPages } from 'twenty-shared/types';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 import { type PageLayoutType } from '~/generated-metadata/graphql';

 const StyledOverflowDropdownListDraggableWrapper = styled.div`
@@ -4,8 +4,8 @@ import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/stat
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { styled } from '@linaria/react';
-import { StyledTabContainer, TabContent } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { StyledTabContainer, TabContent } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type PageLayoutTabListReorderableTabProps = {
  tab: SingleTabProps;
@@ -5,7 +5,7 @@ import {
  type DraggableStateSnapshot,
  Droppable,
 } from '@hello-pangea/dnd';
-import { TabButton } from 'twenty-ui/input';
+import { TabButton } from 'twenty-ui-deprecated/input';

 import { TAB_LIST_GAP } from '@/ui/layout/tab-list/constants/TabListGap';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
@@ -3,15 +3,18 @@ import { type MouseEvent, useContext, useState } from 'react';

 import { TabAvatar } from '@/ui/layout/tab-list/components/TabAvatar';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
-import { IconPencil } from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
+import { IconPencil } from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';
 import {
  StyledHoverableMenuItemBase,
  StyledMenuItemIconCheck,
  StyledMenuItemLabel,
  StyledMenuItemLeftContent,
-} from 'twenty-ui/navigation';
-import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/navigation';
+import {
+  themeCssVariables,
+  ThemeContext,
+} from 'twenty-ui-deprecated/theme-constants';
 const StyledTextContainer = styled.div`
  align-items: center;
  display: flex;
@@ -8,9 +8,9 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { type DraggableProvided } from '@hello-pangea/dnd';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { StyledTabContainer, TabContent } from 'twenty-ui/input';
-import { MenuItemSelectAvatar } from 'twenty-ui/navigation';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { StyledTabContainer, TabContent } from 'twenty-ui-deprecated/input';
+import { MenuItemSelectAvatar } from 'twenty-ui-deprecated/navigation';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 const StyledDraggableWrapper = styled.div`
  cursor: grab;
  display: flex;
@@ -27,7 +27,7 @@ import { styled } from '@linaria/react';
 import { useMemo } from 'react';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { useIsMobile } from 'twenty-ui/utilities';
+import { useIsMobile } from 'twenty-ui-deprecated/utilities';

 const StyledContainer = styled.div<{ hasPinnedTab: boolean }>`
  display: grid;
@@ -14,8 +14,8 @@ import {
 } from '@hello-pangea/dnd';
 import { styled } from '@linaria/react';
 import { type ReactNode, useId } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { useIsMobile } from 'twenty-ui/utilities';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { useIsMobile } from 'twenty-ui-deprecated/utilities';

 const StyledVerticalListContainer = styled.div<{
  variant: PageLayoutVerticalListViewerVariant;
@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { useIsMobile } from 'twenty-ui/utilities';
+import { useIsMobile } from 'twenty-ui-deprecated/utilities';

 import { getPageLayoutVerticalListViewerVariant } from '@/page-layout/components/utils/getPageLayoutVerticalListViewerVariant';
 import { type PageLayoutVerticalListViewerVariant } from '@/page-layout/types/PageLayoutVerticalListViewerVariant';
@@ -7,7 +7,7 @@ import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { WidgetRenderer } from '@/page-layout/widgets/components/WidgetRenderer';
 import { useIsInPinnedTab } from '@/page-layout/widgets/hooks/useIsInPinnedTab';
 import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledVerticalListContainer = styled.div<{
  variant: PageLayoutVerticalListViewerVariant;
@@ -2,7 +2,7 @@ import { type DropResult, type ResponderProvided } from '@hello-pangea/dnd';
 import { styled } from '@linaria/react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
-import { ComponentWithRouterDecorator } from 'twenty-ui/testing';
+import { ComponentWithRouterDecorator } from 'twenty-ui-deprecated/testing';

 import { PageLayoutTabList } from '@/page-layout/components/PageLayoutTabList';
 import { PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS } from '@/page-layout/components/PageLayoutTabListDroppableIds';
@@ -11,7 +11,7 @@ import { PageLayoutEditModeProviderContext } from '@/page-layout/contexts/PageLa
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
 import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
 import { calculateNewPosition } from '@/ui/layout/draggable-list/utils/calculateNewPosition';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { PageLayoutType } from '~/generated-metadata/graphql';

 const StyledContainer = styled.div`
@@ -1,4 +1,4 @@
-import { MOBILE_VIEWPORT } from 'twenty-ui/theme-constants';
+import { MOBILE_VIEWPORT } from 'twenty-ui-deprecated/theme-constants';

 export const PAGE_LAYOUT_CONFIG = {
  breakpoints: {
@@ -17,7 +17,7 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui-deprecated/layout';

 export const DashboardWidgetPlaceholder = () => {
  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
@@ -2,7 +2,7 @@ import { ForbiddenFieldDisplay } from '@/object-record/record-field/ui/meta-type
 import { type WidgetAccessDenialInfo } from '@/page-layout/widgets/types/WidgetAccessDenialInfo';
 import { plural, t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { AppTooltip } from 'twenty-ui/display';
+import { AppTooltip } from 'twenty-ui-deprecated/display';

 type PageLayoutWidgetForbiddenDisplayProps = {
  widgetId: string;
@@ -1,7 +1,7 @@
 import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { AppTooltip, Status } from 'twenty-ui/display';
+import { AppTooltip, Status } from 'twenty-ui-deprecated/display';

 const StyledInvalidConfigContainer = styled.div`
  align-items: center;
@@ -1,7 +1,7 @@
 import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { AppTooltip, Status } from 'twenty-ui/display';
+import { AppTooltip, Status } from 'twenty-ui-deprecated/display';
 import { WidgetType } from '~/generated-metadata/graphql';

 const StyledNoDataContainer = styled.div`
@@ -9,9 +9,12 @@ import {
  IconListSearch,
  IconPlus,
  IconSquarePlus,
-} from 'twenty-ui/display';
-import { MenuItem } from 'twenty-ui/navigation';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledContainer = styled.div`
  border: 1px solid transparent;
@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { Trans } from '@lingui/react/macro';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import {
  AnimatedPlaceholder,
  AnimatedPlaceholderEmptyContainer,
@@ -8,7 +8,7 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui-deprecated/layout';

 const StyledPlaceholderContainer = styled.div`
  background: ${themeCssVariables.background.secondary};
@@ -21,8 +21,8 @@ import {
  IconArrowUpRight,
  TooltipDelay,
  TooltipPosition,
-} from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
+} from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';
 import { RelationType } from '~/generated-metadata/graphql';

 const StyledLinkContainer = styled.div`
@@ -12,8 +12,8 @@ import { WidgetCardHeader } from '@/page-layout/widgets/widget-card/components/W
 import { styled } from '@linaria/react';
 import { type MouseEvent, useContext } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { IconLock } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { IconLock } from 'twenty-ui-deprecated/display';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 import { WidgetType } from '~/generated-metadata/graphql';

 const StyledNoAccessContainer = styled.div`
@@ -2,7 +2,7 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLo
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

 const StyledContainer = styled.div`
  align-items: center;
@@ -11,7 +11,7 @@ import { type PageLayout } from '@/page-layout/types/PageLayout';
 import { DashboardWidgetPlaceholder } from '@/page-layout/widgets/components/DashboardWidgetPlaceholder';
 import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import {
  PageLayoutTabLayoutMode,
  PageLayoutType,
@@ -4,7 +4,10 @@ import { type MockedResponse } from '@apollo/client/testing';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { MemoryRouter } from 'react-router-dom';
 import { expect, within } from 'storybook/test';
-import { CatalogDecorator, type CatalogStory } from 'twenty-ui/testing';
+import {
+  CatalogDecorator,
+  type CatalogStory,
+} from 'twenty-ui-deprecated/testing';

 import { currentUserWorkspaceState } from '@/auth/states/currentUserWorkspaceState';
 import { isMinimalMetadataReadyState } from '@/metadata-store/states/isMinimalMetadataReadyState';
@@ -10,9 +10,9 @@ import { type SidePanelFooterCommandMenuItem } from '@/ui/layout/side-panel/type
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { t } from '@lingui/core/macro';
-import { IconArrowBackUp, IconSend, IconX } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { getOsControlSymbol } from 'twenty-ui/utilities';
+import { IconArrowBackUp, IconSend, IconX } from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { getOsControlSymbol } from 'twenty-ui-deprecated/utilities';

 const StyledReplyBar = styled.button`
  align-items: center;
@@ -4,9 +4,9 @@ import { useState } from 'react';
 import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
 import { type EmailThreadMessageWithSender } from '@/activities/emails/types/EmailThreadMessageWithSender';
 import { t } from '@lingui/core/macro';
-import { IconArrowsVertical } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconArrowsVertical } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledButtonContainer = styled.div`
  border-bottom: 1px solid ${themeCssVariables.border.color.light};
@@ -34,7 +34,7 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui-deprecated/layout';
 import { FieldDisplayMode } from '~/generated-metadata/graphql';

 const StyledContainer = styled.div`
@@ -5,9 +5,9 @@ import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlin
 import { useOpenFieldWidgetFieldInputEditMode } from '@/page-layout/widgets/field/hooks/useOpenFieldWidgetFieldInputEditMode';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { styled } from '@linaria/react';
-import { IconPencil } from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconPencil } from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledEditButtonWrapper = styled.div<{ isMobile: boolean }>`
  opacity: ${({ isMobile }) => (isMobile ? '1' : '0')};
@@ -5,7 +5,7 @@ import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldCont
 import { useFieldFocus } from '@/object-record/record-field/ui/hooks/useFieldFocus';
 import { useRecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
 import { RecordInlineCellValue } from '@/object-record/record-inline-cell/components/RecordInlineCellValue';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledValueContainer = styled.div<{ readonly: boolean }>`
  display: flex;
@@ -26,7 +26,7 @@ import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledShowMoreButtonContainer = styled.div`
  padding-top: ${themeCssVariables.spacing[2]};
@@ -7,7 +7,7 @@ import { getJunctionConfig } from '@/object-record/record-field/ui/utils/junctio
 import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
 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`
  box-sizing: border-box;
@@ -25,7 +25,7 @@ import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledShowMoreButtonContainer = styled.div`
  padding-top: ${themeCssVariables.spacing[2]};
@@ -4,7 +4,7 @@ import { type FieldDefinition } from '@/object-record/record-field/ui/types/Fiel
 import { type FieldMorphRelationMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledContainer = styled.div`
  box-sizing: border-box;
@@ -23,7 +23,7 @@ import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledShowMoreButtonContainer = styled.div`
  padding-top: ${themeCssVariables.spacing[2]};
@@ -20,8 +20,8 @@ import { recordStoreFamilySelector } from '@/object-record/record-store/states/s
 import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
 import { styled } from '@linaria/react';
 import { CustomError, isDefined } from 'twenty-shared/utils';
-import { IconPencil, IconPlus } from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
+import { IconPencil, IconPlus } from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';
 import { RelationType } from '~/generated-metadata/graphql';

 type FieldWidgetRelationEditActionProps = {
@@ -4,7 +4,7 @@ import { type FieldRelationMetadata } from '@/object-record/record-field/ui/type
 import { SidePanelProvider } from '@/ui/layout/side-panel/contexts/SidePanelContext';
 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`
  box-sizing: border-box;
@@ -8,7 +8,10 @@ import { styled } from '@linaria/react';
 import { lazy, Suspense, useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { isUndefined } from '@sniptt/guards';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const RichTextFieldEditor = lazy(() =>
  import('@/object-record/record-field/ui/meta-types/input/components/RichTextFieldEditor').then(
@@ -1,8 +1,8 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';

-import { IconChevronDown } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconChevronDown } from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type FieldWidgetShowMoreButtonProps = {
  remainingCount: number;
@@ -8,7 +8,7 @@ import { TextArea } from '@/ui/input/components/TextArea';
 import { useAtomFamilySelectorState } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorState';
 import { styled } from '@linaria/react';
 import { useCallback, useEffect } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { useDebouncedCallback } from 'use-debounce';

 const StyledContainer = styled.div`
@@ -22,7 +22,7 @@ import { WidgetComponentInstanceContext } from '@/page-layout/widgets/states/con
 import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import {
  FieldDisplayMode,
  PageLayoutTabLayoutMode,
@@ -25,8 +25,8 @@ import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
-import { IconNewSection } from 'twenty-ui/display';
-import { MenuItem } from 'twenty-ui/navigation';
+import { IconNewSection } from 'twenty-ui-deprecated/display';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';

 const StyledGroupsDroppable = styled.div`
  display: flex;
@@ -1,7 +1,7 @@
 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { type FieldsConfigurationFieldItem } from '@/page-layout/types/FieldsConfiguration';
-import { IconEye, IconEyeOff, useIcons } from 'twenty-ui/display';
-import { MenuItemDraggable } from 'twenty-ui/navigation';
+import { IconEye, IconEyeOff, useIcons } from 'twenty-ui-deprecated/display';
+import { MenuItemDraggable } from 'twenty-ui-deprecated/navigation';

 type FieldsConfigurationFieldEditorProps = {
  field: FieldsConfigurationFieldItem;
@@ -1,8 +1,11 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';

-import { IconGripVertical, Label } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconGripVertical, Label } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledContainer = styled.div`
  align-items: center;
@@ -4,9 +4,9 @@ import {
  IconNewSection,
  IconPencil,
  IconTrash,
-} from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
-import { MenuItem } from 'twenty-ui/navigation';
+} from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';

 import { getFieldsConfigurationGroupEditDropdownId } from '@/page-layout/widgets/fields/utils/getFieldsConfigurationGroupEditDropdownId';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -17,7 +17,7 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';

 import { FieldsConfigurationGroupDraggableHeader } from '@/page-layout/widgets/fields/components/FieldsConfigurationGroupDraggableHeader';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledFieldsDroppable = styled.div`
  display: flex;
@@ -4,8 +4,8 @@ import { Key } from 'ts-key-enum';

 import { TextInput } from '@/ui/input/components/TextInput';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
-import { Button } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Button } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledContainer = styled.div`
  align-items: center;
@@ -6,8 +6,8 @@ import { FieldsConfigurationFieldEditor } from '@/page-layout/widgets/fields/com
 import { type FieldsWidgetGroupField } from '@/page-layout/widgets/fields/types/FieldsWidgetGroup';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
-import { IconNewSection } from 'twenty-ui/display';
-import { MenuItem } from 'twenty-ui/navigation';
+import { IconNewSection } from 'twenty-ui-deprecated/display';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';

 const StyledFieldsDroppable = styled.div`
  display: flex;
@@ -20,8 +20,8 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { type FieldsConfiguration } from '~/generated-metadata/graphql';

 const StyledContainer = styled.div`
@@ -1,8 +1,14 @@
 import { styled } from '@linaria/react';
 import { useContext, useState } from 'react';
-import { IconChevronDown } from 'twenty-ui/display';
-import { AnimatedExpandableContainer, Section } from 'twenty-ui/layout';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconChevronDown } from 'twenty-ui-deprecated/display';
+import {
+  AnimatedExpandableContainer,
+  Section,
+} from 'twenty-ui-deprecated/layout';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledHeader = styled.header`
  align-items: center;
@@ -23,7 +23,7 @@ import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingCon
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { type ViewWithRelations } from '@/views/types/ViewWithRelations';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import {
  ViewOpenRecordIn,
  ViewType,
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

 type AxisLabelProps = {
  label: string;
@@ -7,7 +7,7 @@ import { getAxisLayerLayout } from '@/page-layout/widgets/graph/chart-core/utils
 import { type ChartMargins } from '@/page-layout/widgets/graph/types/ChartMargins';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

 type AxisLayerProps = {
  bottomAxisTickRotation: number;
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 type BottomAxisTicksProps = {
  bottomTickValues: (string | number)[];
  getBottomTickPosition: (value: string | number, index: number) => number;
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 type LeftAxisTicksProps = {
  leftTickValues: (string | number)[];
  getLeftTickPosition: (value: string | number, index: number) => number;
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 type ZeroLineProps = {
  isVertical: boolean;
  zeroPosition: number;
@@ -3,7 +3,7 @@ import { calculateGraphLabelStyles } from '@/page-layout/widgets/graph/utils/cal
 import { animated } from '@react-spring/web';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

 type GraphDataLabelProps = {
  label: GraphLabelData;
@@ -7,7 +7,7 @@ import { FloatingPortal, type VirtualElement } from '@floating-ui/react';
 import { animated, useSpring } from '@react-spring/web';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 type GraphWidgetFloatingTooltipProps = {
  reference: Element | VirtualElement | null;
  boundary: Element | null;
@@ -17,9 +17,12 @@ import {
  IconChevronLeft,
  IconChevronRight,
  OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 export type GraphWidgetLegendItem = {
  id: string;
@@ -7,8 +7,11 @@ import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconArrowUpRight } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconArrowUpRight } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledTooltip = styled.div`
  background: ${themeCssVariables.background.primary};
@@ -1,6 +1,6 @@
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

 type NoDataLayerProps = {
  innerWidth: number;
@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';

 import { GraphWidgetAggregateChart } from '@/page-layout/widgets/graph/graph-widget-aggregate-chart/components/GraphWidgetAggregateChart';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';

 const meta: Meta<typeof GraphWidgetAggregateChart> = {
  title: 'Modules/PageLayout/Widgets/GraphWidgetAggregateChart',
@@ -2,7 +2,10 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';

 import { GraphWidgetTestWrapper } from '@/page-layout/widgets/graph/__tests__/GraphWidgetTestWrapper';
 import { GraphWidgetBarChart } from '@/page-layout/widgets/graph/graph-widget-bar-chart/components/GraphWidgetBarChart';
-import { CatalogDecorator, ComponentDecorator } from 'twenty-ui/testing';
+import {
+  CatalogDecorator,
+  ComponentDecorator,
+} from 'twenty-ui-deprecated/testing';
 import { BarChartLayout } from '~/generated-metadata/graphql';

 const meta: Meta<typeof GraphWidgetBarChart> = {
@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';

 import { GraphWidgetTestWrapper } from '@/page-layout/widgets/graph/__tests__/GraphWidgetTestWrapper';
 import { GraphWidgetLegend } from '@/page-layout/widgets/graph/components/GraphWidgetLegend';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';

 const meta: Meta<typeof GraphWidgetLegend> = {
  title: 'Modules/PageLayout/Widgets/GraphWidgetLegend',
@@ -3,7 +3,10 @@ import { type ComponentProps } from 'react';

 import { GraphWidgetTestWrapper } from '@/page-layout/widgets/graph/__tests__/GraphWidgetTestWrapper';
 import { GraphWidgetLineChart } from '@/page-layout/widgets/graph/graph-widget-line-chart/components/GraphWidgetLineChart';
-import { CatalogDecorator, ComponentDecorator } from 'twenty-ui/testing';
+import {
+  CatalogDecorator,
+  ComponentDecorator,
+} from 'twenty-ui-deprecated/testing';

 const meta: Meta<typeof GraphWidgetLineChart> = {
  title: 'Modules/PageLayout/Widgets/GraphWidgetLineChart',
@@ -3,7 +3,10 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { GraphWidgetTestWrapper } from '@/page-layout/widgets/graph/__tests__/GraphWidgetTestWrapper';
 import { GraphWidgetPieChart } from '@/page-layout/widgets/graph/graph-widget-pie-chart/components/GraphWidgetPieChart';
-import { CatalogDecorator, ComponentDecorator } from 'twenty-ui/testing';
+import {
+  CatalogDecorator,
+  ComponentDecorator,
+} from 'twenty-ui-deprecated/testing';
 import {
  AggregateOperations,
  WidgetConfigurationType,
@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';

 import { GraphWidgetTooltip } from '@/page-layout/widgets/graph/components/GraphWidgetTooltip';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';

 const meta: Meta<typeof GraphWidgetTooltip> = {
  title: 'Modules/PageLayout/Widgets/GraphWidgetTooltip',
@@ -7,8 +7,11 @@ import {
  H1TitleFontColor,
  IconTrendingDown,
  IconTrendingUp,
-} from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 type GraphWidgetAggregateChartProps = {
  value: string | number;
  trendPercentage?: number;
@@ -18,7 +18,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { styled } from '@linaria/react';
 import { type MouseEvent, useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 import { BarChartLayout } from '~/generated-metadata/graphql';
 type BarChartProps = {
  data: BarChartDatum[];
@@ -15,7 +15,7 @@ import {
  useState,
 } from 'react';
 import { BarChartLayout } from '~/generated-metadata/graphql';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

 type BarChartBaseLayerEffectProps = {
  bars: BarPosition[];
@@ -4,7 +4,7 @@ import { renderSliceHighlight } from '@/page-layout/widgets/graph/graph-widget-b
 import { type ChartMargins } from '@/page-layout/widgets/graph/types/ChartMargins';
 import { type RefObject, useContext, useEffect, useState } from 'react';
 import { BarChartLayout } from '~/generated-metadata/graphql';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

 type BarChartHoverLayerEffectProps = {
  hoveredSlice: BarChartSlice | null;
@@ -29,7 +29,7 @@ import { styled } from '@linaria/react';
 import { isNumber } from '@sniptt/guards';
 import { useContext, useMemo, useRef, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 import { useDebouncedCallback } from 'use-debounce';
 import { BarChartLayout } from '~/generated-metadata/graphql';

@@ -1,7 +1,7 @@
 import { COMMON_CHART_CONSTANTS } from '@/page-layout/widgets/graph/constants/CommonChartConstants';
 import { parseFontSizeToPx } from '@/page-layout/widgets/graph/utils/parseFontSizeToPx';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

 export const useBarChartTheme = () => {
  const { theme } = useContext(ThemeContext);
@@ -5,7 +5,7 @@ import { type LineSeries, type Point } from '@nivo/line';
 import { motion } from 'framer-motion';
 import { type MouseEvent, useCallback, useContext, useMemo } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

 export type SliceHoverData = {
  sliceX: number;
@@ -36,7 +36,7 @@ import {
 } from '@nivo/line';
 import { useCallback, useContext, useRef, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 import { useDebouncedCallback } from 'use-debounce';

 type CrosshairLayerProps = LineCustomSvgLayerProps<LineSeries>;
@@ -1,6 +1,6 @@
 import { parseFontSizeToPx } from '@/page-layout/widgets/graph/utils/parseFontSizeToPx';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

 export const useLineChartTheme = () => {
  const { theme } = useContext(ThemeContext);
@@ -28,7 +28,10 @@ import {
  useRef,
 } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import {
  type PieChartConfiguration,
  type PieChartDataItem,
@@ -4,7 +4,10 @@ import { useLingui } from '@lingui/react/macro';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useContext } from 'react';
 import { type PieChartConfiguration } from '~/generated-metadata/graphql';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 type PieChartCenterMetricProps = {
  objectMetadataItemId: string;
@@ -1,3 +1,3 @@
-import { type ThemeColor } from 'twenty-ui/theme';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';

 export type GraphColor = ThemeColor | 'auto';
@@ -1,5 +1,5 @@
 import { type GraphColorRegistry } from '@/page-layout/widgets/graph/types/GraphColorRegistry';
-import { type ThemeType } from 'twenty-ui/theme-constants';
+import { type ThemeType } from 'twenty-ui-deprecated/theme-constants';

 export const createGraphColorRegistry = (
  colorSource: ThemeType['color'],
@@ -1,6 +1,6 @@
 import { type FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
 import { isDefined } from 'twenty-shared/utils';
-import { type ThemeColor } from 'twenty-ui/theme';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';

 export const getSelectOptionColorForValue = ({
  rawValue,
@@ -1,6 +1,6 @@
 import { type GraphColor } from '@/page-layout/widgets/graph/types/GraphColor';
 import { 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';

 export const parseGraphColor = (
  value: string | null | undefined,
@@ -5,7 +5,7 @@ import { getTabsByDisplayMode } from '@/page-layout/utils/getTabsByDisplayMode';
 import { getTabsWithVisibleWidgets } from '@/page-layout/utils/getTabsWithVisibleWidgets';
 import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { isDefined } from 'twenty-shared/utils';
-import { useIsMobile } from 'twenty-ui/utilities';
+import { useIsMobile } from 'twenty-ui-deprecated/utilities';

 export const useIsInPinnedTab = () => {
  const isMobile = useIsMobile();
@@ -5,7 +5,7 @@ import { WidgetSkeletonLoader } from '@/page-layout/widgets/components/WidgetSke
 import { styled } from '@linaria/react';
 import { useState } from 'react';
 import { getSafeUrl, isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledContainer = styled.div<{ $isEditMode: boolean }>`
  background: ${themeCssVariables.background.primary};
@@ -1,7 +1,10 @@
 import { styled } from '@linaria/react';

 import { type BlockNoteColor } from '@/page-layout/widgets/standalone-rich-text/types/BlockNoteColor';
-import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
+import {
+  themeCssVariables,
+  ThemeContext,
+} from 'twenty-ui-deprecated/theme-constants';
 import { useContext } from 'react';
 const StyledColorIcon = styled.div<{
  textColorValue: string;
@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
-import { IconCheck } from 'twenty-ui/display';
+import { IconCheck } from 'twenty-ui-deprecated/display';

 import { DashboardColorIcon } from '@/page-layout/widgets/standalone-rich-text/components/DashboardColorIcon';
 import { BLOCKNOTE_COLOR_DISPLAY_NAMES } from '@/page-layout/widgets/standalone-rich-text/constants/BlockNoteColorDisplayNames';
@@ -10,7 +10,10 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/DropdownMenuSectionLabel';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
+import {
+  themeCssVariables,
+  ThemeContext,
+} from 'twenty-ui-deprecated/theme-constants';
 import { useContext } from 'react';

 const StyledColorMenuItem = styled.div`
@@ -11,12 +11,16 @@ import {
 } from '@blocknote/react';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
-import { IconColorSwatch, IconPlus, IconTrash } from 'twenty-ui/display';
+import {
+  IconColorSwatch,
+  IconPlus,
+  IconTrash,
+} from 'twenty-ui-deprecated/display';
 import { isDefined } from 'twenty-shared/utils';

 import { CustomSideMenuOptions } from '@/blocknote-editor/components/CustomSideMenuOptions';
 import { type DASHBOARD_BLOCK_SCHEMA } from '@/page-layout/widgets/standalone-rich-text/constants/DashboardBlockSchema';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type DashboardEditorSideMenuProps = {
  editor: typeof DASHBOARD_BLOCK_SCHEMA.BlockNoteEditor;
@@ -18,7 +18,7 @@ import { extractColorFromProps } from '@/page-layout/widgets/standalone-rich-tex
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledColorButton = styled.button`
  align-items: center;
@@ -12,7 +12,10 @@ import { DashboardEditorSideMenu } from '@/page-layout/widgets/standalone-rich-t
 import { DashboardFormattingToolbar } from '@/page-layout/widgets/standalone-rich-text/components/DashboardFormattingToolbar';
 import { type DASHBOARD_BLOCK_SCHEMA } from '@/page-layout/widgets/standalone-rich-text/constants/DashboardBlockSchema';
 import { getDashboardSlashMenu } from '@/page-layout/widgets/standalone-rich-text/utils/getDashboardSlashMenu';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 type DashboardsBlockEditorProps = {
  editor: typeof DASHBOARD_BLOCK_SCHEMA.BlockNoteEditor;
  onFocus?: () => void;
@@ -17,7 +17,7 @@ import {
  PageLayoutType,
  type StandaloneRichTextConfiguration,
 } from '~/generated-metadata/graphql';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledContainer = styled.div<{ isPageLayoutInEditMode?: boolean }>`
  box-sizing: border-box;
@@ -18,7 +18,7 @@ import {
  IconMoodSmile,
  IconPilcrow,
  IconTable,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';

 const Icons: Record<string, IconComponent> = {
  'Heading 1': IconH1,
@@ -1,6 +1,6 @@
 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 WidgetCardVariant } from '~/modules/page-layout/widgets/types/WidgetCardVariant';

 type WidgetCardStyledProps = {
@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { type WidgetCardVariant } from '~/modules/page-layout/widgets/types/WidgetCardVariant';

 type WidgetCardContentStyledProps = {
@@ -5,14 +5,20 @@ import { useAtomComponentFamilyStateValue } from '@/ui/utilities/state/jotai/hoo
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { type ReactNode, useContext } from 'react';
-import { IconTrash, OverflowingTextWithTooltip } from 'twenty-ui/display';
-import { IconButton } from 'twenty-ui/input';
+import {
+  IconTrash,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui-deprecated/display';
+import { IconButton } from 'twenty-ui-deprecated/input';

 import { type WidgetCardVariant } from '@/page-layout/widgets/types/WidgetCardVariant';
 import { WidgetGrip } from '@/page-layout/widgets/widget-card/components/WidgetGrip';
 import { AnimatePresence, motion } from 'framer-motion';
 import { isDefined, isNonEmptyArray } from 'twenty-shared/utils';
-import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
+import {
+  themeCssVariables,
+  ThemeContext,
+} from 'twenty-ui-deprecated/theme-constants';
 export type WidgetCardHeaderProps = {
  variant: WidgetCardVariant;
  widgetId: string;
@@ -1,7 +1,10 @@
 import { styled } from '@linaria/react';
 import { motion } from 'framer-motion';
-import { IconGripVertical } from 'twenty-ui/display';
-import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
+import { IconGripVertical } from 'twenty-ui-deprecated/display';
+import {
+  themeCssVariables,
+  ThemeContext,
+} from 'twenty-ui-deprecated/theme-constants';
 import { useContext } from 'react';

 const StyledGripContainerBase = styled.div`