[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/components/AdvancedSettingsContentWrapperWithDot.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconPoint } from 'twenty-ui';
+import { IconPoint } from 'twenty-ui/display';
 
 const StyledWrapper = styled.div`
   position: relative;

packages/twenty-front/src/modules/settings/components/AdvancedSettingsWrapper.tsx

@@ -3,7 +3,8 @@ import { ADVANCED_SETTINGS_ANIMATION_DURATION } from '@/settings/constants/Advan
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { AnimatedExpandableContainer } from 'twenty-ui';
+import { AnimatedExpandableContainer } from 'twenty-ui/layout';
+
 const StyledContent = styled.div`
   width: 100%;
 `;

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/CancelButton.tsx

@@ -1,5 +1,5 @@
 import { useLingui } from '@lingui/react/macro';
-import { LightButton } from 'twenty-ui';
+import { LightButton } from 'twenty-ui/input';
 
 type CancelButtonProps = {
   onCancel?: () => void;

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx

@@ -1,5 +1,6 @@
-import { Button, IconDeviceFloppy } from 'twenty-ui';
 import { t } from '@lingui/core/macro';
+import { Button } from 'twenty-ui/input';
+import { IconDeviceFloppy } from 'twenty-ui/display';
 
 type SaveButtonProps = {
   onSave?: () => void;

packages/twenty-front/src/modules/settings/components/SettingsCard.tsx

@@ -1,8 +1,10 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Card, CardContent, IconChevronRight, Pill } from 'twenty-ui';
 
 import { ReactNode } from 'react';
+import { Card, CardContent } from 'twenty-ui/layout';
+import { IconChevronRight } from 'twenty-ui/display';
+import { Pill } from 'twenty-ui/components';
 
 type SettingsCardProps = {
   description?: string;

packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx

@@ -1,7 +1,8 @@
 import { TextInput } from '@/ui/input/components/TextInput';
 import styled from '@emotion/styled';
-import { IconButton, IconMinus, IconPlus } from 'twenty-ui';
 import { castAsNumberOrNull } from '~/utils/cast-as-number-or-null';
+import { IconButton } from 'twenty-ui/input';
+import { IconMinus, IconPlus } from 'twenty-ui/display';
 
 type SettingsCounterProps = {
   value: number;

packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx

@@ -1,11 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ComponentType } from 'react';
-import { Card, CardFooter, IconComponent, IconPlus } from 'twenty-ui';
 
 import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
 
 import { SettingsListItemCardContent } from './SettingsListItemCardContent';
+import { Card, CardFooter } from 'twenty-ui/layout';
+import { IconComponent, IconPlus } from 'twenty-ui/display';
 
 const StyledFooter = styled(CardFooter)`
   align-items: center;

packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx

@@ -2,8 +2,9 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
-import { CardContent, IconChevronRight, IconComponent } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { CardContent } from 'twenty-ui/layout';
+import { IconChevronRight, IconComponent } from 'twenty-ui/display';
 
 const StyledRow = styled(CardContent)<{ to?: boolean }>`
   align-items: center;

packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
-
-import { Card } from 'twenty-ui';
+import { Card } from 'twenty-ui/layout';
 
 const StyledCard = styled(Card)`
   background-color: ${({ theme }) => theme.background.secondary};

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentCounter.tsx

@@ -6,7 +6,7 @@ import {
   StyledSettingsOptionCardTitle,
 } from '@/settings/components/SettingsOptions/SettingsOptionCardContentBase';
 import { SettingsOptionIconCustomizer } from '@/settings/components/SettingsOptions/SettingsOptionIconCustomizer';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
 
 type SettingsOptionCardContentCounterProps = {
   Icon?: IconComponent;

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/settings/components/SettingsOptions/SettingsOptionCardContentBase';
 import { SettingsOptionIconCustomizer } from '@/settings/components/SettingsOptions/SettingsOptionIconCustomizer';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
 
 type SettingsOptionCardContentSelectProps = {
   Icon?: IconComponent;

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx

@@ -9,7 +9,8 @@ import { SettingsOptionIconCustomizer } from '@/settings/components/SettingsOpti
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useId } from 'react';
-import { IconComponent, Toggle } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
+import { Toggle } from 'twenty-ui/input';
 
 const StyledSettingsOptionCardToggleContent = styled(
   StyledSettingsOptionCardContent,

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
 
 type SettingsOptionIconCustomizerProps = {
   Icon: IconComponent;

packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentCounter.stories.tsx

@@ -2,7 +2,8 @@ import { SettingsOptionCardContentCounter } from '@/settings/components/Settings
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { ComponentDecorator, IconUsers } from 'twenty-ui';
+import { ComponentDecorator } from 'twenty-ui/testing';
+import { IconUsers } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   width: 480px;

packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentSelect.stories.tsx

@@ -3,15 +3,15 @@ import { Select, SelectValue } from '@/ui/input/components/Select';
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import { ComponentDecorator } from 'twenty-ui/testing';
 import {
-  ComponentDecorator,
   IconLanguage,
   IconLayoutKanban,
   IconList,
   IconNotes,
   IconTable,
   IconUsers,
-} from 'twenty-ui';
+} from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   width: 480px;

packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentToggle.stories.tsx

@@ -2,13 +2,8 @@ import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsO
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import {
-  ComponentDecorator,
-  IconBell,
-  IconLock,
-  IconRobot,
-  IconUsers,
-} from 'twenty-ui';
+import { ComponentDecorator } from 'twenty-ui/testing';
+import { IconBell, IconLock, IconRobot, IconUsers } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   width: 480px;

packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx

@@ -1,6 +1,8 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { CardContent, IconComponent, Radio } from 'twenty-ui';
+import { CardContent } from 'twenty-ui/layout';
+import { IconComponent } from 'twenty-ui/display';
+import { Radio } from 'twenty-ui/input';
 
 const StyledRadioCardContent = styled(CardContent)`
   display: flex;

packages/twenty-front/src/modules/settings/components/SettingsRadioCardContainer.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
 import { SettingsRadioCard } from '@/settings/components/SettingsRadioCard';
+import { IconComponent } from 'twenty-ui/display';
 
 const StyledRadioCardContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
-
-import { Card, CardContent } from 'twenty-ui';
+import { Card, CardContent } from 'twenty-ui/layout';
 
 type SettingsSummaryCardProps = {
   title: ReactNode;

packages/twenty-front/src/modules/settings/components/__stories__/SettingsCard.stories.tsx

@@ -1,7 +1,8 @@
 import { SettingsCard } from '@/settings/components/SettingsCard';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { ComponentDecorator, IconMailCog } from 'twenty-ui';
+import { ComponentDecorator } from 'twenty-ui/testing';
+import { IconMailCog } from 'twenty-ui/display';
 
 const meta: Meta<typeof SettingsCard> = {
   title: 'Modules/Settings/SettingsCard',