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/settings/admin-panel/ai/components/ModelsDevProviderLogo.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { type IconComponentProps } from 'twenty-ui/display';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { type IconComponentProps } from 'twenty-ui-deprecated/display';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 
 type ModelsDevProviderLogoProps = {
   logoUrl: string;

packages/twenty-front/src/modules/settings/admin-panel/ai/components/SettingsAdminAI.tsx

@@ -4,10 +4,15 @@ import { useMutation, useQuery } from '@apollo/client/react';
 import { t } from '@lingui/core/macro';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { Tag } from 'twenty-ui/components';
-import { H2Title, IconBolt, IconLock, IconRobot } from 'twenty-ui/display';
-import { Card, Section } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Tag } from 'twenty-ui-deprecated/components';
+import {
+  H2Title,
+  IconBolt,
+  IconLock,
+  IconRobot,
+} from 'twenty-ui-deprecated/display';
+import { Card, Section } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { billingState } from '@/client-config/states/billingState';

packages/twenty-front/src/modules/settings/admin-panel/ai/components/SettingsAdminAiProviderListCard.tsx

@@ -4,7 +4,7 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { IconPlug, Status } from 'twenty-ui/display';
+import { IconPlug, Status } from 'twenty-ui-deprecated/display';
 
 import { type AiProviderItem } from '@/settings/admin-panel/ai/types/AiProviderItem';
 import { getProviderIcon } from '@/settings/admin-panel/ai/utils/getProviderIcon';

packages/twenty-front/src/modules/settings/admin-panel/ai/constants/ModelIconConfig.ts

@@ -6,7 +6,7 @@ import {
   IconProviderOpenai,
   IconRobot,
   type IconComponent,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 
 import { ModelFamily } from '~/generated-admin/graphql';
 

packages/twenty-front/src/modules/settings/admin-panel/ai/constants/ProviderConfig.ts

@@ -6,7 +6,7 @@ import {
   IconProviderOpenai,
   IconRobot,
   type IconComponent,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 
 export const PROVIDER_ICON_CONFIG: Record<string, { Icon: IconComponent }> = {
   openai: { Icon: IconProviderOpenai },

packages/twenty-front/src/modules/settings/admin-panel/ai/utils/getModelsDevLogoIcon.tsx

@@ -1,4 +1,7 @@
-import { type IconComponent, type IconComponentProps } from 'twenty-ui/display';
+import {
+  type IconComponent,
+  type IconComponentProps,
+} from 'twenty-ui-deprecated/display';
 
 import { ModelsDevProviderLogo } from '@/settings/admin-panel/ai/components/ModelsDevProviderLogo';
 

packages/twenty-front/src/modules/settings/admin-panel/ai/utils/getProviderIcon.ts

@@ -1,4 +1,4 @@
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui-deprecated/display';
 
 import { PROVIDER_ICON_CONFIG } from '@/settings/admin-panel/ai/constants/ProviderConfig';
 import { isKnownProviderId } from '@/settings/admin-panel/ai/utils/isKnownProviderId';

packages/twenty-front/src/modules/settings/admin-panel/apps/components/SettingsAdminApps.tsx

@@ -14,12 +14,19 @@ import { t } from '@lingui/core/macro';
 import { type ReactNode, useContext, useState } from 'react';
 import { assertUnreachable, getSettingsPath } from 'twenty-shared/utils';
 import { SettingsPath } from 'twenty-shared/types';
-import { H2Title, IconChevronRight, IconPinned } from 'twenty-ui/display';
-import { SearchInput } from 'twenty-ui/input';
-import { Section } from 'twenty-ui/layout';
-import { MenuItemToggle } from 'twenty-ui/navigation';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
-import { Tag } from 'twenty-ui/components';
+import {
+  H2Title,
+  IconChevronRight,
+  IconPinned,
+} from 'twenty-ui-deprecated/display';
+import { SearchInput } from 'twenty-ui-deprecated/input';
+import { Section } from 'twenty-ui-deprecated/layout';
+import { MenuItemToggle } from 'twenty-ui-deprecated/navigation';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
+import { Tag } from 'twenty-ui-deprecated/components';
 import {
   type ApplicationRegistrationFragmentFragment,
   ApplicationRegistrationSourceType,

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminChatThreadMessageList.tsx

@@ -4,8 +4,8 @@ import { styled } from '@linaria/react';
 import { LazyMarkdownRenderer } from '@/ai/components/LazyMarkdownRenderer';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { Card } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Card } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import {
   AgentMessageRole,
   type GetAdminChatThreadMessagesQuery,

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx

@@ -13,7 +13,7 @@ import {
   IconSettings2,
   IconSparkles,
   IconVariable,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 
 export const SettingsAdminContent = () => {
   const currentUser = useAtomStateValue(currentUserState);

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx

@@ -23,9 +23,12 @@ import {
   H2Title,
   IconChevronRight,
   OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
-import { Section } from 'twenty-ui/layout';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { Section } from 'twenty-ui-deprecated/layout';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import {
   AdminPanelRecentUsersDocument,
   AdminPanelTopWorkspacesDocument,

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminVersionContainer.tsx

@@ -2,7 +2,7 @@ import { SettingsTableCard } from '@/settings/components/SettingsTableCard';
 import { useApolloAdminClient } from '@/settings/admin-panel/apollo/hooks/useApolloAdminClient';
 import { SettingsAdminVersionDisplay } from '@/settings/admin-panel/components/SettingsAdminVersionDisplay';
 import { t } from '@lingui/core/macro';
-import { IconCircleDot, IconStatusChange } from 'twenty-ui/display';
+import { IconCircleDot, IconStatusChange } from 'twenty-ui-deprecated/display';
 import { useQuery } from '@apollo/client/react';
 import { GetVersionInfoDocument } from '~/generated-admin/graphql';
 

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminVersionDisplay.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 type SettingsAdminVersionDisplayProps = {
   version: string | undefined | null;

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceBillingContent.tsx

@@ -2,7 +2,7 @@ import { useQuery } from '@apollo/client/react';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { Tag } from 'twenty-ui/components';
+import { Tag } from 'twenty-ui-deprecated/components';
 import {
   H2Title,
   IconBox,
@@ -16,10 +16,10 @@ import {
   IconStatusChange,
   IconTag,
   IconUsers,
-} from 'twenty-ui/display';
-import { Section } from 'twenty-ui/layout';
-import { type ThemeColor } from 'twenty-ui/theme';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { Section } from 'twenty-ui-deprecated/layout';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 import { useApolloAdminClient } from '@/settings/admin-panel/apollo/hooks/useApolloAdminClient';
 import { GET_WORKSPACE_BILLING_ADMIN_PANEL } from '@/settings/admin-panel/graphql/queries/getWorkspaceBillingAdminPanel';

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx

@@ -17,7 +17,7 @@ import {
   isDefined,
 } from 'twenty-shared/utils';
 import { type GetUpgradeStatusQuery } from '~/generated-admin/graphql';
-import { AvatarOrIcon, LinkChip } from 'twenty-ui/components';
+import { AvatarOrIcon, LinkChip } from 'twenty-ui-deprecated/components';
 import {
   H2Title,
   IconCalendar,
@@ -28,9 +28,9 @@ import {
   IconUser,
   OverflowingTextWithTooltip,
   Status,
-} from 'twenty-ui/display';
-import { Section } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+} from 'twenty-ui-deprecated/display';
+import { Section } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { formatDateTimeString } from '~/utils/string/formatDateTimeString';

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableDatabaseInput.tsx

@@ -9,9 +9,9 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { type ConfigVariableValue } from 'twenty-shared/types';
 import { CustomError } from 'twenty-shared/utils';
-import { CodeEditor } from 'twenty-ui/input';
-import { MenuItemMultiSelect } from 'twenty-ui/navigation';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { CodeEditor } from 'twenty-ui-deprecated/input';
+import { MenuItemMultiSelect } from 'twenty-ui-deprecated/navigation';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { ConfigVariableType } from '~/generated-admin/graphql';
 import { type ConfigVariableOptions } from '@/settings/admin-panel/config-variables/types/ConfigVariableOptions';
 

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableFilterDropdown.tsx

@@ -4,8 +4,8 @@ import { type ConfigVariableSourceFilter } from '@/settings/admin-panel/config-v
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
-import { IconSettings } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
+import { IconSettings } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
 import { ConfigVariableOptionsDropdownContent } from './ConfigVariableOptionsDropdownContent';
 
 type ConfigVariableFilterDropdownProps = {

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableHelpText.tsx

@@ -3,7 +3,7 @@ import { useLingui } from '@lingui/react/macro';
 
 import { isConfigVariablesInDbEnabledState } from '@/client-config/states/isConfigVariablesInDbEnabledState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { ConfigSource, type ConfigVariable } from '~/generated-admin/graphql';
 
 const StyledHelpText = styled.div<{ color?: string }>`

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableOptionsDropdownContent.tsx

@@ -10,10 +10,14 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { t } from '@lingui/core/macro';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { IconChevronLeft, IconEye, IconEyeOff } from 'twenty-ui/display';
-import { MenuItem, MenuItemSelectTag } from 'twenty-ui/navigation';
+import {
+  IconChevronLeft,
+  IconEye,
+  IconEyeOff,
+} from 'twenty-ui-deprecated/display';
+import { MenuItem, MenuItemSelectTag } from 'twenty-ui-deprecated/navigation';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 type ConfigVariableOptionsDropdownContentProps = {
   selectedCategory: ConfigVariableFilterCategory | null;
   onSelectCategory: (category: ConfigVariableFilterCategory | null) => void;

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableSearchInput.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { SearchInput } from 'twenty-ui/input';
+import { SearchInput } from 'twenty-ui-deprecated/input';
 
 type ConfigVariableSearchInputProps = {
   value: string;

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariables.tsx

@@ -10,8 +10,8 @@ import { showHiddenGroupVariablesState } from '@/settings/admin-panel/config-var
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useMemo, useState } from 'react';
-import { H2Title } from 'twenty-ui/display';
-import { Section } from 'twenty-ui/layout';
+import { H2Title } from 'twenty-ui-deprecated/display';
+import { Section } from 'twenty-ui-deprecated/layout';
 import { useQuery } from '@apollo/client/react';
 import {
   ConfigSource,

packages/twenty-front/src/modules/settings/admin-panel/config-variables/constants/ConfigVariableSourceOptions.ts

@@ -1,5 +1,5 @@
 import { type ConfigVariableSourceFilter } from '@/settings/admin-panel/config-variables/types/ConfigVariableSourceFilter';
-import { type ThemeColor } from 'twenty-ui/theme';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';
 
 type ConfigVariableSourceOption = {
   value: ConfigVariableSourceFilter;

packages/twenty-front/src/modules/settings/admin-panel/config-variables/utils/useSourceContent.ts

@@ -1,7 +1,7 @@
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
 import { CustomError } from 'twenty-shared/utils';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 
 import { ConfigSource } from '~/generated-admin/graphql';
 

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminConnectedAccountHealthStatus.tsx

@@ -3,7 +3,7 @@ import { SettingsAdminIndicatorHealthContext } from '@/settings/admin-panel/heal
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useContext } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { AdminPanelHealthServiceStatus } from '~/generated-admin/graphql';
 
 const StyledErrorMessage = styled.div`

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx

@@ -1,9 +1,9 @@
 import { SettingsTableCard } from '@/settings/components/SettingsTableCard';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
-import { H2Title } from 'twenty-ui/display';
-import { Section } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { H2Title } from 'twenty-ui-deprecated/display';
+import { Section } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledSettingsTableCardContainer = styled.div`
   > * {

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatus.tsx

@@ -7,8 +7,8 @@ import { SettingsAdminSigningKeysTable } from '@/settings/admin-panel/signing-ke
 import { SettingsSectionSkeletonLoader } from '@/settings/components/SettingsSectionSkeletonLoader';
 import { useQuery } from '@apollo/client/react';
 import { t } from '@lingui/core/macro';
-import { H2Title } from 'twenty-ui/display';
-import { Section } from 'twenty-ui/layout';
+import { H2Title } from 'twenty-ui-deprecated/display';
+import { Section } from 'twenty-ui-deprecated/layout';
 import {
   GetInstanceAndAllWorkspacesUpgradeStatusDocument,
   GetSystemHealthStatusDocument,

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatusListCard.tsx

@@ -8,9 +8,9 @@ import {
   IconServer2,
   IconTool,
   IconUserCircle,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import { useContext } from 'react';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext } from 'twenty-ui-deprecated/theme-constants';
 import {
   HealthIndicatorId,
   type SystemHealthService,

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatusRightContainer.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { Status } from 'twenty-ui/display';
+import { Status } from 'twenty-ui-deprecated/display';
 import { AdminPanelHealthServiceStatus } from '~/generated-admin/graphql';
 
 export const SettingsAdminHealthStatusRightContainer = ({

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminJobDetailsExpandable.tsx

@@ -1,8 +1,8 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { JsonTree } from 'twenty-ui/json-visualizer';
-import { AnimatedExpandableContainer } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { JsonTree } from 'twenty-ui-deprecated/json-visualizer';
+import { AnimatedExpandableContainer } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { type QueueJob } from '~/generated-admin/graphql';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminJobStateBadge.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
-import { Tag, type TagColor } from 'twenty-ui/components';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Tag, type TagColor } from 'twenty-ui-deprecated/components';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { JobState } from '~/generated-admin/graphql';
 
 type SettingsAdminJobStateBadgeProps = {

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminJsonDataIndicatorHealthStatus.tsx

@@ -2,9 +2,9 @@ import { SettingsAdminIndicatorHealthContext } from '@/settings/admin-panel/heal
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { JsonTree } from 'twenty-ui/json-visualizer';
-import { Section } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { JsonTree } from 'twenty-ui-deprecated/json-visualizer';
+import { Section } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { AdminPanelHealthServiceStatus } from '~/generated-admin/graphql';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminQueueJobRowDropdownMenu.tsx

@@ -3,9 +3,13 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { t } from '@lingui/core/macro';
-import { IconDotsVertical, IconRefresh, IconTrash } from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
-import { MenuItem } from 'twenty-ui/navigation';
+import {
+  IconDotsVertical,
+  IconRefresh,
+  IconTrash,
+} from 'twenty-ui-deprecated/display';
+import { LightIconButton } from 'twenty-ui-deprecated/input';
+import { MenuItem } from 'twenty-ui-deprecated/navigation';
 import { JobState } from '~/generated-admin/graphql';
 
 type SettingsAdminQueueJobRowDropdownMenuProps = {

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminQueueJobsTable.tsx

@@ -17,9 +17,9 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { styled } from '@linaria/react';
 import { plural, t } from '@lingui/core/macro';
 import { useState } from 'react';
-import { IconRefresh, IconTrash } from 'twenty-ui/display';
-import { Button, Checkbox } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { IconRefresh, IconTrash } from 'twenty-ui-deprecated/display';
+import { Button, Checkbox } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import { useQuery } from '@apollo/client/react';
 import {
   JobState,

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminUpgradeStatusListCard.tsx

@@ -8,7 +8,7 @@ import {
   IconProgressCheck,
   IconStatusChange,
   type IconComponent,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import { type GetInstanceAndAllWorkspacesUpgradeStatusQuery } from '~/generated-admin/graphql';
 
 type InstanceAndAllWorkspacesUpgradeStatus =

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminUpgradeStatusRightContainer.tsx

@@ -3,7 +3,7 @@ import { getUpgradeHealthStatusBadge } from '@/settings/admin-panel/utils/getUpg
 import { getWorkspacesUpgradeHealth } from '@/settings/admin-panel/utils/getWorkspacesUpgradeHealth';
 import { getWorkspacesUpgradeHealthText } from '@/settings/admin-panel/utils/getWorkspacesUpgradeHealthText';
 import { t } from '@lingui/core/macro';
-import { Status } from 'twenty-ui/display';
+import { Status } from 'twenty-ui-deprecated/display';
 
 export const SettingsAdminUpgradeStatusRightContainer = ({
   item,

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerHealthStatus.tsx

@@ -4,7 +4,7 @@ import { t } from '@lingui/core/macro';
 import { useContext } from 'react';
 import { AdminPanelHealthServiceStatus } from '~/generated-admin/graphql';
 import { SettingsAdminIndicatorHealthContext } from '@/settings/admin-panel/health-status/contexts/SettingsAdminIndicatorHealthContext';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledErrorMessage = styled.div`
   color: ${themeCssVariables.color.red};

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsGraph.tsx

@@ -7,7 +7,10 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { ResponsiveLine } from '@nivo/line';
 import { useContext } from 'react';
-import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  ThemeContext,
+  themeCssVariables,
+} from 'twenty-ui-deprecated/theme-constants';
 import { useQuery } from '@apollo/client/react';
 import {
   QueueMetricsTimeRange,

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import type { LineSeries, Point } from '@nivo/line';
 import { type ReactElement } from 'react';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledTooltipContainer = styled.div`
   backdrop-filter: ${themeCssVariables.blur.medium};

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerQueueMetricsSection.tsx

@@ -6,10 +6,10 @@ import { t } from '@lingui/core/macro';
 import { lazy, Suspense, useState } from 'react';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { H2Title, IconList } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
-import { Section } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { H2Title, IconList } from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
+import { Section } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import {
   type AdminPanelWorkerQueueHealth,
   QueueMetricsTimeRange,

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkspacesByHealthAccordion.tsx

@@ -4,9 +4,12 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { IconChevronDown, IconChevronRight } from 'twenty-ui/display';
-import { AnimatedExpandableContainer, Card } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  IconChevronDown,
+  IconChevronRight,
+} from 'twenty-ui-deprecated/display';
+import { AnimatedExpandableContainer, Card } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 const StyledAccordionHeaderButton = styled.button`
   align-items: center;

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkspacesStatusSummaryCard.tsx

@@ -12,7 +12,7 @@ import {
   IconStatusChange,
   IconX,
   Status,
-} from 'twenty-ui/display';
+} from 'twenty-ui-deprecated/display';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
 

packages/twenty-front/src/modules/settings/admin-panel/health-status/maintenance-mode/components/SettingsAdminMaintenanceMode.tsx

@@ -4,9 +4,14 @@ import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { H2Title, IconLink, IconTool, Status } from 'twenty-ui/display';
-import { Card, CardContent, Section } from 'twenty-ui/layout';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import {
+  H2Title,
+  IconLink,
+  IconTool,
+  Status,
+} from 'twenty-ui-deprecated/display';
+import { Card, CardContent, Section } from 'twenty-ui-deprecated/layout';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 
 import { maintenanceModeState } from '@/client-config/states/maintenanceModeState';
 import { useApolloAdminClient } from '@/settings/admin-panel/apollo/hooks/useApolloAdminClient';

packages/twenty-front/src/modules/settings/admin-panel/signing-keys/components/SettingsAdminSigningKeysTable.tsx

@@ -12,10 +12,13 @@ import { useQuery } from '@apollo/client/react';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { Tag, type TagColor } from 'twenty-ui/components';
-import { IconCopy, OverflowingTextWithTooltip } from 'twenty-ui/display';
-import { Button } from 'twenty-ui/input';
-import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { Tag, type TagColor } from 'twenty-ui-deprecated/components';
+import {
+  IconCopy,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui-deprecated/display';
+import { Button } from 'twenty-ui-deprecated/input';
+import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
 import {
   GetSigningKeysDocument,
   type SigningKeyDto,

packages/twenty-front/src/modules/settings/admin-panel/utils/getUpgradeHealthStatusBadge.ts

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { type ThemeColor } from 'twenty-ui/theme';
+import { type ThemeColor } from 'twenty-ui-deprecated/theme';
 import { UpgradeHealth } from '~/generated-admin/graphql';
 
 type UpgradeHealthStatusBadge = {