[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

.github/workflows/actions/restore-cache/action.yaml

@@ -20,7 +20,7 @@ runs:
       id: cache-primary-key-builder
       shell: bash
       run: |
-        echo "CACHE_PRIMARY_KEY_PREFIX=v2-${{ inputs.key }}-${{ github.ref_name }}" >> "${GITHUB_OUTPUT}"
+        echo "CACHE_PRIMARY_KEY_PREFIX=v3-${{ inputs.key }}-${{ github.ref_name }}" >> "${GITHUB_OUTPUT}"
     - name: Restore cache
       uses: actions/cache/restore@v4
       id: restore-cache

.github/workflows/actions/yarn-install/action.yaml

@@ -25,8 +25,8 @@ runs:
       id: cache-node-modules
       uses: actions/cache/restore@v4
       with:
-        key: v2-${{ steps.globals.outputs.CACHE_KEY_PREFIX }}-${{github.sha}}
-        restore-keys: v2-${{ steps.globals.outputs.CACHE_KEY_PREFIX }}-
+        key: v3-${{ steps.globals.outputs.CACHE_KEY_PREFIX }}-${{github.sha}}
+        restore-keys: v3-${{ steps.globals.outputs.CACHE_KEY_PREFIX }}-
         path: ${{ steps.globals.outputs.PATH_TO_CACHE }}
     - name: Install Dependencies
       if: ${{ steps.cache-node-modules.outputs.cache-hit != 'true' && steps.cache-node-modules.outputs.cache-matched-key == '' }}

packages/twenty-front/.storybook/preview.tsx

@@ -3,12 +3,12 @@ import { Preview } from '@storybook/react';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { useEffect } from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
-import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui';
 
 import { RootDecorator } from '../src/testing/decorators/RootDecorator';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';
 
 import 'react-loading-skeleton/dist/skeleton.css';
+import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme';
 
 initialize({
   onUnhandledRequest: async (request: Request) => {

packages/twenty-front/jest.config.ts

@@ -15,12 +15,26 @@ const jestConfig: JestConfigWithTsJest = {
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['./setupTests.ts'],
   testEnvironment: 'jsdom',
-  transformIgnorePatterns: ['../../node_modules/'],
+
+  transformIgnorePatterns: [
+    '/node_modules/(?!(twenty-ui)/.*)',
+    '../../node_modules/(?!(twenty-ui)/.*)',
+    '../../twenty-ui/',
+  ],
   transform: {
     '^.+\\.(ts|js|tsx|jsx)$': [
       '@swc/jest',
       {
         jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+          },
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
           experimental: {
             plugins: [['@lingui/swc-plugin', {}]],
           },

packages/twenty-front/package.json

@@ -56,7 +56,8 @@
     "file-saver": "^2.0.5",
     "recoil-sync": "^0.2.0",
     "transliteration": "^2.3.5",
-    "twenty-shared": "workspace:*"
+    "twenty-shared": "workspace:*",
+    "twenty-ui": "workspace:*"
   },
   "devDependencies": {
     "@lingui/cli": "^5.1.2",

packages/twenty-front/src/emotion.d.ts

@@ -1,5 +1,4 @@
-import { ThemeType } from 'twenty-ui';
-
+import { ThemeType } from 'twenty-ui/theme';
 declare module '@emotion/react' {
   export interface Theme extends ThemeType {}
 }

packages/twenty-front/src/index.tsx

@@ -4,6 +4,7 @@ import '@emotion/react';
 
 import { App } from '@/app/components/App';
 import 'react-loading-skeleton/dist/skeleton.css';
+import 'twenty-ui/style.css';
 import './index.css';
 
 const root = ReactDOM.createRoot(

packages/twenty-front/src/loading/components/LeftPanelSkeletonLoader.tsx

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { ANIMATION } from 'twenty-ui';
 
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useTheme } from '@emotion/react';
 import { MainNavigationDrawerItemsSkeletonLoader } from '~/loading/components/MainNavigationDrawerItemsSkeletonLoader';
+import { ANIMATION } from 'twenty-ui/theme';
 
 const StyledAnimatedContainer = styled(motion.div)`
   align-items: center;

packages/twenty-front/src/loading/components/RightPanelSkeletonLoader.tsx

@@ -2,7 +2,7 @@ import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLo
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import { BORDER_COMMON, MOBILE_VIEWPORT } from 'twenty-ui';
+import { BORDER_COMMON, MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 const StyledMainContainer = styled.div`
   background: ${({ theme }) => theme.background.noisy};

packages/twenty-front/src/loading/components/UserOrMetadataLoader.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
 import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
 import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 const StyledContainer = styled.div`
   background: ${({ theme }) => theme.background.noisy};

packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/DefaultRecordActionsConfig.ts

@@ -52,7 +52,7 @@ import {
   IconTrash,
   IconTrashX,
   IconUser,
-} from 'twenty-ui';
+} from 'twenty-ui/display';
 
 export const DEFAULT_RECORD_ACTIONS_CONFIG: Record<
   | NoSelectionRecordActionKeys

packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowActionsConfig.ts

@@ -26,7 +26,7 @@ import {
   IconPlayerPlay,
   IconPower,
   IconVersions,
-} from 'twenty-ui';
+} from 'twenty-ui/display';
 
 export const WORKFLOW_ACTIONS_CONFIG = inheritActionsFromDefaultConfig({
   config: {

packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowRunsActionsConfig.ts

@@ -12,7 +12,7 @@ import {
   ActionMenuEntryType,
 } from '@/action-menu/types/ActionMenuEntry';
 import { msg } from '@lingui/core/macro';
-import { IconSettingsAutomation, IconVersions } from 'twenty-ui';
+import { IconSettingsAutomation, IconVersions } from 'twenty-ui/display';
 
 export const WORKFLOW_RUNS_ACTIONS_CONFIG = inheritActionsFromDefaultConfig({
   config: {

packages/twenty-front/src/modules/action-menu/actions/record-actions/constants/WorkflowVersionsActionsConfig.ts

@@ -22,7 +22,7 @@ import {
   IconPencil,
   IconSettingsAutomation,
   IconVersions,
-} from 'twenty-ui';
+} from 'twenty-ui/display';
 
 export const WORKFLOW_VERSIONS_ACTIONS_CONFIG = inheritActionsFromDefaultConfig(
   {

packages/twenty-front/src/modules/action-menu/actions/record-actions/workflow-run-record-actions/hooks/useWorkflowRunRecordActions.tsx

@@ -12,8 +12,8 @@ import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
 import { msg } from '@lingui/core/macro';
 
 import { useRecoilValue } from 'recoil';
-import { IconSettingsAutomation } from 'twenty-ui';
 import { capitalize, isDefined } from 'twenty-shared/utils';
+import { IconSettingsAutomation } from 'twenty-ui/display';
 
 export const useWorkflowRunRecordActions = ({
   objectMetadataItem,

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/constants/RecordAgnosticActionsConfig.ts

@@ -7,7 +7,7 @@ import {
   ActionMenuEntryType,
 } from '@/action-menu/types/ActionMenuEntry';
 import { msg } from '@lingui/core/macro';
-import { IconSearch } from 'twenty-ui';
+import { IconSearch } from 'twenty-ui/display';
 
 export const RECORD_AGNOSTIC_ACTIONS_CONFIG: Record<
   string,

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/hooks/useSearchRecordsRecordAgnosticAction.ts

@@ -1,6 +1,6 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { IconSearch } from 'twenty-ui';
+import { IconSearch } from 'twenty-ui/display';
 
 export const useSearchRecordsRecordAgnosticAction = () => {
   const { navigateCommandMenu } = useCommandMenu();

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/run-workflow-actions/hooks/useRunWorkflowActions.tsx

@@ -7,8 +7,8 @@ import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { msg } from '@lingui/core/macro';
 import { capitalize, isDefined } from 'twenty-shared/utils';
-import { IconSettingsAutomation } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
+import { IconSettingsAutomation } from 'twenty-ui/display';
 
 export const useRunWorkflowActions = () => {
   const isWorkflowEnabled = useIsFeatureEnabled(

packages/twenty-front/src/modules/action-menu/actions/types/RecordConfigAction.ts

@@ -6,7 +6,8 @@ import {
   ActionMenuEntryType,
 } from '@/action-menu/types/ActionMenuEntry';
 import { MessageDescriptor } from '@lingui/core';
-import { IconComponent, MenuItemAccent } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
+import { MenuItemAccent } from 'twenty-ui/navigation';
 
 export type RecordConfigAction = {
   type: ActionMenuEntryType;

packages/twenty-front/src/modules/action-menu/components/CmdEnterActionButton.tsx

@@ -1,7 +1,8 @@
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { Key } from 'ts-key-enum';
-import { Button, getOsControlSymbol } from 'twenty-ui';
+import { Button } from 'twenty-ui/input';
+import { getOsControlSymbol } from 'twenty-ui/utilities';
 
 export const CmdEnterActionButton = ({
   title,

packages/twenty-front/src/modules/action-menu/components/CommandMenuActionMenuDropdown.tsx

@@ -12,7 +12,9 @@ import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/com
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useTheme } from '@emotion/react';
 import { i18n } from '@lingui/core';
-import { Button, getOsControlSymbol, MenuItem } from 'twenty-ui';
+import { Button } from 'twenty-ui/input';
+import { getOsControlSymbol } from 'twenty-ui/utilities';
+import { MenuItem } from 'twenty-ui/navigation';
 
 export const CommandMenuActionMenuDropdown = () => {
   const actionMenuEntries = useRecoilComponentValueV2(

packages/twenty-front/src/modules/action-menu/components/PageHeaderActionMenuButtons.tsx

@@ -2,13 +2,8 @@ import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionM
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
 import { i18n } from '@lingui/core';
-import {
-  AppTooltip,
-  Button,
-  IconButton,
-  TooltipDelay,
-  TooltipPosition,
-} from 'twenty-ui';
+import { AppTooltip, TooltipDelay, TooltipPosition } from 'twenty-ui/display';
+import { Button, IconButton } from 'twenty-ui/input';
 
 const StyledWrapper = styled.div`
   font-size: ${({ theme }) => theme.font.size.md};

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx

@@ -11,8 +11,8 @@ import { isRecordIndexLoadMoreLockedComponentState } from '@/object-record/recor
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useIsMobile } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
+import { useIsMobile } from 'twenty-ui/utilities';
 
 export const RecordIndexActionMenu = ({ indexId }: { indexId: string }) => {
   const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2(

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuBarAllActionsButton.tsx

@@ -1,7 +1,8 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconLayoutSidebarRightExpand, getOsControlSymbol } from 'twenty-ui';
+import { IconLayoutSidebarRightExpand } from 'twenty-ui/display';
+import { getOsControlSymbol } from 'twenty-ui/utilities';
 
 const StyledButton = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.sm};

packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx

@@ -17,7 +17,8 @@ import { extractComponentState } from '@/ui/utilities/state/component-state/util
 import styled from '@emotion/styled';
 import { i18n } from '@lingui/core';
 import { useRecoilValue } from 'recoil';
-import { IconLayoutSidebarRightExpand, MenuItem } from 'twenty-ui';
+import { IconLayoutSidebarRightExpand } from 'twenty-ui/display';
+import { MenuItem } from 'twenty-ui/navigation';
 
 const StyledDropdownMenuContainer = styled.div`
   width: 100%;

packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx

@@ -8,8 +8,8 @@ import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useIsMobile } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
+import { useIsMobile } from 'twenty-ui/utilities';
 
 export const RecordShowActionMenu = () => {
   const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2(

packages/twenty-front/src/modules/action-menu/components/RecordShowRightDrawerOpenRecordButton.tsx

@@ -21,8 +21,11 @@ import { useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { Button, IconBrowserMaximize, getOsControlSymbol } from 'twenty-ui';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
+import { Button } from 'twenty-ui/input';
+import { IconBrowserMaximize } from 'twenty-ui/display';
+import { getOsControlSymbol } from 'twenty-ui/utilities';
+
 const StyledLink = styled(Link)`
   text-decoration: none;
 `;

packages/twenty-front/src/modules/action-menu/components/__stories__/CommandMenuActionMenuDropdown.stories.tsx

@@ -14,15 +14,13 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { msg } from '@lingui/core/macro';
 import { userEvent, waitFor, within } from '@storybook/test';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import {
   ComponentDecorator,
-  IconFileExport,
-  IconHeart,
-  IconTrash,
-  MenuItemAccent,
   getCanvasElementForDropdownTesting,
-} from 'twenty-ui';
-import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+} from 'twenty-ui/testing';
+import { IconFileExport, IconHeart, IconTrash } from 'twenty-ui/display';
+import { MenuItemAccent } from 'twenty-ui/navigation';
 
 const deleteMock = jest.fn();
 const addToFavoritesMock = jest.fn();

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBarEntry.stories.tsx

@@ -7,8 +7,9 @@ import { msg } from '@lingui/core/macro';
 import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
-import { ComponentDecorator, IconCheckbox, IconTrash } from 'twenty-ui';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+import { ComponentDecorator } from 'twenty-ui/testing';
+import { IconCheckbox, IconTrash } from 'twenty-ui/display';
 
 const meta: Meta<typeof RecordIndexActionMenuBarEntry> = {
   title: 'Modules/ActionMenu/RecordIndexActionMenuBarEntry',

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx

@@ -15,13 +15,9 @@ import {
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { msg } from '@lingui/core/macro';
-import {
-  IconCheckbox,
-  IconHeart,
-  IconTrash,
-  getCanvasElementForDropdownTesting,
-} from 'twenty-ui';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+import { IconCheckbox, IconHeart, IconTrash } from 'twenty-ui/display';
+import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing';
 
 const deleteMock = jest.fn();
 const markAsDoneMock = jest.fn();

packages/twenty-front/src/modules/action-menu/types/ActionMenuEntry.ts

@@ -2,7 +2,8 @@ import { ActionViewType } from '@/action-menu/actions/types/ActionViewType';
 import { ConfirmationModalProps } from '@/ui/layout/modal/components/ConfirmationModal';
 import { MessageDescriptor } from '@lingui/core';
 import { MouseEvent, ReactElement } from 'react';
-import { IconComponent, MenuItemAccent } from 'twenty-ui';
+import { IconComponent } from 'twenty-ui/display';
+import { MenuItemAccent } from 'twenty-ui/navigation';
 
 export enum ActionMenuEntryType {
   Standard = 'Standard',

packages/twenty-front/src/modules/activities/blocks/components/FileBlock.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -10,8 +10,8 @@ import { I18nProvider } from '@lingui/react';
 import { HelmetProvider } from 'react-helmet-async';
 import { RecoilRoot } from 'recoil';
 import { RecoilURLSyncJSON } from 'recoil-sync';
-import { IconsProvider } from 'twenty-ui';
 import { initialI18nActivate } from '~/utils/i18n/initialI18nActivate';
+import { IconsProvider } from 'twenty-ui/display';
 
 initialI18nActivate();
 

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import React from 'react';
-import { AnimatedEaseIn } from 'twenty-ui';
+import { AnimatedEaseIn } from 'twenty-ui/utilities';
 
 type TitleProps = React.PropsWithChildren & {
   animate?: boolean;

packages/twenty-front/src/modules/auth/hooks/__tests__/useAuth.test.tsx

@@ -4,7 +4,6 @@ import { expect } from '@storybook/test';
 import { ReactNode, act } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { RecoilRoot, useRecoilValue } from 'recoil';
-import { iconsState } from 'twenty-ui';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { billingState } from '@/client-config/states/billingState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
@@ -15,6 +14,7 @@ import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthPro
 import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState';
 import { renderHook } from '@testing-library/react';
 import { email, mocks, password, results, token } from '../__mocks__/useAuth';
+import { iconsState } from 'twenty-ui/display';
 
 const redirectSpy = jest.fn();
 

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -8,7 +8,6 @@ import {
   useRecoilValue,
   useSetRecoilState,
 } from 'recoil';
-import { iconsState } from 'twenty-ui';
 
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@@ -65,6 +64,7 @@ import { APP_LOCALES } from 'twenty-shared/translations';
 import { isDefined } from 'twenty-shared/utils';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 import { dynamicActivate } from '~/utils/i18n/dynamicActivate';
+import { iconsState } from 'twenty-ui/display';
 
 export const useAuth = () => {
   const setTokenPair = useSetRecoilState(tokenPairState);

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

@@ -4,7 +4,11 @@ import { SubTitle } from '@/auth/components/SubTitle';
 import { Title } from '@/auth/components/Title';
 import { useHandleResendEmailVerificationToken } from '@/auth/sign-in-up/hooks/useHandleResendEmailVerificationToken';
 import { useTheme } from '@emotion/react';
-import { AnimatedEaseIn, IconMail, Loader, MainButton, RGBA } from 'twenty-ui';
+import { AnimatedEaseIn } from 'twenty-ui/utilities';
+import { IconMail } from 'twenty-ui/display';
+import { Loader } from 'twenty-ui/feedback';
+import { MainButton } from 'twenty-ui/input';
+import { RGBA } from 'twenty-ui/theme';
 
 const StyledMailContainer = styled.div`
   align-items: center;

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

@@ -4,7 +4,6 @@ import { useState } from 'react';
 import { FormProvider } from 'react-hook-form';
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { HorizontalSeparator, Loader, MainButton } from 'twenty-ui';
 
 import { useAuth } from '@/auth/hooks/useAuth';
 import { SignInUpEmailField } from '@/auth/sign-in-up/components/SignInUpEmailField';
@@ -28,6 +27,9 @@ import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/Snac
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 import { isDefined } from 'twenty-shared/utils';
+import { HorizontalSeparator } from 'twenty-ui/display';
+import { Loader } from 'twenty-ui/feedback';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledContentContainer = styled(motion.div)`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

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

@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { motion } from 'framer-motion';
 import { Controller, useFormContext } from 'react-hook-form';
-import { StyledText } from 'twenty-ui';
+import { StyledText } from 'twenty-ui/display';
 
 const StyledFullWidthMotionDiv = styled(motion.div)`
   width: 100%;

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

@@ -4,11 +4,12 @@ import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
 import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
-import { HorizontalSeparator, MainButton } from 'twenty-ui';
 
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import React from 'react';
 import { isDefined } from 'twenty-shared/utils';
+import { HorizontalSeparator } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

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

@@ -15,8 +15,9 @@ import { useLingui } from '@lingui/react/macro';
 import { useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Loader, MainButton } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { Loader } from 'twenty-ui/feedback';
+import { MainButton } from 'twenty-ui/input';
 
 const StyledForm = styled.form`
   align-items: center;

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

@@ -7,7 +7,8 @@ import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { memo } from 'react';
 import { useRecoilValue } from 'recoil';
-import { HorizontalSeparator, IconGoogle, MainButton } from 'twenty-ui';
+import { HorizontalSeparator, IconGoogle } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 const GoogleIcon = memo(() => {
   const theme = useTheme();

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

@@ -6,7 +6,8 @@ import {
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
-import { HorizontalSeparator, IconMicrosoft, MainButton } from 'twenty-ui';
+import { HorizontalSeparator, IconMicrosoft } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 export const SignInUpWithMicrosoft = () => {
   const theme = useTheme();

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

@@ -7,8 +7,9 @@ import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthPro
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { HorizontalSeparator, IconLock, MainButton } from 'twenty-ui';
 import { isDefined } from 'twenty-shared/utils';
+import { HorizontalSeparator, IconLock } from 'twenty-ui/display';
+import { MainButton } from 'twenty-ui/input';
 
 export const SignInUpWithSSO = () => {
   const theme = useTheme();

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

@@ -11,7 +11,8 @@ import styled from '@emotion/styled';
 import { Trans } from '@lingui/react/macro';
 import { FormProvider } from 'react-hook-form';
 import { useRecoilValue } from 'recoil';
-import { ActionLink, HorizontalSeparator } from 'twenty-ui';
+import { ActionLink } from 'twenty-ui/navigation';
+import { HorizontalSeparator } from 'twenty-ui/display';
 
 const StyledContentContainer = styled.div`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts

@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
 import { UserExists } from '~/generated/graphql';
+import { createState } from 'twenty-ui/utilities';
 
 export const availableSSOIdentityProvidersForAuthState = createState<
   NonNullable<UserExists['availableWorkspaces']>[0]['sso']

packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts

@@ -1,7 +1,7 @@
 import { BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
 import { BILLING_CHECKOUT_SESSION_DEFAULT_VALUE } from '@/billing/constants/BillingCheckoutSessionDefaultValue';
-import { createState } from '@ui/utilities/state/utils/createState';
 import { syncEffect } from 'recoil-sync';
+import { createState } from 'twenty-ui/utilities';
 
 export const billingCheckoutSessionState = createState<BillingCheckoutSession>({
   key: 'billingCheckoutSessionState',