[REFACTOR] Twenty UI multi barrel (#11301)

# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx

@@ -1,17 +1,17 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import {
-  Button,
-  IconArrowUpRight,
-  IconBolt,
-  IconPlus,
-  Pill,
-  Status,
-} from 'twenty-ui';
 
 import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
 import { Link } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
+import { Button } from 'twenty-ui/input';
+import {
+  IconArrowUpRight,
+  IconBolt,
+  IconPlus,
+  Status,
+} from 'twenty-ui/display';
+import { Pill } from 'twenty-ui/components';
 
 interface SettingsIntegrationComponentProps {
   integration: SettingsIntegration;

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx

@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
-import { H2Title, Section } from 'twenty-ui';
 
 import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
 import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
+import { H2Title } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
 
 interface SettingsIntegrationGroupProps {
   integrationGroup: SettingsIntegrationCategory;

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx

@@ -1,9 +1,8 @@
 import styled from '@emotion/styled';
 
-import { Card, CardContent } from 'twenty-ui';
-
 import PreviewBackgroundImage from '../assets/preview-background.svg';
 import SyncImage from '../assets/sync.svg?react';
+import { Card, CardContent } from 'twenty-ui/layout';
 
 type SettingsIntegrationPreviewProps = {
   integrationLogoUrl: string;

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSchemaUpdate.tsx

@@ -1,8 +1,9 @@
 import { FetchResult } from '@apollo/client';
 import styled from '@emotion/styled';
-import { Button, IconReload } from 'twenty-ui';
 
 import { SyncRemoteTableSchemaChangesMutation } from '~/generated-metadata/graphql';
+import { Button } from 'twenty-ui/input';
+import { IconReload } from 'twenty-ui/display';
 
 const StyledText = styled.h3`
   color: ${({ theme }) => theme.font.color.tertiary};

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationRemoteTableSyncStatusToggle.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { Toggle } from 'twenty-ui';
 
 import { RemoteTableStatus } from '~/generated-metadata/graphql';
+import { Toggle } from 'twenty-ui/input';
 
 export const SettingsIntegrationRemoteTableSyncStatusToggle = ({
   tableName,

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionShowContainer.tsx

@@ -5,9 +5,9 @@ import { useDatabaseConnection } from '@/settings/integrations/database-connecti
 import { SettingsPath } from '@/types/SettingsPath';
 import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { Section } from '@react-email/components';
-import { H2Title } from 'twenty-ui';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { H2Title } from 'twenty-ui/display';
 
 export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
   const navigate = useNavigateSettings();

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx

@@ -3,14 +3,9 @@ import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/inte
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import styled from '@emotion/styled';
-import {
-  IconDotsVertical,
-  IconPencil,
-  IconTrash,
-  LightIconButton,
-  MenuItem,
-  UndecoratedLink,
-} from 'twenty-ui';
+import { IconDotsVertical, IconPencil, IconTrash } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import { MenuItem, UndecoratedLink } from 'twenty-ui/navigation';
 
 type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
   databaseLogoUrl: string;

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus.tsx

@@ -1,7 +1,7 @@
 import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
-import { Status } from 'twenty-ui';
 import { RemoteTableStatus } from '~/generated-metadata/graphql';
 import { isDefined } from 'twenty-shared/utils';
+import { Status } from 'twenty-ui/display';
 
 type SettingsIntegrationDatabaseConnectionSyncStatusProps = {
   connectionId: string;

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionsListCard.tsx

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { IconChevronRight, LightIconButton } from 'twenty-ui';
 
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
@@ -7,6 +6,8 @@ import { SettingsIntegration } from '@/settings/integrations/types/SettingsInteg
 import { SettingsPath } from '@/types/SettingsPath';
 import { RemoteServer } from '~/generated-metadata/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { IconChevronRight } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
 
 type SettingsIntegrationDatabaseConnectionsListCardProps = {
   integration: SettingsIntegration;

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx

@@ -16,7 +16,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Section } from '@react-email/components';
 import pick from 'lodash.pick';
 import { FormProvider, useForm } from 'react-hook-form';
-import { H2Title, Info } from 'twenty-ui';
 import { z } from 'zod';
 import {
   RemoteServer,
@@ -25,6 +24,7 @@ import {
 } from '~/generated-metadata/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+import { H2Title, Info } from 'twenty-ui/display';
 
 export const SettingsIntegrationEditDatabaseConnectionContent = ({
   connection,