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/workflow/components/WorkflowEditUpdateEventFieldsMultiSelect.tsx

@@ -5,7 +5,7 @@ import { type FieldMultiSelectValue } from '@/object-record/record-field/ui/type
 import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
 import { shouldDisplayFormField } from '@/workflow/workflow-steps/workflow-actions/utils/shouldDisplayFormField';
 import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/icon';
 import { RelationType } from '~/generated-metadata/graphql';
 
 export const WorkflowFieldsMultiSelect = ({

packages/twenty-front/src/modules/workflow/components/WorkflowStepExecutionResult.tsx

@@ -5,9 +5,9 @@ import {
   IconLoader,
   IconSquareRoundedCheck,
   IconSquareRoundedX,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { CodeEditor, CoreEditorHeader } from 'twenty-ui/input';
-import { AnimatedCircleLoading } from 'twenty-ui/utilities';
+import { AnimatedCircleLoading } from 'twenty-ui/layout';
 import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/workflow/hooks/useRunWorkflowRunOpeningInSidePanelEffects.ts

@@ -15,7 +15,7 @@ import { generateWorkflowRunDiagram } from '@/workflow/workflow-diagram/utils/ge
 import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
 import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/icon';
 import { useStore } from 'jotai';
 
 export const useRunWorkflowRunOpeningInSidePanelEffects = () => {

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx

@@ -62,7 +62,7 @@ import React, {
   useState,
 } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { Tag, type TagColor } from 'twenty-ui/components';
+import { Tag, type TagColor } from 'twenty-ui/data-display';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledResetReactflowStyles = styled.div`
   --xy-node-background-color: none;

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepElement.tsx

@@ -5,7 +5,7 @@ import { type WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/ty
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconPlus } from 'twenty-ui/display';
+import { IconPlus } from 'twenty-ui/icon';
 import { IconButton } from 'twenty-ui/input';
 
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramRightClickCommandMenu.tsx

@@ -8,7 +8,7 @@ import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useRef } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconPlus, IconReorder } from 'twenty-ui/display';
+import { IconPlus, IconReorder } from 'twenty-ui/icon';
 import { MenuItem } from 'twenty-ui/navigation';
 import { WorkflowDiagramRightClickCommandMenuClickOutsideEffect } from './WorkflowDiagramRightClickCommandMenuClickOutsideEffect';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunVisualizerEffect.tsx

@@ -21,7 +21,7 @@ import { useStore } from 'jotai';
 import { useCallback, useContext, useEffect } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/icon';
 
 export const WorkflowRunVisualizerEffect = ({
   workflowRunId,

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowRunStatusTagProps.ts

@@ -1,5 +1,5 @@
 import { type WorkflowRunStatus } from '@/workflow/types/Workflow';
-import { type TagColor } from 'twenty-ui/components';
+import { type TagColor } from 'twenty-ui/data-display';
 
 export const getWorkflowRunStatusTagProps = ({
   workflowRunStatus,

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowVersionStatusTagProps.ts

@@ -1,5 +1,5 @@
 import { type WorkflowVersionStatus } from '@/workflow/types/Workflow';
-import { type TagColor } from 'twenty-ui/components';
+import { type TagColor } from 'twenty-ui/data-display';
 
 export const getWorkflowVersionStatusTagProps = ({
   workflowVersionStatus,

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeEditable.tsx

@@ -15,7 +15,7 @@ import { useLingui } from '@lingui/react/macro';
 import { EdgeLabelRenderer } from '@xyflow/react';
 import { type MouseEvent } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconPlus, IconTrash } from 'twenty-ui/display';
+import { IconPlus, IconTrash } from 'twenty-ui/icon';
 
 type WorkflowDiagramDefaultEdgeEditableProps =
   WorkflowDiagramEdgeComponentProps;

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeLabel.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 import { isDefined } from 'twenty-shared/utils';
-import { Label } from 'twenty-ui/display';
+import { Label } from 'twenty-ui/typography';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledContainer = styled.div`

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramEmptyTriggerReadonly.tsx

@@ -18,7 +18,7 @@ import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/icon';
 
 export const WorkflowDiagramEmptyTriggerReadonly = ({ id }: { id: string }) => {
   const { getIcon } = useIcons();

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeEditable.tsx

@@ -12,7 +12,7 @@ import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWor
 import { WorkflowDiagramStepNodeEditableContent } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeEditableContent';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/icon';
 
 export const WorkflowDiagramStepNodeEditable = ({
   id,

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeIcon.tsx

@@ -2,7 +2,7 @@ import { type WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/ty
 import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
 import { WorkflowDiagramStepNodeLogicFunctionIcon } from '@/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeLogicFunctionIcon';
 import { assertUnreachable } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/icon';
 import { ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';
 

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeLogicFunctionIcon.tsx

@@ -4,7 +4,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { getActionIcon } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIcon';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/icon';
 import { ThemeContext } from 'twenty-ui/theme-constants';
 
 export const WorkflowDiagramStepNodeLogicFunctionIcon = ({

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeReadonly.tsx

@@ -25,7 +25,7 @@ import { isNodeTitleHighlighted } from '@/workflow/workflow-diagram/workflow-nod
 import { Position } from '@xyflow/react';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/icon';
 
 export const WorkflowDiagramStepNodeReadonly = ({
   id,

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeLabel.tsx

@@ -1,7 +1,7 @@
 import type { WorkflowRunStepStatus } from '@/workflow/types/Workflow';
 import { getWorkflowDiagramColors } from '@/workflow/workflow-diagram/utils/getWorkflowDiagramColors';
 import { styled } from '@linaria/react';
-import { Label } from 'twenty-ui/display';
+import { Label } from 'twenty-ui/typography';
 
 type WorkflowNodeLabelProps = {
   runStatus?: WorkflowRunStepStatus;

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowRunDiagramStepNode.tsx

@@ -29,7 +29,7 @@ import { Position } from '@xyflow/react';
 import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { StepStatus } from 'twenty-shared/workflow';
-import { IconCheck, IconX, useIcons } from 'twenty-ui/display';
+import { IconCheck, IconX, useIcons } from 'twenty-ui/icon';
 import { Loader } from 'twenty-ui/feedback';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/workflow/workflow-run/observability/WorkflowRunStepLogsAiAgentDetail.tsx

@@ -10,7 +10,7 @@ import {
   IconCpu,
   IconTool,
   IconWorld,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { formatDuration } from '@/workflow/workflow-run/observability/workflowRunStepLogsFormatters';

packages/twenty-front/src/modules/workflow/workflow-run/observability/WorkflowRunStepLogsCodeDetail.tsx

@@ -7,7 +7,7 @@ import {
   IconCheck,
   IconClock,
   IconTerminal,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { MONOSPACE_FONT_FAMILY } from '@/ui/theme/constants/MonospaceFontFamily';

packages/twenty-front/src/modules/workflow/workflow-run/observability/WorkflowRunStepLogsDetail.tsx

@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
 import { workflowRunStepLogSchema } from 'twenty-shared/workflow';
-import { IconInfoCircle } from 'twenty-ui/display';
+import { IconInfoCircle } from 'twenty-ui/icon';
 import { isTwoFirstDepths, JsonTree } from 'twenty-ui/json-visualizer';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type JsonValue } from 'type-fest';

packages/twenty-front/src/modules/workflow/workflow-run/observability/WorkflowRunStepLogsEmailDetail.tsx

@@ -8,7 +8,7 @@ import {
   IconClock,
   IconMail,
   IconPaperclip,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import {

packages/twenty-front/src/modules/workflow/workflow-run/observability/WorkflowRunStepLogsHttpRequestDetail.tsx

@@ -9,7 +9,7 @@ import {
   IconArrowUp,
   IconClock,
   IconWorld,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 import { MONOSPACE_FONT_FAMILY } from '@/ui/theme/constants/MonospaceFontFamily';

packages/twenty-front/src/modules/workflow/workflow-run/observability/WorkflowRunStepLogsToolCallRow.tsx

@@ -11,7 +11,7 @@ import {
   IconChevronDown,
   IconChevronUp,
   IconCircleX,
-} from 'twenty-ui/display';
+} 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/workflow/workflow-steps/components/WorkflowDropdownStepOutputItems.tsx

@@ -31,11 +31,8 @@ import {
 } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { extractRawVariableNamePart } from 'twenty-shared/workflow';
-import {
-  IconChevronLeft,
-  OverflowingTextWithTooltip,
-  useIcons,
-} from 'twenty-ui/display';
+import { IconChevronLeft, useIcons } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { MenuItemSelect } from 'twenty-ui/navigation';
 
 type WorkflowDropdownStepOutputItemsProps = {

packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowRunStepInputDetail.tsx

@@ -9,7 +9,7 @@ import { getWorkflowRunStepContext } from '@/workflow/workflow-steps/utils/getWo
 import { getWorkflowVariablesUsedInStep } from '@/workflow/workflow-steps/utils/getWorkflowVariablesUsedInStep';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconBrackets } from 'twenty-ui/display';
+import { IconBrackets } from 'twenty-ui/icon';
 import {
   type GetJsonNodeHighlighting,
   JsonNestedNode,

packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepFooter.tsx

@@ -21,7 +21,7 @@ import {
   IconRobot,
   IconTrash,
   IconUsers,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';

packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterAddFilterRuleSelect.tsx

@@ -14,7 +14,7 @@ import {
 } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { t } from '@lingui/core/macro';
-import { IconLibraryPlus, IconPlus } from 'twenty-ui/display';
+import { IconLibraryPlus, IconPlus } from 'twenty-ui/icon';
 import { MenuItem } from 'twenty-ui/navigation';
 import { v4 } from 'uuid';
 

packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterAddRootStepFilterButton.tsx

@@ -3,7 +3,7 @@ import { WorkflowStepFilterContext } from '@/workflow/workflow-steps/filters/sta
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { IconFilter } from 'twenty-ui/display';
+import { IconFilter } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterFieldSelect.tsx

@@ -15,7 +15,7 @@ import { useContext, useState } from 'react';
 import { type StepFilter } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { extractRawVariableNamePart } from 'twenty-shared/workflow';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/icon';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 type WorkflowStepFilterFieldSelectProps = {

packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterGroupOptionsDropdown.tsx

@@ -6,7 +6,7 @@ import { useRemoveStepFilterGroup } from '@/workflow/workflow-steps/filters/hook
 import { WorkflowStepFilterContext } from '@/workflow/workflow-steps/filters/states/context/WorkflowStepFilterContext';
 import { useContext } from 'react';
 import { t } from '@lingui/core/macro';
-import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
+import { IconDotsVertical, IconTrash } from 'twenty-ui/icon';
 import { IconButton } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
 

packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterOptionsDropdown.tsx

@@ -6,7 +6,7 @@ import { useRemoveStepFilter } from '@/workflow/workflow-steps/filters/hooks/use
 import { WorkflowStepFilterContext } from '@/workflow/workflow-steps/filters/states/context/WorkflowStepFilterContext';
 import { useContext } from 'react';
 import { t } from '@lingui/core/macro';
-import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
+import { IconDotsVertical, IconTrash } from 'twenty-ui/icon';
 import { IconButton } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
 

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsFlagRow.tsx

@@ -1,5 +1,5 @@
 import { type SettingsRolePermissionsSettingPermission } from '@/settings/roles/role-permissions/permission-flags/types/SettingsRolePermissionsSettingPermission';
-import { IconTrash } from 'twenty-ui/display';
+import { IconTrash } from 'twenty-ui/icon';
 import { MenuItem } from 'twenty-ui/navigation';
 
 type WorkflowAiAgentPermissionsFlagRowProps = {

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowAiAgentPermissionsPermissionRow.tsx

@@ -1,6 +1,6 @@
 import { PermissionIcon } from '@/settings/roles/role-permissions/objects-permissions/components/PermissionIcon';
 import { type SettingsRoleObjectPermissionKey } from '@/settings/roles/role-permissions/objects-permissions/constants/SettingsRoleObjectPermissionIconConfig';
-import { IconTrash } from 'twenty-ui/display';
+import { IconTrash } from 'twenty-ui/icon';
 import { MenuItem } from 'twenty-ui/navigation';
 
 type WorkflowAiAgentPermissionsPermissionRowProps = {

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowEditActionAiAgent.tsx

@@ -19,7 +19,7 @@ import { useLingui } from '@lingui/react/macro';
 import { useEffect, useState } from 'react';
 import { SettingsPath } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { IconLock, IconSparkles } from 'twenty-ui/display';
+import { IconLock, IconSparkles } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useDebouncedCallback } from 'use-debounce';
 import {

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowOutputSchemaBuilder.tsx

@@ -7,12 +7,7 @@ import { InputLabel } from '@/ui/input/components/InputLabel';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useContext, useState } from 'react';
-import {
-  IconChevronDown,
-  IconPlus,
-  IconVariable,
-  IconX,
-} from 'twenty-ui/display';
+import { IconChevronDown, IconPlus, IconVariable, IconX } from 'twenty-ui/icon';
 import { AnimatedLightIconButton, LightIconButton } from 'twenty-ui/input';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
 import { MenuItem } from 'twenty-ui/navigation';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowCodeEditor.tsx

@@ -3,7 +3,7 @@ import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { type Monaco } from '@monaco-editor/react';
 import { type editor } from 'monaco-editor';
-import { IconMaximize } from 'twenty-ui/display';
+import { IconMaximize } from 'twenty-ui/icon';
 import { CodeEditor, LightIconButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionCode.tsx

@@ -45,7 +45,7 @@ import {
 } from 'twenty-shared/logic-function';
 import { isDefined } from 'twenty-shared/utils';
 import { getFunctionInputFromInputSchema } from 'twenty-shared/workflow';
-import { IconCode, IconPlayerPlay } from 'twenty-ui/display';
+import { IconCode, IconPlayerPlay } from 'twenty-ui/icon';
 import { CodeEditor } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useIsMobile } from 'twenty-ui/utilities';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx

@@ -16,7 +16,7 @@ import { t } from '@lingui/core/macro';
 import { useEffect, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { canObjectBeManagedByAutomation } from 'twenty-shared/workflow';
-import { HorizontalSeparator } from 'twenty-ui/display';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { type SelectOption } from 'twenty-ui/input';
 import { type JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx

@@ -12,7 +12,7 @@ import { WorkflowStepFooter } from '@/workflow/workflow-steps/components/Workflo
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { isDefined } from 'twenty-shared/utils';
 import { canObjectBeManagedByAutomation } from 'twenty-shared/workflow';
-import { HorizontalSeparator } from 'twenty-ui/display';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { type SelectOption } from 'twenty-ui/input';
 import { type JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionEmailBase.tsx

@@ -29,7 +29,8 @@ import { t } from '@lingui/core/macro';
 import { useEffect, useState } from 'react';
 import { ConnectedAccountProvider, SettingsPath } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
-import { Callout, IconPlus } from 'twenty-ui/display';
+import { Callout } from 'twenty-ui/feedback';
+import { IconPlus } from 'twenty-ui/icon';
 import { Button, type SelectOption } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpdateRecord.tsx

@@ -17,7 +17,7 @@ import { t } from '@lingui/core/macro';
 import { useEffect, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { canObjectBeManagedByAutomation } from 'twenty-shared/workflow';
-import { HorizontalSeparator } from 'twenty-ui/display';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { type SelectOption } from 'twenty-ui/input';
 import { type JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpsertRecord.tsx

@@ -18,7 +18,7 @@ import { t } from '@lingui/core/macro';
 import { useEffect, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { canObjectBeManagedByAutomation } from 'twenty-shared/workflow';
-import { HorizontalSeparator } from 'twenty-ui/display';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { type SelectOption } from 'twenty-ui/input';
 import { type JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/delay-actions/components/WorkflowEditActionDelay.tsx

@@ -8,11 +8,8 @@ import { WorkflowStepFooter } from '@/workflow/workflow-steps/components/Workflo
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { t } from '@lingui/core/macro';
 import { useEffect, useState } from 'react';
-import {
-  HorizontalSeparator,
-  IconCalendar,
-  IconHourglassHigh,
-} from 'twenty-ui/display';
+import { IconCalendar, IconHourglassHigh } from 'twenty-ui/icon';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { type SelectOption } from 'twenty-ui/input';
 
 type WorkflowEditActionDelayProps = {

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowEditActionFindRecords.tsx

@@ -6,7 +6,7 @@ import { isNumber } from '@sniptt/guards';
 import { useEffect, useState } from 'react';
 import { QUERY_MAX_RECORDS } from 'twenty-shared/constants';
 import { isDefined } from 'twenty-shared/utils';
-import { HorizontalSeparator } from 'twenty-ui/display';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { type JsonValue } from 'type-fest';
 import { useDebouncedCallback } from 'use-debounce';
 

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowFindRecordsSorts.tsx

@@ -4,7 +4,7 @@ import { type RecordSort } from '@/object-record/record-sort/types/RecordSort';
 import { Select } from '@/ui/input/components/Select';
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
-import { IconArrowsSort, IconTrash, useIcons } from 'twenty-ui/display';
+import { IconArrowsSort, IconTrash, useIcons } from 'twenty-ui/icon';
 import { Button, type SelectOption } from 'twenty-ui/input';
 import { v4 as uuidv4 } from 'uuid';
 import { ViewSortDirection } from '~/generated-metadata/graphql';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/find-records-action/components/WorkflowObjectDropdownContent.tsx

@@ -10,7 +10,7 @@ import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/Gene
 import { Trans } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useState } from 'react';
-import { IconChevronLeft, IconSettings } from 'twenty-ui/display';
+import { IconChevronLeft, IconSettings } from 'twenty-ui/icon';
 import { MenuItem } from 'twenty-ui/navigation';
 
 type WorkflowObjectDropdownContentProps = {

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormBuilder.tsx

@@ -21,14 +21,14 @@ import { isNonEmptyString } from '@sniptt/guards';
 import { useContext, useEffect, useState } from 'react';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
+import { Callout } from 'twenty-ui/feedback';
 import {
-  Callout,
   IconAlertTriangle,
   IconChevronDown,
   IconGripVertical,
   IconPlus,
   IconTrash,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { useDebouncedCallback } from 'use-debounce';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/components/WorkflowEditActionFormFieldSettings.tsx

@@ -8,7 +8,7 @@ import { type WorkflowFormFieldType } from '@/workflow/workflow-steps/workflow-a
 import { getDefaultFormFieldSettings } from '@/workflow/workflow-steps/workflow-actions/form-action/utils/getDefaultFormFieldSettings';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
-import { IconSettingsAutomation, IconX } from 'twenty-ui/display';
+import { IconSettingsAutomation, IconX } from 'twenty-ui/icon';
 import { LightIconButton } from 'twenty-ui/input';
 import { themeCssVariables, ThemeContext } from 'twenty-ui/theme-constants';
 import { useContext } from 'react';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/form-action/constants/FormSelectFieldTypeOptions.ts

@@ -8,7 +8,7 @@ import {
   IllustrationIconTag,
   IllustrationIconTags,
   IllustrationIconText,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 import { type SelectOption } from 'twenty-ui/input';
 
 export const FORM_SELECT_FIELD_TYPE_OPTIONS: SelectOption<WorkflowFormFieldType>[] =

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/BodyInput.tsx

@@ -21,7 +21,7 @@ import {
   CONTENT_TYPE_VALUES_HTTP_REQUEST,
   type BodyType,
 } from 'twenty-shared/workflow';
-import { IconFileText, IconKey } from 'twenty-ui/display';
+import { IconFileText, IconKey } from 'twenty-ui/icon';
 import { type JsonValue } from 'type-fest';
 import { KeyValuePairInput } from './KeyValuePairInput';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/KeyValuePairInput.tsx

@@ -7,7 +7,7 @@ import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components
 import { t } from '@lingui/core/macro';
 import { styled } from '@linaria/react';
 import { useState } from 'react';
-import { IconTrash } from 'twenty-ui/display';
+import { IconTrash } from 'twenty-ui/icon';
 import { Button } from 'twenty-ui/input';
 import { v4 } from 'uuid';
 import { themeCssVariables } from 'twenty-ui/theme-constants';

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/http-request-action/components/WorkflowEditActionHttpRequest.tsx

@@ -16,7 +16,7 @@ import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useContext, useEffect } from 'react';
-import { IconPlayerPlay, IconSettings } from 'twenty-ui/display';
+import { IconPlayerPlay, IconSettings } from 'twenty-ui/icon';
 import {
   HTTP_METHODS,
   JSON_RESPONSE_PLACEHOLDER,

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/if-else-action/components/WorkflowEditActionIfElseBody.tsx

@@ -27,7 +27,8 @@ import { t } from '@lingui/core/macro';
 import { Fragment } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { type StepIfElseBranch } from 'twenty-shared/workflow';
-import { HorizontalSeparator, IconPlus } from 'twenty-ui/display';
+import { IconPlus } from 'twenty-ui/icon';
+import { HorizontalSeparator } from 'twenty-ui/layout';
 import { Button } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/iterator-action/components/WorkflowIteratorSubStepSwitcher.tsx

@@ -9,7 +9,7 @@ import { getWorkflowRunAllStepInfoHistory } from '@/workflow/workflow-steps/util
 import { styled } from '@linaria/react';
 import { plural } from '@lingui/core/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { IconChevronLeft, IconChevronRight } from 'twenty-ui/display';
+import { IconChevronLeft, IconChevronRight } from 'twenty-ui/icon';
 import { IconButton } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/logic-function-action/components/WorkflowEditActionLogicFunction.tsx

@@ -25,11 +25,8 @@ import { useMemo } from 'react';
 import { getOutputSchemaFromValue } from 'twenty-shared/logic-function';
 import { isDefined } from 'twenty-shared/utils';
 import { getFunctionInputFromInputSchema } from 'twenty-shared/workflow';
-import {
-  Callout,
-  IconPlayerPlay,
-  IconSettingsAutomation,
-} from 'twenty-ui/display';
+import { Callout } from 'twenty-ui/feedback';
+import { IconPlayerPlay, IconSettingsAutomation } from 'twenty-ui/icon';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { useDebouncedCallback } from 'use-debounce';
 

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx

@@ -21,7 +21,7 @@ import { Trans, useLingui } from '@lingui/react/macro';
 import { useCallback, useMemo, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
-import { IconChevronLeft, IconSettings } from 'twenty-ui/display';
+import { IconChevronLeft, IconSettings } from 'twenty-ui/icon';
 import { MenuItem } from 'twenty-ui/navigation';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManual.tsx

@@ -15,7 +15,7 @@ import { useLingui } from '@lingui/react/macro';
 import { QUERY_MAX_RECORDS } from 'twenty-shared/constants';
 import { isDefined } from 'twenty-shared/utils';
 import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/icon';
 import { type SelectOption } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerWebhookForm.tsx

@@ -19,7 +19,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { getOutputSchemaFromValue } from 'twenty-shared/logic-function';
 import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
 import { t } from '@lingui/core/macro';
-import { IconCopy } from 'twenty-ui/display';
+import { IconCopy } from 'twenty-ui/icon';
 
 import { useDebouncedCallback } from 'use-debounce';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/CronTriggerIntervalOptions.ts

@@ -4,7 +4,7 @@ import {
   IconHours24,
   IconTimeDuration60,
   IconBrandDaysCounter,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 export type CronTriggerInterval = 'DAYS' | 'HOURS' | 'MINUTES' | 'CUSTOM';
 
 export const CRON_TRIGGER_INTERVAL_OPTIONS: Array<{

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/ManualTriggerAvailabilityOptions.ts

@@ -1,9 +1,5 @@
 import { type WorkflowManualTriggerAvailability } from '@/workflow/types/Workflow';
-import {
-  IconCheckbox,
-  type IconComponent,
-  IconSquare,
-} from 'twenty-ui/display';
+import { IconCheckbox, type IconComponent, IconSquare } from 'twenty-ui/icon';
 
 export const MANUAL_TRIGGER_AVAILABILITY_OPTIONS: Array<{
   label: string;

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/ManualTriggerAvailabilityTypeOptions.ts

@@ -3,7 +3,7 @@ import {
   type IconComponent,
   IconId,
   IconListDetails,
-} from 'twenty-ui/display';
+} from 'twenty-ui/icon';
 
 export const MANUAL_TRIGGER_AVAILABILITY_TYPE_OPTIONS: Array<{
   label: string;

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/ManualTriggerIsPinnedOptions.ts

@@ -1,8 +1,4 @@
-import {
-  type IconComponent,
-  IconPinned,
-  IconPinnedOff,
-} from 'twenty-ui/display';
+import { type IconComponent, IconPinned, IconPinnedOff } from 'twenty-ui/icon';
 
 export const MANUAL_TRIGGER_IS_PINNED_OPTIONS: Array<{
   label: string;

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/WebhookTriggerAuthenticationOptions.ts

@@ -1,4 +1,4 @@
-import { type IconComponent, IconLockOpen, IconFlag } from 'twenty-ui/display';
+import { type IconComponent, IconLockOpen, IconFlag } from 'twenty-ui/icon';
 export type AuthenticationMethods = 'API_KEY' | null;
 
 export const WEBHOOK_TRIGGER_AUTHENTICATION_OPTIONS: Array<{

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/WebhookTriggerHttpMethodOptions.ts

@@ -1,8 +1,4 @@
-import {
-  type IconComponent,
-  IconHttpGet,
-  IconHttpPost,
-} from 'twenty-ui/display';
+import { type IconComponent, IconHttpGet, IconHttpPost } from 'twenty-ui/icon';
 export type WebhookHttpMethods = 'GET' | 'POST';
 
 export const WEBHOOK_TRIGGER_HTTP_METHOD_OPTIONS: Array<{

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx

@@ -10,7 +10,7 @@ import { type StepOutputSchemaV2 } from '@/workflow/workflow-variables/types/Ste
 import { styled } from '@linaria/react';
 import { useContext, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
-import { IconVariablePlus } from 'twenty-ui/display';
+import { IconVariablePlus } from 'twenty-ui/icon';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledDropdownVariableButtonContainer = styled.div<{

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownStepItems.tsx

@@ -17,11 +17,8 @@ import { getStepItemIcon } from '@/workflow/workflow-variables/utils/getStepItem
 import { getVariableTemplateFromPath } from '@/workflow/workflow-variables/utils/getVariableTemplateFromPath';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import {
-  IconChevronLeft,
-  OverflowingTextWithTooltip,
-  useIcons,
-} from 'twenty-ui/display';
+import { IconChevronLeft, useIcons } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { MenuItemSelect } from 'twenty-ui/navigation';
 
 type WorkflowVariablesDropdownStepItemsProps = {

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownSteps.tsx

@@ -9,7 +9,8 @@ import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { type StepOutputSchemaV2 } from '@/workflow/workflow-variables/types/StepOutputSchemaV2';
 import { t } from '@lingui/core/macro';
 import { useState } from 'react';
-import { IconX, OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
+import { IconX, useIcons } from 'twenty-ui/icon';
+import { OverflowingTextWithTooltip } from 'twenty-ui/surfaces';
 import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
 
 type WorkflowVariablesDropdownStepsProps = {

packages/twenty-front/src/modules/workflow/workflow-variables/hooks/useVariableDropdown.ts

@@ -14,7 +14,7 @@ import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomStat
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { type BaseOutputSchemaV2 } from 'twenty-shared/workflow';
-import { useIcons } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/icon';
 import { isBaseOutputSchemaV2 } from '@/workflow/workflow-variables/types/guards/isBaseOutputSchemaV2';
 import { isLinkOutputSchema } from '@/workflow/workflow-variables/types/guards/isLinkOutputSchema';
 import { isRecordOutputSchemaV2 } from '@/workflow/workflow-variables/types/guards/isRecordOutputSchemaV2';