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
@@ -27,6 +27,7 @@ jobs:
        packages/twenty-front/**
        packages/twenty-front-component-renderer/**
        packages/twenty-ui/**
+        packages/twenty-ui-deprecated/**
        packages/twenty-shared/**
        packages/twenty-sdk/**
        !packages/twenty-sdk/package.json
@@ -90,6 +91,7 @@ jobs:
        run: |
          npx nx build twenty-shared
          npx nx build twenty-ui
+          npx nx build twenty-ui-deprecated
          npx nx build twenty-front-component-renderer
      - name: Download storybook build
        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
@@ -21,7 +21,7 @@ jobs:
      files: |
        package.json
        yarn.lock
-        packages/twenty-new-ui/**
+        packages/twenty-ui/**
        packages/twenty-shared/**
  new-ui-task:
    needs: changed-files-check
@@ -39,7 +39,7 @@ jobs:
      - name: Install dependencies
        uses: ./.github/actions/yarn-install
      - name: Run ${{ matrix.task }}
-        run: npx nx ${{ matrix.task }} twenty-new-ui
+        run: npx nx ${{ matrix.task }} twenty-ui
  new-ui-sb-build:
    needs: changed-files-check
    if: >-
@@ -56,12 +56,12 @@ jobs:
      - name: Install dependencies
        uses: ./.github/actions/yarn-install
      - name: Build storybook
-        run: npx nx storybook:build twenty-new-ui
+        run: npx nx storybook:build twenty-ui
      - name: Upload storybook build
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: storybook-twenty-new-ui
-          path: packages/twenty-new-ui/storybook-static
+          path: packages/twenty-ui/storybook-static
          retention-days: 1
  new-ui-sb-test:
    timeout-minutes: 30
@@ -81,19 +81,19 @@ jobs:
        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
        with:
          name: storybook-twenty-new-ui
-          path: packages/twenty-new-ui/storybook-static
+          path: packages/twenty-ui/storybook-static
      - name: Install Playwright
        run: |
-          cd packages/twenty-new-ui
+          cd packages/twenty-ui
          npx playwright install
      - name: Run storybook tests
-        run: npx nx storybook:test twenty-new-ui
+        run: npx nx storybook:test twenty-ui
      - name: Upload screenshots for visual regression
        if: always() && !cancelled()
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: argos-screenshots-twenty-new-ui
-          path: packages/twenty-new-ui/screenshots
+          path: packages/twenty-ui/screenshots
          retention-days: 1
  ci-new-ui-status-check:
    if: always() && !cancelled()
@@ -21,7 +21,7 @@ jobs:
      files: |
        package.json
        yarn.lock
-        packages/twenty-ui/**
+        packages/twenty-ui-deprecated/**
        packages/twenty-shared/**
  ui-task:
    needs: changed-files-check
@@ -39,7 +39,7 @@ jobs:
      - name: Install dependencies
        uses: ./.github/actions/yarn-install
      - name: Run ${{ matrix.task }}
-        run: npx nx ${{ matrix.task }} twenty-ui
+        run: npx nx ${{ matrix.task }} twenty-ui-deprecated
  ui-sb-build:
    needs: changed-files-check
    if: >-
@@ -56,12 +56,12 @@ jobs:
      - name: Install dependencies
        uses: ./.github/actions/yarn-install
      - name: Build storybook
-        run: npx nx storybook:build twenty-ui
+        run: npx nx storybook:build twenty-ui-deprecated
      - name: Upload storybook build
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: storybook-twenty-ui
-          path: packages/twenty-ui/storybook-static
+          path: packages/twenty-ui-deprecated/storybook-static
          retention-days: 1
  ui-sb-test:
    timeout-minutes: 30
@@ -81,19 +81,19 @@ jobs:
        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
        with:
          name: storybook-twenty-ui
-          path: packages/twenty-ui/storybook-static
+          path: packages/twenty-ui-deprecated/storybook-static
      - name: Install Playwright
        run: |
-          cd packages/twenty-ui
+          cd packages/twenty-ui-deprecated
          npx playwright install
      - name: Run storybook tests
-        run: npx nx storybook:test twenty-ui
+        run: npx nx storybook:test twenty-ui-deprecated
      - name: Upload screenshots for visual regression
        if: always() && !cancelled()
        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
        with:
          name: argos-screenshots-twenty-ui
-          path: packages/twenty-ui/screenshots
+          path: packages/twenty-ui-deprecated/screenshots
          retention-days: 1
  ci-ui-status-check:
    if: always() && !cancelled()
@@ -52,7 +52,7 @@
      "packages/twenty-server",
      "packages/twenty-emails",
      "packages/twenty-ui",
-      "packages/twenty-new-ui",
+      "packages/twenty-ui-deprecated",
      "packages/twenty-utils",
      "packages/twenty-zapier",
      "packages/twenty-website",
@@ -11,13 +11,14 @@ COPY ./.yarn/releases /app/.yarn/releases
 COPY ./.yarn/patches /app/.yarn/patches

 COPY ./packages/twenty-ui/package.json /app/packages/twenty-ui/
+COPY ./packages/twenty-ui-deprecated/package.json /app/packages/twenty-ui-deprecated/
 COPY ./packages/twenty-shared/package.json /app/packages/twenty-shared/
 COPY ./packages/twenty-front/package.json /app/packages/twenty-front/
 COPY ./packages/twenty-front-component-renderer/package.json /app/packages/twenty-front-component-renderer/
 COPY ./packages/twenty-sdk/package.json /app/packages/twenty-sdk/
 COPY ./packages/twenty-client-sdk/package.json /app/packages/twenty-client-sdk/

-RUN yarn workspaces focus twenty twenty-front twenty-front-component-renderer twenty-ui twenty-shared twenty-sdk twenty-client-sdk && yarn cache clean && npx nx reset
+RUN yarn workspaces focus twenty twenty-front twenty-front-component-renderer twenty-ui twenty-ui-deprecated twenty-shared twenty-sdk twenty-client-sdk && yarn cache clean && npx nx reset


 FROM node:24.16.0-alpine3.23@sha256:2bdb65ed1dab192432bc31c95f94155ca5ad7fc1392fb7eb7526ab682fa5bf14 AS server-deps
@@ -64,6 +65,7 @@ FROM front-deps AS twenty-front-build
 COPY ./packages/twenty-front /app/packages/twenty-front
 COPY ./packages/twenty-front-component-renderer /app/packages/twenty-front-component-renderer
 COPY ./packages/twenty-ui /app/packages/twenty-ui
+COPY ./packages/twenty-ui-deprecated /app/packages/twenty-ui-deprecated
 COPY ./packages/twenty-shared /app/packages/twenty-shared
 COPY ./packages/twenty-sdk /app/packages/twenty-sdk
 COPY ./packages/twenty-client-sdk /app/packages/twenty-client-sdk
@@ -1,5 +1,5 @@
 import { type Preview } from '@storybook/react-vite';
-import { ThemeProvider } from 'twenty-ui/theme-constants';
+import { ThemeProvider } from 'twenty-ui-deprecated/theme-constants';

 const preview: Preview = {
  tags: ['autodocs'],
@@ -49,7 +49,7 @@
    "tsx": "^4.7.0",
    "twenty-sdk": "workspace:*",
    "twenty-shared": "workspace:*",
-    "twenty-ui": "workspace:*",
+    "twenty-ui-deprecated": "workspace:*",
    "vite-plugin-dts": "^4.5.4",
    "vite-tsconfig-paths": "^4.2.1"
  },
@@ -30,8 +30,8 @@
      "inputs": [
        "{projectRoot}/scripts/remote-dom/**/*",
        "{projectRoot}/src/constants/**/*",
-        "{workspaceRoot}/packages/twenty-ui/src/**/index.ts",
-        "{workspaceRoot}/packages/twenty-ui/src/**/*.tsx"
+        "{workspaceRoot}/packages/twenty-ui-deprecated/src/**/index.ts",
+        "{workspaceRoot}/packages/twenty-ui-deprecated/src/**/*.tsx"
      ],
      "outputs": [
        "{projectRoot}/src/host/generated/*",
@@ -58,7 +58,7 @@
        },
        {
          "target": "build:individual",
-          "projects": "twenty-ui"
+          "projects": "twenty-ui-deprecated"
        },
        {
          "target": "build:individual",
@@ -22,7 +22,7 @@ const rootNodeModules = path.resolve(dirname, '../../../../node_modules');

 const twentyUiIndividualIndex = path.resolve(
  dirname,
-  '../../../twenty-ui/dist/individual/individual-entry.js',
+  '../../../twenty-ui-deprecated/dist/individual/individual-entry.js',
 );

 const sdkDefineIndex = path.resolve(
@@ -14,7 +14,7 @@ import {
 import { useMemo, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';

-import { ThemeProvider } from 'twenty-ui/theme-constants';
+import { ThemeProvider } from 'twenty-ui-deprecated/theme-constants';
 import { FrontComponentWorkerEffect } from '../../remote/components/FrontComponentWorkerEffect';
 import { componentRegistry } from '../generated/host-component-registry';

@@ -18,10 +18,10 @@ import { resetJotaiStore } from '../src/modules/ui/utilities/state/jotai/jotaiSt
 import { UserContext } from '../src/modules/users/contexts/UserContext';

 import 'react-loading-skeleton/dist/skeleton.css';
-import 'twenty-ui/style.css';
-import 'twenty-ui/theme-light.css';
-import 'twenty-ui/theme-dark.css';
-import { ThemeProvider } from 'twenty-ui/theme-constants';
+import 'twenty-ui-deprecated/style.css';
+import 'twenty-ui-deprecated/theme-light.css';
+import 'twenty-ui-deprecated/theme-dark.css';
+import { ThemeProvider } from 'twenty-ui-deprecated/theme-constants';
 // oxlint-disable-next-line no-restricted-imports
 import { messages as enMessages } from '../src/locales/generated/en';

@@ -24,9 +24,10 @@ const jestConfig = {
  testEnvironmentOptions: {},

  transformIgnorePatterns: [
-    '/node_modules/(?!(twenty-ui|apollo-upload-client|extract-files|is-plain-obj)/.*)',
-    '../../node_modules/(?!(twenty-ui|apollo-upload-client|extract-files|is-plain-obj)/.*)',
+    '/node_modules/(?!(twenty-ui|twenty-ui-deprecated|apollo-upload-client|extract-files|is-plain-obj)/.*)',
+    '../../node_modules/(?!(twenty-ui|twenty-ui-deprecated|apollo-upload-client|extract-files|is-plain-obj)/.*)',
    '../../twenty-ui/',
+    '../../twenty-ui-deprecated/',
  ],
  transform: {
    '^.+\\.(ts|js|tsx|jsx|mjs)$': [
@@ -140,6 +140,7 @@
    "twenty-front-component-renderer": "workspace:*",
    "twenty-shared": "workspace:*",
    "twenty-ui": "workspace:*",
+    "twenty-ui-deprecated": "workspace:*",
    "type-fest": "4.10.1",
    "use-debounce": "^10.0.0",
    "uuid": "^11.1.1",
@@ -1,8 +1,8 @@
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useLingui } from '@lingui/react/macro';
-import { IconCopy, IconExclamationCircle } from 'twenty-ui/display';
+import { IconCopy, IconExclamationCircle } from 'twenty-ui-deprecated/display';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 export const useCopyToClipboard = () => {
  const { theme } = useContext(ThemeContext);
  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
@@ -2,9 +2,12 @@ import ReactDOM from 'react-dom/client';

 import { App } from '@/app/components/App';
 import 'react-loading-skeleton/dist/skeleton.css';
+import 'twenty-ui-deprecated/style.css';
+import 'twenty-ui-deprecated/theme-light.css';
+import 'twenty-ui-deprecated/theme-dark.css';
+// New twenty-ui ships its component styles (e.g. Toggle SCSS modules) in its own
+// style.css; the --t-* theme tokens it relies on are already provided above.
 import 'twenty-ui/style.css';
-import 'twenty-ui/theme-light.css';
-import 'twenty-ui/theme-dark.css';
 import './index.css';

 const root = ReactDOM.createRoot(
@@ -7,7 +7,7 @@ import { NAVIGATION_DRAWER_CONSTRAINTS } from '@/ui/layout/resizable-panel/const
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';

 const StyledAnimatedContainer = styled(motion.div)`
  align-items: center;
@@ -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 StyledSkeletonContainer = styled.div`
  align-items: flex-start;
@@ -4,7 +4,10 @@ import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledHeaderSkeleton = styled.div`
  align-items: center;
@@ -2,7 +2,10 @@ 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, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledSidePanelContainer = styled.div`
  display: flex;
@@ -3,8 +3,11 @@ import { styled } from '@linaria/react';
 import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
 import { NAVIGATION_DRAWER_CONSTRAINTS } from '@/ui/layout/resizable-panel/constants/NavigationDrawerConstraints';
-import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
-import { ModalBackdrop } from 'twenty-ui/layout';
+import {
+  MOBILE_VIEWPORT,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
+import { ModalBackdrop } from 'twenty-ui-deprecated/layout';
 import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
 import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader';

@@ -4,8 +4,11 @@ import { useContext } from 'react';

 import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
-import { CardContent } from 'twenty-ui/layout';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { CardContent } from 'twenty-ui-deprecated/layout';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import { type TimelineCalendarEvent } from '~/generated/graphql';

 type CalendarDayCardContentProps = {
@@ -31,9 +31,9 @@ import {
  ChipAccent,
  ChipSize,
  ChipVariant,
-} from 'twenty-ui/components';
-import { IconCalendarEvent } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/components';
+import { IconCalendarEvent } from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';

 type CalendarEventDetailsProps = {
@@ -1,8 +1,11 @@
 import { styled } from '@linaria/react';
 import { Trans } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { IconLock } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconLock } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledContainer = styled.div`
  align-items: center;
@@ -1,7 +1,7 @@
 import { type CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant';
 import { isTimelineCalendarEventParticipant } from '@/activities/calendar/types/guards/IsTimelineCalendarEventParticipant';
 import { isDefined } from 'twenty-shared/utils';
-import { Avatar, AvatarGroup } from 'twenty-ui/display';
+import { Avatar, AvatarGroup } from 'twenty-ui-deprecated/display';
 import { type TimelineCalendarEventParticipant } from '~/generated/graphql';

 type CalendarEventParticipantsAvatarGroupProps = {
@@ -6,8 +6,15 @@ import { PropertyBox } from '@/object-record/record-inline-cell/property-box/com
 import { ParticipantChip } from '@/activities/components/ParticipantChip';
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
-import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  IconCheck,
+  IconQuestionMark,
+  IconX,
+} from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledInlineCellBaseContainer = styled.div`
  align-items: center;
@@ -15,8 +15,11 @@ import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEv
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useOpenCalendarEventInSidePanel } from '@/side-panel/hooks/useOpenCalendarEventInSidePanel';
 import { useContext } from 'react';
-import { IconArrowRight } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconArrowRight } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 type CalendarEventRowProps = {
  calendarEvent: TimelineCalendarEvent;
@@ -15,7 +15,7 @@ import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
 import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
-import { H3Title } from 'twenty-ui/display';
+import { H3Title } from 'twenty-ui-deprecated/display';
 import {
  AnimatedPlaceholder,
  AnimatedPlaceholderEmptyContainer,
@@ -24,8 +24,8 @@ import {
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
  Section,
-} 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 TimelineCalendarEventsWithTotal } from '~/generated/graphql';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';

@@ -2,7 +2,7 @@ import { useContext } from 'react';

 import { CalendarDayCardContent } from '@/activities/calendar/components/CalendarDayCardContent';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
-import { Card } from 'twenty-ui/layout';
+import { Card } from 'twenty-ui-deprecated/layout';

 type CalendarMonthCardProps = {
  dayTimes: number[];
@@ -6,7 +6,7 @@ import { CalendarEventsCard } from '@/activities/calendar/components/CalendarEve
 import { getTimelineCalendarEventsFromCompanyId } from '@/activities/calendar/graphql/queries/getTimelineCalendarEventsFromCompanyId';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import { PageLayoutType } from '~/generated-metadata/graphql';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
-import { Card } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Card } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledListContainer = styled.div`
  width: 100%;
@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import React from 'react';
-import { CardContent } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { CardContent } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledRowContentContainer = styled.div`
  > div {
@@ -3,7 +3,7 @@ import { styled } from '@linaria/react';
 import { type ActivityTargetWithTargetRecord } from '@/activities/types/ActivityTargetObject';
 import { RecordChip } from '@/object-record/components/RecordChip';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type ActivityTargetChipsProps = {
  activityTargetObjectRecords: ActivityTargetWithTargetRecord[];
@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useInView } from 'react-intersection-observer';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type CustomResolverFetchMoreLoaderProps = {
  loading: boolean;
@@ -4,8 +4,8 @@ import React from 'react';
 import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { RecordChip } from '@/object-record/components/RecordChip';
-import { Avatar } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Avatar } from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledAvatarContainer = styled.span`
  margin-right: ${themeCssVariables.spacing[1]};
@@ -1,7 +1,10 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledSkeletonContainer = styled.div`
  align-content: flex-start;
@@ -1,6 +1,6 @@
 import { useComposeEmailForTargetRecord } from '@/activities/emails/hooks/useComposeEmailForTargetRecord';
-import { IconPlus } from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';

 export const ComposeEmailButton = () => {
  const { openComposer, loading } = useComposeEmailForTargetRecord();
@@ -3,8 +3,11 @@ import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
 import { type EmailAttachment } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { IconUpload } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconUpload } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 import { useUploadEmailAttachment } from '@/activities/emails/hooks/useUploadEmailAttachment';
 import { AttachmentChip } from '@/file/components/AttachmentChip';
@@ -3,9 +3,9 @@ import { styled } from '@linaria/react';
 import { EmailComposerFields } from '@/activities/emails/components/EmailComposerFields';
 import { useEmailComposerState } from '@/activities/emails/hooks/useEmailComposerState';
 import { t } from '@lingui/core/macro';
-import { IconArrowBackUp } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconArrowBackUp } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledFooterWarning = styled.span`
  color: ${themeCssVariables.color.red};
@@ -9,8 +9,8 @@ import { FormTextFieldInput } from '@/object-record/record-field/ui/form-types/c
 import { GET_MY_CONNECTED_ACCOUNTS } from '@/settings/accounts/graphql/queries/getMyConnectedAccounts';
 import { Select } from '@/ui/input/components/Select';
 import { t } from '@lingui/core/macro';
-import { type SelectOption } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledFieldsContainer = styled.div`
  display: flex;
@@ -4,8 +4,8 @@ import {
  AnimatedPlaceholderEmptyContainer,
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
-} from 'twenty-ui/layout';
-import { Loader } from 'twenty-ui/feedback';
+} from 'twenty-ui-deprecated/layout';
+import { Loader } from 'twenty-ui-deprecated/feedback';

 export const EmailLoader = ({ loadingText }: { loadingText?: string }) => (
  <AnimatedPlaceholderEmptyContainer>
@@ -1,8 +1,8 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { IconArrowBackUp, IconUserCircle } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconArrowBackUp, IconUserCircle } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledThreadBottomBar = styled.div`
  align-items: center;
@@ -2,7 +2,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';

-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';

@@ -10,7 +10,7 @@ import { type EmailThreadMessageParticipant } from '@/activities/emails/types/Em
 import { FIELD_RESTRICTED_ADDITIONAL_PERMISSIONS_REQUIRED } from 'twenty-shared/constants';
 import { MessageParticipantRole } 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 { MessageChannelVisibility } from '~/generated/graphql';

 const StyledThreadMessage = styled.div<{ hideBottomBorder?: boolean }>`
@@ -1,8 +1,8 @@
 import { styled } from '@linaria/react';
 import { motion } from 'framer-motion';
 import Linkify from 'linkify-react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { AnimatedEaseInOut } from 'twenty-ui/utilities';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { AnimatedEaseInOut } from 'twenty-ui-deprecated/utilities';

 const StyledThreadMessageBody = styled(motion.div)`
  color: ${themeCssVariables.font.color.primary};
@@ -1,6 +1,6 @@
 import React from 'react';
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledThreadMessageBodyPreview = styled.div`
  color: ${themeCssVariables.font.color.tertiary};
@@ -2,8 +2,8 @@ import { styled } from '@linaria/react';

 import { type EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
 import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
-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';

 type EmailThreadMessageReceiversProps = {
  receivers: EmailThreadMessageParticipant[];
@@ -3,8 +3,8 @@ import { styled } from '@linaria/react';
 import { ParticipantChip } from '@/activities/components/ParticipantChip';
 import { type EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { AppTooltip, TooltipPosition } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { AppTooltip, TooltipPosition } from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import {
  beautifyPastDateRelativeToNow,
@@ -1,8 +1,15 @@
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { AppTooltip, IconLock, TooltipDelay } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  AppTooltip,
+  IconLock,
+  TooltipDelay,
+} from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import { MessageChannelVisibility } from '~/generated/graphql';

 const StyledContainer = styled.div<{ isCompact?: boolean }>`
@@ -7,8 +7,11 @@ import { useContext } from 'react';

 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-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';
 import {
  MessageChannelVisibility,
  type TimelineThread,
@@ -14,9 +14,9 @@ import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { Trans } from '@lingui/react/macro';
-import { H1Title, H1TitleFontColor } from 'twenty-ui/display';
-import { Section } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { H1Title, H1TitleFontColor } from 'twenty-ui-deprecated/display';
+import { Section } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import {
  type TimelineThread,
  type TimelineThreadsWithTotal,
@@ -1,7 +1,7 @@
 import { useComposeEmailForTargetRecord } from '@/activities/emails/hooks/useComposeEmailForTargetRecord';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { IconMail } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
+import { IconMail } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
 import {
  AnimatedPlaceholder,
  AnimatedPlaceholderEmptyContainer,
@@ -9,7 +9,7 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui-deprecated/layout';

 export const EmptyInboxPlaceholder = () => {
  const { t } = useLingui();
@@ -2,8 +2,8 @@ import { type MessageThreadSubscriber } from '@/activities/emails/types/MessageT
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { type WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { IconPlus } from 'twenty-ui/display';
-import { MenuItemAvatar } from 'twenty-ui/navigation';
+import { IconPlus } from 'twenty-ui-deprecated/display';
+import { MenuItemAvatar } from 'twenty-ui-deprecated/navigation';

 export const MessageThreadSubscriberDropdownAddSubscriberMenuItem = ({
  workspaceMember,
@@ -9,9 +9,9 @@ import {
  IconDownload,
  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';

 type AttachmentDropdownProps = {
  onDownload: () => void;
@@ -11,7 +11,7 @@ import { type ActivityTargetableObject } from '@/activities/types/ActivityTarget
 import { isAttachmentPreviewEnabledState } from '@/client-config/states/isAttachmentPreviewEnabledState';
 import { ModalStatefulWrapper } from '@/ui/layout/modal/components/ModalStatefulWrapper';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { ModalContent, ModalHeader } from 'twenty-ui/layout';
+import { ModalContent, ModalHeader } from 'twenty-ui-deprecated/layout';

 import { ActivityList } from '@/activities/components/ActivityList';
 import {
@@ -23,9 +23,9 @@ import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFla
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { isDefined } from 'twenty-shared/utils';
-import { IconDownload, IconX } from 'twenty-ui/display';
-import { IconButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconDownload, IconX } from 'twenty-ui-deprecated/display';
+import { IconButton } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { PermissionFlagType } from '~/generated-metadata/graphql';
 import { AttachmentRow } from './AttachmentRow';

@@ -17,9 +17,15 @@ import { type AttachmentWithFile } from '@/activities/files/utils/filterAttachme
 import { FileIcon } from '@/file/components/FileIcon';
 import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFlag';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
-import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
-import { isNavigationModifierPressed } from 'twenty-ui/utilities';
+import {
+  IconCalendar,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
+import { isNavigationModifierPressed } from 'twenty-ui-deprecated/utilities';
 import { PermissionFlagType } from '~/generated-metadata/graphql';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
 import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension';
@@ -11,9 +11,12 @@ import { styled } from '@linaria/react';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useContext, useEffect, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconDownload } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconDownload } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension';

 const MS_OFFICE_EXTENSIONS = [
@@ -4,8 +4,11 @@ import { useContext } from 'react';
 import { useDropzone } from 'react-dropzone';

 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { IconUpload } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconUpload } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledContainer = styled.div`
  align-items: center;
@@ -12,8 +12,8 @@ import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFla
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconPlus } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
 import {
  AnimatedPlaceholder,
  AnimatedPlaceholderEmptyContainer,
@@ -21,7 +21,7 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui-deprecated/layout';
 import { PermissionFlagType } from '~/generated-metadata/graphql';

 const StyledAttachmentsContainer = styled.div`
@@ -16,7 +16,7 @@ import { RecordInlineCellContext } from '@/object-record/record-inline-cell/comp
 import { RecordInlineCellEditMode } from '@/object-record/record-inline-cell/components/RecordInlineCellEditMode';
 import { MultipleRecordPicker } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
-import { IconArrowUpRight, IconPencil } from 'twenty-ui/display';
+import { IconArrowUpRight, IconPencil } from 'twenty-ui-deprecated/display';

 type ActivityTargetsInlineCellProps = {
  activityRecordId: string;
@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 import { type ReactElement } from 'react';

 import { type Note } from '@/activities/types/Note';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 import { NoteTile } from './NoteTile';

@@ -9,7 +9,7 @@ import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSide
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { RecordFieldsScopeContextProvider } from '@/object-record/record-field-list/contexts/RecordFieldsScopeContext';
 import { FieldContextProvider } from '@/object-record/record-field/ui/components/FieldContextProvider';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledCard = styled.div<{ isSingleNote: boolean }>`
  align-items: flex-start;
@@ -9,8 +9,8 @@ import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPe
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { IconPlus } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
 import {
  AnimatedPlaceholder,
  AnimatedPlaceholderEmptyContainer,
@@ -18,7 +18,7 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui-deprecated/layout';

 const StyledNotesContainer = styled.div`
  display: flex;
@@ -4,8 +4,8 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPermissionsForObject';
 import { t } from '@lingui/core/macro';
-import { IconPlus } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';

 export const AddTaskButton = ({
  activityTargetableObject,
@@ -12,8 +12,8 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { t } from '@lingui/core/macro';
 import groupBy from 'lodash.groupby';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
-import { IconPlus } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
 import {
  AnimatedPlaceholder,
  AnimatedPlaceholderEmptyContainer,
@@ -21,7 +21,7 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui-deprecated/layout';
 import { AddTaskButton } from './AddTaskButton';
 import { TaskList } from './TaskList';

@@ -3,7 +3,7 @@ import { type ReactElement } from 'react';

 import { ActivityList } from '@/activities/components/ActivityList';
 import { type Task } from '@/activities/types/Task';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { TaskRow } from './TaskRow';

 type TaskListProps = {
@@ -14,9 +14,15 @@ import { StopPropagationContainer } from '@/object-record/record-board/record-bo
 import { RecordFieldsScopeContextProvider } from '@/object-record/record-field-list/contexts/RecordFieldsScopeContext';
 import { FieldContextProvider } from '@/object-record/record-field/ui/components/FieldContextProvider';
 import { useContext } from 'react';
-import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display';
-import { Checkbox, CheckboxShape } from 'twenty-ui/input';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  IconCalendar,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui-deprecated/display';
+import { Checkbox, CheckboxShape } from 'twenty-ui-deprecated/input';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import { useCompleteTask } from '@/activities/tasks/hooks/useCompleteTask';

 const StyledTaskBody = styled.div`
@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { TaskList } from '@/activities/tasks/components/TaskList';
 import { type Task } from '@/activities/types/Task';
 import { getRecordFromRecordNode } from '@/object-record/cache/utils/getRecordFromRecordNode';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
@@ -9,7 +9,7 @@ import { type ActivityTargetableObject } from '@/activities/types/ActivityTarget
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type EventListProps = {
  targetableObject: ActivityTargetableObject;
@@ -14,7 +14,7 @@ import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/Enriche
 import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@@ -3,7 +3,7 @@ import { styled } from '@linaria/react';
 import { EventRow } from '@/activities/timeline-activities/components/EventRow';
 import { type EventGroup } from '@/activities/timeline-activities/utils/groupEventsByMonth';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type EventsGroupProps = {
  group: EventGroup;
@@ -14,8 +14,11 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
-import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/layout';
+import {
+  MOBILE_VIEWPORT,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledMainContainer = styled.div`
  align-items: flex-start;
@@ -5,7 +5,7 @@ import { TimelineCard } from '@/activities/timeline-activities/components/Timeli
 import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import { PageLayoutType } from '~/generated-metadata/graphql';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -8,8 +8,11 @@ import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSide
 import { type CoreObjectNameSingular } from 'twenty-shared/types';
 import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache';
 import { isNonEmptyString } from '@sniptt/guards';
-import { OverflowingTextWithTooltip } from 'twenty-ui/display';
-import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
+import { OverflowingTextWithTooltip } from 'twenty-ui-deprecated/display';
+import {
+  MOBILE_VIEWPORT,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 type EventRowActivityProps = EventRowDynamicComponentProps;

@@ -13,7 +13,7 @@ import { useContext } from 'react';
 import { FIELD_RESTRICTED_ADDITIONAL_PERMISSIONS_REQUIRED } from 'twenty-shared/constants';
 import { CombinedGraphQLErrors } from '@apollo/client/errors';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import {
  formatToHumanReadableDay,
  formatToHumanReadableMonth,
@@ -8,7 +8,7 @@ import { EventCardToggleButton } from '@/activities/timeline-activities/rows/com
 import { type EventRowDynamicComponentProps } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent.types';
 import { EventRowItem } from '@/activities/timeline-activities/rows/components/EventRowItem';
 import { isTimelineActivityWithLinkedRecord } from '@/activities/timeline-activities/types/TimelineActivity';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type EventRowCalendarEventProps = EventRowDynamicComponentProps;

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { HttpResponse, graphql } from 'msw';

 import { EventCardCalendarEvent } from '@/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';

@@ -1,5 +1,8 @@
 import { styled } from '@linaria/react';
-import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  MOBILE_VIEWPORT,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 type EventCardProps = {
  children: React.ReactNode;
@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
-import { IconButton } from 'twenty-ui/input';
-import { IconChevronDown, IconChevronUp } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconButton } from 'twenty-ui-deprecated/input';
+import { IconChevronDown, IconChevronUp } from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type EventCardToggleButtonProps = {
  isOpen: boolean;
@@ -6,7 +6,7 @@ import {
  IconEditCircle,
  IconRestore,
  IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';

 export const EventIconDynamicComponent = ({
  event,
@@ -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';

 type EventRowItemProps = {
  children: ReactNode;
@@ -9,7 +9,7 @@ import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataIte
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
 import { Trans } from '@lingui/react/macro';
 import { FieldMetadataType } from 'twenty-shared/types';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type EventFieldDiffProps = {
  fieldDiff: { before: unknown; after: unknown };
@@ -1,8 +1,8 @@
 import { styled } from '@linaria/react';

 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { Icon123, useIcons } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Icon123, useIcons } from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type EventFieldDiffLabelProps = {
  fieldMetadataItem: FieldMetadataItem;
@@ -5,7 +5,7 @@ import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/Enriche
 import { FieldDisplay } from '@/object-record/record-field/ui/components/FieldDisplay';
 import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/ui/states/contexts/RecordFieldComponentInstanceContext';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type EventFieldDiffValueProps = {
  diffArtificialRecordStoreId: string;
@@ -8,8 +8,12 @@ import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectReco
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  AppTooltip,
+  TooltipDelay,
+  TooltipPosition,
+} from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type EventRelationFieldDiffValuesProps = {
  fieldDiff: { before: unknown; after: unknown };
@@ -3,7 +3,10 @@ import { EventRowItem } from '@/activities/timeline-activities/rows/components/E
 import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated';
 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';

 type EventRowMainObjectProps = EventRowDynamicComponentProps;

@@ -8,7 +8,10 @@ import { EventRowItem } from '@/activities/timeline-activities/rows/components/E
 import { EventFieldDiffContainer } from '@/activities/timeline-activities/rows/main-object/components/EventFieldDiffContainer';
 import { type TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
-import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  MOBILE_VIEWPORT,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 type EventRowMainObjectUpdatedProps = {
  mainObjectMetadataItem: EnrichedObjectMetadataItem;
@@ -2,7 +2,10 @@ import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows
 import { type TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
 import { type Meta, type StoryObj } from '@storybook/react-vite';

-import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
+import {
+  ComponentDecorator,
+  RouterDecorator,
+} from 'twenty-ui-deprecated/testing';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { getTestEnrichedObjectMetadataItemsMock } from '~/testing/utils/getTestEnrichedObjectMetadataItemsMock';
@@ -10,8 +10,8 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { FIELD_RESTRICTED_ADDITIONAL_PERMISSIONS_REQUIRED } from 'twenty-shared/constants';
 import { CombinedGraphQLErrors } from '@apollo/client/errors';
 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 StyledEventCardMessageContainer = styled.div<{ canOpen?: boolean }>`
  cursor: ${({ canOpen }) => (canOpen ? 'pointer' : 'not-allowed')};
@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { Trans } from '@lingui/react/macro';
-import { IconLock } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconLock } from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledEmailBodyNotSharedContainer = styled.div`
  align-items: center;
@@ -1,7 +1,7 @@
 import { EventCardMessageBodyNotShared } from '@/activities/timeline-activities/rows/message/components/EventCardMessageBodyNotShared';
 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';

 const StyledEventCardMessageContainer = styled.div`
  display: flex;
@@ -8,7 +8,7 @@ import { type EventRowDynamicComponentProps } from '@/activities/timeline-activi
 import { EventRowItem } from '@/activities/timeline-activities/rows/components/EventRowItem';
 import { EventCardMessage } from '@/activities/timeline-activities/rows/message/components/EventCardMessage';
 import { isTimelineActivityWithLinkedRecord } from '@/activities/timeline-activities/types/TimelineActivity';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type EventRowMessageProps = EventRowDynamicComponentProps;

@@ -5,7 +5,7 @@ import { within } from 'storybook/test';
 import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
 import { EventCardMessage } from '@/activities/timeline-activities/rows/message/components/EventCardMessage';
 import { FIELD_RESTRICTED_ADDITIONAL_PERMISSIONS_REQUIRED } from 'twenty-shared/constants';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';

@@ -4,7 +4,7 @@ import { TextBubbleMenu } from '@/advanced-text-editor/components/TextBubbleMenu
 import { FORM_FIELD_PLACEHOLDER_STYLES } from '@/object-record/record-field/ui/form-types/constants/FormFieldPlaceholderStyles';
 import { styled } from '@linaria/react';
 import { EditorContent, type Editor } from '@tiptap/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 const StyledEditorContainer = styled.div<{
  readonly?: boolean;
@@ -1,8 +1,8 @@
 import { styled } from '@linaria/react';
 import React from 'react';
-import type { IconComponent } from 'twenty-ui/display';
-import { FloatingIconButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import type { IconComponent } from 'twenty-ui-deprecated/display';
+import { FloatingIconButton } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 type BubbleMenuIconButtonProps = {
  className?: string;
@@ -9,7 +9,7 @@ import { isNonEmptyString } from '@sniptt/guards';
 import { type Editor } from '@tiptap/core';
 import { useId, useState, type FocusEvent, type FormEvent } from 'react';
 import { getSafeUrl, isDefined } from 'twenty-shared/utils';
-import { IconLink, IconPencil } from 'twenty-ui/display';
+import { IconLink, IconPencil } from 'twenty-ui-deprecated/display';

 type EditLinkPopoverProps = {
  defaultValue: string | undefined;
@@ -8,7 +8,7 @@ import {
  IconAlignLeft,
  IconAlignRight,
  IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';

 type ImageBubbleMenuProps = {
  editor: Editor;
@@ -4,7 +4,7 @@ import { StyledBubbleMenuContainer } from '@/advanced-text-editor/components/Tex
 import { type Editor } from '@tiptap/core';
 import { useEditorState } from '@tiptap/react';
 import { BubbleMenu } from '@tiptap/react/menus';
-import { IconExternalLink, IconLinkOff } from 'twenty-ui/display';
+import { IconExternalLink, IconLinkOff } from 'twenty-ui-deprecated/display';
 import { getSafeUrl } from 'twenty-shared/utils';

 type LinkBubbleMenuProps = {
@@ -13,8 +13,8 @@ import {
  IconListNumbers,
  IconStrikethrough,
  IconUnderline,
-} from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';

 export const StyledBubbleMenuContainer = styled.div`
  backdrop-filter: blur(20px);
@@ -7,9 +7,12 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { type Editor } from '@tiptap/react';
 import { useContext, useId } from 'react';
-import { IconPilcrow } from 'twenty-ui/display';
-import { MenuItem } from 'twenty-ui/navigation';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconPilcrow } from 'twenty-ui-deprecated/display';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 const StyledMenuItem = styled.button`
  align-items: center;
@@ -8,8 +8,11 @@ import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { type WorkflowAttachment } from 'twenty-shared/workflow';
-import { IconUpload } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconUpload } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';

 type WorkflowSendEmailAttachmentsProps = {
  files: WorkflowAttachment[];
--- a/Show More
+++ b/Show More