[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/activities/blocks/components/FileBlock.tsx

@@ -2,13 +2,13 @@ import { createReactBlockSpec } from '@blocknote/react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { ChangeEvent, useRef } from 'react';
-import { Button } from 'twenty-ui';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 import { AttachmentIcon } from '../../files/components/AttachmentIcon';
 import { AttachmentType } from '../../files/types/Attachment';
 import { getFileType } from '../../files/utils/getFileType';
 import { isDefined } from 'twenty-shared/utils';
+import { Button } from 'twenty-ui/input';
 
 const StyledFileInput = styled.input`
   display: none;

packages/twenty-front/src/modules/activities/blocks/utils/getSlashMenu.ts

@@ -1,4 +1,8 @@
 import { getDefaultReactSlashMenuItems } from '@blocknote/react';
+
+import { SuggestionItem } from '@/ui/input/editor/components/CustomSlashMenu';
+
+import { BLOCK_SCHEMA } from '../constants/Schema';
 import {
   IconCode,
   IconComponent,
@@ -15,11 +19,7 @@ import {
   IconPilcrow,
   IconTable,
   IconVideo,
-} from 'twenty-ui';
-
-import { SuggestionItem } from '@/ui/input/editor/components/CustomSlashMenu';
-
-import { BLOCK_SCHEMA } from '../constants/Schema';
+} from 'twenty-ui/display';
 
 const Icons: Record<string, IconComponent> = {
   'Heading 1': IconH1,

packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx

@@ -1,15 +1,5 @@
 import styled from '@emotion/styled';
 import { format, getYear } from 'date-fns';
-import {
-  AnimatedPlaceholder,
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-  H3Title,
-  Section,
-} from 'twenty-ui';
 
 import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
 import { TIMELINE_CALENDAR_EVENTS_DEFAULT_PAGE_SIZE } from '@/activities/calendar/constants/Calendar';
@@ -23,6 +13,16 @@ import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { TimelineCalendarEventsWithTotal } from '~/generated/graphql';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+  Section,
+} from 'twenty-ui/layout';
+import { H3Title } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   box-sizing: border-box;

packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx

@@ -4,8 +4,8 @@ import { differenceInSeconds, endOfDay, format } from 'date-fns';
 
 import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
-import { CardContent } from 'twenty-ui';
 import { TimelineCalendarEvent } from '~/generated/graphql';
+import { CardContent } from 'twenty-ui/layout';
 
 type CalendarDayCardContentProps = {
   calendarEvents: TimelineCalendarEvent[];

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx

@@ -1,12 +1,5 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import {
-  Chip,
-  ChipAccent,
-  ChipSize,
-  ChipVariant,
-  IconCalendarEvent,
-} from 'twenty-ui';
 
 import { CalendarEventParticipantsResponseStatus } from '@/activities/calendar/components/CalendarEventParticipantsResponseStatus';
 import { CalendarEvent } from '@/activities/calendar/types/CalendarEvent';
@@ -20,6 +13,8 @@ import { PropertyBox } from '@/object-record/record-inline-cell/property-box/com
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
 import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
+import { Chip, ChipAccent, ChipSize, ChipVariant } from 'twenty-ui/components';
+import { IconCalendarEvent } from 'twenty-ui/display';
 
 type CalendarEventDetailsProps = {
   calendarEvent: CalendarEvent;

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventParticipantsResponseStatusField.tsx

@@ -1,13 +1,13 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRef } from 'react';
-import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui';
 
 import { CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant';
 import { ParticipantChip } from '@/activities/components/ParticipantChip';
 import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
 import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
+import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui/display';
 
 const StyledInlineCellBaseContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx

@@ -11,19 +11,18 @@ import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalend
 import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useOpenCalendarEventInCommandMenu } from '@/command-menu/hooks/useOpenCalendarEventInCommandMenu';
-import {
-  Avatar,
-  AvatarGroup,
-  Card,
-  CardContent,
-  IconArrowRight,
-  IconLock,
-} from 'twenty-ui';
 import {
   CalendarChannelVisibility,
   TimelineCalendarEvent,
 } from '~/generated-metadata/graphql';
 import { isDefined } from 'twenty-shared/utils';
+import {
+  Avatar,
+  AvatarGroup,
+  IconArrowRight,
+  IconLock,
+} from 'twenty-ui/display';
+import { Card, CardContent } from 'twenty-ui/layout';
 
 type CalendarEventRowProps = {
   calendarEvent: TimelineCalendarEvent;

packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import { CalendarDayCardContent } from '@/activities/calendar/components/CalendarDayCardContent';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
-import { Card } from 'twenty-ui';
+import { Card } from 'twenty-ui/layout';
 
 type CalendarMonthCardProps = {
   dayTimes: number[];

packages/twenty-front/src/modules/activities/calendar/components/__stories__/Calendar.stories.tsx

@@ -1,7 +1,6 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
 import { HttpResponse, graphql } from 'msw';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { Calendar } from '@/activities/calendar/components/Calendar';
 import { getTimelineCalendarEventsFromCompanyId } from '@/activities/calendar/graphql/queries/getTimelineCalendarEventsFromCompanyId';
@@ -9,6 +8,7 @@ import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadat
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedTimelineCalendarEvents } from '~/testing/mock-data/timeline-calendar-events';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof Calendar> = {
   title: 'Modules/Activities/Calendar/Calendar',

packages/twenty-front/src/modules/activities/components/ActivityList.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Card } from 'twenty-ui';
+import { Card } from 'twenty-ui/layout';
 
 const StyledList = styled(Card)`
   & > :not(:last-child) {

packages/twenty-front/src/modules/activities/components/ActivityRow.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import { CardContent } from 'twenty-ui';
 import React from 'react';
+import { CardContent } from 'twenty-ui/layout';
 
 const StyledRowContent = styled(CardContent)<{
   clickable?: boolean;

packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx

@@ -1,6 +1,6 @@
 import { useInView } from 'react-intersection-observer';
 import styled from '@emotion/styled';
-import { GRAY_SCALE } from 'twenty-ui';
+import { GRAY_SCALE } from 'twenty-ui/theme';
 
 type CustomResolverFetchMoreLoaderProps = {
   loading: boolean;

packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
-import { Avatar } from 'twenty-ui';
 
 import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { RecordChip } from '@/object-record/components/RecordChip';
+import { Avatar } from 'twenty-ui/display';
 
 const StyledAvatar = styled(Avatar)`
   margin-right: ${({ theme }) => theme.spacing(1)};

packages/twenty-front/src/modules/activities/emails/components/EmailLoader.tsx

@@ -3,8 +3,8 @@ import {
   AnimatedPlaceholderEmptyContainer,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
-  Loader,
-} from 'twenty-ui';
+} from 'twenty-ui/layout';
+import { Loader } from 'twenty-ui/feedback';
 
 export const EmailLoader = ({ loadingText }: { loadingText?: string }) => (
   <AnimatedPlaceholderEmptyContainer>

packages/twenty-front/src/modules/activities/emails/components/EmailThreadBottomBar.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { Button, IconArrowBackUp, IconUserCircle } from 'twenty-ui';
+import { Button } from 'twenty-ui/input';
+import { IconArrowBackUp, IconUserCircle } from 'twenty-ui/display';
 
 const StyledThreadBottomBar = styled.div`
   align-items: center;

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageBody.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
-import { AnimatedEaseInOut } from 'twenty-ui';
+import { AnimatedEaseInOut } from 'twenty-ui/utilities';
 
 const StyledThreadMessageBody = styled(motion.div)`
   color: ${({ theme }) => theme.font.color.primary};

packages/twenty-front/src/modules/activities/emails/components/EmailThreadMessageReceivers.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { OverflowingTextWithTooltip } from 'twenty-ui';
 
 import { EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
 import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 
 type EmailThreadMessageReceiversProps = {
   receivers: EmailThreadMessageParticipant[];

packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconLock } from 'twenty-ui';
+import { IconLock } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx

@@ -1,11 +1,12 @@
 import styled from '@emotion/styled';
-import { Avatar, GRAY_SCALE } from 'twenty-ui';
 
 import { ActivityRow } from '@/activities/components/ActivityRow';
 import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
 import { useOpenEmailThreadInCommandMenu } from '@/command-menu/hooks/useOpenEmailThreadInCommandMenu';
 import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
+import { Avatar } from 'twenty-ui/display';
+import { GRAY_SCALE } from 'twenty-ui/theme';
 
 const StyledHeading = styled.div<{ unread: boolean }>`
   display: flex;

packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx

@@ -1,15 +1,4 @@
 import styled from '@emotion/styled';
-import {
-  AnimatedPlaceholder,
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-  H1Title,
-  H1TitleFontColor,
-  Section,
-} from 'twenty-ui';
 
 import { ActivityList } from '@/activities/components/ActivityList';
 import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
@@ -22,6 +11,16 @@ import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { TimelineThread, TimelineThreadsWithTotal } from '~/generated/graphql';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+  Section,
+} from 'twenty-ui/layout';
+import { H1Title, H1TitleFontColor } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriberMenuItem.tsx

@@ -2,7 +2,8 @@ import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThread
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
-import { IconPlus, MenuItemAvatar } from 'twenty-ui';
+import { IconPlus } from 'twenty-ui/display';
+import { MenuItemAvatar } from 'twenty-ui/navigation';
 
 export const MessageThreadSubscriberDropdownAddSubscriberMenuItem = ({
   workspaceMember,

packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersChip.tsx

@@ -1,14 +1,9 @@
 import { MessageThreadSubscriber } from '@/activities/emails/types/MessageThreadSubscriber';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useContext } from 'react';
-import {
-  Avatar,
-  AvatarGroup,
-  Chip,
-  ChipVariant,
-  IconChevronDown,
-  ThemeContext,
-} from 'twenty-ui';
+import { Avatar, AvatarGroup, IconChevronDown } from 'twenty-ui/display';
+import { Chip, ChipVariant } from 'twenty-ui/components';
+import { ThemeContext } from 'twenty-ui/theme';
 
 const MAX_NUMBER_OF_AVATARS = 3;
 

packages/twenty-front/src/modules/activities/emails/components/MessageThreadSubscribersDropdownButton.tsx

@@ -1,5 +1,4 @@
 import { offset } from '@floating-ui/react';
-import { IconMinus, IconPlus, MenuItem, MenuItemAvatar } from 'twenty-ui';
 
 import { MessageThreadSubscriberDropdownAddSubscriber } from '@/activities/emails/components/MessageThreadSubscriberDropdownAddSubscriber';
 import { MessageThreadSubscribersChip } from '@/activities/emails/components/MessageThreadSubscribersChip';
@@ -11,6 +10,8 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useListenRightDrawerClose } from '@/ui/layout/right-drawer/hooks/useListenRightDrawerClose';
 import { useState } from 'react';
+import { IconMinus, IconPlus } from 'twenty-ui/display';
+import { MenuItem, MenuItemAvatar } from 'twenty-ui/navigation';
 
 export const MESSAGE_THREAD_SUBSCRIBER_DROPDOWN_ID =
   'message-thread-subscriber';

packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts

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

packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx

@@ -1,15 +1,14 @@
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import {
   IconDotsVertical,
   IconDownload,
   IconPencil,
   IconTrash,
-  LightIconButton,
-  MenuItem,
-} from 'twenty-ui';
-
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+} from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+import { MenuItem } from 'twenty-ui/navigation';
 
 type AttachmentDropdownProps = {
   onDownload: () => void;

packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx

@@ -1,5 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+
+import { AttachmentType } from '@/activities/files/types/Attachment';
 import {
   IconComponent,
   IconFile,
@@ -10,9 +12,7 @@ import {
   IconPresentation,
   IconTable,
   IconVideo,
-} from 'twenty-ui';
-
-import { AttachmentType } from '@/activities/files/types/Attachment';
+} from 'twenty-ui/display';
 
 const StyledIconContainer = styled.div<{ background: string }>`
   align-items: center;

packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { lazy, ReactElement, Suspense, useState } from 'react';
-import { IconButton, IconDownload, IconX } from 'twenty-ui';
 
 import { DropZone } from '@/activities/files/components/DropZone';
 import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile';
@@ -14,6 +13,8 @@ import { useRecoilValue } from 'recoil';
 import { ActivityList } from '@/activities/components/ActivityList';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { AttachmentRow } from './AttachmentRow';
+import { IconButton } from 'twenty-ui/input';
+import { IconDownload, IconX } from 'twenty-ui/display';
 
 const DocumentViewer = lazy(() =>
   import('@/activities/files/components/DocumentViewer').then((module) => ({

packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx

@@ -16,14 +16,11 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import {
-  IconCalendar,
-  OverflowingTextWithTooltip,
-  isModifiedEvent,
-} from 'twenty-ui';
 
 import { formatToHumanReadableDate } from '~/utils/date-utils';
 import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension';
+import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { isModifiedEvent } from 'twenty-ui/utilities';
 
 const StyledLeftContent = styled.div`
   align-items: center;

packages/twenty-front/src/modules/activities/files/components/Attachments.tsx

@@ -1,15 +1,5 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, useRef, useState } from 'react';
-import {
-  AnimatedPlaceholder,
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-  Button,
-  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-  IconPlus,
-} from 'twenty-ui';
 
 import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
 import { AttachmentList } from '@/activities/files/components/AttachmentList';
@@ -19,6 +9,16 @@ import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttac
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission';
 import { isDefined } from 'twenty-shared/utils';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+} from 'twenty-ui/layout';
+import { Button } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui/display';
 
 const StyledAttachmentsContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/activities/files/components/DropZone.tsx

@@ -1,9 +1,9 @@
 import { useDropzone } from 'react-dropzone';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconUpload } from 'twenty-ui';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
+import { IconUpload } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx

@@ -1,5 +1,4 @@
 import { useContext } from 'react';
-import { IconArrowUpRight, IconPencil } from 'twenty-ui';
 
 import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
 import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
@@ -16,6 +15,7 @@ import { RecordInlineCellContext } from '@/object-record/record-inline-cell/comp
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
 import { MultipleRecordPicker } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker';
 import { MultipleRecordPickerHotkeyScope } from '@/object-record/record-picker/multiple-record-picker/types/MultipleRecordPickerHotkeyScope';
+import { IconArrowUpRight, IconPencil } from 'twenty-ui/display';
 
 type ActivityTargetsInlineCellProps = {
   activityRecordId: string;

packages/twenty-front/src/modules/activities/notes/components/Notes.tsx

@@ -12,10 +12,10 @@ import {
   AnimatedPlaceholderEmptySubTitle,
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
-  Button,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-  IconPlus,
-} from 'twenty-ui';
+} from 'twenty-ui/layout';
+import { Button } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui/display';
 
 const StyledNotesContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts

@@ -1,6 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-
 import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
+import { createState } from 'twenty-ui/utilities';
 
 export const activityTargetableEntityArrayState = createState<
   ActivityTargetableObject[]

packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts

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

packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts

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

packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts

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

packages/twenty-front/src/modules/activities/tasks/components/AddTaskButton.tsx

@@ -1,10 +1,11 @@
 import { isNonEmptyArray } from '@sniptt/guards';
-import { Button, IconPlus } from 'twenty-ui';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useHasObjectReadOnlyPermission } from '@/settings/roles/hooks/useHasObjectReadOnlyPermission';
+import { Button } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui/display';
 
 export const AddTaskButton = ({
   activityTargetableObjects,

packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -1,14 +1,4 @@
 import styled from '@emotion/styled';
-import {
-  AnimatedPlaceholder,
-  AnimatedPlaceholderEmptyContainer,
-  AnimatedPlaceholderEmptySubTitle,
-  AnimatedPlaceholderEmptyTextContainer,
-  AnimatedPlaceholderEmptyTitle,
-  Button,
-  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-  IconPlus,
-} from 'twenty-ui';
 
 import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
@@ -22,6 +12,16 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
 import groupBy from 'lodash.groupby';
 import { AddTaskButton } from './AddTaskButton';
 import { TaskList } from './TaskList';
+import {
+  AnimatedPlaceholder,
+  AnimatedPlaceholderEmptyContainer,
+  AnimatedPlaceholderEmptySubTitle,
+  AnimatedPlaceholderEmptyTextContainer,
+  AnimatedPlaceholderEmptyTitle,
+  EMPTY_PLACEHOLDER_TRANSITION_PROPS,
+} from 'twenty-ui/layout';
+import { Button } from 'twenty-ui/input';
+import { IconPlus } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx

@@ -1,11 +1,5 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import {
-  Checkbox,
-  CheckboxShape,
-  IconCalendar,
-  OverflowingTextWithTooltip,
-} from 'twenty-ui';
 
 import { ActivityTargetsInlineCell } from '@/activities/inline-cell/components/ActivityTargetsInlineCell';
 import { getActivitySummary } from '@/activities/utils/getActivitySummary';
@@ -17,6 +11,8 @@ import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordIn
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { FieldContextProvider } from '@/object-record/record-field/components/FieldContextProvider';
 import { useCompleteTask } from '../hooks/useCompleteTask';
+import { Checkbox, CheckboxShape } from 'twenty-ui/input';
+import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display';
 
 const StyledTaskBody = styled.div`
   color: ${({ theme }) => theme.font.color.tertiary};

packages/twenty-front/src/modules/activities/tasks/components/__stories__/TaskList.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { TaskList } from '@/activities/tasks/components/TaskList';
 import { ContextStoreDecorator } from '~/testing/decorators/ContextStoreDecorator';
@@ -9,6 +8,7 @@ import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadat
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedTasks } from '~/testing/mock-data/tasks';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof TaskList> = {
   title: 'Modules/Activity/TaskList',

packages/twenty-front/src/modules/activities/timeline-activities/components/TimelineActivities.tsx

@@ -13,8 +13,8 @@ import {
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-  MOBILE_VIEWPORT,
-} from 'twenty-ui';
+} from 'twenty-ui/layout';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 const StyledMainContainer = styled.div`
   align-items: flex-start;

packages/twenty-front/src/modules/activities/timeline-activities/components/__stories__/TimelineActivities.stories.tsx

@@ -1,12 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { HttpResponse, graphql } from 'msw';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { TimelineActivities } from '@/activities/timeline-activities/components/TimelineActivities';
 import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { mockedTimelineActivities } from '~/testing/mock-data/timeline-activities';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof TimelineActivities> = {
   title: 'Modules/TimelineActivities/TimelineActivities',

packages/twenty-front/src/modules/activities/timeline-activities/rows/activity/components/EventRowActivity.tsx

@@ -9,7 +9,8 @@ import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordIn
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache';
 import { isNonEmptyString } from '@sniptt/guards';
-import { MOBILE_VIEWPORT, OverflowingTextWithTooltip } from 'twenty-ui';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 
 type EventRowActivityProps = EventRowDynamicComponentProps;
 

packages/twenty-front/src/modules/activities/timeline-activities/rows/calendar/components/__stories__/EventCardCalendarEvent.stories.tsx

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { HttpResponse, graphql } from 'msw';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { EventCardCalendarEvent } from '@/activities/timeline-activities/rows/calendar/components/EventCardCalendarEvent';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof EventCardCalendarEvent> = {
   title: 'Modules/TimelineActivities/Rows/CalendarEvent/EventCardCalendarEvent',

packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-
-import { Card, MOBILE_VIEWPORT } from 'twenty-ui';
+import { Card } from 'twenty-ui/layout';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 type EventCardProps = {
   children: React.ReactNode;

packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCardToggleButton.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
-import { IconButton, IconChevronDown, IconChevronUp } from 'twenty-ui';
+import { IconButton } from 'twenty-ui/input';
+import { IconChevronDown, IconChevronUp } from 'twenty-ui/display';
 
 type EventCardToggleButtonProps = {
   isOpen: boolean;

packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventIconDynamicComponent.tsx

@@ -1,7 +1,11 @@
-import { IconCirclePlus, IconEditCircle, IconTrash, useIcons } from 'twenty-ui';
-
 import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import {
+  IconCirclePlus,
+  IconEditCircle,
+  IconTrash,
+  useIcons,
+} from 'twenty-ui/display';
 
 export const EventIconDynamicComponent = ({
   event,

packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffLabel.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
-import { Icon123, useIcons } from 'twenty-ui';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { Icon123, useIcons } from 'twenty-ui/display';
 
 type EventFieldDiffLabelProps = {
   fieldMetadataItem: FieldMetadataItem;

packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObject.tsx

@@ -5,7 +5,7 @@ import {
 } from '@/activities/timeline-activities/rows/components/EventRowDynamicComponent';
 import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated';
 import styled from '@emotion/styled';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 type EventRowMainObjectProps = EventRowDynamicComponentProps;
 

packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated.tsx

@@ -8,7 +8,7 @@ import { EventFieldDiffContainer } from '@/activities/timeline-activities/rows/m
 import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 type EventRowMainObjectUpdatedProps = {
   mainObjectMetadataItem: ObjectMetadataItem;

packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/__stories__/EventRowMainObjectUpdated.stories.tsx

@@ -1,11 +1,11 @@
 import { EventRowMainObjectUpdated } from '@/activities/timeline-activities/rows/main-object/components/EventRowMainObjectUpdated';
 import { TimelineActivity } from '@/activities/timeline-activities/types/TimelineActivity';
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator, RouterDecorator } from 'twenty-ui';
 
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof EventRowMainObjectUpdated> = {
   title: 'Modules/TimelineActivities/Rows/MainObject/EventRowMainObjectUpdated',

packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessage.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { isUndefined } from '@sniptt/guards';
-import { OverflowingTextWithTooltip } from 'twenty-ui';
 
 import { EmailThreadMessage } from '@/activities/emails/types/EmailThreadMessage';
 import { EventCardMessageNotShared } from '@/activities/timeline-activities/rows/message/components/EventCardMessageNotShared';
@@ -8,6 +7,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
 import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
 import { isDefined } from 'twenty-shared/utils';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 
 const StyledEventCardMessageContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/EventCardMessageNotShared.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { IconLock } from 'twenty-ui';
+import { IconLock } from 'twenty-ui/display';
 
 const StyledEventCardMessageContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/activities/timeline-activities/rows/message/components/__stories__/EventCardMessage.stories.tsx

@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { HttpResponse, graphql } from 'msw';
-import { ComponentDecorator } from 'twenty-ui';
 
 import { TimelineActivityContext } from '@/activities/timeline-activities/contexts/TimelineActivityContext';
 import { EventCardMessage } from '@/activities/timeline-activities/rows/message/components/EventCardMessage';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof EventCardMessage> = {
   title: 'Modules/TimelineActivities/Rows/Message/EventCardMessage',