[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/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent.tsx

@@ -1,7 +1,8 @@
-import { Avatar, AvatarProps, IconComponent, LightIconButton } from 'twenty-ui';
 import { MouseEvent, ReactElement } from 'react';
 import styled from '@emotion/styled';
 import { useTheme } from '@emotion/react';
+import { Avatar, AvatarProps, IconComponent } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
 
 const StyledNonClickableStartIcon = styled.div`
   align-items: center;

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

@@ -2,10 +2,10 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';
 import 'react-phone-number-input/style.css';
-import { TEXT_INPUT_STYLE } from 'twenty-ui';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
 import { useCombinedRefs } from '~/hooks/useCombinedRefs';
+import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
 
 const StyledInput = styled.input<{
   withRightComponent?: boolean;

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

@@ -1,7 +1,7 @@
 import { useInputFocusWithoutScrollOnMount } from '@/ui/input/hooks/useInputFocusWithoutScrollOnMount';
 import styled from '@emotion/styled';
 import { forwardRef, InputHTMLAttributes } from 'react';
-import { TEXT_INPUT_STYLE } from 'twenty-ui';
+import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
 
 const StyledDropdownMenuSearchInputContainer = styled.div`
   align-items: center;

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

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Label } from 'twenty-ui';
+import { Label } from 'twenty-ui/display';
 
 export const StyledDropdownMenuSubheader = styled(Label)`
   background-color: ${({ theme }) => theme.background.transparent.lighter};

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

@@ -3,15 +3,6 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 import { PlayFunction } from '@storybook/types';
 import { useState } from 'react';
-import {
-  Avatar,
-  Button,
-  ComponentDecorator,
-  IconChevronLeft,
-  MenuItem,
-  MenuItemMultiSelectAvatar,
-  MenuItemSelectAvatar,
-} from 'twenty-ui';
 
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 
@@ -23,6 +14,14 @@ import { DropdownMenuSearchInput } from '../DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '../DropdownMenuSeparator';
 import { StyledDropdownMenuSubheader } from '../StyledDropdownMenuSubheader';
 import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
+import { Avatar, IconChevronLeft } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
+import { ComponentDecorator } from 'twenty-ui/testing';
+import {
+  MenuItem,
+  MenuItemMultiSelectAvatar,
+  MenuItemSelectAvatar,
+} from 'twenty-ui/navigation';
 
 const meta: Meta<typeof Dropdown> = {
   title: 'UI/Layout/Dropdown/Dropdown',

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

@@ -1,19 +1,18 @@
 import { Meta, StoryObj } from '@storybook/react';
-import {
-  AVATAR_URL_MOCK,
-  Avatar,
-  ComponentDecorator,
-  IconChevronLeft,
-  IconChevronRight,
-  IconPlus,
-  MenuItem,
-} from 'twenty-ui';
 
 import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
 import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { AVATAR_URL_MOCK, ComponentDecorator } from 'twenty-ui/testing';
+import {
+  Avatar,
+  IconChevronLeft,
+  IconChevronRight,
+  IconPlus,
+} from 'twenty-ui/display';
+import { MenuItem } from 'twenty-ui/navigation';
 
 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 { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { DropdownMenuInput } from '../DropdownMenuInput';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof DropdownMenuInput> = {
   title: 'UI/Layout/Dropdown/DropdownMenuInput',

packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts

@@ -1,5 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
+import { createState } from 'twenty-ui/utilities';
 export const activeDropdownFocusIdState = createState<string | null>({
   key: 'activeDropdownFocusIdState',
   defaultValue: null,

packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts

@@ -1,5 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
+import { createState } from 'twenty-ui/utilities';
 export const previousDropdownFocusIdState = createState<string | null>({
   key: 'previousDropdownFocusIdState',
   defaultValue: null,