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/settings/accounts/components/SettingsAccountsBlocklistSection.tsx

@@ -10,7 +10,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { useLingui } from '@lingui/react/macro';
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { H2Title } from 'twenty-ui/display';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 
 export const SettingsAccountsBlocklistSection = () => {

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistTableRow.tsx

@@ -3,7 +3,8 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { formatToHumanReadableDate } from '~/utils/date-utils';
 import { IconButton } from 'twenty-ui/input';
-import { IconX, OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { IconX } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 
 type SettingsAccountsBlocklistTableRowProps = {
   blocklistItem: BlocklistItem;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx

@@ -6,8 +6,9 @@ import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsO
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { Section } from '@react-email/components';
-import { H2Title, IconUserPlus } from 'twenty-ui/display';
-import { Card } from 'twenty-ui/layout';
+import { IconUserPlus } from 'twenty-ui/icon';
+import { H2Title } from 'twenty-ui/typography';
+import { Card } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type CalendarChannelVisibility } from '~/generated/graphql';
 

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsGeneral.tsx

@@ -8,7 +8,7 @@ import { t } from '@lingui/core/macro';
 import { Section } from '@react-email/components';
 import { addMinutes, endOfDay, min, startOfDay } from 'date-fns';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { H2Title } from 'twenty-ui/display';
+import { H2Title } from 'twenty-ui/typography';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import {
   CalendarChannelVisibility,

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx

@@ -7,7 +7,7 @@ import { styled } from '@linaria/react';
 import { SettingsPath } from 'twenty-shared/types';
 
 import { useLingui } from '@lingui/react/macro';
-import { IconPlus } from 'twenty-ui/display';
+import { IconPlus } from 'twenty-ui/icon';
 
 import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer.tsx

@@ -5,7 +5,7 @@ import { computeSyncStatus } from '@/settings/accounts/utils/computeSyncStatus';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { Status } from 'twenty-ui/display';
+import { Status } from 'twenty-ui/data-display';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledRowRightContainer = styled.div`

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectionForm.tsx

@@ -9,7 +9,7 @@ import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { SettingsAccountsPasswordController } from '@/settings/accounts/components/SettingsAccountsPasswordController';
 import { type ConnectionFormData } from '@/settings/accounts/hooks/useImapSmtpCaldavConnectionForm';
 import { type AccountType } from 'twenty-shared/constants';
-import { H2Title } from 'twenty-ui/display';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx

@@ -11,7 +11,7 @@ import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
 import { ConnectedAccountProvider, SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { IconAt, IconGoogle, IconMicrosoft } from 'twenty-ui/display';
+import { IconAt, IconGoogle, IconMicrosoft } from 'twenty-ui/icon';
 import { UndecoratedLink } from 'twenty-ui/navigation';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx

@@ -7,8 +7,10 @@ import {
   MessageChannelType,
   type MessageFolderImportPolicy,
 } from 'twenty-shared/types';
-import { H2Title, IconBriefcase, IconUsers } from 'twenty-ui/display';
-import { Card, Section } from 'twenty-ui/layout';
+import { IconBriefcase, IconUsers } from 'twenty-ui/icon';
+import { H2Title } from 'twenty-ui/typography';
+import { Section } from 'twenty-ui/layout';
+import { Card } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { type MessageChannel } from '@/accounts/types/MessageChannel';

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsNewEmailGroupChannel.tsx

@@ -4,7 +4,7 @@ import { z } from 'zod';
 
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { H2Title } from 'twenty-ui/display';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 
 import { useCreateEmailGroupChannel } from '@/settings/accounts/hooks/useCreateEmailGroupChannel';

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx

@@ -3,7 +3,7 @@ import { type MessageDescriptor } from '@lingui/core';
 import { Trans } from '@lingui/react';
 import { type ReactNode } from 'react';
 import { Radio } from 'twenty-ui/input';
-import { Card, CardContent } from 'twenty-ui/layout';
+import { Card, CardContent } from 'twenty-ui/surfaces';
 import { isDefined } from 'twenty-shared/utils';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx

@@ -23,7 +23,7 @@ import {
   IconPlayerPlay,
   IconRefresh,
   IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSettingsSection.tsx

@@ -5,7 +5,8 @@ import { SettingsCard } from '@/settings/components/SettingsCard';
 import { useLingui } from '@lingui/react/macro';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { H2Title, IconCalendarEvent, IconMailCog } from 'twenty-ui/display';
+import { IconCalendarEvent, IconMailCog } from 'twenty-ui/icon';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 import { UndecoratedLink } from 'twenty-ui/navigation';
 import {

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsToggleSettingCard.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { Card, CardContent } from 'twenty-ui/layout';
+import { Card, CardContent } from 'twenty-ui/surfaces';
 import { Toggle } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/accounts/components/SettingsConnectedAccountIcon.tsx

@@ -10,7 +10,7 @@ import {
   IconMail,
   IconMicrosoft,
   IconSend,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { useContext } from 'react';
 import { ThemeContext } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/accounts/components/SettingsNewAccountSection.tsx

@@ -1,6 +1,6 @@
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
 import { t } from '@lingui/core/macro';
-import { H2Title } from 'twenty-ui/display';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 
 export const SettingsNewAccountSection = () => {

packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsAccountsMessageFolderIcon.tsx

@@ -4,7 +4,7 @@ import {
   IconFolderRoot,
   IconInbox,
   IconSend,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { useContext } from 'react';
 import { ThemeContext } from 'twenty-ui/theme-constants';
 type SettingsAccountsMessageFolderIconProps = {

packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsAccountsMessageFoldersCard.tsx

@@ -16,7 +16,7 @@ import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useMemo, useState } from 'react';
-import { Label } from 'twenty-ui/display';
+import { Label } from 'twenty-ui/typography';
 import { Checkbox, CheckboxSize } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersEmptyStateCard.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { IconFolder } from 'twenty-ui/display';
+import { IconFolder } from 'twenty-ui/icon';
 import { Section } from 'twenty-ui/layout';
 import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersTreeItem.tsx

@@ -8,7 +8,7 @@ import { isFolderTreePartiallySelected } from '@/settings/accounts/components/me
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
-import { IconChevronDown, IconChevronUp } from 'twenty-ui/display';
+import { IconChevronDown, IconChevronUp } from 'twenty-ui/icon';
 import { Checkbox, CheckboxSize } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/admin-panel/ai/components/ModelsDevProviderLogo.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { type IconComponentProps } from 'twenty-ui/display';
+import { type IconComponentProps } from 'twenty-ui/icon';
 import { ThemeContext } from 'twenty-ui/theme-constants';
 
 type ModelsDevProviderLogoProps = {

packages/twenty-front/src/modules/settings/admin-panel/ai/components/SettingsAdminAI.tsx

@@ -4,8 +4,10 @@ import { useMutation, useQuery } from '@apollo/client/react';
 import { t } from '@lingui/core/macro';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { H2Title, IconBolt, IconRobot } from 'twenty-ui/display';
-import { Card, Section } from 'twenty-ui/layout';
+import { IconBolt, IconRobot } from 'twenty-ui/icon';
+import { H2Title } from 'twenty-ui/typography';
+import { Section } from 'twenty-ui/layout';
+import { Card } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';

packages/twenty-front/src/modules/settings/admin-panel/ai/components/SettingsAdminAiProviderListCard.tsx

@@ -4,7 +4,8 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { IconPlug, Status } from 'twenty-ui/display';
+import { Status } from 'twenty-ui/data-display';
+import { IconPlug } from 'twenty-ui/icon';
 
 import { type AiProviderItem } from '@/settings/admin-panel/ai/types/AiProviderItem';
 import { getProviderIcon } from '@/settings/admin-panel/ai/utils/getProviderIcon';

packages/twenty-front/src/modules/settings/admin-panel/ai/constants/ModelIconConfig.ts

@@ -6,7 +6,7 @@ import {
   IconProviderOpenai,
   IconRobot,
   type IconComponent,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 import { ModelFamily } from '~/generated-admin/graphql';
 

packages/twenty-front/src/modules/settings/admin-panel/ai/constants/ProviderConfig.ts

@@ -6,7 +6,7 @@ import {
   IconProviderOpenai,
   IconRobot,
   type IconComponent,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 export const PROVIDER_ICON_CONFIG: Record<string, { Icon: IconComponent }> = {
   openai: { Icon: IconProviderOpenai },

packages/twenty-front/src/modules/settings/admin-panel/ai/utils/getModelsDevLogoIcon.tsx

@@ -1,4 +1,4 @@
-import { type IconComponent, type IconComponentProps } from 'twenty-ui/display';
+import { type IconComponent, type IconComponentProps } from 'twenty-ui/icon';
 
 import { ModelsDevProviderLogo } from '@/settings/admin-panel/ai/components/ModelsDevProviderLogo';
 

packages/twenty-front/src/modules/settings/admin-panel/ai/utils/getProviderIcon.ts

@@ -1,4 +1,4 @@
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui/icon';
 
 import { PROVIDER_ICON_CONFIG } from '@/settings/admin-panel/ai/constants/ProviderConfig';
 import { isKnownProviderId } from '@/settings/admin-panel/ai/utils/isKnownProviderId';

packages/twenty-front/src/modules/settings/admin-panel/apps/components/SettingsAdminApps.tsx

@@ -14,12 +14,13 @@ import { t } from '@lingui/core/macro';
 import { type ReactNode, useContext, useState } from 'react';
 import { assertUnreachable, getSettingsPath } from 'twenty-shared/utils';
 import { SettingsPath } from 'twenty-shared/types';
-import { H2Title, IconChevronRight, IconPinned } from 'twenty-ui/display';
+import { IconChevronRight, IconPinned } from 'twenty-ui/icon';
+import { H2Title } from 'twenty-ui/typography';
 import { SearchInput } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
 import { MenuItemToggle } from 'twenty-ui/navigation';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
-import { Tag } from 'twenty-ui/components';
+import { Tag } from 'twenty-ui/data-display';
 import {
   type ApplicationRegistrationFragmentFragment,
   ApplicationRegistrationSourceType,

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminChatThreadMessageList.tsx

@@ -4,7 +4,7 @@ import { styled } from '@linaria/react';
 import { LazyMarkdownRenderer } from '@/ai/components/LazyMarkdownRenderer';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { Card } from 'twenty-ui/layout';
+import { Card } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import {
   AgentMessageRole,

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminContent.tsx

@@ -13,7 +13,7 @@ import {
   IconSettings2,
   IconSparkles,
   IconVariable,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 export const SettingsAdminContent = () => {
   const currentUser = useAtomStateValue(currentUserState);

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx

@@ -19,12 +19,10 @@ import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
 
 import { currentUserState } from '@/auth/states/currentUserState';
-import {
-  Avatar,
-  H2Title,
-  IconChevronRight,
-  OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
+import { Avatar } from 'twenty-ui/data-display';
+import { IconChevronRight } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import {

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminServerAdminAccess.tsx

@@ -14,7 +14,8 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { OTPInput } from 'input-otp';
 import { useState } from 'react';
-import { IconDotsVertical, Status } from 'twenty-ui/display';
+import { Status } from 'twenty-ui/data-display';
+import { IconDotsVertical } from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminServerAdmins.tsx

@@ -11,11 +11,9 @@ import { t } from '@lingui/core/macro';
 import { useContext } from 'react';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import {
-  H2Title,
-  IconChevronRight,
-  OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
+import { IconChevronRight } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { GetServerAdminsDocument } from '~/generated-admin/graphql';

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminVersionContainer.tsx

@@ -2,7 +2,7 @@ import { SettingsTableCard } from '@/settings/components/SettingsTableCard';
 import { useApolloAdminClient } from '@/settings/admin-panel/apollo/hooks/useApolloAdminClient';
 import { SettingsAdminVersionDisplay } from '@/settings/admin-panel/components/SettingsAdminVersionDisplay';
 import { t } from '@lingui/core/macro';
-import { IconCircleDot, IconStatusChange } from 'twenty-ui/display';
+import { IconCircleDot, IconStatusChange } from 'twenty-ui/icon';
 import { useQuery } from '@apollo/client/react';
 import { GetVersionInfoDocument } from '~/generated-admin/graphql';
 

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceBillingContent.tsx

@@ -3,9 +3,8 @@ import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { Tag } from 'twenty-ui/components';
+import { Tag } from 'twenty-ui/data-display';
 import {
-  H2Title,
   IconBox,
   IconCalendarEvent,
   IconCalendarRepeat,
@@ -18,7 +17,8 @@ import {
   IconStatusChange,
   IconTag,
   IconUsers,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 import { type ThemeColor } from 'twenty-ui/theme';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminWorkspaceContent.tsx

@@ -17,18 +17,17 @@ import {
   isDefined,
 } from 'twenty-shared/utils';
 import { type GetUpgradeStatusQuery } from '~/generated-admin/graphql';
-import { AvatarOrIcon, LinkChip } from 'twenty-ui/components';
+import { AvatarOrIcon, LinkChip, Status } from 'twenty-ui/data-display';
 import {
-  H2Title,
   IconCalendar,
   IconHome,
   IconId,
   IconLink,
   IconStatusChange,
   IconUser,
-  OverflowingTextWithTooltip,
-  Status,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableFilterDropdown.tsx

@@ -4,7 +4,7 @@ import { type ConfigVariableSourceFilter } from '@/settings/admin-panel/config-v
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
-import { IconSettings } from 'twenty-ui/display';
+import { IconSettings } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 import { ConfigVariableOptionsDropdownContent } from './ConfigVariableOptionsDropdownContent';
 

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableOptionsDropdownContent.tsx

@@ -10,7 +10,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { t } from '@lingui/core/macro';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
-import { IconChevronLeft, IconEye, IconEyeOff } from 'twenty-ui/display';
+import { IconChevronLeft, IconEye, IconEyeOff } from 'twenty-ui/icon';
 import { MenuItem, MenuItemSelectTag } from 'twenty-ui/navigation';
 import { useContext } from 'react';
 import { ThemeContext } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/SettingsAdminConfigVariables.tsx

@@ -10,7 +10,7 @@ import { showHiddenGroupVariablesState } from '@/settings/admin-panel/config-var
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useMemo, useState } from 'react';
-import { H2Title } from 'twenty-ui/display';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 import { useQuery } from '@apollo/client/react';
 import {

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthAccountSyncCountersTable.tsx

@@ -1,7 +1,7 @@
 import { SettingsTableCard } from '@/settings/components/SettingsTableCard';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
-import { H2Title } from 'twenty-ui/display';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatus.tsx

@@ -7,7 +7,7 @@ import { SettingsAdminSigningKeysTable } from '@/settings/admin-panel/signing-ke
 import { SettingsSectionSkeletonLoader } from '@/settings/components/SettingsSectionSkeletonLoader';
 import { useQuery } from '@apollo/client/react';
 import { t } from '@lingui/core/macro';
-import { H2Title } from 'twenty-ui/display';
+import { H2Title } from 'twenty-ui/typography';
 import { Section } from 'twenty-ui/layout';
 import {
   GetInstanceAndAllWorkspacesUpgradeStatusDocument,

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatusListCard.tsx

@@ -8,7 +8,7 @@ import {
   IconServer2,
   IconTool,
   IconUserCircle,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { useContext } from 'react';
 import { ThemeContext } from 'twenty-ui/theme-constants';
 import {

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminHealthStatusRightContainer.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { Status } from 'twenty-ui/display';
+import { Status } from 'twenty-ui/data-display';
 import { AdminPanelHealthServiceStatus } from '~/generated-admin/graphql';
 
 export const SettingsAdminHealthStatusRightContainer = ({

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminJobStateBadge.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { Tag, type TagColor } from 'twenty-ui/components';
+import { Tag, type TagColor } from 'twenty-ui/data-display';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { JobState } from '~/generated-admin/graphql';
 

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminQueueJobRowDropdownMenu.tsx

@@ -3,7 +3,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { t } from '@lingui/core/macro';
-import { IconDotsVertical, IconRefresh, IconTrash } from 'twenty-ui/display';
+import { IconDotsVertical, IconRefresh, IconTrash } from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
 import { JobState } from '~/generated-admin/graphql';

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminQueueJobsTable.tsx

@@ -17,7 +17,7 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { styled } from '@linaria/react';
 import { plural, t } from '@lingui/core/macro';
 import { useState } from 'react';
-import { IconRefresh, IconTrash } from 'twenty-ui/display';
+import { IconRefresh, IconTrash } from 'twenty-ui/icon';
 import { Button, Checkbox } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useQuery } from '@apollo/client/react';

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminUpgradeStatusListCard.tsx

@@ -8,7 +8,7 @@ import {
   IconProgressCheck,
   IconStatusChange,
   type IconComponent,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { type GetInstanceAndAllWorkspacesUpgradeStatusQuery } from '~/generated-admin/graphql';
 
 type InstanceAndAllWorkspacesUpgradeStatus =

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminUpgradeStatusRightContainer.tsx

@@ -3,7 +3,7 @@ import { getUpgradeHealthStatusBadge } from '@/settings/admin-panel/utils/getUpg
 import { getWorkspacesUpgradeHealth } from '@/settings/admin-panel/utils/getWorkspacesUpgradeHealth';
 import { getWorkspacesUpgradeHealthText } from '@/settings/admin-panel/utils/getWorkspacesUpgradeHealthText';
 import { t } from '@lingui/core/macro';
-import { Status } from 'twenty-ui/display';
+import { Status } from 'twenty-ui/data-display';
 
 export const SettingsAdminUpgradeStatusRightContainer = ({
   item,

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerQueueMetricsSection.tsx

@@ -6,7 +6,8 @@ import { t } from '@lingui/core/macro';
 import { lazy, Suspense, useState } from 'react';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { H2Title, IconList } from 'twenty-ui/display';
+import { IconList } from 'twenty-ui/icon';
+import { H2Title } from 'twenty-ui/typography';
 import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkspacesByHealthAccordion.tsx

@@ -4,8 +4,9 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import { IconChevronDown, IconChevronRight } from 'twenty-ui/display';
-import { AnimatedExpandableContainer, Card } from 'twenty-ui/layout';
+import { IconChevronDown, IconChevronRight } from 'twenty-ui/icon';
+import { AnimatedExpandableContainer } from 'twenty-ui/layout';
+import { Card } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledAccordionHeaderButton = styled.button`

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkspacesStatusSummaryCard.tsx

@@ -6,13 +6,13 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { UserContext } from '@/users/contexts/UserContext';
 import { t } from '@lingui/core/macro';
 import { useContext } from 'react';
+import { Status } from 'twenty-ui/data-display';
 import {
   IconAlertTriangle,
   IconClock,
   IconStatusChange,
   IconX,
-  Status,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { formatDateTimeString } from '~/utils/string/formatDateTimeString';
 

packages/twenty-front/src/modules/settings/admin-panel/health-status/maintenance-mode/components/SettingsAdminMaintenanceMode.tsx

@@ -4,8 +4,11 @@ import { t } from '@lingui/core/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { H2Title, IconLink, IconTool, Status } from 'twenty-ui/display';
-import { Card, CardContent, Section } from 'twenty-ui/layout';
+import { Status } from 'twenty-ui/data-display';
+import { IconLink, IconTool } from 'twenty-ui/icon';
+import { H2Title } from 'twenty-ui/typography';
+import { Section } from 'twenty-ui/layout';
+import { Card, CardContent } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { maintenanceModeState } from '@/client-config/states/maintenanceModeState';

packages/twenty-front/src/modules/settings/admin-panel/signing-keys/components/SettingsAdminSigningKeysTable.tsx

@@ -12,8 +12,9 @@ import { useQuery } from '@apollo/client/react';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { Tag, type TagColor } from 'twenty-ui/components';
-import { IconCopy, OverflowingTextWithTooltip } from 'twenty-ui/display';
+import { Tag, type TagColor } from 'twenty-ui/data-display';
+import { IconCopy } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import {

packages/twenty-front/src/modules/settings/ai/components/SettingsAiModelHoverCard.tsx

@@ -1,7 +1,12 @@
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useContext } from 'react';
-import { Chip, ChipAccent, ChipSize, ChipVariant } from 'twenty-ui/components';
+import {
+  Chip,
+  ChipAccent,
+  ChipSize,
+  ChipVariant,
+} from 'twenty-ui/data-display';
 import {
   IconBolt,
   IconBuildingSkyscraper,
@@ -10,7 +15,7 @@ import {
   IconUsers,
   IconWindow,
   type IconComponent,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { type AiModelSummary } from '@/settings/ai/types/AiModelSummary';

packages/twenty-front/src/modules/settings/ai/components/SettingsAiModelsTable.tsx

@@ -4,7 +4,8 @@ import { css } from '@linaria/core';
 import { styled } from '@linaria/react';
 import { Trans } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { AppTooltip, IconTrash, TooltipDelay } from 'twenty-ui/display';
+import { IconTrash } from 'twenty-ui/icon';
+import { AppTooltip, TooltipDelay } from 'twenty-ui/surfaces';
 import { Checkbox, IconButton } from 'twenty-ui/input';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/ai/utils/getModelIcon.ts

@@ -1,4 +1,4 @@
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui/icon';
 
 import { MODEL_ICON_CONFIG } from '@/settings/admin-panel/ai/constants/ModelIconConfig';
 import { getProviderIcon } from '@/settings/admin-panel/ai/utils/getProviderIcon';

packages/twenty-front/src/modules/settings/applications/components/SettingsApplicationAboutSidebar.tsx

@@ -3,7 +3,7 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { type ReactNode } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { Tag } from 'twenty-ui/components';
+import { Tag } from 'twenty-ui/data-display';
 import {
   IconAlertTriangle,
   IconBrandNpm,
@@ -11,7 +11,7 @@ import {
   IconLink,
   IconMail,
   IconWorld,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 export type ContentEntry = {

packages/twenty-front/src/modules/settings/billing/components/SettingsBillingContent.tsx

@@ -10,7 +10,8 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import { useQuery } from '@apollo/client/react';
 import { isDefined } from 'twenty-shared/utils';
-import { H2Title, IconCircleX, IconCreditCard } from 'twenty-ui/display';
+import { IconCircleX, IconCreditCard } from 'twenty-ui/icon';
+import { H2Title } from 'twenty-ui/typography';
 import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
 import {

packages/twenty-front/src/modules/settings/billing/components/SettingsBillingCreditsSection.tsx

@@ -15,15 +15,11 @@ import { useContext } from 'react';
 import { DOCUMENTATION_PATHS } from 'twenty-shared/constants';
 import { SettingsPath } from 'twenty-shared/types';
 import { getSettingsPath } from 'twenty-shared/utils';
-import {
-  H2Title,
-  HorizontalSeparator,
-  IconChartBar,
-  IconExternalLink,
-} from 'twenty-ui/display';
+import { IconChartBar, IconExternalLink } from 'twenty-ui/icon';
+import { HorizontalSeparator, Section } from 'twenty-ui/layout';
+import { H2Title } from 'twenty-ui/typography';
 import { ProgressBar } from 'twenty-ui/feedback';
 import { Button } from 'twenty-ui/input';
-import { Section } from 'twenty-ui/layout';
 import { UndecoratedLink } from 'twenty-ui/navigation';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { SubscriptionStatus } from '~/generated-metadata/graphql';

packages/twenty-front/src/modules/settings/billing/components/SettingsBillingSubscriptionInfo.tsx

@@ -34,7 +34,6 @@ import { useLingui } from '@lingui/react/macro';
 import { useMemo, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import {
-  H2Title,
   IconArrowDown,
   IconArrowUp,
   IconCalendarEvent,
@@ -43,7 +42,8 @@ import {
   IconCoins,
   IconTag,
   IconUsers,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
+import { H2Title } from 'twenty-ui/typography';
 import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/settings/billing/components/SubscriptionBenefit.tsx

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

packages/twenty-front/src/modules/settings/billing/components/internal/PlansTags.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tag } from 'twenty-ui/components';
+import { Tag } from 'twenty-ui/data-display';
 import { t } from '@lingui/core/macro';
 import { BillingPlanKey } from '~/generated-metadata/graphql';
 import { styled } from '@linaria/react';

packages/twenty-front/src/modules/settings/billing/components/internal/ResourceCreditPriceSelector.tsx

@@ -13,7 +13,7 @@ import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { H2Title } from 'twenty-ui/display';
+import { H2Title } from 'twenty-ui/typography';
 import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import {

packages/twenty-front/src/modules/settings/billing/components/internal/SettingsBillingLabelValueItem.tsx

@@ -1,6 +1,7 @@
 import { styled } from '@linaria/react';
 import { type ReactNode } from 'react';
-import { AppTooltip, IconInfoCircle, TooltipDelay } from 'twenty-ui/display';
+import { IconInfoCircle } from 'twenty-ui/icon';
+import { AppTooltip, TooltipDelay } from 'twenty-ui/surfaces';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 type SettingsBillingLabelValueItemProps = {

packages/twenty-front/src/modules/settings/billing/components/internal/SubscriptionInfoRowContainer.tsx

@@ -1,4 +1,4 @@
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui/icon';
 import React, { useContext } from 'react';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';

packages/twenty-front/src/modules/settings/components/AdvancedSettingsContentWrapperWithDot.tsx

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

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveAndCancelButtons.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import type { IconComponent } from 'twenty-ui/display';
+import type { IconComponent } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { CancelButton } from './CancelButton';

packages/twenty-front/src/modules/settings/components/SaveAndCancelButtons/SaveButton.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/core/macro';
-import { type IconComponent, IconDeviceFloppy } from 'twenty-ui/display';
+import { type IconComponent, IconDeviceFloppy } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 
 type SaveButtonProps = {

packages/twenty-front/src/modules/settings/components/SettingsCard.tsx

@@ -2,9 +2,9 @@ import { styled } from '@linaria/react';
 
 import { type ReactNode, useContext } from 'react';
 import { t } from '@lingui/core/macro';
-import { Card, CardContent } from 'twenty-ui/layout';
-import { IconChevronRight } from 'twenty-ui/display';
-import { Pill } from 'twenty-ui/components';
+import { Card, CardContent } from 'twenty-ui/surfaces';
+import { IconChevronRight } from 'twenty-ui/icon';
+import { Pill } from 'twenty-ui/data-display';
 import { isDefined } from 'twenty-shared/utils';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx

@@ -1,6 +1,6 @@
 import { SettingsTextInput } from '@/ui/input/components/SettingsTextInput';
 import { styled } from '@linaria/react';
-import { IconMinus, IconPlus } from 'twenty-ui/display';
+import { IconMinus, IconPlus } from 'twenty-ui/icon';
 import { IconButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { castAsNumberOrNull } from '~/utils/cast-as-number-or-null';

packages/twenty-front/src/modules/settings/components/SettingsCustomizeVideoModal.tsx

@@ -3,7 +3,7 @@ import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { TabList } from '@/ui/layout/tab-list/components/TabList';
 import { styled } from '@linaria/react';
 import { useState } from 'react';
-import { type IconComponent, IconX } from 'twenty-ui/display';
+import { type IconComponent, IconX } from 'twenty-ui/icon';
 import { IconButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/components/SettingsDatabaseEventsForm.tsx

@@ -4,7 +4,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconBox, IconNorthStar, IconPlus, IconTrash } from 'twenty-ui/display';
+import { IconBox, IconNorthStar, IconPlus, IconTrash } from 'twenty-ui/icon';
 import { IconButton, type SelectOption } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/components/SettingsDatePickerInput.tsx

@@ -19,7 +19,7 @@ import { useUserTimezone } from '@/ui/input/components/internal/date/hooks/useUs
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from 'twenty-shared/utils';
-import { IconCalendar } from 'twenty-ui/display';
+import { IconCalendar } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const SETTINGS_DATE_PICKER_CLICK_OUTSIDE_ID = 'settings-date-picker-floating';

packages/twenty-front/src/modules/settings/components/SettingsDiscoveryHeroCard.tsx

@@ -8,7 +8,7 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { type ReactNode, useContext } from 'react';
-import { Card } from 'twenty-ui/layout';
+import { Card } from 'twenty-ui/surfaces';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
 

packages/twenty-front/src/modules/settings/components/SettingsDnsRecordsTable.tsx

@@ -5,7 +5,8 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { capitalize, isDefined } from 'twenty-shared/utils';
-import { OverflowingTextWithTooltip, Status } from 'twenty-ui/display';
+import { Status } from 'twenty-ui/data-display';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { type ThemeColor } from 'twenty-ui/theme';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 

packages/twenty-front/src/modules/settings/components/SettingsEnterpriseFeatureGateCard.tsx

@@ -2,9 +2,9 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { SettingsOptionCardContentButton } from '@/settings/components/SettingsOptions/SettingsOptionCardContentButton';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { SettingsPath } from 'twenty-shared/types';
-import { IconArrowUp, IconLock } from 'twenty-ui/display';
+import { IconArrowUp, IconLock } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
-import { Card } from 'twenty-ui/layout';
+import { Card } from 'twenty-ui/surfaces';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 
 export const SettingsEnterpriseFeatureGateCard = ({

packages/twenty-front/src/modules/settings/components/SettingsItemTypeTag.tsx

@@ -1,8 +1,7 @@
 import { t } from '@lingui/core/macro';
 
 import { AppChip } from '@/applications/components/AppChip';
-import { Avatar } from 'twenty-ui/display';
-import { Chip, ChipAccent, ChipVariant } from 'twenty-ui/components';
+import { Avatar, Chip, ChipAccent, ChipVariant } from 'twenty-ui/data-display';
 import { isDefined } from 'twenty-shared/utils';
 
 type SettingsItemTypeTagProps = {

packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx

@@ -3,8 +3,8 @@ import { type ComponentType, useContext } from 'react';
 
 import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
 
-import { type IconComponent, IconPlus } from 'twenty-ui/display';
-import { Card, CardFooter } from 'twenty-ui/layout';
+import { type IconComponent, IconPlus } from 'twenty-ui/icon';
+import { Card, CardFooter } from 'twenty-ui/surfaces';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { SettingsListItemCardContent } from './SettingsListItemCardContent';
 

packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx

@@ -2,8 +2,8 @@ import { styled } from '@linaria/react';
 import { type ReactNode, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronRight, type IconComponent } from 'twenty-ui/display';
-import { CardContent } from 'twenty-ui/layout';
+import { IconChevronRight, type IconComponent } from 'twenty-ui/icon';
+import { CardContent } from 'twenty-ui/surfaces';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledRowContainer = styled.div`

packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.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 StyledCardContainer = styled.div`

packages/twenty-front/src/modules/settings/components/SettingsMorphRelationMultiSelect.tsx

@@ -22,7 +22,7 @@ import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { isNonEmptyString } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';
-import { IconBox, type IconComponent } from 'twenty-ui/display';
+import { IconBox, type IconComponent } from 'twenty-ui/icon';
 import { MenuItem, MenuItemMultiSelect } from 'twenty-ui/navigation';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentButton.tsx

@@ -7,10 +7,8 @@ import {
 } from '@/settings/components/SettingsOptions/SettingsCardContentBase';
 import { SettingsOptionIconCustomizer } from '@/settings/components/SettingsOptions/SettingsOptionIconCustomizer';
 import { styled } from '@linaria/react';
-import {
-  type IconComponent,
-  OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { isDefined } from 'twenty-shared/utils';
 
 type SettingsOptionCardContentButtonProps = {

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentCounter.tsx

@@ -7,10 +7,8 @@ import {
   StyledSettingsCardTitle,
 } from '@/settings/components/SettingsOptions/SettingsCardContentBase';
 import { SettingsOptionIconCustomizer } from '@/settings/components/SettingsOptions/SettingsOptionIconCustomizer';
-import {
-  type IconComponent,
-  OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 
 type SettingsOptionCardContentCounterProps = {
   Icon?: IconComponent;

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentSelect.tsx

@@ -8,10 +8,8 @@ import {
 import { Separator } from '@/settings/components/Separator';
 import { SettingsOptionIconCustomizer } from '@/settings/components/SettingsOptions/SettingsOptionIconCustomizer';
 import { styled } from '@linaria/react';
-import {
-  type IconComponent,
-  OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 
 type SettingsOptionCardContentSelectProps = {
   Icon?: IconComponent;

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionCardContentToggle.tsx

@@ -8,10 +8,8 @@ import {
 import { SettingsOptionIconCustomizer } from '@/settings/components/SettingsOptions/SettingsOptionIconCustomizer';
 import { styled } from '@linaria/react';
 import { useContext, useId } from 'react';
-import {
-  type IconComponent,
-  OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { Toggle } from 'twenty-ui/input';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/components/SettingsOptions/SettingsOptionIconCustomizer.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui/icon';
 import { ThemeContext } from 'twenty-ui/theme-constants';
 
 type SettingsOptionIconCustomizerProps = {

packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentCounter.stories.tsx

@@ -2,7 +2,7 @@ import { SettingsOptionCardContentCounter } from '@/settings/components/Settings
 import { styled } from '@linaria/react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
-import { IconUsers } from 'twenty-ui/display';
+import { IconUsers } from 'twenty-ui/icon';
 import { ComponentDecorator } from 'twenty-ui/testing';
 
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentSelect.stories.tsx

@@ -11,7 +11,7 @@ import {
   IconNotes,
   IconTable,
   IconUsers,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { ComponentDecorator } from 'twenty-ui/testing';
 
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/settings/components/SettingsOptions/__stories__/SettingsOptionCardContentToggle.stories.tsx

@@ -2,7 +2,7 @@ import { SettingsOptionCardContentToggle } from '@/settings/components/SettingsO
 import { styled } from '@linaria/react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
-import { IconBell, IconLock, IconRobot, IconUsers } from 'twenty-ui/display';
+import { IconBell, IconLock, IconRobot, IconUsers } from 'twenty-ui/icon';
 import { ComponentDecorator } from 'twenty-ui/testing';
 
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
-import { CardContent } from 'twenty-ui/layout';
-import { type IconComponent } from 'twenty-ui/display';
+import { CardContent } from 'twenty-ui/surfaces';
+import { type IconComponent } from 'twenty-ui/icon';
 import { Radio } from 'twenty-ui/input';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/components/SettingsRadioCardContainer.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { SettingsRadioCard } from '@/settings/components/SettingsRadioCard';
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledRadioCardContainer = styled.div`

packages/twenty-front/src/modules/settings/components/SettingsStatsGrid.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { Fragment, useContext } from 'react';
-import { type IconComponent } from 'twenty-ui/display';
+import { type IconComponent } from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 export type SettingsStatRow = {

packages/twenty-front/src/modules/settings/components/SettingsTableCard.tsx

@@ -3,11 +3,8 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import {
-  OverflowingTextWithTooltip,
-  type IconComponent,
-} from 'twenty-ui/display';
-import { Card } from 'twenty-ui/layout';
+import { type IconComponent } from 'twenty-ui/icon';
+import { Card, OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 export type TableItem = {

packages/twenty-front/src/modules/settings/components/SettingsTableListSection.tsx

@@ -6,7 +6,8 @@ import { Table } from '@/ui/layout/table/components/Table';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
-import { H2Title, IconPlus } from 'twenty-ui/display';
+import { IconPlus } from 'twenty-ui/icon';
+import { H2Title } from 'twenty-ui/typography';
 import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/settings/components/__stories__/SettingsCard.stories.tsx

@@ -1,7 +1,7 @@
 import { SettingsCard } from '@/settings/components/SettingsCard';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
-import { IconMailCog } from 'twenty-ui/display';
+import { IconMailCog } from 'twenty-ui/icon';
 import { ComponentDecorator } from 'twenty-ui/testing';
 
 const meta: Meta<typeof SettingsCard> = {

packages/twenty-front/src/modules/settings/components/layout/SettingsWizardStepBar.tsx

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

packages/twenty-front/src/modules/settings/config-variables/components/ConfigVariableEdit.tsx

@@ -1,5 +1,6 @@
 import { styled } from '@linaria/react';
-import { H3Title, IconCheck, IconPencil, IconX } from 'twenty-ui/display';
+import { IconCheck, IconPencil, IconX } from 'twenty-ui/icon';
+import { H3Title } from 'twenty-ui/typography';
 import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';

packages/twenty-front/src/modules/settings/config-variables/components/ConfigVariableTable.tsx

@@ -6,10 +6,8 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { TableHeader } from '@/ui/layout/table/components/TableHeader';
 import { t } from '@lingui/core/macro';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
-import {
-  IconChevronRight,
-  OverflowingTextWithTooltip,
-} from 'twenty-ui/display';
+import { IconChevronRight } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { useContext } from 'react';
 
 const StyledTableBodyContainer = styled.div`

packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx

@@ -3,7 +3,7 @@ import { type ReactNode } from 'react';
 
 import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
 import { Trans } from '@lingui/react/macro';
-import { Card, CardContent } from 'twenty-ui/layout';
+import { Card, CardContent } from 'twenty-ui/surfaces';
 import { isDefined } from 'twenty-shared/utils';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts

@@ -1,7 +1,4 @@
-import {
-  type IconComponent,
-  IllustrationIconOneToMany,
-} from 'twenty-ui/display';
+import { type IconComponent, IllustrationIconOneToMany } from 'twenty-ui/icon';
 import { RelationType } from '~/generated-metadata/graphql';
 import OneToManySvg from '@/settings/data-model/assets/OneToMany.svg';