Remove twenty-ui-deprecated and migrate frontend to twenty-ui (#21596)

Migrates `twenty-front`, `twenty-sdk`, and `twenty-front-component-renderer` from `twenty-ui-deprecated` to `twenty-ui` (mechanical import swap — the packages have API parity) and deletes the deprecated package along with its workspace/CI/config wiring. Also adds `@linaria/react`/`@linaria/core` as direct deps of `twenty-front` (it used them transitively via the deprecated package). Note: move the required status check from `ci-ui-status-check` to `ci-new-ui-status-check`. Argos: the Storybook box-model/button-reset baseline shift (the bulk of the visual diffs) is isolated in #21665 — Storybook now loads twenty-ui's global `reset.scss`, which the production app already ships. Once #21665 merges and this branch is rebased, the remaining Argos diffs are component-level visual-parity items only.
2026-06-17 11:41:11 +02:00
parent 079040f1c0
commit 9c9c34fccf
2267 changed files with 3289 additions and 43134 deletions
@@ -29,7 +29,6 @@ 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
@@ -97,7 +96,6 @@ 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
@@ -1,106 +0,0 @@
-name: CI UI
-
-on:
-  pull_request:
-  merge_group:
-  push:
-    branches: [main]
-
-permissions:
-  contents: read
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}${{ github.ref == 'refs/heads/main' && format('-{0}', github.sha) || '' }}
-  cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
-
-jobs:
-  changed-files-check:
-    if: github.event_name == 'pull_request'
-    uses: ./.github/workflows/changed-files.yaml
-    with:
-      files: |
-        package.json
-        yarn.lock
-        packages/twenty-ui-deprecated/**
-        packages/twenty-shared/**
-  ui-task:
-    needs: changed-files-check
-    if: needs.changed-files-check.outputs.any_changed == 'true'
-    timeout-minutes: 30
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        task: [lint, typecheck, test]
-    steps:
-      - name: Fetch custom Github Actions and base branch history
-        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
-        with:
-          fetch-depth: 10
-      - name: Install dependencies
-        uses: ./.github/actions/yarn-install
-      - name: Run ${{ matrix.task }}
-        run: npx nx ${{ matrix.task }} twenty-ui-deprecated
-  ui-sb-build:
-    needs: changed-files-check
-    if: >-
-      always() &&
-      (github.event_name == 'push' ||
-      needs.changed-files-check.outputs.any_changed == 'true')
-    timeout-minutes: 30
-    runs-on: ubuntu-latest
-    steps:
-      - name: Fetch custom Github Actions and base branch history
-        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
-        with:
-          fetch-depth: 10
-      - name: Install dependencies
-        uses: ./.github/actions/yarn-install
-      - name: Build storybook
-        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-deprecated/storybook-static
-          retention-days: 1
-  ui-sb-test:
-    timeout-minutes: 30
-    runs-on: ubuntu-latest
-    needs: ui-sb-build
-    if: always() && needs.ui-sb-build.result == 'success'
-    steps:
-      - name: Fetch custom Github Actions and base branch history
-        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
-        with:
-          fetch-depth: 10
-      - name: Install dependencies
-        uses: ./.github/actions/yarn-install
-      - name: Build dependencies
-        run: npx nx build twenty-shared
-      - name: Download storybook build
-        uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4.3.0
-        with:
-          name: storybook-twenty-ui
-          path: packages/twenty-ui-deprecated/storybook-static
-      - name: Install Playwright
-        run: |
-          cd packages/twenty-ui-deprecated
-          npx playwright install
-      - name: Run storybook tests
-        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-deprecated/screenshots
-          retention-days: 1
-  ci-ui-status-check:
-    if: always() && !cancelled()
-    timeout-minutes: 5
-    runs-on: ubuntu-latest
-    needs: [changed-files-check, ui-task, ui-sb-build, ui-sb-test]
-    steps:
-      - name: Fail job if any needs failed
-        if: contains(needs.*.result, 'failure')
-        run: exit 1
@@ -10,7 +10,7 @@ name: Visual Regression Dispatch

 on:
  workflow_run:
-    workflows: ['CI UI', 'CI New UI', 'CI Front']
+    workflows: ['CI New UI', 'CI Front']
    types: [completed]

 permissions:
@@ -39,11 +39,10 @@ jobs:
          script: |
            const name = context.payload.workflow_run.name;
            const projectByWorkflow = {
-              'CI UI': 'twenty-ui',
              'CI New UI': 'twenty-new-ui',
              'CI Front': 'twenty-front',
            };
-            const project = projectByWorkflow[name] ?? 'twenty-ui';
+            const project = projectByWorkflow[name] ?? 'twenty-front';
            const artifactName = `argos-screenshots-${project}`;
            core.setOutput('workflow_name', name);
            core.setOutput('project', project);
@@ -187,89 +186,3 @@ jobs:
          fi

          gh workflow run post-visual-regression-comment.yaml --repo twentyhq/ci-privileged --ref main "${ARGS[@]}"
-
-  # ── Dispatch: cross-comparison baseline (CI UI on main → twenty-ui-vs-new-ui) ──
-  dispatch-comparison-baseline:
-    needs: resolve-context
-    if: >-
-      needs.resolve-context.outputs.workflow_name == 'CI UI' &&
-      needs.resolve-context.outputs.has_artifact == 'true' &&
-      github.event.workflow_run.event == 'push' &&
-      github.event.workflow_run.head_branch == 'main'
-    runs-on: ubuntu-latest
-    timeout-minutes: 5
-    steps:
-      - name: Mint ci-privileged dispatch token
-        id: app-token
-        uses: actions/create-github-app-token@bcd2ba49218906704ab6c1aa796996da409d3eb1 # v3.2.0
-        with:
-          client-id: ${{ vars.TWENTY_WORKFLOW_DISPATCHER_CLIENT_ID }}
-          private-key: ${{ secrets.TWENTY_WORKFLOW_DISPATCHER_PRIVATE_KEY }}
-          owner: twentyhq
-          repositories: ci-privileged
-          permission-actions: write
-
-      - name: Dispatch to ci-privileged (comparison baseline)
-        env:
-          GH_TOKEN: ${{ steps.app-token.outputs.token }}
-          WORKFLOW_RUN_ID: ${{ github.event.workflow_run.id }}
-          REPOSITORY: ${{ github.repository }}
-          BRANCH: ${{ github.event.workflow_run.head_branch }}
-          COMMIT: ${{ github.event.workflow_run.head_sha }}
-          ARTIFACT_NAME: ${{ needs.resolve-context.outputs.artifact_name }}
-        run: |
-          gh workflow run post-visual-regression-comment.yaml --repo twentyhq/ci-privileged --ref main \
-            -f project="twenty-ui-vs-new-ui" \
-            -f artifact_name="$ARTIFACT_NAME" \
-            -f run_id="$WORKFLOW_RUN_ID" \
-            -f repo="$REPOSITORY" \
-            -f branch="$BRANCH" \
-            -f commit="$COMMIT"
-
-  # ── Dispatch: cross-comparison PR (CI New UI on PRs → twenty-ui-vs-new-ui) ──
-  dispatch-comparison-pr:
-    needs: resolve-context
-    if: >-
-      needs.resolve-context.outputs.workflow_name == 'CI New UI' &&
-      needs.resolve-context.outputs.has_artifact == 'true' &&
-      needs.resolve-context.outputs.is_pr == 'true' &&
-      github.event.workflow_run.event == 'pull_request'
-    runs-on: ubuntu-latest
-    timeout-minutes: 5
-    steps:
-      - name: Mint ci-privileged dispatch token
-        id: app-token
-        uses: actions/create-github-app-token@bcd2ba49218906704ab6c1aa796996da409d3eb1 # v3.2.0
-        with:
-          client-id: ${{ vars.TWENTY_WORKFLOW_DISPATCHER_CLIENT_ID }}
-          private-key: ${{ secrets.TWENTY_WORKFLOW_DISPATCHER_PRIVATE_KEY }}
-          owner: twentyhq
-          repositories: ci-privileged
-          permission-actions: write
-
-      - name: Dispatch to ci-privileged (comparison PR)
-        env:
-          GH_TOKEN: ${{ steps.app-token.outputs.token }}
-          WORKFLOW_RUN_ID: ${{ github.event.workflow_run.id }}
-          REPOSITORY: ${{ github.repository }}
-          BRANCH: ${{ github.event.workflow_run.head_branch }}
-          COMMIT: ${{ github.event.workflow_run.head_sha }}
-          PR_NUMBER: ${{ needs.resolve-context.outputs.pr_number }}
-          REFERENCE_COMMIT: ${{ needs.resolve-context.outputs.merge_base_sha }}
-          ARTIFACT_NAME: ${{ needs.resolve-context.outputs.artifact_name }}
-        run: |
-          ARGS=(
-            -f project="twenty-ui-vs-new-ui"
-            -f artifact_name="$ARTIFACT_NAME"
-            -f run_id="$WORKFLOW_RUN_ID"
-            -f repo="$REPOSITORY"
-            -f branch="$BRANCH"
-            -f commit="$COMMIT"
-            -f pr_number="$PR_NUMBER"
-          )
-
-          if [ -n "$REFERENCE_COMMIT" ]; then
-            ARGS+=(-f reference_commit="$REFERENCE_COMMIT")
-          fi
-
-          gh workflow run post-visual-regression-comment.yaml --repo twentyhq/ci-privileged --ref main "${ARGS[@]}"
@@ -71,7 +71,6 @@
      "packages/twenty-server",
      "packages/twenty-emails",
      "packages/twenty-ui",
-      "packages/twenty-ui-deprecated",
      "packages/twenty-utils",
      "packages/twenty-zapier",
      "packages/twenty-website",
@@ -11,14 +11,13 @@ 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-ui-deprecated 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-shared twenty-sdk twenty-client-sdk && yarn cache clean && npx nx reset


 FROM node:24.16.0-alpine3.23@sha256:2bdb65ed1dab192432bc31c95f94155ca5ad7fc1392fb7eb7526ab682fa5bf14 AS server-deps
@@ -65,7 +64,6 @@ 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-deprecated/theme-constants';
+import { ThemeProvider } from 'twenty-ui/theme-constants';

 const preview: Preview = {
  tags: ['autodocs'],
@@ -49,7 +49,7 @@
    "tsx": "^4.7.0",
    "twenty-sdk": "workspace:*",
    "twenty-shared": "workspace:*",
-    "twenty-ui-deprecated": "workspace:*",
+    "twenty-ui": "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-deprecated/src/**/index.ts",
-        "{workspaceRoot}/packages/twenty-ui-deprecated/src/**/*.tsx"
+        "{workspaceRoot}/packages/twenty-ui/src/**/index.ts",
+        "{workspaceRoot}/packages/twenty-ui/src/**/*.tsx"
      ],
      "outputs": [
        "{projectRoot}/src/host/generated/*",
@@ -58,7 +58,7 @@
        },
        {
          "target": "build:individual",
-          "projects": "twenty-ui-deprecated"
+          "projects": "twenty-ui"
        },
        {
          "target": "build:individual",
@@ -22,7 +22,7 @@ const rootNodeModules = path.resolve(dirname, '../../../../node_modules');

 const twentyUiIndividualIndex = path.resolve(
  dirname,
-  '../../../twenty-ui-deprecated/dist/individual/individual-entry.js',
+  '../../../twenty-ui/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-deprecated/theme-constants';
+import { ThemeProvider } from 'twenty-ui/theme-constants';
 import { FrontComponentWorkerEffect } from '../../remote/components/FrontComponentWorkerEffect';
 import { componentRegistry } from '../generated/host-component-registry';

@@ -19,11 +19,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-deprecated/style.css';
-import 'twenty-ui-deprecated/theme-light.css';
-import 'twenty-ui-deprecated/theme-dark.css';
 import 'twenty-ui/style.css';
-import { ThemeProvider } from 'twenty-ui-deprecated/theme-constants';
+import 'twenty-ui/theme-light.css';
+import 'twenty-ui/theme-dark.css';
+import { ThemeProvider } from 'twenty-ui/theme-constants';
 // oxlint-disable-next-line no-restricted-imports
 import { messages as enMessages } from '../src/locales/generated/en';

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

  transformIgnorePatterns: [
-    '/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)/.*)',
+    '/node_modules/(?!(twenty-ui|apollo-upload-client|extract-files|is-plain-obj)/.*)',
+    '../../node_modules/(?!(twenty-ui|apollo-upload-client|extract-files|is-plain-obj)/.*)',
    '../../twenty-ui/',
-    '../../twenty-ui-deprecated/',
  ],
  transform: {
    '^.+\\.(ts|js|tsx|jsx|mjs)$': [
@@ -44,6 +44,8 @@
    "@graphiql/react": "^0.37.6",
    "@hello-pangea/dnd": "^18.0.1",
    "@hookform/resolvers": "^5.2.2",
+    "@linaria/core": "^7.0.0",
+    "@linaria/react": "^7.0.1",
    "@lingui/core": "^5.9.5",
    "@lingui/detect-locale": "^5.9.5",
    "@lingui/react": "^5.9.5",
@@ -141,7 +143,6 @@
    "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-deprecated/display';
+import { IconCopy, IconExclamationCircle } from 'twenty-ui/display';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
+import { ThemeContext } from 'twenty-ui/theme-constants';
 export const useCopyToClipboard = () => {
  const { theme } = useContext(ThemeContext);
  const { enqueueSuccessSnackBar, enqueueErrorSnackBar } = useSnackBar();
@@ -4,12 +4,9 @@ import { App } from '@/app/components/App';
 import { migrateTokenPairCookieToLocalStorage } from '@/auth/utils/migrateTokenPairCookieToLocalStorage';
 import { hydrateMetadataStore } from '@/metadata-store/storage/metadataStoreStorage';
 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';

 // TODO: REMOVE this after 2026-12-12 — temporary migration of tokenPair from the
@@ -7,10 +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,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledAnimatedContainer = styled(motion.div)`
  box-sizing: border-box;
@@ -3,7 +3,7 @@ import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
+import { ThemeContext } from 'twenty-ui/theme-constants';

 const StyledSkeletonContainer = styled.div`
  align-items: flex-start;
@@ -3,7 +3,7 @@ import { PageCardHeader } from '@/ui/layout/page/components/PageCardHeader';
 import { PageCardLayout } from '@/ui/layout/page/components/PageCardLayout';
 import { type ReactNode, useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
+import { ThemeContext } from 'twenty-ui/theme-constants';

 type PageContentSkeletonLoaderProps = {
  secondaryBar?: ReactNode;
@@ -2,10 +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,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledSidePanelContainer = styled.div`
  display: flex;
@@ -3,11 +3,8 @@ 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-deprecated/theme-constants';
-import { ModalBackdrop } from 'twenty-ui-deprecated/layout';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
+import { ModalBackdrop } from 'twenty-ui/layout';
 import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
 import { PageContentSkeletonLoader } from '~/loading/components/PageContentSkeletonLoader';

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

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

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

 type CalendarEventDetailsProps = {
@@ -1,11 +1,8 @@
 import { styled } from '@linaria/react';
 import { Trans } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { IconLock } from 'twenty-ui-deprecated/display';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { IconLock } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/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-deprecated/display';
+import { Avatar, AvatarGroup } from 'twenty-ui/display';
 import { type TimelineCalendarEventParticipant } from '~/generated/graphql';

 type CalendarEventParticipantsAvatarGroupProps = {
@@ -6,15 +6,8 @@ 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-deprecated/display';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledInlineCellBaseContainer = styled.div`
  align-items: center;
@@ -15,11 +15,8 @@ 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-deprecated/display';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { IconArrowRight } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/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-deprecated/display';
+import { H3Title } from 'twenty-ui/display';
 import {
  AnimatedPlaceholder,
  AnimatedPlaceholderEmptyContainer,
@@ -24,8 +24,8 @@ import {
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
  Section,
-} from 'twenty-ui-deprecated/layout';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+} from 'twenty-ui/layout';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/layout';
+import { Card } from 'twenty-ui/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-deprecated/testing';
+import { ComponentDecorator } from 'twenty-ui/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-deprecated/layout';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { Card } from 'twenty-ui/layout';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/layout';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { CardContent } from 'twenty-ui/layout';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/display';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { Avatar } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

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

 const StyledSkeletonContainer = styled.div`
  align-content: flex-start;
@@ -12,7 +12,7 @@ import { Select } from '@/ui/input/components/Select';
 import { t } from '@lingui/core/macro';
 import { MessageChannelType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { type SelectOption } from 'twenty-ui-deprecated/input';
+import { type SelectOption } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

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

 export const ComposeEmailButton = () => {
  const { openComposer, loading } = useComposeEmailForTargetRecord();
@@ -3,11 +3,8 @@ 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-deprecated/display';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { IconUpload } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

 import { useUploadEmailAttachment } from '@/activities/emails/hooks/useUploadEmailAttachment';
 import { AttachmentChip } from '@/file/components/AttachmentChip';
@@ -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-deprecated/input';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { type SelectOption } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 const StyledFieldsContainer = styled.div`
  display: flex;
@@ -4,8 +4,8 @@ import {
  AnimatedPlaceholderEmptyContainer,
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
-} from 'twenty-ui-deprecated/layout';
-import { Loader } from 'twenty-ui-deprecated/feedback';
+} from 'twenty-ui/layout';
+import { Loader } from 'twenty-ui/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-deprecated/display';
-import { Button } from 'twenty-ui-deprecated/input';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { IconArrowBackUp, IconUserCircle } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
-import { AnimatedEaseInOut } from 'twenty-ui-deprecated/utilities';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { AnimatedEaseInOut } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/display';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/display';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { AppTooltip, TooltipPosition } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import {
  beautifyPastDateRelativeToNow,
@@ -1,15 +1,8 @@
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
-import {
-  AppTooltip,
-  IconLock,
-  TooltipDelay,
-} from 'twenty-ui-deprecated/display';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { AppTooltip, IconLock, TooltipDelay } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { MessageChannelVisibility } from '~/generated/graphql';

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

 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { Avatar } from 'twenty-ui-deprecated/display';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { Avatar } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/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-deprecated/display';
-import { Section } from 'twenty-ui-deprecated/layout';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { H1Title, H1TitleFontColor } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/display';
-import { Button } from 'twenty-ui-deprecated/input';
+import { IconMail } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 import {
  AnimatedPlaceholder,
  AnimatedPlaceholderEmptyContainer,
@@ -9,7 +9,7 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui-deprecated/layout';
+} from 'twenty-ui/layout';

 export const EmptyInboxPlaceholder = () => {
  const { t } = useLingui();
@@ -9,9 +9,9 @@ import {
  IconDownload,
  IconPencil,
  IconTrash,
-} from 'twenty-ui-deprecated/display';
-import { LightIconButton } from 'twenty-ui-deprecated/input';
-import { MenuItem } from 'twenty-ui-deprecated/navigation';
+} from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import { MenuItem } from 'twenty-ui/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-deprecated/layout';
+import { ModalContent, ModalHeader } from 'twenty-ui/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-deprecated/display';
-import { IconButton } from 'twenty-ui-deprecated/input';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { IconDownload, IconX } from 'twenty-ui/display';
+import { IconButton } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { PermissionFlagType } from '~/generated-metadata/graphql';
 import { AttachmentRow } from './AttachmentRow';

@@ -17,15 +17,9 @@ 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-deprecated/display';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
-import { isNavigationModifierPressed } from 'twenty-ui-deprecated/utilities';
+import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { isNavigationModifierPressed } from 'twenty-ui/utilities';
 import { PermissionFlagType } from '~/generated-metadata/graphql';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
 import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension';
@@ -11,12 +11,9 @@ 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-deprecated/display';
-import { Button } from 'twenty-ui-deprecated/input';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { IconDownload } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension';

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

 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { IconUpload } from 'twenty-ui-deprecated/display';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { IconUpload } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/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-deprecated/display';
-import { Button } from 'twenty-ui-deprecated/input';
+import { IconPlus } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 import {
  AnimatedPlaceholder,
  AnimatedPlaceholderEmptyContainer,
@@ -21,7 +21,7 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui-deprecated/layout';
+} from 'twenty-ui/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-deprecated/display';
+import { IconArrowUpRight, IconPencil } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/display';
-import { Button } from 'twenty-ui-deprecated/input';
+import { IconPlus } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 import {
  AnimatedPlaceholder,
  AnimatedPlaceholderEmptyContainer,
@@ -18,7 +18,7 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui-deprecated/layout';
+} from 'twenty-ui/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-deprecated/display';
-import { Button } from 'twenty-ui-deprecated/input';
+import { IconPlus } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/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-deprecated/display';
-import { Button } from 'twenty-ui-deprecated/input';
+import { IconPlus } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
 import {
  AnimatedPlaceholder,
  AnimatedPlaceholderEmptyContainer,
@@ -21,7 +21,7 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui-deprecated/layout';
+} from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { TaskRow } from './TaskRow';

 type TaskListProps = {
@@ -14,15 +14,9 @@ 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-deprecated/display';
-import { Checkbox, CheckboxShape } from 'twenty-ui-deprecated/input';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { Checkbox, CheckboxShape } from 'twenty-ui/input';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/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-deprecated/testing';
+import { ComponentDecorator } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type EventsGroupProps = {
  group: EventGroup;
@@ -14,11 +14,8 @@ import {
  AnimatedPlaceholderEmptyTextContainer,
  AnimatedPlaceholderEmptyTitle,
  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui-deprecated/layout';
-import {
-  MOBILE_VIEWPORT,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+} from 'twenty-ui/layout';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/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-deprecated/testing';
+import { ComponentDecorator } from 'twenty-ui/testing';
 import { PageLayoutType } from '~/generated-metadata/graphql';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -8,11 +8,8 @@ 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-deprecated/display';
-import {
-  MOBILE_VIEWPORT,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/testing';
+import { ComponentDecorator } from 'twenty-ui/testing';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';

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

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

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

 export const EventIconDynamicComponent = ({
  event,
@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';

-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/display';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { Icon123, useIcons } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type EventFieldDiffValueProps = {
  diffArtificialRecordStoreId: string;
@@ -8,12 +8,8 @@ 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-deprecated/display';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/theme-constants';

 type EventRelationFieldDiffValuesProps = {
  fieldDiff: { before: unknown; after: unknown };
@@ -3,10 +3,7 @@ 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-deprecated/theme-constants';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';

 type EventRowMainObjectProps = EventRowDynamicComponentProps;

@@ -8,10 +8,7 @@ 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-deprecated/theme-constants';
+import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';

 type EventRowMainObjectUpdatedProps = {
  mainObjectMetadataItem: EnrichedObjectMetadataItem;
@@ -2,10 +2,7 @@ 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-deprecated/testing';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/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-deprecated/display';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/display';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import { IconLock } from 'twenty-ui/display';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/testing';
+import { ComponentDecorator } from 'twenty-ui/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-deprecated/theme-constants';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/display';
-import { FloatingIconButton } from 'twenty-ui-deprecated/input';
-import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
+import type { IconComponent } from 'twenty-ui/display';
+import { FloatingIconButton } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/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-deprecated/display';
+import { IconLink, IconPencil } from 'twenty-ui/display';

 type EditLinkPopoverProps = {
  defaultValue: string | undefined;
@@ -8,7 +8,7 @@ import {
  IconAlignLeft,
  IconAlignRight,
  IconTrash,
-} from 'twenty-ui-deprecated/display';
+} from 'twenty-ui/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-deprecated/display';
+import { IconExternalLink, IconLinkOff } from 'twenty-ui/display';
 import { getSafeUrl } from 'twenty-shared/utils';

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

 export const StyledBubbleMenuContainer = styled.div`
  backdrop-filter: blur(20px);
@@ -7,12 +7,9 @@ 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-deprecated/display';
-import { MenuItem } from 'twenty-ui-deprecated/navigation';
-import {
-  ThemeContext,
-  themeCssVariables,
-} from 'twenty-ui-deprecated/theme-constants';
+import { IconPilcrow } from 'twenty-ui/display';
+import { MenuItem } from 'twenty-ui/navigation';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

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

 type WorkflowSendEmailAttachmentsProps = {
  files: WorkflowEmailFiles;
@@ -3,10 +3,7 @@ import { useAdvancedTextEditor } from '@/advanced-text-editor/hooks/useAdvancedT
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { expect, fn, userEvent, waitFor } from 'storybook/test';
 import { isDefined } from 'twenty-shared/utils';
-import {
-  ComponentDecorator,
-  RouterDecorator,
-} from 'twenty-ui-deprecated/testing';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
--- a/Show More
+++ b/Show More