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

## Description

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

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

packages/twenty-front/src/modules/ui/display/components/LinkifiedTextBody.tsx

@@ -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 StyledTextBody = styled(motion.div)`
   color: ${themeCssVariables.font.color.primary};

packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx

@@ -10,8 +10,8 @@ import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotke
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRef } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { Button } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Button } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledDialogOverlayBase = styled.div`
   align-items: center;

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -16,15 +16,18 @@ import {
   IconInfoCircle,
   IconSquareRoundedCheck,
   IconX,
-} from 'twenty-ui/display';
-import { ProgressBar, useProgressAnimation } from 'twenty-ui/feedback';
-import { LightButton, LightIconButton } from 'twenty-ui/input';
-import { UndecoratedLink } from 'twenty-ui/navigation';
+} from 'twenty-ui-deprecated/display';
+import {
+  ProgressBar,
+  useProgressAnimation,
+} from 'twenty-ui-deprecated/feedback';
+import { LightButton, LightIconButton } from 'twenty-ui-deprecated/input';
+import { UndecoratedLink } from 'twenty-ui-deprecated/navigation';
 import {
   MOBILE_VIEWPORT,
   ThemeContext,
   themeCssVariables,
-} from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/theme-constants';
 
 export enum SnackBarVariant {
   Default = 'default',

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBarProvider.tsx

@@ -7,7 +7,10 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { snackBarInternalComponentState } from '@/ui/feedback/snack-bar-manager/states/snackBarInternalComponentState';
 import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
-import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  MOBILE_VIEWPORT,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import { SnackBar } from './SnackBar';
 
 const StyledSnackBarContainer = styled.div`

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/__stories__/SnackBar.stories.tsx

@@ -10,7 +10,7 @@ import {
   CatalogDecorator,
   type CatalogStory,
   ComponentDecorator,
-} from 'twenty-ui/testing';
+} from 'twenty-ui-deprecated/testing';
 
 const meta: Meta<typeof SnackBar> = {
   title: 'UI/Feedback/SnackBarManager/SnackBar',

packages/twenty-front/src/modules/ui/field/display/components/ActorDisplay.tsx

@@ -2,7 +2,11 @@ import { type FieldActorValue } from '@/object-record/record-field/ui/types/Fiel
 
 import { t } from '@lingui/core/macro';
 import { ConnectedAccountProvider } from 'twenty-shared/types';
-import { AvatarOrIcon, Chip, ChipVariant } from 'twenty-ui/components';
+import {
+  AvatarOrIcon,
+  Chip,
+  ChipVariant,
+} from 'twenty-ui-deprecated/components';
 import {
   IconApi,
   IconCalendar,
@@ -17,7 +21,7 @@ import {
   IconUpload,
   IconWebhook,
   type IconComponent,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 
 type ActorDisplayProps = Partial<FieldActorValue> & {
   avatarUrl?: string | null;

packages/twenty-front/src/modules/ui/field/display/components/ArrayDisplay.tsx

@@ -1,7 +1,7 @@
 import { type FieldArrayValue } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
 import { t } from '@lingui/core/macro';
-import { Chip, ChipVariant } from 'twenty-ui/components';
+import { Chip, ChipVariant } from 'twenty-ui-deprecated/components';
 
 type ArrayDisplayProps = {
   value: FieldArrayValue;

packages/twenty-front/src/modules/ui/field/display/components/BooleanDisplay.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { IconCheck, IconX } from 'twenty-ui/display';
+import { IconCheck, IconX } from 'twenty-ui-deprecated/display';
 const iconSizeSm = 14;
 
 const StyledBooleanFieldValue = styled.div`

packages/twenty-front/src/modules/ui/field/display/components/CurrencyDisplay.tsx

@@ -1,8 +1,12 @@
 import { useContext, useId, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { styled } from '@linaria/react';
-import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import {
+  AppTooltip,
+  TooltipDelay,
+  TooltipPosition,
+} from 'twenty-ui-deprecated/display';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 import { isDefined, formatToShortNumber } from 'twenty-shared/utils';
 
 import { useNumberFormat } from '@/localization/hooks/useNumberFormat';

packages/twenty-front/src/modules/ui/field/display/components/DateTimeDisplay.tsx

@@ -9,7 +9,7 @@ import { Temporal } from 'temporal-polyfill';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
 import { EllipsisDisplay } from './EllipsisDisplay';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledTimeZoneSpacer = styled.span`
   min-width: ${themeCssVariables.spacing[1]};

packages/twenty-front/src/modules/ui/field/display/components/EmailDisplay.tsx

@@ -1,7 +1,7 @@
 import { type MouseEvent } from 'react';
 import { EllipsisDisplay } from './EllipsisDisplay';
 import { isDefined } from 'twenty-shared/utils';
-import { ContactLink } from 'twenty-ui/navigation';
+import { ContactLink } from 'twenty-ui-deprecated/navigation';
 
 const validateEmail = (email: string) => {
   // const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

packages/twenty-front/src/modules/ui/field/display/components/EmailsDisplay.tsx

@@ -4,7 +4,7 @@ import { type FieldEmailsValue } from '@/object-record/record-field/ui/types/Fie
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
 import { styled } from '@linaria/react';
 import { isDefined } from 'twenty-shared/utils';
-import { RoundedLink } from 'twenty-ui/navigation';
+import { RoundedLink } from 'twenty-ui-deprecated/navigation';
 
 type EmailsDisplayProps = {
   value?: FieldEmailsValue;

packages/twenty-front/src/modules/ui/field/display/components/FileChip.tsx

@@ -4,7 +4,7 @@ import { t } from '@lingui/core/macro';
 import { FileIcon } from '@/file/components/FileIcon';
 import { type FieldFilesValue } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { getFileCategoryFromExtension } from '@/object-record/record-field/ui/utils/getFileCategoryFromExtension';
-import { Chip, ChipVariant } from 'twenty-ui/components';
+import { Chip, ChipVariant } from 'twenty-ui-deprecated/components';
 
 const MAX_WIDTH = 120;
 

packages/twenty-front/src/modules/ui/field/display/components/GlobalFilePreviewModal.tsx

@@ -9,9 +9,9 @@ import { useLingui } from '@lingui/react/macro';
 import { lazy, Suspense, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 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';
 
 const DocumentViewer = lazy(() =>
   import('@/activities/files/components/DocumentViewer').then((module) => ({

packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx

@@ -1,5 +1,9 @@
 import { isNonEmptyString } from '@sniptt/guards';
-import { LinkType, RoundedLink, SocialLink } from 'twenty-ui/navigation';
+import {
+  LinkType,
+  RoundedLink,
+  SocialLink,
+} from 'twenty-ui-deprecated/navigation';
 import { checkUrlType } from '~/utils/checkUrlType';
 import { getSafeUrl } from 'twenty-shared/utils';
 

packages/twenty-front/src/modules/ui/field/display/components/LinksDisplay.tsx

@@ -8,7 +8,11 @@ import {
   getUrlHostnameOrThrow,
   isDefined,
 } from 'twenty-shared/utils';
-import { LinkType, RoundedLink, SocialLink } from 'twenty-ui/navigation';
+import {
+  LinkType,
+  RoundedLink,
+  SocialLink,
+} from 'twenty-ui-deprecated/navigation';
 import { checkUrlType } from '~/utils/checkUrlType';
 
 type LinksDisplayProps = {

packages/twenty-front/src/modules/ui/field/display/components/MultiSelectDisplay.tsx

@@ -1,8 +1,8 @@
 import { type FieldMultiSelectValue } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { isDefined } from 'twenty-shared/utils';
 import { styled } from '@linaria/react';
-import { Tag } from 'twenty-ui/components';
-import { type SelectOption } from 'twenty-ui/input';
+import { Tag } from 'twenty-ui-deprecated/components';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/ui/field/display/components/PhoneDisplay.tsx

@@ -1,7 +1,7 @@
 import { parsePhoneNumber, type PhoneNumber } from 'libphonenumber-js';
 import { type MouseEvent } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { ContactLink } from 'twenty-ui/navigation';
+import { ContactLink } from 'twenty-ui-deprecated/navigation';
 
 interface PhoneDisplayProps {
   value: PhoneDisplayValueProps;

packages/twenty-front/src/modules/ui/field/display/components/PhonesDisplay.tsx

@@ -7,7 +7,7 @@ import { ExpandableList } from '@/ui/layout/expandable-list/components/Expandabl
 import { styled } from '@linaria/react';
 import { parsePhoneNumber } from 'libphonenumber-js';
 import { isDefined } from 'twenty-shared/utils';
-import { RoundedLink } from 'twenty-ui/navigation';
+import { RoundedLink } from 'twenty-ui-deprecated/navigation';
 import { logError } from '~/utils/logError';
 
 type PhonesDisplayProps = {

packages/twenty-front/src/modules/ui/field/display/components/SelectDisplay.tsx

@@ -1,6 +1,6 @@
-import { type IconComponent } from 'twenty-ui/display';
-import { Tag } from 'twenty-ui/components';
-import { type ThemeColor } from 'twenty-ui/theme';
+import { type IconComponent } from 'twenty-ui-deprecated/display';
+import { Tag } from 'twenty-ui-deprecated/components';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';
 
 type SelectDisplayProps = {
   color: ThemeColor | 'transparent';

packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { isUndefined } from '@sniptt/guards';
-import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { OverflowingTextWithTooltip } from 'twenty-ui-deprecated/display';
 
 type TextDisplayProps = {
   text: string;

packages/twenty-front/src/modules/ui/field/display/components/URLDisplay.tsx

@@ -1,6 +1,10 @@
 import { type MouseEvent } from 'react';
 
-import { LinkType, RoundedLink, SocialLink } from 'twenty-ui/navigation';
+import {
+  LinkType,
+  RoundedLink,
+  SocialLink,
+} from 'twenty-ui-deprecated/navigation';
 import { checkUrlType } from '~/utils/checkUrlType';
 import { getSafeUrl } from 'twenty-shared/utils';
 import { EllipsisDisplay } from './EllipsisDisplay';

packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx

@@ -1,8 +1,11 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { IconArrowUp } from 'twenty-ui/display';
-import { Loader } from 'twenty-ui/feedback';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconArrowUp } from 'twenty-ui-deprecated/display';
+import { Loader } from 'twenty-ui-deprecated/feedback';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/ui/field/display/components/__stories__/ActorDisplay.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 
 import { ActorDisplay } from '@/ui/field/display/components/ActorDisplay';
-import { CatalogDecorator } from 'twenty-ui/testing';
+import { CatalogDecorator } from 'twenty-ui-deprecated/testing';
 
 const meta: Meta = {
   title: 'UI/Display/ActorDisplay',

packages/twenty-front/src/modules/ui/field/display/components/__stories__/LinksDisplay.stories.tsx

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { expect, waitFor, within } from 'storybook/test';
 
 import { LinksDisplay } from '@/ui/field/display/components/LinksDisplay';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 const meta: Meta<typeof LinksDisplay> = {
   title: 'UI/Display/LinksDisplay',

packages/twenty-front/src/modules/ui/field/display/components/__stories__/perf/EllipsisDisplay.perf.stories.tsx

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
 
 const meta: Meta = {

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

@@ -15,7 +15,7 @@ import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDr
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { isDefined } from 'twenty-shared/utils';
-import { MOBILE_VIEWPORT } from 'twenty-ui/theme-constants';
+import { MOBILE_VIEWPORT } from 'twenty-ui-deprecated/theme-constants';
 import { v4 } from 'uuid';
 
 import { t } from '@lingui/core/macro';

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

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 import { useEffect, useState } from 'react';
 
 import { BooleanDisplay } from '@/ui/field/display/components/BooleanDisplay';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledEditableBooleanFieldContainer = styled.div<{ readonly?: boolean }>`
   align-items: center;

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

@@ -8,8 +8,11 @@ import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
 import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
 import { type Currency } from '@/ui/input/components/internal/types/Currency';
 import { IMaskInput } from 'react-imask';
-import { type IconComponent } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { type IconComponent } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import { getSeparatorsForNumberFormat } from '~/utils/format/getSeparatorsForNumberFormat';
 
 export const StyledIMaskInput = styled.div`

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

@@ -9,7 +9,7 @@ import {
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
 import { useStore } from 'jotai';
-import { type Nullable } from 'twenty-ui/utilities';
+import { type Nullable } from 'twenty-ui-deprecated/utilities';
 
 export type DateInputProps = {
   instanceId: string;

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

@@ -12,7 +12,7 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { currentFocusIdSelector } from '@/ui/utilities/focus/states/currentFocusIdSelector';
 import { useStore } from 'jotai';
 import { type Temporal } from 'temporal-polyfill';
-import { type Nullable } from 'twenty-ui/utilities';
+import { type Nullable } from 'twenty-ui-deprecated/utilities';
 
 export type DateTimeInputProps = {
   instanceId: string;

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

@@ -17,7 +17,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { splitFullName } from '~/utils/format/spiltFullName';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 import { StyledTextInput } from './TextInput';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledContainer = styled.div`
   display: flex;

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

@@ -17,8 +17,11 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { type SelectOption } from 'twenty-ui/input';
-import { MenuItem, MenuItemMultiSelectTag } from 'twenty-ui/navigation';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
+import {
+  MenuItem,
+  MenuItemMultiSelectTag,
+} from 'twenty-ui-deprecated/navigation';
 import { normalizeSearchText } from '~/utils/normalizeSearchText';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 

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

@@ -5,8 +5,11 @@ import { useContext, useState } from 'react';
 import { useClearField } from '@/object-record/record-field/ui/hooks/useClearField';
 import { RATING_VALUES } from 'twenty-shared/constants';
 import { type FieldRatingValue } from 'twenty-shared/types';
-import { IconTwentyStarFilled } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconTwentyStarFilled } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledContainer = styled.div`
   align-items: center;

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

@@ -1,6 +1,6 @@
 import { SelectInput as SelectBaseInput } from '@/ui/input/components/SelectInput';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
-import { type SelectOption } from 'twenty-ui/input';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
 
 type SelectInputProps = {
   selectableListComponentInstanceId: string;

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

@@ -6,7 +6,7 @@ import { LightCopyIconButton } from '@/object-record/record-field/ui/components/
 import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
 import { isDefined } from 'twenty-shared/utils';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 export type TextAreaInputProps = {
   instanceId: string;

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

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState, type ChangeEvent } from 'react';
 
 import { LightCopyIconButton } from '@/object-record/record-field/ui/components/LightCopyIconButton';
 import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 export const StyledTextInput = styled.input`
   background-color: transparent;

packages/twenty-front/src/modules/ui/field/input/components/__stories__/MultiSelectInput.stories.tsx

@@ -15,9 +15,9 @@ import {
   IconRocket,
   IconTag,
   IconTarget,
-} from 'twenty-ui/display';
-import { type SelectOption } from 'twenty-ui/input';
-import { ComponentDecorator } from 'twenty-ui/testing';
+} from 'twenty-ui-deprecated/display';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 type RenderProps = {
   values: FieldMultiSelectValue;

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

@@ -15,15 +15,18 @@ import {
   IconApps,
   type IconComponent,
   useIcons,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import {
   IconButton,
   type IconButtonSize,
   type IconButtonVariant,
   LightIconButton,
-} from 'twenty-ui/input';
-import { type ThemeColor } from 'twenty-ui/theme';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/input';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 import { ICON_PICKER_DROPDOWN_CONTENT_WIDTH } from '@/ui/input/components/constants/IconPickerDropdownContentWidth';
 import { ThemeColorPickerMenu } from '@/ui/input/components/ThemeColorPickerMenu';

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

@@ -4,10 +4,18 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import React, { useContext, useState } from 'react';
 import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
-import { IconPhotoUp, IconTrash, IconUpload, IconX } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
+import {
+  IconPhotoUp,
+  IconTrash,
+  IconUpload,
+  IconX,
+} from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 const StyledContainer = styled.div`
   display: flex;
   flex-direction: row;

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

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import React from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledInputErrorHelper = styled.div`
   color: ${themeCssVariables.color.red};

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

@@ -1,4 +1,4 @@
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { styled } from '@linaria/react';
 
 const StyledInputHint = styled.div<{

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

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledLabel = styled.label`
   color: ${themeCssVariables.font.color.light};

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

@@ -10,9 +10,12 @@ import {
   type IconComponent,
   OverflowingTextWithTooltip,
   TintedIconTile,
-} from 'twenty-ui/display';
-import { type ThemeColor } from 'twenty-ui/theme';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledIconChevronDownWrapper = styled.div<{
   disabled?: boolean;

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

@@ -19,10 +19,10 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { isNonEmptyArray, isNonEmptyString } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';
-import { type IconComponent } from 'twenty-ui/display';
-import { type SelectOption } from 'twenty-ui/input';
-import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { type IconComponent } from 'twenty-ui-deprecated/display';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
+import { MenuItem, MenuItemSelect } from 'twenty-ui-deprecated/navigation';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 export type SelectSizeVariant = 'small' | 'default';
 

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

@@ -6,9 +6,12 @@ import {
   IconChevronDown,
   OverflowingTextWithTooltip,
   TintedIconTile,
-} from 'twenty-ui/display';
-import { type SelectOption } from 'twenty-ui/input';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 export type SelectControlTextAccent = 'default' | 'placeholder';
 

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

@@ -12,9 +12,9 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { type TagColor } from 'twenty-ui/components';
-import { type SelectOption } from 'twenty-ui/input';
-import { MenuItemSelectTag } from 'twenty-ui/navigation';
+import { type TagColor } from 'twenty-ui-deprecated/components';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
+import { MenuItemSelectTag } from 'twenty-ui-deprecated/navigation';
 import { normalizeSearchText } from '~/utils/normalizeSearchText';
 
 interface SelectInputProps {

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

@@ -7,7 +7,7 @@ import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { isDefined } from 'twenty-shared/utils';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 type TextAreaVariant = 'default' | 'transparent';
 

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

@@ -14,11 +14,18 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { type IconComponent, IconEye, IconEyeOff } from 'twenty-ui/display';
-import { AutogrowWrapper } from 'twenty-ui/utilities';
+import {
+  type IconComponent,
+  IconEye,
+  IconEyeOff,
+} from 'twenty-ui-deprecated/display';
+import { AutogrowWrapper } from 'twenty-ui-deprecated/utilities';
 import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 const StyledContainer = styled.div<Pick<TextInputComponentProps, 'fullWidth'>>`
   box-sizing: border-box;
   display: inline-flex;

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

@@ -7,8 +7,8 @@ import { useState } from 'react';
 import {
   DEFAULT_COLOR_LABELS,
   MenuItemSelectColor,
-} from 'twenty-ui/navigation';
-import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui/theme';
+} from 'twenty-ui-deprecated/navigation';
+import { type ThemeColor, MAIN_COLOR_NAMES } from 'twenty-ui-deprecated/theme';
 
 type ThemeColorPickerMenuProps = {
   selectedColor: ThemeColor;

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

@@ -8,8 +8,8 @@ import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePush
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { styled } from '@linaria/react';
-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 InputProps = {
   instanceId: string;

packages/twenty-front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx

@@ -9,7 +9,7 @@ import {
   IconPicker,
   type IconPickerProps,
 } from '@/ui/input/components/IconPicker';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 type IconPickerStoryProps = IconPickerProps;
 

packages/twenty-front/src/modules/ui/input/components/__stories__/ImageInput.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { workspaceLogoUrl } from '~/testing/mock-data/users';
 
 import { ImageInput } from '@/ui/input/components/ImageInput';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 const meta: Meta<typeof ImageInput> = {
   title: 'UI/Input/ImageInput/ImageInput',

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

@@ -3,8 +3,8 @@ import { useState } from 'react';
 import { userEvent, within } from 'storybook/test';
 
 import { Select, type SelectProps } from '@/ui/input/components/Select';
-import { IconPlus } from 'twenty-ui/display';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { IconPlus } from 'twenty-ui-deprecated/display';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 type RenderProps = SelectProps<string | number | boolean | null>;
 

packages/twenty-front/src/modules/ui/input/components/__stories__/TextArea.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 import { TextArea, type TextAreaProps } from '@/ui/input/components/TextArea';
 import { expect, userEvent, within } from 'storybook/test';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 type RenderProps = TextAreaProps;
 

packages/twenty-front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx

@@ -5,7 +5,7 @@ import {
   TextInput,
   type TextInputComponentProps,
 } from '@/ui/input/components/TextInput';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 type RenderProps = TextInputComponentProps;
 

packages/twenty-front/src/modules/ui/input/components/__stories__/TitleInput.stories.tsx

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { TitleInput } from '@/ui/input/components/TitleInput';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 const meta: Meta<typeof TitleInput> = {
   title: 'UI/Input/TitleInput',

packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx

@@ -4,8 +4,11 @@ import { useMemo } from 'react';
 import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
 import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
 import { Select } from '@/ui/input/components/Select';
-import { IconCircleOff, type IconComponentProps } from 'twenty-ui/display';
-import { type SelectOption } from 'twenty-ui/input';
+import {
+  IconCircleOff,
+  type IconComponentProps,
+} from 'twenty-ui-deprecated/display';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
 
 export const CountrySelect = ({
   label,

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

@@ -7,9 +7,12 @@ import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
 import { type Currency } from '@/ui/input/components/internal/types/Currency';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useContext } from 'react';
-import { IconChevronDown } from 'twenty-ui/display';
+import { IconChevronDown } from 'twenty-ui-deprecated/display';
 import { CurrencyPickerDropdownSelect } from './CurrencyPickerDropdownSelect';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 const StyledDropdownButtonContainer = styled.div`
   align-items: center;
   border-right: 1px solid ${themeCssVariables.border.color.medium};

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

@@ -8,7 +8,10 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
 import { type Currency } from '@/ui/input/components/internal/types/Currency';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
-import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui/navigation';
+import {
+  MenuItem,
+  MenuItemSelectAvatar,
+} from 'twenty-ui-deprecated/navigation';
 
 export const CurrencyPickerDropdownSelect = ({
   selectedCurrency,

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

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { SELECT_DAY_DROPDOWN_ID } from '@/ui/input/components/internal/date/constants/SelectDayDropdownId';
 import { type DayNameWithIndex } from '@/ui/input/components/internal/date/types/DayNameWithIndex';
 import { Select } from '@/ui/input/components/Select';
-import { type SelectOption } from 'twenty-ui/input';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
 
 export const DaySelect = ({
   label,

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

@@ -24,9 +24,12 @@ import {
   turnJSDateToPlainDate,
   type RelativeDateFilter,
 } from 'twenty-shared/utils';
-import { IconCalendarX } from 'twenty-ui/display';
-import { MenuItemLeftContent } from 'twenty-ui/navigation';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconCalendarX } from 'twenty-ui-deprecated/display';
+import { MenuItemLeftContent } from 'twenty-ui-deprecated/navigation';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =
   'date-picker-month-and-year-dropdown-month-select';

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

@@ -5,14 +5,17 @@ import { Select } from '@/ui/input/components/Select';
 import { DatePickerInput } from '@/ui/input/components/internal/date/components/DatePickerInput';
 import { getMonthSelectOptions } from '@/ui/input/components/internal/date/utils/getMonthSelectOptions';
 import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
-import { IconChevronLeft, IconChevronRight } from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
+import {
+  IconChevronLeft,
+  IconChevronRight,
+} from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { Temporal } from 'temporal-polyfill';
 import { SOURCE_LOCALE } from 'twenty-shared/translations';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =
   'date-picker-month-and-year-dropdown-month-select';

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

@@ -13,7 +13,7 @@ import { getDateMask } from '@/ui/input/components/internal/date/utils/getDateMa
 import { useParseDateInputStringToPlainDate } from '@/ui/input/components/internal/date/hooks/useParseDateInputStringToPlainDate';
 import { useParseJSDateToIMaskDateInputString } from '@/ui/input/components/internal/date/hooks/useParseJSDateToIMaskDateInputString';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledInputContainer = styled.div`
   align-items: center;

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

@@ -16,7 +16,10 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { Temporal } from 'temporal-polyfill';
 import { type Nullable } from 'twenty-shared/types';
 import { isDefined, turnJSDateToPlainDate } from 'twenty-shared/utils';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =
   'date-picker-month-and-year-dropdown-month-select';

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

@@ -20,8 +20,8 @@ import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 
 import 'react-datepicker/dist/react-datepicker.css';
 
-import { IconCalendarX } from 'twenty-ui/display';
-import { MenuItemLeftContent } from 'twenty-ui/navigation';
+import { IconCalendarX } from 'twenty-ui-deprecated/display';
+import { MenuItemLeftContent } from 'twenty-ui-deprecated/navigation';
 
 import { useGetShiftedDateToSystemTimeZone } from '@/ui/input/components/internal/date/hooks/useGetShiftedDateToSystemTimeZone';
 import { useUserFirstDayOfTheWeek } from '@/ui/input/components/internal/date/hooks/useUserFirstDayOfTheWeek';
@@ -34,7 +34,10 @@ export {
 } from '@/ui/input/components/internal/date/components/DatePicker';
 export { DATE_TIME_PICKER_MONTH_YEAR_PANEL_DROPDOWN_ID } from '@/ui/input/components/internal/date/components/DateTimePickerHeader';
 
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledOuterWrapper = styled.div`
   align-items: flex-start;

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

@@ -23,9 +23,9 @@ import {
   IconChevronLeft,
   IconChevronRight,
   IconClock,
-} from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 import {
   MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,

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

@@ -17,7 +17,7 @@ import { useUserTimezone } from '@/ui/input/components/internal/date/hooks/useUs
 import { useEffect, useState } from 'react';
 import { Temporal } from 'temporal-polyfill';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { isDifferentZonedDateTime } from '~/utils/dates/isDifferentZonedDateTime';
 
 const StyledInputContainer = styled.div`

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

@@ -15,7 +15,7 @@ import {
   type RelativeDateFilterDirection,
   type RelativeDateFilterUnit,
 } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledContainer = styled.div<{ noPadding: boolean }>`
   align-items: center;

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

@@ -3,7 +3,7 @@ import { getTimezoneAbbreviationForZonedDateTime } from '@/ui/input/components/i
 import { styled } from '@linaria/react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { type Temporal } from 'temporal-polyfill';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledTimezoneAbbreviation = styled.span<{ hasError?: boolean }>`
   background: transparent;

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

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 import { Temporal } from 'temporal-polyfill';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 const INITIAL_DATE = Temporal.ZonedDateTime.from(
   '2023-01-01T02:00:00+00:00[UTC]',

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

@@ -12,8 +12,11 @@ import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDrop
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import 'react-phone-number-input/style.css';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronDown, IconWorld } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconChevronDown, IconWorld } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 type StyledDropdownButtonProps = {
   isUnfolded: boolean;

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

@@ -9,8 +9,11 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import 'react-phone-number-input/style.css';
-import { MenuItem, MenuItemSelectAvatar } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  MenuItem,
+  MenuItemSelectAvatar,
+} from 'twenty-ui-deprecated/navigation';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledIconContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/ui/input/hooks/__tests__/useIconPicker.test.tsx

@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react';
 import { act } from 'react';
 
 import { useIconPicker } from '@/ui/input/hooks/useIconPicker';
-import { Icon123, IconApps } from 'twenty-ui/display';
+import { Icon123, IconApps } from 'twenty-ui-deprecated/display';
 
 describe('useIconPicker', () => {
   it('should return correct iconPickerState', async () => {

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

@@ -1,7 +1,7 @@
 import { css } from '@linaria/core';
 import React from 'react';
-import { MenuItem } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const hoveredStyle = css`
   background: ${themeCssVariables.background.transparent.light};

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

@@ -3,7 +3,10 @@ import { type CSSWidth } from '@/ui/types/CSSWidth';
 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 StyledDropdownMenuSkeletonContainer = styled.div`
   --horizontal-padding: ${themeCssVariables.spacing[1]};
   --vertical-padding: ${themeCssVariables.spacing[2]};

packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts

@@ -1,5 +1,5 @@
 import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
-import { IconApps, type IconComponent } from 'twenty-ui/display';
+import { IconApps, type IconComponent } from 'twenty-ui-deprecated/display';
 
 type IconPickerState = {
   Icon: IconComponent;

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

@@ -2,7 +2,7 @@ import { Draggable } from '@hello-pangea/dnd';
 import { isFunction } from '@sniptt/guards';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 
 type DraggableItemProps = {
   draggableId: string;

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

@@ -3,9 +3,9 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
-import { IconBell } from 'twenty-ui/display';
-import { MenuItemDraggable } from 'twenty-ui/navigation';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { IconBell } from 'twenty-ui-deprecated/display';
+import { MenuItemDraggable } from 'twenty-ui-deprecated/navigation';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 const meta: Meta<typeof DraggableItem> = {
   title: 'UI/Layout/DraggableList/DraggableItem',

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

@@ -2,9 +2,9 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { action } from 'storybook/actions';
-import { IconBell } from 'twenty-ui/display';
-import { MenuItemDraggable } from 'twenty-ui/navigation';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { IconBell } from 'twenty-ui-deprecated/display';
+import { MenuItemDraggable } from 'twenty-ui-deprecated/navigation';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 const meta: Meta<typeof DraggableList> = {
   title: 'UI/Layout/DraggableList/DraggableList',

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -28,7 +28,7 @@ import { type MouseEvent, type ReactNode, useCallback } from 'react';
 import { flushSync } from 'react-dom';
 import { type Keys } from 'react-hotkeys-hook';
 import { isDefined } from 'twenty-shared/utils';
-import { useIsMobile } from 'twenty-ui/utilities';
+import { useIsMobile } from 'twenty-ui-deprecated/utilities';
 
 type Width = `${string}px` | `${number}%` | 'auto' | number;
 const StyledDropdownFallbackAnchor = styled.div`

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx

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

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx

@@ -4,9 +4,12 @@ import {
   type Avatar,
   type AvatarProps,
   type IconComponent,
-} from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledNonClickableStartIcon = styled.div`
   align-items: center;

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInnerSelect.tsx

@@ -5,10 +5,13 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { IconChevronDown } from 'twenty-ui/display';
-import { type SelectOption } from 'twenty-ui/input';
-import { MenuItemSelect } from 'twenty-ui/navigation';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconChevronDown } from 'twenty-ui-deprecated/display';
+import { type SelectOption } from 'twenty-ui-deprecated/input';
+import { MenuItemSelect } from 'twenty-ui-deprecated/navigation';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledDropdownMenuInnerSelectDropdownButton = styled.div`
   align-items: center;

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx

@@ -9,7 +9,7 @@ import 'react-phone-number-input/style.css';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/ui/meta-types/input/hooks/useRegisterInputEvents';
 import { isDefined } from 'twenty-shared/utils';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 
 const StyledInput = styled.input<{

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -1,6 +1,6 @@
 import { DROPDOWN_MENU_ITEMS_CONTAINER_MAX_HEIGHT } from '@/ui/layout/dropdown/constants/DropdownMenuItemsContainerMaxHeight';
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledExternalContainer = styled.div<{
   maxHeight?: number;

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx

@@ -3,7 +3,7 @@ import { useLingui } from '@lingui/react/macro';
 import { useInputFocusWithoutScrollOnMount } from '@/ui/input/hooks/useInputFocusWithoutScrollOnMount';
 import { styled } from '@linaria/react';
 import { forwardRef, type InputHTMLAttributes } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledDropdownMenuSearchInputContainer = styled.div`
   --vertical-padding: ${themeCssVariables.spacing[2]};

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSectionLabel.tsx

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

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSeparator.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledDropdownMenuSeparator = styled.div`
   background-color: ${themeCssVariables.border.color.light};

packages/twenty-front/src/modules/ui/layout/dropdown/components/OptionsDropdownMenu.tsx

@@ -8,8 +8,8 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useLingui } from '@lingui/react/macro';
 import { type ReactNode, useId } from 'react';
-import { Button } from 'twenty-ui/input';
-import { getOsControlSymbol } from 'twenty-ui/utilities';
+import { Button } from 'twenty-ui-deprecated/input';
+import { getOsControlSymbol } from 'twenty-ui-deprecated/utilities';
 
 type OptionsDropdownMenuProps = {
   dropdownId?: string;

packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx

@@ -1,4 +1,4 @@
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { styled } from '@linaria/react';
 
 type StyledDropdownButtonProps = {

packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownMenuSubheader.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
-import { Label } from 'twenty-ui/display';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Label } from 'twenty-ui-deprecated/display';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledDropdownMenuSubheaderContainer = styled.div`
   background-color: ${themeCssVariables.background.transparent.lighter};

packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx

@@ -1,4 +1,4 @@
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { styled } from '@linaria/react';
 
 type StyledDropdownButtonProps = {

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

@@ -27,10 +27,10 @@ import {
   // TEMP_DISABLED_TEST: Commented out unused import
   // Avatar,
   IconChevronLeft,
-} from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
-import { MenuItem } from 'twenty-ui/navigation';
-import { ComponentDecorator } from 'twenty-ui/testing';
+} from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 const meta: Meta<typeof Dropdown> = {
   title: 'UI/Layout/Dropdown/Dropdown',

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

@@ -10,9 +10,12 @@ import {
   IconChevronLeft,
   IconChevronRight,
   IconPlus,
-} from 'twenty-ui/display';
-import { MenuItem } from 'twenty-ui/navigation';
-import { AVATAR_URL_MOCK, ComponentDecorator } from 'twenty-ui/testing';
+} from 'twenty-ui-deprecated/display';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';
+import {
+  AVATAR_URL_MOCK,
+  ComponentDecorator,
+} from 'twenty-ui-deprecated/testing';
 
 const meta: Meta<typeof DropdownMenuHeader> = {
   title: 'UI/Layout/Dropdown/DropdownMenuHeader',

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

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { DropdownMenuInput } from '@/ui/layout/dropdown/components/DropdownMenuInput';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 const meta: Meta<typeof DropdownMenuInput> = {
   title: 'UI/Layout/Dropdown/DropdownMenuInput',

packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx

@@ -10,10 +10,10 @@ import {
 import { ExpandedListDropdown } from '@/ui/layout/expandable-list/components/ExpandedListDropdown';
 import { isFirstOverflowingChildElement } from '@/ui/layout/expandable-list/utils/isFirstOverflowingChildElement';
 import { isDefined } from 'twenty-shared/utils';
-import { ChipSize } from 'twenty-ui/components';
-import { OverflowingTextWithTooltip } from 'twenty-ui/display';
-import { AnimatedContainer } from 'twenty-ui/utilities';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ChipSize } from 'twenty-ui-deprecated/components';
+import { OverflowingTextWithTooltip } from 'twenty-ui-deprecated/display';
+import { AnimatedContainer } from 'twenty-ui-deprecated/utilities';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedFieldDisplay.tsx

@@ -4,7 +4,7 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
 import { styled } from '@linaria/react';
 import { flip, FloatingPortal, offset, useFloating } from '@floating-ui/react';
 import { type ReactNode } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 type ExpandedFieldDisplayProps = {
   anchorElement?: HTMLElement;

packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx

@@ -5,7 +5,7 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
 import { styled } from '@linaria/react';
 import { FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
 import { type ReactNode } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 type ExpandedListDropdownProps = {
   anchorElement?: HTMLElement;

packages/twenty-front/src/modules/ui/layout/expandable-list/components/__stories__/ExpandableList.stories.tsx

@@ -2,9 +2,9 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { expect, userEvent, within } from 'storybook/test';
 
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
-import { Tag } from 'twenty-ui/components';
-import { ComponentDecorator } from 'twenty-ui/testing';
-import { MAIN_COLOR_NAMES } from 'twenty-ui/theme';
+import { Tag } from 'twenty-ui-deprecated/components';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
+import { MAIN_COLOR_NAMES } from 'twenty-ui-deprecated/theme';
 
 const meta: Meta<typeof ExpandableList> = {
   title: 'UI/Layout/ExpandableList/ExpandableList',