[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/auth/sign-in-up/components/EmailVerificationSent.tsx

@@ -4,7 +4,11 @@ import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { useHandleResendEmailVerificationToken } from '@/auth/sign-in-up/hooks/useHandleResendEmailVerificationToken';
 import { useTheme } from '@emotion/react';
-import { AnimatedEaseIn, IconMail, Loader, MainButton, RGBA } from 'twenty-ui';
+import { AnimatedEaseIn } from 'twenty-ui/utilities';
+import { IconMail } from 'twenty-ui/display';
+import { Loader } from 'twenty-ui/feedback';
+import { MainButton } from 'twenty-ui/input';
+import { RGBA } from 'twenty-ui/theme';
 
 const StyledMailContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx

@@ -4,7 +4,6 @@ import { useState } from 'react';
 import { FormProvider } from 'react-hook-form';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { HorizontalSeparator, Loader, MainButton } from 'twenty-ui';
 
 import { useAuth } from '@/auth/hooks/useAuth';
 import { SignInUpEmailField } from '@/auth/sign-in-up/components/SignInUpEmailField';
@@ -28,6 +27,9 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 import { isDefined } from 'twenty-shared/utils';
+import { HorizontalSeparator } from 'twenty-ui/display';
+import { Loader } from 'twenty-ui/feedback';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledContentContainer = styled(motion.div)`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpPasswordField.tsx

@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { motion } from 'framer-motion';
 import { Controller, useFormContext } from 'react-hook-form';
-import { StyledText } from 'twenty-ui';
+import { StyledText } from 'twenty-ui/display';
 
 const StyledFullWidthMotionDiv = styled(motion.div)`
   width: 100%;

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpSSOIdentityProviderSelection.tsx

@@ -4,11 +4,12 @@ import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
 import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { HorizontalSeparator, MainButton } from 'twenty-ui';
 
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import React from 'react';
 import { isDefined } from 'twenty-shared/utils';
+import { HorizontalSeparator } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithCredentials.tsx

@@ -15,8 +15,9 @@ import { useLingui } from '@lingui/react/macro';
 import { useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Loader, MainButton } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { Loader } from 'twenty-ui/feedback';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledForm = styled.form`
   align-items: center;

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithGoogle.tsx

@@ -7,7 +7,8 @@ import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { memo } from 'react';
 import { useRecoilValue } from 'recoil';
-import { HorizontalSeparator, IconGoogle, MainButton } from 'twenty-ui';
+import { HorizontalSeparator, IconGoogle } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 const GoogleIcon = memo(() => {
   const theme = useTheme();

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithMicrosoft.tsx

@@ -6,7 +6,8 @@ import {
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
-import { HorizontalSeparator, IconMicrosoft, MainButton } from 'twenty-ui';
+import { HorizontalSeparator, IconMicrosoft } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 export const SignInUpWithMicrosoft = () => {
   const theme = useTheme();

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWithSSO.tsx

@@ -7,8 +7,9 @@ import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthPro
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { HorizontalSeparator, IconLock, MainButton } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { HorizontalSeparator, IconLock } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 export const SignInUpWithSSO = () => {
   const theme = useTheme();

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx

@@ -11,7 +11,8 @@ import styled from '@emotion/styled';
 import { Trans } from '@lingui/react/macro';
 import { FormProvider } from 'react-hook-form';
 import { useRecoilValue } from 'recoil';
-import { ActionLink, HorizontalSeparator } from 'twenty-ui';
+import { ActionLink } from 'twenty-ui/navigation';
+import { HorizontalSeparator } from 'twenty-ui/display';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};