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/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',

packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenContainer.tsx

@@ -5,8 +5,8 @@ import {
   type BreadcrumbProps,
 } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { styled } from '@linaria/react';
-import { useIsMobile } from 'twenty-ui/utilities';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { useIsMobile } from 'twenty-ui-deprecated/utilities';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 type FullScreenContainerProps = {
   children: JSX.Element | JSX.Element[];

packages/twenty-front/src/modules/ui/layout/fullscreen/components/FullScreenModal.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { styled } from '@linaria/react';
 import { forwardRef } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledFullScreenOverlay = styled.div`
   background: ${themeCssVariables.background.noisy};

packages/twenty-front/src/modules/ui/layout/fullscreen/components/__stories__/FullScreenContainer.stories.tsx

@@ -4,7 +4,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import {
   ComponentDecorator,
   ComponentWithRouterDecorator,
-} from 'twenty-ui/testing';
+} from 'twenty-ui-deprecated/testing';
 
 const meta: Meta<typeof FullScreenContainer> = {
   title: 'UI/Layout/FullScreenContainer',

packages/twenty-front/src/modules/ui/layout/hero/components/HeroPlayButton.tsx

@@ -1,7 +1,10 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { IconPlayerPlay } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconPlayerPlay } from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 type HeroPlayButtonProps = {
   onClick?: () => void;

packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx

@@ -8,15 +8,15 @@ import { ModalStatefulWrapper } from '@/ui/layout/modal/components/ModalStateful
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
-import { H1Title, H1TitleFontColor } from 'twenty-ui/display';
-import { Button, type ButtonAccent } from 'twenty-ui/input';
+import { H1Title, H1TitleFontColor } from 'twenty-ui-deprecated/display';
+import { Button, type ButtonAccent } from 'twenty-ui-deprecated/input';
 import {
   Section,
   SectionAlignment,
   SectionFontColor,
   type ModalOverlay,
-} from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 export type ConfirmationModalProps = {
   modalInstanceId: string;

packages/twenty-front/src/modules/ui/layout/modal/components/ModalStatefulWrapper.tsx

@@ -12,7 +12,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useRef } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { Modal } from 'twenty-ui/layout';
+import { Modal } from 'twenty-ui-deprecated/layout';
 
 export const ModalStatefulWrapper = ({
   modalInstanceId,

packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/ConfirmationModal.stories.tsx

@@ -10,7 +10,7 @@ import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpe
 import { focusStackState } from '@/ui/utilities/focus/states/focusStackState';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import { RootDecorator } from '~/testing/decorators/RootDecorator';
 import { sleep } from '~/utils/sleep';
 

packages/twenty-front/src/modules/ui/layout/modal/components/__stories__/Modal.stories.tsx

@@ -10,8 +10,12 @@ import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpe
 import { focusStackState } from '@/ui/utilities/focus/states/focusStackState';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
-import { ModalContent, ModalFooter, ModalHeader } from 'twenty-ui/layout';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import {
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from 'twenty-ui-deprecated/layout';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 import { RootDecorator } from '~/testing/decorators/RootDecorator';
 import { sleep } from '~/utils/sleep';
 

packages/twenty-front/src/modules/ui/layout/modal/types/ModalStatefulWrapperProps.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { type ModalProps } from 'twenty-ui/layout';
+import { type ModalProps } from 'twenty-ui-deprecated/layout';
 
 export type ModalStatefulWrapperProps = Pick<
   ModalProps,

packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.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';
 
 // oxlint-disable-next-line twenty/styled-components-prefixed-with-styled

packages/twenty-front/src/modules/ui/layout/page/components/BlankLayout.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { Outlet } from 'react-router-dom';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledLayout = styled.div`
   background: ${themeCssVariables.background.noisy};

packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx

@@ -23,7 +23,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { styled } from '@linaria/react';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 import { Outlet } from 'react-router-dom';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 const StyledLayout = styled.div`
   background: ${themeCssVariables.background.noisy};
   display: flex;

packages/twenty-front/src/modules/ui/layout/page/components/PageBody.tsx

@@ -2,7 +2,10 @@ import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
 
 import { PagePanel } from './PagePanel';
-import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  MOBILE_VIEWPORT,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 type PageBodyProps = {
   children: ReactNode;

packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx

@@ -14,13 +14,13 @@ import {
   type IconComponent,
   IconX,
   OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
+} from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';
 import {
   MOBILE_VIEWPORT,
   ThemeContext,
   themeCssVariables,
-} from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledTopBarContainer = styled.div<{ isMobile: boolean }>`
   align-items: center;

packages/twenty-front/src/modules/ui/layout/page/components/PagePanel.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import React from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledPanel = styled.div`
   background: ${themeCssVariables.background.primary};

packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx

@@ -3,7 +3,7 @@ import { type CSSProperties, type ReactNode } from 'react';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledOuterContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelEdge.tsx

@@ -4,7 +4,7 @@ import { RESIZE_EDGE_WIDTH_PX } from '@/ui/layout/resizable-panel/constants/Resi
 import { useResizablePanel } from '@/ui/layout/resizable-panel/hooks/useResizablePanel';
 import { type ResizablePanelConstraints } from '@/ui/layout/resizable-panel/types/ResizablePanelConstraints';
 import { type ResizablePanelSide } from '@/ui/layout/resizable-panel/types/ResizablePanelSide';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 type StyledEdgeProps = {
   isActive: boolean;

packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx

@@ -8,7 +8,10 @@ import { lazy, Suspense, useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
 import { isDefined } from 'twenty-shared/utils';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const ActivityRichTextEditor = lazy(() =>
   import('@/activities/components/ActivityRichTextEditor').then((module) => ({

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -9,9 +9,12 @@ import {
   Avatar,
   type AvatarType,
   type IconComponent,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import { v4 as uuidV4 } from 'uuid';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import {

packages/twenty-front/src/modules/ui/layout/side-panel/components/SidePanelFooter.tsx

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

packages/twenty-front/src/modules/ui/layout/side-panel/types/SidePanelFooterCommandMenuItem.ts

@@ -1,4 +1,4 @@
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui-deprecated/display';
 
 export type SidePanelFooterCommandMenuItem = {
   id: string;

packages/twenty-front/src/modules/ui/layout/tab-list/components/TabAvatar.tsx

@@ -1,8 +1,8 @@
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { Avatar } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { Avatar } from 'twenty-ui-deprecated/display';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 
 export const TabAvatar = ({ tab }: { tab: SingleTabProps }) => {
   const { theme } = useContext(ThemeContext);

packages/twenty-front/src/modules/ui/layout/tab-list/components/TabList.tsx

@@ -12,8 +12,8 @@ import { styled } from '@linaria/react';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
-import { TabButton } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { TabButton } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { TabListDropdown } from './TabListDropdown';
 import { TabListFromUrlOptionalEffect } from './TabListFromUrlOptionalEffect';
 

packages/twenty-front/src/modules/ui/layout/tab-list/components/TabListDropdown.tsx

@@ -4,7 +4,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { TabAvatar } from '@/ui/layout/tab-list/components/TabAvatar';
 import { TabMoreButton } from '@/ui/layout/tab-list/components/TabMoreButton';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
-import { MenuItemSelectAvatar } from 'twenty-ui/navigation';
+import { MenuItemSelectAvatar } from 'twenty-ui-deprecated/navigation';
 
 type TabListDropdownProps = {
   dropdownId: string;

packages/twenty-front/src/modules/ui/layout/tab-list/components/TabListHiddenMeasurements.tsx

@@ -4,8 +4,8 @@ import { TAB_LIST_GAP } from '@/ui/layout/tab-list/constants/TabListGap';
 import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
 import { NodeDimension } from '@/ui/utilities/dimensions/components/NodeDimension';
 import { styled } from '@linaria/react';
-import { IconPlus } from 'twenty-ui/display';
-import { TabButton } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui-deprecated/display';
+import { TabButton } from 'twenty-ui-deprecated/input';
 
 import { type TabListDimensions } from '@/ui/layout/tab-list/types/TabListDimension';
 import { TabMoreButton } from './TabMoreButton';

packages/twenty-front/src/modules/ui/layout/tab-list/components/TabMoreButton.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { IconChevronDown } from 'twenty-ui/display';
-import { TabButton } from 'twenty-ui/input';
+import { IconChevronDown } from 'twenty-ui-deprecated/display';
+import { TabButton } from 'twenty-ui-deprecated/input';
 
 import { TAB_LIST_HEIGHT } from '@/ui/layout/tab-list/constants/TabListHeight';
 

packages/twenty-front/src/modules/ui/layout/tab-list/components/__stories__/Tablist.stories.tsx

@@ -9,8 +9,8 @@ import {
   IconMail,
   IconPhone,
   IconUser,
-} from 'twenty-ui/display';
-import { ComponentWithRouterDecorator } from 'twenty-ui/testing';
+} from 'twenty-ui-deprecated/display';
+import { ComponentWithRouterDecorator } from 'twenty-ui-deprecated/testing';
 
 const tabs = [
   { id: 'general', title: 'General', logo: 'https://picsum.photos/200' },
@@ -35,7 +35,7 @@ const tabs = [
   { id: 'reports', title: 'Reports', Icon: IconCheckbox },
 ];
 
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledInteractiveContainer = styled.div`
   border: 1px solid ${themeCssVariables.border.color.strong};

packages/twenty-front/src/modules/ui/layout/tab-list/constants/TabListHeight.ts

@@ -1,3 +1,3 @@
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 export const TAB_LIST_HEIGHT = themeCssVariables.spacing[10];

packages/twenty-front/src/modules/ui/layout/tab-list/types/SingleTabProps.ts

@@ -1,4 +1,4 @@
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui-deprecated/display';
 
 export type SingleTabProps<T extends string = string> = {
   title: string;

packages/twenty-front/src/modules/ui/layout/table/components/SortableTableHeader.tsx

@@ -8,7 +8,7 @@ import {
   IconArrowDown,
   IconArrowUp,
   type IconComponent,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 
 export const SortableTableHeader = ({
   tableId,

packages/twenty-front/src/modules/ui/layout/table/components/TableBody.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 StyledTableBody = styled.div`
   display: flex;

packages/twenty-front/src/modules/ui/layout/table/components/TableCell.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';
 
 type TableCellProps = {
   align?: 'left' | 'center' | 'right';

packages/twenty-front/src/modules/ui/layout/table/components/TableHeader.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 StyledTableHeader = styled.div<{
   align?: 'left' | 'center' | 'right';

packages/twenty-front/src/modules/ui/layout/table/components/TableHeaderText.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 StyledTableHeaderText = styled.div`
   padding-bottom: ${themeCssVariables.spacing['0.5']};

packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx

@@ -1,6 +1,9 @@
 import { styled } from '@linaria/react';
 import { Link } from 'react-router-dom';
-import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  MOBILE_VIEWPORT,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 const StyledTableRow = styled.div<{
   isSelected?: boolean;

packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx

@@ -1,8 +1,15 @@
 import { styled } from '@linaria/react';
 import { type ReactNode, useContext, useState } from 'react';
 import { TableBody } from './TableBody';
-import { IconChevronDown, IconChevronUp, Label } from 'twenty-ui/display';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  IconChevronDown,
+  IconChevronUp,
+  Label,
+} from 'twenty-ui-deprecated/display';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 
 type TableSectionProps = {
   children: ReactNode;

packages/twenty-front/src/modules/ui/layout/table/components/TableSubRow.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 

packages/twenty-front/src/modules/ui/layout/table/components/__stories__/Table.stories.tsx

@@ -5,7 +5,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { TableSection } from '@/ui/layout/table/components/TableSection';
-import { ComponentDecorator } from 'twenty-ui/testing';
+import { ComponentDecorator } from 'twenty-ui-deprecated/testing';
 
 const meta: Meta<typeof Table> = {
   title: 'UI/Layout/Table/Table',

packages/twenty-front/src/modules/ui/layout/table/types/TableFieldMetadata.ts

@@ -1,5 +1,5 @@
 import { type MessageDescriptor } from '@lingui/core';
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui-deprecated/display';
 
 export type TableFieldMetadata<ItemType> = {
   fieldLabel: MessageDescriptor;

packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 type TopBarProps = {
   className?: string;