Reorganize twenty-ui into best-practice component domains and per-component folders (#21745)

Reorganizes `twenty-ui`'s component organization to follow how the best
UI libraries (MUI, Mantine, Base UI, Polaris) structure their source,
now that the package has stabilized.

**Taxonomy** — dissolves the meaningless `components/` junk-drawer and
the 107-file `display/` mega-category. New domains/subpaths:
`data-display`, `typography`, `icon`, `surfaces`; `feedback` and
`layout` absorb the rest (banners/callout/info + placeholders →
feedback; modal/card → surfaces; motion + separators → layout).

**Per-component layout** — every component is now
`<domain>/<ComponentName>/<ComponentName>.tsx` with colocated
styles/stories/types, `internal/` for private helpers and `parts/` for
re-exported compound sub-parts. The redundant inner `/components/` is
gone. `icon` and `json-visualizer` are kept as cohesive subsystems.

**Also:** adds a tree-shakeable root barrel (`import { Button } from
'twenty-ui'`), the generator now owns `individual-entry.ts`, and a real
barrel-leak bug is fixed (private `internals/` parts were leaking into
the public API).

Consumer imports (~1.2k files) and the `twenty-sdk` UI aggregator were
updated by codemod. The change is **export-neutral** except 16
intentionally-removed private internals symbols (all verified
unconsumed). Gates green: typecheck, lint, build, size-limit, storybook.


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21745?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

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

@@ -4,7 +4,7 @@ import { useContext } from 'react';
 
 import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
-import { CardContent } from 'twenty-ui/layout';
+import { CardContent } from 'twenty-ui/surfaces';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { type TimelineCalendarEvent } from '~/generated/graphql';
 

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

@@ -36,8 +36,8 @@ import {
   ChipAccent,
   ChipSize,
   ChipVariant,
-} from 'twenty-ui/components';
-import { IconCalendarEvent } from 'twenty-ui/display';
+} from 'twenty-ui/data-display';
+import { IconCalendarEvent } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 

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

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { Trans } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { IconLock } from 'twenty-ui/display';
+import { IconLock } from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledContainer = styled.div`

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

@@ -1,7 +1,7 @@
 import { type CalendarEventParticipant } from '@/activities/calendar/types/CalendarEventParticipant';
 import { isTimelineCalendarEventParticipant } from '@/activities/calendar/types/guards/IsTimelineCalendarEventParticipant';
 import { isDefined } from 'twenty-shared/utils';
-import { Avatar, AvatarGroup } from 'twenty-ui/display';
+import { Avatar, AvatarGroup } from 'twenty-ui/data-display';
 import { type TimelineCalendarEventParticipant } from '~/generated/graphql';
 
 type CalendarEventParticipantsAvatarGroupProps = {

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

@@ -6,7 +6,7 @@ import { PropertyBox } from '@/object-record/record-inline-cell/property-box/com
 import { ParticipantChip } from '@/activities/components/ParticipantChip';
 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';
+import { IconCheck, IconQuestionMark, IconX } from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledInlineCellBaseContainer = styled.div`

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

@@ -15,7 +15,7 @@ import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEv
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useOpenCalendarEventInSidePanel } from '@/side-panel/hooks/useOpenCalendarEventInSidePanel';
 import { useContext } from 'react';
-import { IconArrowRight } from 'twenty-ui/display';
+import { IconArrowRight } from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 type CalendarEventRowProps = {

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

@@ -15,7 +15,7 @@ import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
 import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
-import { H3Title } from 'twenty-ui/display';
+import { H3Title } from 'twenty-ui/typography';
 import {
   AnimatedPlaceholder,
   AnimatedPlaceholderEmptyContainer,
@@ -23,8 +23,8 @@ import {
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-  Section,
-} from 'twenty-ui/layout';
+} from 'twenty-ui/feedback';
+import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type TimelineCalendarEventsWithTotal } from '~/generated/graphql';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';

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/layout';
+import { Card } from 'twenty-ui/surfaces';
 
 type CalendarMonthCardProps = {
   dayTimes: number[];

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

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { Card } from 'twenty-ui/layout';
+import { Card } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledListContainer = styled.div`

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

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import React from 'react';
-import { CardContent } from 'twenty-ui/layout';
+import { CardContent } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledRowContentContainer = styled.div`

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

@@ -4,7 +4,7 @@ import React from 'react';
 import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { RecordChip } from '@/object-record/components/RecordChip';
-import { Avatar } from 'twenty-ui/display';
+import { Avatar } from 'twenty-ui/data-display';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledAvatarContainer = styled.span`

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

@@ -1,5 +1,5 @@
 import { useComposeEmailForTargetRecord } from '@/activities/emails/hooks/useComposeEmailForTargetRecord';
-import { IconPlus } from 'twenty-ui/display';
+import { IconPlus } from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
 
 export const ComposeEmailButton = () => {

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

@@ -3,7 +3,7 @@ import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
 import { type EmailAttachment } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { IconUpload } from 'twenty-ui/display';
+import { IconUpload } from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { useUploadEmailAttachment } from '@/activities/emails/hooks/useUploadEmailAttachment';

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

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

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

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { IconArrowBackUp, IconUserCircle } from 'twenty-ui/display';
+import { IconArrowBackUp, IconUserCircle } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

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

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 import { motion } from 'framer-motion';
 import Linkify from 'linkify-react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { AnimatedEaseInOut } from 'twenty-ui/utilities';
+import { AnimatedEaseInOut } from 'twenty-ui/layout';
 
 const StyledThreadMessageBody = styled(motion.div)`
   color: ${themeCssVariables.font.color.primary};

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

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 
 import { type EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
 import { getDisplayNameFromParticipant } from '@/activities/emails/utils/getDisplayNameFromParticipant';
-import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 type EmailThreadMessageReceiversProps = {

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

@@ -3,7 +3,7 @@ import { styled } from '@linaria/react';
 import { ParticipantChip } from '@/activities/components/ParticipantChip';
 import { type EmailThreadMessageParticipant } from '@/activities/emails/types/EmailThreadMessageParticipant';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { AppTooltip, TooltipPosition } from 'twenty-ui/display';
+import { AppTooltip, TooltipPosition } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import {

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

@@ -1,7 +1,8 @@
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { AppTooltip, IconLock, TooltipDelay } from 'twenty-ui/display';
+import { IconLock } from 'twenty-ui/icon';
+import { AppTooltip, TooltipDelay } from 'twenty-ui/surfaces';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { MessageChannelVisibility } from '~/generated/graphql';
 

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

@@ -7,7 +7,7 @@ import { useContext } from 'react';
 
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { Avatar } from 'twenty-ui/display';
+import { Avatar } from 'twenty-ui/data-display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import {
   MessageChannelVisibility,

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

@@ -14,7 +14,7 @@ import { useCustomResolver } from '@/activities/hooks/useCustomResolver';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { Trans } from '@lingui/react/macro';
-import { H1Title, H1TitleFontColor } from 'twenty-ui/display';
+import { H1Title, H1TitleFontColor } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import {

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

@@ -1,6 +1,6 @@
 import { useComposeEmailForTargetRecord } from '@/activities/emails/hooks/useComposeEmailForTargetRecord';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { IconMail } from 'twenty-ui/display';
+import { IconMail } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 import {
   AnimatedPlaceholder,
@@ -9,7 +9,7 @@ import {
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui/feedback';
 
 export const EmptyInboxPlaceholder = () => {
   const { t } = useLingui();

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

@@ -9,7 +9,7 @@ import {
   IconDownload,
   IconPencil,
   IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
 

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

@@ -11,7 +11,7 @@ import { type ActivityTargetableObject } from '@/activities/types/ActivityTarget
 import { isAttachmentPreviewEnabledState } from '@/client-config/states/isAttachmentPreviewEnabledState';
 import { ModalStatefulWrapper } from '@/ui/layout/modal/components/ModalStatefulWrapper';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { ModalContent, ModalHeader } from 'twenty-ui/layout';
+import { ModalContent, ModalHeader } from 'twenty-ui/surfaces';
 
 import { ActivityList } from '@/activities/components/ActivityList';
 import {
@@ -23,7 +23,7 @@ import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFla
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { isDefined } from 'twenty-shared/utils';
-import { IconDownload, IconX } from 'twenty-ui/display';
+import { IconDownload, IconX } from 'twenty-ui/icon';
 import { IconButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { PermissionFlagType } from '~/generated-metadata/graphql';

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

@@ -17,7 +17,8 @@ import { type AttachmentWithFile } from '@/activities/files/utils/filterAttachme
 import { FileIcon } from '@/file/components/FileIcon';
 import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFlag';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
-import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { IconCalendar } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { isNavigationModifierPressed } from 'twenty-ui/utilities';
 import { PermissionFlagType } from '~/generated-metadata/graphql';

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

@@ -11,7 +11,7 @@ import { styled } from '@linaria/react';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useContext, useEffect, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconDownload } from 'twenty-ui/display';
+import { IconDownload } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { getFileNameAndExtension } from '~/utils/file/getFileNameAndExtension';

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

@@ -4,7 +4,7 @@ import { useContext } from 'react';
 import { useDropzone } from 'react-dropzone';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { IconUpload } from 'twenty-ui/display';
+import { IconUpload } from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledContainer = styled.div`

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

@@ -12,7 +12,7 @@ import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFla
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconPlus } from 'twenty-ui/display';
+import { IconPlus } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 import {
   AnimatedPlaceholder,
@@ -21,7 +21,7 @@ import {
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui/feedback';
 import { PermissionFlagType } from '~/generated-metadata/graphql';
 
 const StyledAttachmentsContainer = styled.div`

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

@@ -16,7 +16,7 @@ import { RecordInlineCellContext } from '@/object-record/record-inline-cell/comp
 import { RecordInlineCellEditMode } from '@/object-record/record-inline-cell/components/RecordInlineCellEditMode';
 import { MultipleRecordPicker } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
-import { IconArrowUpRight, IconPencil } from 'twenty-ui/display';
+import { IconArrowUpRight, IconPencil } from 'twenty-ui/icon';
 
 type ActivityTargetsInlineCellProps = {
   activityRecordId: string;

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

@@ -9,7 +9,7 @@ import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPe
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { IconPlus } from 'twenty-ui/display';
+import { IconPlus } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 import {
   AnimatedPlaceholder,
@@ -18,7 +18,7 @@ import {
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui/feedback';
 
 const StyledNotesContainer = styled.div`
   display: flex;

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

@@ -4,7 +4,7 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPermissionsForObject';
 import { t } from '@lingui/core/macro';
-import { IconPlus } from 'twenty-ui/display';
+import { IconPlus } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 
 export const AddTaskButton = ({

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

@@ -12,7 +12,7 @@ import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/use
 import { t } from '@lingui/core/macro';
 import groupBy from 'lodash.groupby';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
-import { IconPlus } from 'twenty-ui/display';
+import { IconPlus } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 import {
   AnimatedPlaceholder,
@@ -21,7 +21,7 @@ import {
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui/feedback';
 import { AddTaskButton } from './AddTaskButton';
 import { TaskList } from './TaskList';
 

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

@@ -14,7 +14,8 @@ import { StopPropagationContainer } from '@/object-record/record-board/record-bo
 import { RecordFieldsScopeContextProvider } from '@/object-record/record-field-list/contexts/RecordFieldsScopeContext';
 import { FieldContextProvider } from '@/object-record/record-field/ui/components/FieldContextProvider';
 import { useContext } from 'react';
-import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { IconCalendar } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { Checkbox, CheckboxShape } from 'twenty-ui/input';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { useCompleteTask } from '@/activities/tasks/hooks/useCompleteTask';

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

@@ -14,7 +14,7 @@ import {
   AnimatedPlaceholderEmptyTextContainer,
   AnimatedPlaceholderEmptyTitle,
   EMPTY_PLACEHOLDER_TRANSITION_PROPS,
-} from 'twenty-ui/layout';
+} from 'twenty-ui/feedback';
 import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledMainContainer = styled.div`

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

@@ -8,7 +8,7 @@ import { useOpenRecordInSidePanel } from '@/side-panel/hooks/useOpenRecordInSide
 import { type CoreObjectNameSingular } from 'twenty-shared/types';
 import { useGetRecordFromCache } from '@/object-record/cache/hooks/useGetRecordFromCache';
 import { isNonEmptyString } from '@sniptt/guards';
-import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 
 type EventRowActivityProps = EventRowDynamicComponentProps;

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

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { IconButton } from 'twenty-ui/input';
-import { IconChevronDown, IconChevronUp } from 'twenty-ui/display';
+import { IconChevronDown, IconChevronUp } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 type EventCardToggleButtonProps = {

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

@@ -6,7 +6,7 @@ import {
   IconEditCircle,
   IconRestore,
   IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 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 '@linaria/react';
 
 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { Icon123, useIcons } from 'twenty-ui/display';
+import { Icon123, useIcons } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 type EventFieldDiffLabelProps = {

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

@@ -8,7 +8,7 @@ import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectReco
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
+import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 type EventRelationFieldDiffValuesProps = {

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

@@ -10,7 +10,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { FIELD_RESTRICTED_ADDITIONAL_PERMISSIONS_REQUIRED } from 'twenty-shared/constants';
 import { CombinedGraphQLErrors } from '@apollo/client/errors';
 import { isDefined } from 'twenty-shared/utils';
-import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledEventCardMessageContainer = styled.div<{ canOpen?: boolean }>`

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

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { Trans } from '@lingui/react/macro';
-import { IconLock } from 'twenty-ui/display';
+import { IconLock } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledEmailBodyNotSharedContainer = styled.div`

packages/twenty-front/src/modules/advanced-text-editor/components/BubbleMenuIconButton.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import React from 'react';
-import type { IconComponent } from 'twenty-ui/display';
+import type { IconComponent } from 'twenty-ui/icon';
 import { FloatingIconButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/advanced-text-editor/components/EditLinkPopover.tsx

@@ -9,7 +9,7 @@ import { isNonEmptyString } from '@sniptt/guards';
 import { type Editor } from '@tiptap/core';
 import { useId, useState, type FocusEvent, type FormEvent } from 'react';
 import { getSafeUrl, isDefined } from 'twenty-shared/utils';
-import { IconLink, IconPencil } from 'twenty-ui/display';
+import { IconLink, IconPencil } from 'twenty-ui/icon';
 
 type EditLinkPopoverProps = {
   defaultValue: string | undefined;

packages/twenty-front/src/modules/advanced-text-editor/components/ImageBubbleMenu.tsx

@@ -8,7 +8,7 @@ import {
   IconAlignLeft,
   IconAlignRight,
   IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 type ImageBubbleMenuProps = {
   editor: Editor;

packages/twenty-front/src/modules/advanced-text-editor/components/LinkBubbleMenu.tsx

@@ -4,7 +4,7 @@ import { StyledBubbleMenuContainer } from '@/advanced-text-editor/components/Tex
 import { type Editor } from '@tiptap/core';
 import { useEditorState } from '@tiptap/react';
 import { BubbleMenu } from '@tiptap/react/menus';
-import { IconExternalLink, IconLinkOff } from 'twenty-ui/display';
+import { IconExternalLink, IconLinkOff } from 'twenty-ui/icon';
 import { getSafeUrl } from 'twenty-shared/utils';
 
 type LinkBubbleMenuProps = {

packages/twenty-front/src/modules/advanced-text-editor/components/TextBubbleMenu.tsx

@@ -13,7 +13,7 @@ import {
   IconListNumbers,
   IconStrikethrough,
   IconUnderline,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 export const StyledBubbleMenuContainer = styled.div`

packages/twenty-front/src/modules/advanced-text-editor/components/TurnIntoBlockDropdown.tsx

@@ -7,7 +7,7 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { type Editor } from '@tiptap/react';
 import { useContext, useId } from 'react';
-import { IconPilcrow } from 'twenty-ui/display';
+import { IconPilcrow } from 'twenty-ui/icon';
 import { MenuItem } from 'twenty-ui/navigation';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowSendEmailAttachments.tsx

@@ -11,7 +11,7 @@ import { useLingui } from '@lingui/react/macro';
 import { useContext, useId } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { type WorkflowEmailFiles } from 'twenty-shared/workflow';
-import { IconUpload } from 'twenty-ui/display';
+import { IconUpload } from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 type WorkflowSendEmailAttachmentsProps = {

packages/twenty-front/src/modules/advanced-text-editor/extensions/slash-command/DefaultSlashCommands.ts

@@ -9,7 +9,7 @@ import {
   IconList,
   IconListNumbers,
   IconPilcrow,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 export type SlashCommandConfig = {
   id: string;

packages/twenty-front/src/modules/advanced-text-editor/extensions/slash-command/SlashCommand.ts

@@ -1,7 +1,7 @@
 import { i18n } from '@lingui/core';
 import { Extension, type Editor, type Range } from '@tiptap/core';
 import Suggestion, { type SuggestionOptions } from '@tiptap/suggestion';
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui/icon';
 
 import {
   DEFAULT_SLASH_COMMANDS,

packages/twenty-front/src/modules/advanced-text-editor/hooks/useTurnIntoBlockOptions.ts

@@ -6,7 +6,7 @@ import {
   IconH2,
   IconH3,
   IconPilcrow,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 export type TurnIntoBlockOptions = {
   title: string;

packages/twenty-front/src/modules/ai/components/AiChatApiKeyNotConfiguredMessage.tsx

@@ -4,7 +4,7 @@ import { getDocumentationUrl } from '@/support/utils/getDocumentationUrl';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { t } from '@lingui/core/macro';
 import { DOCUMENTATION_PATHS } from 'twenty-shared/constants';
-import { IconExternalLink } from 'twenty-ui/display';
+import { IconExternalLink } from 'twenty-ui/icon';
 
 export const AiChatApiKeyNotConfiguredMessage = () => {
   const currentWorkspaceMember = useAtomStateValue(currentWorkspaceMemberState);

packages/twenty-front/src/modules/ai/components/AiChatAssistantMessageRenderer.tsx

@@ -2,7 +2,7 @@ import { AiChatCompactionIndicator } from '@/ai/components/AiChatCompactionIndic
 import { CodeExecutionDisplay } from '@/ai/components/CodeExecutionDisplay';
 import { RoutingStatusDisplay } from '@/ai/components/RoutingStatusDisplay';
 import { ThinkingStepsDisplay } from '@/ai/components/ThinkingStepsDisplay';
-import { IconDotsVertical } from 'twenty-ui/display';
+import { IconDotsVertical } from 'twenty-ui/icon';
 
 import { LazyMarkdownRenderer } from '@/ai/components/LazyMarkdownRenderer';
 import { ToolStepRenderer } from '@/ai/components/ToolStepRenderer';

packages/twenty-front/src/modules/ai/components/AiChatBanner.tsx

@@ -1,11 +1,11 @@
 import { styled } from '@linaria/react';
 import { isDefined } from 'twenty-shared/utils';
 import {
-  AppTooltip,
   type IconComponent,
   IconAlertTriangle,
   IconInfoCircle,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
+import { AppTooltip } from 'twenty-ui/surfaces';
 import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/ai/components/AiChatCompactionIndicator.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { IconTransform } from 'twenty-ui/display';
+import { IconTransform } from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledIndicatorContainer = styled.div`

packages/twenty-front/src/modules/ai/components/AiChatErrorMessage.tsx

@@ -1,7 +1,7 @@
 import { CombinedGraphQLErrors } from '@apollo/client/errors';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { IconAlertCircle } from 'twenty-ui/display';
+import { IconAlertCircle } from 'twenty-ui/icon';
 import { useContext } from 'react';
 
 import { type AiChatError } from '@/ai/types/AiChatError';

packages/twenty-front/src/modules/ai/components/AiChatQueuedMessages.tsx

@@ -6,7 +6,7 @@ import { useDeleteQueuedMessage } from '@/ai/hooks/useDeleteQueuedMessage';
 import { useAtomComponentFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateValue';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { isDefined } from 'twenty-shared/utils';
-import { IconX } from 'twenty-ui/display';
+import { IconX } from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/ai/components/AiChatScrollToBottomButton.tsx

@@ -2,7 +2,7 @@ import { agentChatIsScrolledToBottomSelector } from '@/ai/states/selectors/agent
 import { scrollAiChatToBottom } from '@/ai/utils/scrollAiChatToBottom';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { styled } from '@linaria/react';
-import { IconArrowDown } from 'twenty-ui/display';
+import { IconArrowDown } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledScrollToBottomButton = styled.button<{ isVisible: boolean }>`

packages/twenty-front/src/modules/ai/components/AiChatThreadFilterDropdown.tsx

@@ -1,6 +1,6 @@
 import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
-import { IconAdjustments } from 'twenty-ui/display';
+import { IconAdjustments } from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
 
 import { AiChatThreadFilterDropdownContent } from '@/ai/components/AiChatThreadFilterDropdownContent';

packages/twenty-front/src/modules/ai/components/AiChatThreadFilterDropdownGroupByMenu.tsx

@@ -1,5 +1,5 @@
 import { useLingui } from '@lingui/react/macro';
-import { IconChevronLeft } from 'twenty-ui/display';
+import { IconChevronLeft } from 'twenty-ui/icon';
 import { MenuItemSelect } from 'twenty-ui/navigation';
 
 import { AGENT_CHAT_THREAD_GROUP_BY } from '@/ai/constants/AgentChatThreadGroupBy';

packages/twenty-front/src/modules/ai/components/AiChatThreadFilterDropdownLastActivityMenu.tsx

@@ -1,5 +1,5 @@
 import { useLingui } from '@lingui/react/macro';
-import { IconChevronLeft } from 'twenty-ui/display';
+import { IconChevronLeft } from 'twenty-ui/icon';
 import { MenuItemSelect } from 'twenty-ui/navigation';
 
 import { AGENT_CHAT_THREAD_LAST_ACTIVITY_FILTER } from '@/ai/constants/AgentChatThreadLastActivityFilter';

packages/twenty-front/src/modules/ai/components/AiChatThreadFilterDropdownRootMenu.tsx

@@ -4,7 +4,7 @@ import {
   IconLayoutList,
   IconStatusChange,
   IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 import { AGENT_CHAT_THREAD_FILTER_STATUS } from '@/ai/constants/AgentChatThreadFilterStatus';
 import { AGENT_CHAT_THREAD_FILTER_STATUS_LABELS } from '@/ai/constants/AgentChatThreadFilterStatusLabels';

packages/twenty-front/src/modules/ai/components/AiChatThreadFilterDropdownStatusMenu.tsx

@@ -1,5 +1,5 @@
 import { useLingui } from '@lingui/react/macro';
-import { IconChevronLeft } from 'twenty-ui/display';
+import { IconChevronLeft } from 'twenty-ui/icon';
 import { MenuItemSelect } from 'twenty-ui/navigation';
 
 import { AGENT_CHAT_THREAD_FILTER_STATUS } from '@/ai/constants/AgentChatThreadFilterStatus';

packages/twenty-front/src/modules/ai/components/AiChatThreadItemMenu.tsx

@@ -5,7 +5,7 @@ import {
   IconDotsVertical,
   IconPencil,
   IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
 

packages/twenty-front/src/modules/ai/components/AiChatThreadListItem.tsx

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
 import { Key } from 'ts-key-enum';
-import { IconArchive, IconSparkles } from 'twenty-ui/display';
+import { IconArchive, IconSparkles } from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { AiChatThreadItemMenu } from '@/ai/components/AiChatThreadItemMenu';

packages/twenty-front/src/modules/ai/components/CodeExecutionDisplay.tsx

@@ -12,7 +12,7 @@ import {
   IconPlayerPlay,
   IconSquareRoundedCheck,
   IconSquareRoundedX,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { CodeEditor, LightIconButton } from 'twenty-ui/input';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/ai/components/NavigationDrawerAiChatThreadItem.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
-import { IconArchive, IconComment } from 'twenty-ui/display';
+import { IconArchive, IconComment } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { AiChatThreadItemMenu } from '@/ai/components/AiChatThreadItemMenu';

packages/twenty-front/src/modules/ai/components/ReasoningSummaryDisplay.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { useContext, useState } from 'react';
 
-import { IconBrain, IconChevronDown, IconChevronUp } from 'twenty-ui/display';
+import { IconBrain, IconChevronDown, IconChevronUp } from 'twenty-ui/icon';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/ai/components/RecordLink.tsx

@@ -3,7 +3,7 @@ import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage';
 import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
 import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
-import { AvatarOrIcon, ChipVariant, LinkChip } from 'twenty-ui/components';
+import { AvatarOrIcon, ChipVariant, LinkChip } from 'twenty-ui/data-display';
 
 type RecordLinkProps = {
   objectNameSingular: string;

packages/twenty-front/src/modules/ai/components/RoutingDebugDisplay.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { useContext, useState } from 'react';
 
-import { IconChevronDown, IconChevronUp } from 'twenty-ui/display';
+import { IconChevronDown, IconChevronUp } from 'twenty-ui/icon';
 import { JsonTree } from 'twenty-ui/json-visualizer';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/ai/components/RoutingStatusDisplay.tsx

@@ -4,7 +4,7 @@ import { styled } from '@linaria/react';
 import { useContext, useState } from 'react';
 import { type DataMessagePart } from 'twenty-shared/ai';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronDown, IconChevronUp, IconCpu } from 'twenty-ui/display';
+import { IconChevronDown, IconChevronUp, IconCpu } from 'twenty-ui/icon';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/ai/components/SettingsAgentModelCapabilities.tsx

@@ -5,7 +5,7 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconBrandX, IconWorld } from 'twenty-ui/display';
+import { IconBrandX, IconWorld } from 'twenty-ui/icon';
 import { Checkbox } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/ai/components/TerminalOutput.tsx

@@ -2,7 +2,7 @@ import { MONOSPACE_FONT_FAMILY } from '@/ui/theme/constants/MonospaceFontFamily'
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
-import { IconCopy, IconTerminal } from 'twenty-ui/display';
+import { IconCopy, IconTerminal } from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';

packages/twenty-front/src/modules/ai/components/ThinkingStepsDisplay.tsx

@@ -6,10 +6,9 @@ import { isDefined } from 'twenty-shared/utils';
 import {
   IconChevronRight,
   IconCpu,
-  OverflowingTextWithTooltip,
   ThinkingOrbitLoaderIcon,
-  TooltipDelay,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip, TooltipDelay } from 'twenty-ui/surfaces';
 import { JsonTree } from 'twenty-ui/json-visualizer';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { useContext, useState } from 'react';
 
-import { IconChevronDown, IconChevronUp } from 'twenty-ui/display';
+import { IconChevronDown, IconChevronUp } from 'twenty-ui/icon';
 import { JsonTree } from 'twenty-ui/json-visualizer';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/ai/components/internal/AgentChatFilePreview.tsx

@@ -10,8 +10,8 @@ import { t } from '@lingui/core/macro';
 import { useCallback, useContext } from 'react';
 import { type ExtendedFileUIPart } from 'twenty-shared/ai';
 import { isDefined } from 'twenty-shared/utils';
-import { AvatarOrIcon, Chip, ChipVariant } from 'twenty-ui/components';
-import { type IconComponent, IconX } from 'twenty-ui/display';
+import { AvatarOrIcon, Chip, ChipVariant } from 'twenty-ui/data-display';
+import { type IconComponent, IconX } from 'twenty-ui/icon';
 import { Loader } from 'twenty-ui/feedback';
 import { ThemeContext } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/ai/components/internal/AgentChatFileUploadButton.tsx

@@ -4,7 +4,7 @@ import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomStat
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import React, { useRef } from 'react';
-import { IconPaperclip } from 'twenty-ui/display';
+import { IconPaperclip } from 'twenty-ui/icon';
 import { IconButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/ai/components/internal/AiChatContextUsageButton.tsx

@@ -3,7 +3,7 @@ import { t } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { HorizontalSeparator } from 'twenty-ui/display';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { ProgressBar } from 'twenty-ui/feedback';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/ai/components/internal/SendMessageButton.tsx

@@ -6,7 +6,7 @@ import { currentAiChatThreadState } from '@/ai/states/currentAiChatThreadState';
 import { dispatchBrowserEvent } from '@/browser-event/utils/dispatchBrowserEvent';
 import { useAtomComponentFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateValue';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { IconArrowUp, IconPlayerStop } from 'twenty-ui/display';
+import { IconArrowUp, IconPlayerStop } from 'twenty-ui/icon';
 import { RoundedIconButton } from 'twenty-ui/input';
 
 type SendMessageButtonProps = {

packages/twenty-front/src/modules/ai/components/suggested-prompts/default-suggested-prompts.ts

@@ -4,7 +4,7 @@ import {
   type IconComponent,
   IconPlus,
   IconSettingsAutomation,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 export type SuggestedPrompt = {
   id: string;

packages/twenty-front/src/modules/ai/constants/OutputFieldTypeOptions.ts

@@ -4,7 +4,7 @@ import {
   IllustrationIconNumbers,
   IllustrationIconText,
   IllustrationIconToggle,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 export interface OutputSchemaField {
   id: string;

packages/twenty-front/src/modules/ai/utils/getToolIcon.ts

@@ -4,7 +4,7 @@ import {
   IconMail,
   IconTool,
   IconWorld,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 const TOOL_ICON_MAPPINGS = [
   {

packages/twenty-front/src/modules/app/components/App.tsx

@@ -10,7 +10,7 @@ import { I18nProvider } from '@lingui/react';
 import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { Provider as JotaiProvider } from 'jotai';
 import { HelmetProvider } from '@dr.pogodin/react-helmet';
-import { IconsProvider } from 'twenty-ui/display';
+import { IconsProvider } from 'twenty-ui/icon';
 import { initialI18nActivate } from '~/utils/i18n/initialI18nActivate';
 
 initialI18nActivate();

packages/twenty-front/src/modules/applications/components/AppChip.tsx

@@ -1,10 +1,7 @@
 import { useApplicationChipData } from '@/applications/hooks/useApplicationChipData';
 import { styled } from '@linaria/react';
-import {
-  Avatar,
-  type AvatarSize,
-  OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
+import { Avatar, type AvatarSize } from 'twenty-ui/data-display';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 type AppChipProps = {

packages/twenty-front/src/modules/applications/components/AppConnectionHeader.tsx

@@ -1,7 +1,8 @@
 import { styled } from '@linaria/react';
 import { useContext, useState } from 'react';
 import { isNonEmptyString } from '@sniptt/guards';
-import { Avatar, IconRefresh } from 'twenty-ui/display';
+import { Avatar } from 'twenty-ui/data-display';
+import { IconRefresh } from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 type AppConnectionHeaderProps = {

packages/twenty-front/src/modules/auth/components/Logo.tsx

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { AppPath } from 'twenty-shared/types';
 import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
-import { Avatar } from 'twenty-ui/display';
+import { Avatar } from 'twenty-ui/data-display';
 import { UndecoratedLink } from 'twenty-ui/navigation';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';

packages/twenty-front/src/modules/auth/components/Title.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import React from 'react';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { AnimatedEaseIn } from 'twenty-ui/utilities';
+import { AnimatedEaseIn } from 'twenty-ui/layout';
 
 type TitleProps = React.PropsWithChildren & {
   animate?: boolean;

packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx

@@ -8,7 +8,7 @@ import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
 import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
 import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspace';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
-import { ModalContent } from 'twenty-ui/layout';
+import { ModalContent } from 'twenty-ui/surfaces';
 import { useLingui } from '@lingui/react/macro';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';

packages/twenty-front/src/modules/auth/components/__stories__/VerifyEmailEffect.stories.tsx

@@ -5,7 +5,7 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
 // Mock component that just renders the error state of VerifyEmailEffect directly
 // (since normal VerifyEmailEffect has async logic that's hard to test in Storybook)
 import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
-import { ModalContent } from 'twenty-ui/layout';
+import { ModalContent } from 'twenty-ui/surfaces';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 const VerifyEmailEffectErrorState = ({ email = 'user@example.com' }) => {

packages/twenty-front/src/modules/auth/constants/AuthModalConfig.ts

@@ -1,4 +1,4 @@
-import { type ModalOverlay, type ModalSize } from 'twenty-ui/layout';
+import { type ModalOverlay, type ModalSize } from 'twenty-ui/surfaces';
 import { AppPath } from 'twenty-shared/types';
 
 type AuthModalConfigType = {

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

@@ -10,15 +10,10 @@ import {
 import { OnboardingModalCircularIcon } from '@/onboarding/components/OnboardingModalCircularIcon';
 import { t } from '@lingui/core/macro';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
-import {
-  IconGmail,
-  IconMail,
-  IconMailX,
-  IconMicrosoft,
-} from 'twenty-ui/display';
+import { IconGmail, IconMail, IconMailX, IconMicrosoft } from 'twenty-ui/icon';
 import { MainButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
-import { AnimatedEaseIn } from 'twenty-ui/utilities';
+import { AnimatedEaseIn } from 'twenty-ui/layout';
 
 const StyledContainer = styled.div`
   align-items: center;

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

@@ -26,12 +26,9 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useContext } from 'react';
-import {
-  Avatar,
-  HorizontalSeparator,
-  IconChevronRight,
-  IconPlus,
-} from 'twenty-ui/display';
+import { Avatar } from 'twenty-ui/data-display';
+import { IconChevronRight, IconPlus } from 'twenty-ui/icon';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import {
   type AvailableWorkspace,

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

@@ -12,7 +12,7 @@ import { workspaceAuthBypassProvidersState } from '@/workspace/states/workspaceA
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import { Trans } from '@lingui/react/macro';
 import { FormProvider } from 'react-hook-form';
-import { HorizontalSeparator } from 'twenty-ui/display';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { ClickToActionLink } from 'twenty-ui/navigation';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 

packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
-import { ModalContent } from 'twenty-ui/layout';
+import { ModalContent } from 'twenty-ui/surfaces';
 import { ComponentDecorator } from 'twenty-ui/testing';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 

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

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
-import { Pill } from 'twenty-ui/components';
+import { Pill } from 'twenty-ui/data-display';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledPillContainer = styled.span`

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

@@ -6,7 +6,7 @@ import { useLingui } from '@lingui/react/macro';
 import { motion } from 'framer-motion';
 import { useContext } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import { StyledText } from 'twenty-ui/display';
+import { StyledText } from 'twenty-ui/typography';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledFullWidthMotionDiv = styled(motion.div)`

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

@@ -7,7 +7,7 @@ import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/gue
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import React from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { HorizontalSeparator } from 'twenty-ui/display';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { MainButton } from 'twenty-ui/input';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 

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

@@ -9,7 +9,7 @@ import { styled } from '@linaria/react';
 import { Trans, useLingui } from '@lingui/react/macro';
 import QRCode from 'react-qr-code';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
-import { IconCopy } from 'twenty-ui/display';
+import { IconCopy } from 'twenty-ui/icon';
 import { Loader } from 'twenty-ui/feedback';
 import { MainButton } from 'twenty-ui/input';
 import { useContext } from 'react';

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

@@ -9,7 +9,8 @@ import { AuthenticatedMethod } from '@/auth/types/AuthenticatedMethod.enum';
 import { type SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
 import { useLingui } from '@lingui/react/macro';
 import { memo, useContext } from 'react';
-import { HorizontalSeparator, IconGoogle } from 'twenty-ui/display';
+import { IconGoogle } from 'twenty-ui/icon';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { MainButton } from 'twenty-ui/input';
 import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';

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

@@ -9,7 +9,8 @@ import { AuthenticatedMethod } from '@/auth/types/AuthenticatedMethod.enum';
 import { type SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { HorizontalSeparator, IconMicrosoft } from 'twenty-ui/display';
+import { IconMicrosoft } from 'twenty-ui/icon';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { MainButton } from 'twenty-ui/input';
 import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';