[REFACTOR] Twenty UI multi barrel (#11301)

# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203

packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
-import { Label } from 'twenty-ui';
+import { Label } from 'twenty-ui/display';
 
 const StyledGroupHeading = styled(Label)`
   align-items: center;

packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx

@@ -32,8 +32,8 @@ import styled from '@emotion/styled';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useRef } from 'react';
 import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
-import { useIsMobile } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
+import { useIsMobile } from 'twenty-ui/utilities';
 
 const StyledCommandMenu = styled(motion.div)`
   background: ${({ theme }) => theme.background.primary};

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChip.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
-import { OverflowingTextWithTooltip } from '@ui/display';
 import { Fragment } from 'react/jsx-runtime';
 import { isDefined } from 'twenty-shared/utils';
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 
 const StyledChip = styled.button<{
   withText: boolean;

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroups.tsx

@@ -4,11 +4,11 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { isDefined } from 'twenty-shared/utils';
-import { MenuItem } from 'twenty-ui';
 import {
   CommandMenuContextChip,
   CommandMenuContextChipProps,
 } from './CommandMenuContextChip';
+import { MenuItem } from 'twenty-ui/navigation';
 
 export const CommandMenuContextChipGroups = ({
   contextChips,

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx

@@ -4,7 +4,7 @@ import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Avatar } from 'twenty-ui';
+import { Avatar } from 'twenty-ui/display';
 
 const StyledIconWrapper = styled.div<{ withIconBackground?: boolean }>`
   background: ${({ theme, withIconBackground }) =>

packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx

@@ -1,10 +1,11 @@
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
-import { IconArrowUpRight, IconComponent, MenuItemCommand } from 'twenty-ui';
 
 import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { ReactNode } from 'react';
+import { IconArrowUpRight, IconComponent } from 'twenty-ui/display';
+import { MenuItemCommand } from 'twenty-ui/navigation';
 
 export type CommandMenuItemProps = {
   label: string;

packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx

@@ -15,7 +15,7 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 const MOBILE_NAVIGATION_BAR_HEIGHT = 64;
 

packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx

@@ -20,14 +20,10 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { useRef } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import {
-  Button,
-  IconChevronLeft,
-  IconX,
-  getOsControlSymbol,
-  useIsMobile,
-} from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { Button } from 'twenty-ui/input';
+import { IconChevronLeft, IconX } from 'twenty-ui/display';
+import { getOsControlSymbol, useIsMobile } from 'twenty-ui/utilities';
 
 const StyledInputContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx

@@ -9,8 +9,8 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { t } from '@lingui/core/macro';
 import { useRecoilValue } from 'recoil';
-import { IconArrowBackUp } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { IconArrowBackUp } from 'twenty-ui/display';
 
 export const ResetContextToSelectionCommandButton = () => {
   const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -26,10 +26,10 @@ import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/reco
 import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
 import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
 import { HttpResponse, graphql } from 'msw';
-import { IconDotsVertical } from 'twenty-ui';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter';
 import { CommandMenu } from '../CommandMenu';
+import { IconDotsVertical } from 'twenty-ui/display';
 
 const openTimeout = 50;
 

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChip.stories.tsx

@@ -1,11 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
-
-import {
-  ComponentDecorator,
-  IconBuildingSkyscraper,
-  IconUser,
-} from 'twenty-ui';
 import { CommandMenuContextChip } from '../CommandMenuContextChip';
+import { ComponentDecorator } from 'twenty-ui/testing';
+import { IconBuildingSkyscraper, IconUser } from 'twenty-ui/display';
 
 const meta: Meta<typeof CommandMenuContextChip> = {
   title: 'Modules/CommandMenu/CommandMenuContextChip',

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextChipGroups.stories.tsx

@@ -1,14 +1,14 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import styled from '@emotion/styled';
+import { CommandMenuContextChipGroups } from '../CommandMenuContextChipGroups';
+import { ComponentDecorator } from 'twenty-ui/testing';
 import {
-  ComponentDecorator,
   IconBuildingSkyscraper,
   IconSearch,
   IconSettingsAutomation,
   IconUser,
-} from 'twenty-ui';
-import { CommandMenuContextChipGroups } from '../CommandMenuContextChipGroups';
+} from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenuContextRecordChip.stories.tsx

@@ -6,10 +6,10 @@ import { PreComputedChipGeneratorsContext } from '@/object-metadata/contexts/Pre
 import { RecordChipData } from '@/object-record/record-field/types/RecordChipData';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { ComponentDecorator } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { getCompaniesMock } from '~/testing/mock-data/companies';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { ComponentDecorator } from 'twenty-ui/testing';
 
 const FIND_MANY_COMPANIES = gql`
   query FindManyCompanies(

packages/twenty-front/src/modules/command-menu/constants/CommandMenuAnimationVariants.ts

@@ -1,5 +1,4 @@
-import { THEME_COMMON } from 'twenty-ui';
-
+import { THEME_COMMON } from 'twenty-ui/theme';
 export const COMMAND_MENU_ANIMATION_VARIANTS = {
   fullScreen: {
     x: '0%',

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuCloseAnimationCompleteCleanup.test.tsx

@@ -18,7 +18,7 @@ import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuCl
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
-import { IconList } from 'twenty-ui';
+import { IconList } from 'twenty-ui/display';
 
 const mockCloseDropdown = jest.fn();
 const mockResetContextStoreStates = jest.fn();

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuHistory.test.tsx

@@ -11,7 +11,7 @@ import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageI
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { IconList, IconSearch } from 'twenty-ui';
+import { IconList, IconSearch } from 'twenty-ui/display';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
   <RecoilRoot>

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useNavigateCommandMenu.test.tsx

@@ -9,9 +9,9 @@ import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageI
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
-import { Icon123, useIcons } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { Icon123, useIcons } from 'twenty-ui/display';
 
 jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('mocked-uuid'),

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenCalendarEventInCommandMenu.test.tsx

@@ -7,9 +7,9 @@ import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { IconCalendarEvent } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { IconCalendarEvent } from 'twenty-ui/display';
 
 jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('mocked-uuid'),

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenEmailThreadInCommandMenu.test.tsx

@@ -7,9 +7,9 @@ import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { IconMail } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { IconMail } from 'twenty-ui/display';
 
 jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('mocked-uuid'),

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useOpenRecordInCommandMenu.test.tsx

@@ -15,9 +15,9 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useIcons } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
+import { useIcons } from 'twenty-ui/display';
 
 jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('mocked-uuid'),

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useUpdateCommandMenuPageInfo.test.tsx

@@ -5,7 +5,7 @@ import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { renderHook } from '@testing-library/react';
 import { act } from 'react';
 import { RecoilRoot, useRecoilValue } from 'recoil';
-import { IconArrowDown, IconDotsVertical } from 'twenty-ui';
+import { IconArrowDown, IconDotsVertical } from 'twenty-ui/display';
 
 const mockedPageInfo = {
   title: 'Initial Title',

packages/twenty-front/src/modules/command-menu/hooks/__tests__/useWorkflowCommandMenu.test.tsx

@@ -16,10 +16,10 @@ import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { t } from '@lingui/core/macro';
 import { act } from 'react';
-import { IconBolt, IconSettingsAutomation, useIcons } from 'twenty-ui';
 import { getJestMetadataAndApolloMocksAndActionMenuWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksAndActionMenuWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { useWorkflowCommandMenu } from '../useWorkflowCommandMenu';
+import { IconBolt, IconSettingsAutomation, useIcons } from 'twenty-ui/display';
 
 jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('mocked-uuid'),

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -1,7 +1,6 @@
 import { useRecoilCallback } from 'recoil';
 
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
-import { IconDotsVertical } from 'twenty-ui';
 
 import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
 import { isCommandMenuClosingState } from '@/command-menu/states/isCommandMenuClosingState';
@@ -9,6 +8,7 @@ import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { isDragSelectionStartEnabledState } from '@/ui/utilities/drag-select/states/internal/isDragSelectionStartEnabledState';
 import { useCallback } from 'react';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
+import { IconDotsVertical } from 'twenty-ui/display';
 
 export const useCommandMenu = () => {
   const { navigateCommandMenu } = useNavigateCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx

@@ -6,9 +6,9 @@ import { t } from '@lingui/core/macro';
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { capitalize } from 'twenty-shared/utils';
-import { Avatar } from 'twenty-ui';
 import { useDebounce } from 'use-debounce';
 import { useSearchQuery } from '~/generated/graphql';
+import { Avatar } from 'twenty-ui/display';
 
 export const useCommandMenuSearchRecords = () => {
   const commandMenuSearch = useRecoilValue(commandMenuSearchState);

packages/twenty-front/src/modules/command-menu/hooks/useNavigateCommandMenu.ts

@@ -15,8 +15,8 @@ import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainCo
 import { isDragSelectionStartEnabledState } from '@/ui/utilities/drag-select/states/internal/isDragSelectionStartEnabledState';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useRecoilCallback } from 'recoil';
-import { IconComponent } from 'twenty-ui';
 import { v4 } from 'uuid';
+import { IconComponent } from 'twenty-ui/display';
 
 export type CommandMenuNavigationStackItem = {
   page: CommandMenuPages;

packages/twenty-front/src/modules/command-menu/hooks/useOpenCalendarEventInCommandMenu.ts

@@ -3,8 +3,8 @@ import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { t } from '@lingui/core/macro';
 import { useRecoilCallback } from 'recoil';
-import { IconCalendarEvent } from 'twenty-ui';
 import { v4 } from 'uuid';
+import { IconCalendarEvent } from 'twenty-ui/display';
 
 export const useOpenCalendarEventInCommandMenu = () => {
   const { navigateCommandMenu } = useNavigateCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/useOpenEmailThreadInCommandMenu.ts

@@ -2,8 +2,8 @@ import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandM
 import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { useRecoilCallback } from 'recoil';
-import { IconMail } from 'twenty-ui';
 import { v4 } from 'uuid';
+import { IconMail } from 'twenty-ui/display';
 
 export const useOpenEmailThreadInCommandMenu = () => {
   const { navigateCommandMenu } = useNavigateCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts

@@ -16,9 +16,9 @@ import { viewableRecordIdState } from '@/object-record/record-right-drawer/state
 import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
 import { useRecoilCallback } from 'recoil';
-import { useIcons } from 'twenty-ui';
 import { v4 } from 'uuid';
 import { capitalize } from 'twenty-shared/utils';
+import { useIcons } from 'twenty-ui/display';
 
 export const useOpenRecordInCommandMenu = () => {
   const { navigateCommandMenu } = useCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordsSearchPageInCommandMenu.ts

@@ -1,8 +1,8 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { t } from '@lingui/core/macro';
-import { IconSearch } from 'twenty-ui';
 import { v4 } from 'uuid';
+import { IconSearch } from 'twenty-ui/display';
 
 export const useOpenRecordsSearchPageInCommandMenu = () => {
   const { navigateCommandMenu } = useCommandMenu();

packages/twenty-front/src/modules/command-menu/hooks/useUpdateCommandMenuPageInfo.ts

@@ -1,7 +1,7 @@
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { useRecoilCallback } from 'recoil';
-import { IconComponent, IconDotsVertical } from 'twenty-ui';
+import { IconComponent, IconDotsVertical } from 'twenty-ui/display';
 
 export const useUpdateCommandMenuPageInfo = () => {
   const updateCommandMenuPageInfo = useRecoilCallback(

packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts

@@ -3,8 +3,12 @@ import { workflowIdComponentState } from '@/command-menu/pages/workflow/states/w
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { t } from '@lingui/core/macro';
 import { useRecoilCallback } from 'recoil';
-import { IconBolt, IconComponent, IconSettingsAutomation } from 'twenty-ui';
 import { v4 } from 'uuid';
+import {
+  IconBolt,
+  IconComponent,
+  IconSettingsAutomation,
+} from 'twenty-ui/display';
 
 export const useWorkflowCommandMenu = () => {
   const { navigateCommandMenu } = useNavigateCommandMenu();

packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadIntermediaryMessages.tsx

@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
 import { useState } from 'react';
-import { Button, IconArrowsVertical } from 'twenty-ui';
 
 import { EmailThreadMessage } from '@/activities/emails/components/EmailThreadMessage';
 import { EmailThreadMessageWithSender } from '@/activities/emails/types/EmailThreadMessageWithSender';
+import { Button } from 'twenty-ui/input';
+import { IconArrowsVertical } from 'twenty-ui/display';
 
 const StyledButtonContainer = styled.div`
   border-bottom: 1px solid ${({ theme }) => theme.border.color.light};

packages/twenty-front/src/modules/command-menu/pages/message-thread/components/CommandMenuMessageThreadPage.tsx

@@ -11,8 +11,9 @@ import { messageThreadComponentState } from '@/command-menu/pages/message-thread
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
-import { Button, IconArrowBackUp } from 'twenty-ui';
 import { ConnectedAccountProvider } from 'twenty-shared/types';
+import { Button } from 'twenty-ui/input';
+import { IconArrowBackUp } from 'twenty-ui/display';
 
 const StyledWrapper = styled.div`
   display: flex;

packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/CommandMenuWorkflowSelectActionContent.tsx

@@ -4,7 +4,8 @@ import { RightDrawerWorkflowSelectStepTitle } from '@/workflow/workflow-steps/co
 import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep';
 import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions';
 import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
-import { MenuItemCommand, useIcons } from 'twenty-ui';
+import { MenuItemCommand } from 'twenty-ui/navigation';
+import { useIcons } from 'twenty-ui/display';
 
 export const CommandMenuWorkflowSelectActionContent = ({
   workflow,

packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx

@@ -17,8 +17,8 @@ import {
 import { getWorkflowRunStepExecutionStatus } from '@/workflow/workflow-steps/utils/getWorkflowRunStepExecutionStatus';
 import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
 import styled from '@emotion/styled';
-import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
   display: flex;

packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx

@@ -13,7 +13,8 @@ import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerSt
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
 import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
 import { useSetRecoilState } from 'recoil';
-import { MenuItemCommand, useIcons } from 'twenty-ui';
+import { MenuItemCommand } from 'twenty-ui/navigation';
+import { useIcons } from 'twenty-ui/display';
 
 export const CommandMenuWorkflowSelectTriggerTypeContent = ({
   workflow,

packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationMorphItemsState.ts

@@ -1,5 +1,5 @@
 import { MorphItem } from '@/object-record/multiple-objects/types/MorphItem';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui/utilities';
 
 export const commandMenuNavigationMorphItemByPageState = createState<
   Map<string, MorphItem>

packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationRecordsState.ts

@@ -1,6 +1,6 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui/utilities';
 
 export const commandMenuNavigationRecordsState = createState<
   {

packages/twenty-front/src/modules/command-menu/states/commandMenuNavigationStackState.ts

@@ -1,5 +1,6 @@
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { IconComponent, createState } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
+import { createState } from 'twenty-ui/utilities';
 
 export type CommandMenuNavigationStackItem = {
   page: CommandMenuPages;

packages/twenty-front/src/modules/command-menu/states/commandMenuPageInfoState.ts

@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
+import { createState } from 'twenty-ui/utilities';
 
 export const commandMenuPageInfoState = createState<{
   title?: string;

packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts

@@ -1,5 +1,5 @@
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui/utilities';
 
 export const commandMenuPageState = createState<CommandMenuPages>({
   key: 'command-menu/commandMenuPageState',

packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts

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

packages/twenty-front/src/modules/command-menu/states/hasUserSelectedCommandState.ts

@@ -1,5 +1,4 @@
-import { createState } from 'twenty-ui';
-
+import { createState } from 'twenty-ui/utilities';
 export const hasUserSelectedCommandState = createState({
   key: 'hasUserSelectedCommandState',
   defaultValue: false,

packages/twenty-front/src/modules/command-menu/states/isCommandMenuClosingState.ts

@@ -1,5 +1,4 @@
-import { createState } from 'twenty-ui';
-
+import { createState } from 'twenty-ui/utilities';
 export const isCommandMenuClosingState = createState({
   key: 'command-menu/isCommandMenuClosingState',
   defaultValue: false,

packages/twenty-front/src/modules/command-menu/types/Command.ts

@@ -1,4 +1,4 @@
-import { IconComponent } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
 export enum CommandType {
   Navigate = 'Navigate',
   Create = 'Create',