[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/pages/onboarding/ChooseYourPlan.tsx

@@ -11,13 +11,6 @@ import { billingState } from '@/client-config/states/billingState';
 import styled from '@emotion/styled';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import {
-  ActionLink,
-  CAL_LINK,
-  CardPicker,
-  Loader,
-  MainButton,
-} from 'twenty-ui';
 import {
   BillingPlanKey,
   BillingPriceLicensedDto,
@@ -25,6 +18,9 @@ import {
   useBillingBaseProductPricesQuery,
 } from '~/generated/graphql';
 import { isDefined } from 'twenty-shared/utils';
+import { ActionLink, CAL_LINK } from 'twenty-ui/navigation';
+import { CardPicker, MainButton } from 'twenty-ui/input';
+import { Loader } from 'twenty-ui/feedback';
 
 const StyledSubscriptionContainer = styled.div<{
   withLongerMarginBottom: boolean;

packages/twenty-front/src/pages/onboarding/CreateProfile.tsx

@@ -4,7 +4,6 @@ import { useCallback, useState } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { H2Title, MainButton } from 'twenty-ui';
 import { z } from 'zod';
 
 import { SubTitle } from '@/auth/components/SubTitle';
@@ -24,6 +23,8 @@ import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { OnboardingStatus } from '~/generated/graphql';
 import { isDefined } from 'twenty-shared/utils';
+import { H2Title } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledContentContainer = styled.div`
   width: 100%;

packages/twenty-front/src/pages/onboarding/CreateWorkspace.tsx

@@ -3,7 +3,6 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { useCallback } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { Key } from 'ts-key-enum';
-import { H2Title, Loader, MainButton } from 'twenty-ui';
 import { z } from 'zod';
 
 import { SubTitle } from '@/auth/components/SubTitle';
@@ -21,6 +20,9 @@ import {
   useActivateWorkspaceMutation,
 } from '~/generated/graphql';
 import { isDefined } from 'twenty-shared/utils';
+import { H2Title } from 'twenty-ui/display';
+import { Loader } from 'twenty-ui/feedback';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledContentContainer = styled.div`
   width: 100%;

packages/twenty-front/src/pages/onboarding/InviteTeam.tsx

@@ -21,17 +21,13 @@ import {
 } from 'react-hook-form';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import {
-  ActionLink,
-  IconCopy,
-  LightButton,
-  MainButton,
-  SeparatorLineText,
-} from 'twenty-ui';
 import { z } from 'zod';
 import { OnboardingStatus } from '~/generated/graphql';
 import { useCreateWorkspaceInvitation } from '../../modules/workspace-invitation/hooks/useCreateWorkspaceInvitation';
 import { isDefined } from 'twenty-shared/utils';
+import { ActionLink } from 'twenty-ui/navigation';
+import { IconCopy, SeparatorLineText } from 'twenty-ui/display';
+import { LightButton, MainButton } from 'twenty-ui/input';
 
 const StyledAnimatedContainer = styled.div`
   display: flex;

packages/twenty-front/src/pages/onboarding/PaymentSuccess.tsx

@@ -7,13 +7,16 @@ import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
-import { AnimatedEaseIn, IconCheck, MainButton, RGBA } from 'twenty-ui';
 import {
   OnboardingStatus,
   useGetCurrentUserLazyQuery,
 } from '~/generated/graphql';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { isDefined } from 'twenty-shared/utils';
+import { AnimatedEaseIn } from 'twenty-ui/utilities';
+import { IconCheck } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
+import { RGBA } from 'twenty-ui/theme';
 
 const StyledCheckContainer = styled.div`
   align-items: center;

packages/twenty-front/src/pages/onboarding/SyncEmails.tsx

@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { ActionLink, IconGoogle, IconMicrosoft, MainButton } from 'twenty-ui';
 
 import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
@@ -26,6 +25,9 @@ import {
   useSkipSyncEmailOnboardingStepMutation,
 } from '~/generated/graphql';
 import { ConnectedAccountProvider } from 'twenty-shared/types';
+import { ActionLink } from 'twenty-ui/navigation';
+import { IconGoogle, IconMicrosoft } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledSyncEmailsContainer = styled.div`
   display: flex;