From f0c7c8c56752ee36c0b1e600b26e62b975f10f7b Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Thu, 30 Jan 2025 13:33:26 +0100
Subject: [PATCH 01/21] chore(front): twenty-ui as local package dep

---
 packages/twenty-front/package.json | 3 ++-
 yarn.lock                          | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json
index 3b444a6472fb..2ae810580f9d 100644
--- a/packages/twenty-front/package.json
+++ b/packages/twenty-front/package.json
@@ -51,7 +51,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": {
     "@types/file-saver": "^2"
diff --git a/yarn.lock b/yarn.lock
index ca3eab9838f0..22e2960b346d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -45871,6 +45871,7 @@ __metadata:
     recoil-sync: "npm:^0.2.0"
     transliteration: "npm:^2.3.5"
     twenty-shared: "workspace:*"
+    twenty-ui: "workspace:*"
   languageName: unknown
   linkType: soft
 
@@ -45949,7 +45950,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"twenty-ui@workspace:packages/twenty-ui":
+"twenty-ui@workspace:*, twenty-ui@workspace:packages/twenty-ui":
   version: 0.0.0-use.local
   resolution: "twenty-ui@workspace:packages/twenty-ui"
   dependencies:

From 6ae1f64d40fc7ceb9bbb9c5631800a6b47065f47 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Thu, 30 Jan 2025 13:41:45 +0100
Subject: [PATCH 02/21] chore(front): replace imports

---
 .../copilot/right-drawer/states/copilotQueryState.ts      | 2 +-
 .../emails/states/lastViewableEmailThreadIdState.ts       | 2 +-
 .../states/activityTargetableEntityArrayState.ts          | 2 +-
 .../modules/activities/states/canCreateActivityState.ts   | 2 +-
 .../activities/states/isActivityInCreateModeState.ts      | 2 +-
 .../activities/states/isCreatingActivityInDBState.ts      | 2 +-
 .../auth/states/availableIdentityProviderForAuthState.ts  | 2 +-
 .../modules/auth/states/billingCheckoutSessionState.ts    | 2 +-
 .../src/modules/auth/states/currentUserState.ts           | 2 +-
 .../modules/auth/states/currentWorkspaceMemberState.ts    | 2 +-
 .../modules/auth/states/currentWorkspaceMembersStates.ts  | 2 +-
 .../src/modules/auth/states/currentWorkspaceState.ts      | 2 +-
 .../src/modules/auth/states/isCurrentUserLoadingState.ts  | 2 +-
 .../src/modules/auth/states/isVerifyPendingState.ts       | 2 +-
 .../src/modules/auth/states/previousUrlState.ts           | 2 +-
 .../src/modules/auth/states/signInUpModeState.ts          | 2 +-
 .../src/modules/auth/states/signInUpStepState.ts          | 2 +-
 .../src/modules/auth/states/tokenPairState.ts             | 2 +-
 .../src/modules/auth/states/workspacePublicDataState.ts   | 2 +-
 .../twenty-front/src/modules/auth/states/workspaces.ts    | 2 +-
 .../src/modules/captcha/states/captchaTokenState.ts       | 2 +-
 .../modules/captcha/states/isCaptchaScriptLoadedState.ts  | 2 +-
 .../captcha/states/isRequestingCaptchaTokenState.ts       | 2 +-
 .../states/isLoadingTokensFromExtensionState.ts           | 2 +-
 .../src/modules/client-config/states/apiConfigState.ts    | 2 +-
 .../modules/client-config/states/authProvidersState.ts    | 2 +-
 .../src/modules/client-config/states/billingState.ts      | 2 +-
 .../src/modules/client-config/states/captchaState.ts      | 2 +-
 .../client-config/states/chromeExtensionIdState.ts        | 2 +-
 .../client-config/states/clientConfigApiStatusState.ts    | 2 +-
 .../client-config/states/isAnalyticsEnabledState.ts       | 2 +-
 .../src/modules/client-config/states/isDebugModeState.ts  | 2 +-
 .../states/isDeveloperDefaultSignInPrefilledState.ts      | 2 +-
 .../client-config/states/isMultiWorkspaceEnabledState.ts  | 2 +-
 .../src/modules/client-config/states/sentryConfigState.ts | 2 +-
 .../src/modules/client-config/states/supportChatState.ts  | 2 +-
 .../modules/command-menu/states/commandMenuPageState.ts   | 2 +-
 .../modules/command-menu/states/commandMenuPageTitle.ts   | 3 +--
 .../modules/command-menu/states/commandMenuSearchState.ts | 2 +-
 .../states/mainContextStoreComponentInstanceId.ts         | 2 +-
 .../domain-manager/states/domainConfigurationState.ts     | 2 +-
 .../states/lastAuthenticatedWorkspaceDomainState.ts       | 2 +-
 .../components/CurrentWorkspaceMemberOrphanFavorites.tsx  | 3 +--
 .../modules/localization/states/dateTimeFormatState.ts    | 2 +-
 .../states/currentMobileNavigationDrawerState.ts          | 2 +-
 .../states/isAppWaitingForFreshObjectMetadataState.ts     | 2 +-
 .../object-metadata/states/objectMetadataItemsState.ts    | 2 +-
 .../record-board-column/states/aggregateDropdownState.ts  | 2 +-
 .../record-field/states/lastShowPageRecordId.ts           | 2 +-
 .../states/recordIndexFieldDefinitionsState.ts            | 2 +-
 .../record-index/states/recordIndexFiltersState.ts        | 2 +-
 .../states/recordIndexIsCompactModeActiveState.ts         | 2 +-
 .../states/recordIndexKanbanAggregateOperationState.ts    | 2 +-
 .../states/recordIndexKanbanFieldMetadataIdState.ts       | 2 +-
 .../record-index/states/recordIndexSortsState.ts          | 2 +-
 .../states/recordIndexViewFilterGroupsState.ts            | 2 +-
 .../record-index/states/recordIndexViewTypeState.ts       | 2 +-
 .../states/isNewViewableRecordLoading.ts                  | 2 +-
 .../record-right-drawer/states/viewableRecordIdState.ts   | 2 +-
 .../states/viewableRecordNameSingularState.ts             | 2 +-
 .../__tests__/useUpsertTableRecordInGroup.test.tsx        | 2 +-
 .../__tests__/useUpsertTableRecordNoGroup.test.tsx        | 2 +-
 .../record-table/states/isRemoveSortingModalOpenState.ts  | 2 +-
 .../record-table/states/isSoftFocusUsingMouseState.ts     | 2 +-
 .../fields/preview/states/settingsPreviewRecordIdState.ts | 2 +-
 .../security/states/SSOIdentitiesProvidersState.ts        | 2 +-
 .../components/SignInAppNavigationDrawerMock.tsx          | 3 +--
 .../states/spreadsheetImportDialogState.ts                | 2 +-
 .../components/__stories__/SnackBar.stories.tsx           | 8 ++++----
 .../layout/dropdown/states/activeDropdownFocusIdState.ts  | 2 +-
 .../dropdown/states/previousDropdownFocusIdState.ts       | 2 +-
 .../states/isRightDrawerAnimationCompletedState.ts        | 2 +-
 .../right-drawer/states/isRightDrawerMinimizedState.ts    | 2 +-
 .../layout/right-drawer/states/isRightDrawerOpenState.ts  | 2 +-
 .../ui/layout/right-drawer/states/messageThreadState.ts   | 2 +-
 .../right-drawer/states/rightDrawerCloseEventsState.ts    | 2 +-
 .../states/rightDrawerHeaderDropdownButtonState.ts        | 2 +-
 .../ui/layout/right-drawer/states/rightDrawerPageState.ts | 2 +-
 .../layout/states/isDefaultLayoutAuthModalVisibleState.ts | 2 +-
 .../__stories__/NavigationDrawerItem.stories.tsx          | 2 +-
 .../ui/navigation/states/navigationMemorizedUrlState.ts   | 2 +-
 .../ui/navigation/step-bar/states/stepBarInternalState.ts | 2 +-
 .../hotkey/states/internal/currentHotkeyScopeState.ts     | 2 +-
 .../states/internal/internalHotkeysEnabledScopesState.ts  | 2 +-
 .../hotkey/states/internal/pendingHotkeysState.ts         | 2 +-
 .../hotkey/states/internal/previousHotkeyScopeState.ts    | 2 +-
 .../loading-state/states/currentPageLocationState.ts      | 2 +-
 .../openOverrideWorkflowDraftConfirmationModalState.ts    | 2 +-
 .../src/modules/workflow/states/workflowIdState.ts        | 2 +-
 .../workflow/states/workflowLastCreatedStepIdState.ts     | 2 +-
 .../src/modules/workflow/states/workflowVersionIdState.ts | 2 +-
 .../workflow-diagram/states/workflowDiagramState.ts       | 2 +-
 .../states/workflowDiagramTriggerNodeSelectionState.ts    | 2 +-
 .../workflow-diagram/states/workflowReactFlowRefState.ts  | 2 +-
 .../workflow-diagram/states/workflowSelectedNodeState.ts  | 2 +-
 .../states/workflowCreateStepFromParentStepIdState.ts     | 2 +-
 .../states/workspaceInvitationsStates.ts                  | 2 +-
 .../workspace/states/workspaceAuthProvidersState.ts       | 2 +-
 .../data-model/states/updatedObjectNamePluralState.ts     | 2 +-
 99 files changed, 102 insertions(+), 105 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts b/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts
index b2782ace42be..ee56e8b0fe80 100644
--- a/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts
+++ b/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const copilotQueryState = createState({
   key: 'activities/copilot-query',
diff --git a/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts b/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts
index 2bcf9c1e2f4b..4e90b960566d 100644
--- a/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts
+++ b/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const emailThreadIdWhenEmailThreadWasClosedState = createState<
   string | null
diff --git a/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts b/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
index c251913b9bdd..0d6e06ab4683 100644
--- a/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
+++ b/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
 
diff --git a/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts b/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts
index 709399107cce..5da7f60e1c66 100644
--- a/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts
+++ b/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const canCreateActivityState = createState<boolean>({
   key: 'canCreateActivityState',
diff --git a/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts b/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts
index 4ae973044ee9..61aaf33d36db 100644
--- a/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts
+++ b/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isActivityInCreateModeState = createState<boolean>({
   key: 'isActivityInCreateModeState',
diff --git a/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts b/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts
index 30e111a66344..278b2430c172 100644
--- a/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts
+++ b/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isUpsertingActivityInDBState = createState<boolean>({
   key: 'isUpsertingActivityInDBState',
diff --git a/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts b/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts
index a8ecdfd937a7..d3100a826b3a 100644
--- a/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts
+++ b/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 import { UserExists } from '~/generated/graphql';
 
 export const availableSSOIdentityProvidersForAuthState = createState<
diff --git a/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts b/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts
index e80cd0e16bd3..d07810b07b42 100644
--- a/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts
+++ b/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';
 
 export const billingCheckoutSessionState = createState<BillingCheckoutSession>({
   key: 'billingCheckoutSessionState',
diff --git a/packages/twenty-front/src/modules/auth/states/currentUserState.ts b/packages/twenty-front/src/modules/auth/states/currentUserState.ts
index 72f11157a1d7..26880ddaef24 100644
--- a/packages/twenty-front/src/modules/auth/states/currentUserState.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentUserState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { User } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts
index 33013f124216..4af6c5b8f221 100644
--- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 
diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts
index 160e786b6b2c..a8059259a3e7 100644
--- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts
@@ -1,5 +1,5 @@
 import { CurrentWorkspaceMember } from '@/auth/states/currentWorkspaceMemberState';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const currentWorkspaceMembersState = createState<
   CurrentWorkspaceMember[]
diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts
index d299d2246832..e54f550d3289 100644
--- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { Workspace } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts b/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts
index 242739b7b17b..0a62d92ab4cf 100644
--- a/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts
+++ b/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isCurrentUserLoadedState = createState<boolean>({
   key: 'isCurrentUserLoadedState',
diff --git a/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts b/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts
index 0e554b0c8c8d..567910389ba5 100644
--- a/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts
+++ b/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isVerifyPendingState = createState<boolean>({
   key: 'isVerifyPendingState',
diff --git a/packages/twenty-front/src/modules/auth/states/previousUrlState.ts b/packages/twenty-front/src/modules/auth/states/previousUrlState.ts
index 951436d33074..1de274fb18c5 100644
--- a/packages/twenty-front/src/modules/auth/states/previousUrlState.ts
+++ b/packages/twenty-front/src/modules/auth/states/previousUrlState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const previousUrlState = createState<string>({
   key: 'previousUrlState',
diff --git a/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts b/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts
index 398fe2604bf1..c04ef6056b57 100644
--- a/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts
+++ b/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts
@@ -1,5 +1,5 @@
 import { SignInUpMode } from '@/auth/types/signInUpMode';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const signInUpModeState = createState<SignInUpMode>({
   key: 'signInUpModeState',
diff --git a/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts b/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts
index 613d3a019b0f..a12b92ee03a0 100644
--- a/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts
+++ b/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export enum SignInUpStep {
   Init = 'init',
diff --git a/packages/twenty-front/src/modules/auth/states/tokenPairState.ts b/packages/twenty-front/src/modules/auth/states/tokenPairState.ts
index 2d8d597e4f8e..718e67ad6277 100644
--- a/packages/twenty-front/src/modules/auth/states/tokenPairState.ts
+++ b/packages/twenty-front/src/modules/auth/states/tokenPairState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { AuthTokenPair } from '~/generated/graphql';
 import { cookieStorageEffect } from '~/utils/recoil-effects';
diff --git a/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts b/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts
index 64bafed36b64..f4866fa653ca 100644
--- a/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts
+++ b/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 import { PublicWorkspaceDataOutput } from '~/generated/graphql';
 
 export const workspacePublicDataState =
diff --git a/packages/twenty-front/src/modules/auth/states/workspaces.ts b/packages/twenty-front/src/modules/auth/states/workspaces.ts
index b7e7c8758e50..8e262ecf0e16 100644
--- a/packages/twenty-front/src/modules/auth/states/workspaces.ts
+++ b/packages/twenty-front/src/modules/auth/states/workspaces.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { Workspace } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts b/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts
index 7ec02e49489f..24289cac6c6c 100644
--- a/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts
+++ b/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const captchaTokenState = createState<string | undefined>({
   key: 'captchaTokenState',
diff --git a/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts b/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts
index f6fa69169e8b..0db486bbe785 100644
--- a/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts
+++ b/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isCaptchaScriptLoadedState = createState<boolean>({
   key: 'isCaptchaScriptLoadedState',
diff --git a/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts b/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts
index 86f4e9f6a035..df7daeb4ddb5 100644
--- a/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts
+++ b/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isRequestingCaptchaTokenState = createState<boolean>({
   key: 'isRequestingCaptchaTokenState',
diff --git a/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts b/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts
index 91525e5626e3..e04798f19995 100644
--- a/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts
+++ b/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isLoadingTokensFromExtensionState = createState<boolean | null>({
   key: 'isLoadingTokensFromExtensionState',
diff --git a/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts b/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts
index 77e8295c7a1b..9a01493e4f84 100644
--- a/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { ApiConfig } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts b/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts
index 46646c40d96a..d56572b5a969 100644
--- a/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { AuthProviders } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/client-config/states/billingState.ts b/packages/twenty-front/src/modules/client-config/states/billingState.ts
index b188943b0909..5634c510b33e 100644
--- a/packages/twenty-front/src/modules/client-config/states/billingState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/billingState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { Billing } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/client-config/states/captchaState.ts b/packages/twenty-front/src/modules/client-config/states/captchaState.ts
index 8d22c88f6e33..77cedd1014a4 100644
--- a/packages/twenty-front/src/modules/client-config/states/captchaState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/captchaState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { Captcha } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts b/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts
index b29db3633b4e..bec5ae986aa0 100644
--- a/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const chromeExtensionIdState = createState<string | null | undefined>({
   key: 'chromeExtensionIdState',
diff --git a/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts b/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts
index 9f5f6f9e5d39..08793188ff1a 100644
--- a/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 type ClientConfigApiStatus = {
   isLoaded: boolean;
diff --git a/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts b/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts
index f21835209a0a..50c0f5c89c25 100644
--- a/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isAnalyticsEnabledState = createState<boolean>({
   key: 'isAnalyticsEnabled',
diff --git a/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts b/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts
index 037661f1a722..b2efbf8fc883 100644
--- a/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isDebugModeState = createState<boolean>({
   key: 'isDebugModeState',
diff --git a/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts b/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts
index 30839339afaa..5f4d82bed79a 100644
--- a/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isDeveloperDefaultSignInPrefilledState = createState<boolean>({
   key: 'isDeveloperDefaultSignInPrefilledState',
diff --git a/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts b/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts
index a18c415f5351..4749eeab9e49 100644
--- a/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isMultiWorkspaceEnabledState = createState<boolean>({
   key: 'isMultiWorkspaceEnabled',
diff --git a/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts b/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts
index 5046ce9b6314..19ca0359955c 100644
--- a/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { Sentry } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/client-config/states/supportChatState.ts b/packages/twenty-front/src/modules/client-config/states/supportChatState.ts
index 81d7fb901c39..cca337ba5816 100644
--- a/packages/twenty-front/src/modules/client-config/states/supportChatState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/supportChatState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { Support } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts
index 34b1253d35a3..a1e6b37ccaf7 100644
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts
+++ b/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';
 
 export const commandMenuPageState = createState<CommandMenuPages>({
   key: 'command-menu/commandMenuPageState',
diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageTitle.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuPageTitle.ts
index 986421873a13..8d53bc8f7a86 100644
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageTitle.ts
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuPageTitle.ts
@@ -1,5 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, createState } from 'twenty-ui';
 
 export const commandMenuPageInfoState = createState<{
   title: string | undefined;
diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts
index b7315d5d08f8..61f580a8ae17 100644
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const commandMenuSearchState = createState<string>({
   key: 'command-menu/commandMenuSearchState',
diff --git a/packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts b/packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts
index 2a1fffbb2804..461c03be896a 100644
--- a/packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts
+++ b/packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts
@@ -1,5 +1,5 @@
 import { CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE } from '@/context-store/constants/ContextStoreInstanceIdDefaultValue';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const mainContextStoreComponentInstanceIdState = createState<string>({
   key: 'mainContextStoreComponentInstanceIdState',
diff --git a/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts b/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts
index 0ea281bcedb0..89dc124042bf 100644
--- a/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts
+++ b/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 import { ClientConfig } from '~/generated/graphql';
 
 export const domainConfigurationState = createState<
diff --git a/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts b/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts
index 67c44f43f279..1c15f96cbc3d 100644
--- a/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts
+++ b/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 import { cookieStorageEffect } from '~/utils/recoil-effects';
 
 export const lastAuthenticatedWorkspaceDomainState = createState<
diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx
index bdb42cf81ccc..8985f0f87a5e 100644
--- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberOrphanFavorites.tsx
@@ -7,10 +7,9 @@ import { isLocationMatchingFavorite } from '@/favorites/utils/isLocationMatching
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
 import styled from '@emotion/styled';
-import { LightIconButton } from '@ui/input/button/components/LightIconButton';
 import { useContext } from 'react';
 import { useLocation } from 'react-router-dom';
-import { IconHeartOff } from 'twenty-ui';
+import { IconHeartOff, LightIconButton } from 'twenty-ui';
 
 const StyledEmptyContainer = styled.div`
   width: 100%;
diff --git a/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts b/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts
index 60bd66c61b0e..2392151e3a59 100644
--- a/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts
+++ b/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts
@@ -1,7 +1,7 @@
 import { DateFormat } from '@/localization/constants/DateFormat';
 import { TimeFormat } from '@/localization/constants/TimeFormat';
 import { detectTimeZone } from '@/localization/utils/detectTimeZone';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const dateTimeFormatState = createState<{
   timeZone: string;
diff --git a/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts b/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
index 540c6fad16d8..c376b1953102 100644
--- a/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
+++ b/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const currentMobileNavigationDrawerState = createState<
   'main' | 'settings'
diff --git a/packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts b/packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts
index e5eb25380776..2cbe59765fdf 100644
--- a/packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts
+++ b/packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isAppWaitingForFreshObjectMetadataState = createState<boolean>({
   key: 'isAppWaitingForFreshObjectMetadataState',
diff --git a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts
index 57545e5b1b55..5c247fe0e1e5 100644
--- a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts
+++ b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/states/aggregateDropdownState.ts b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/states/aggregateDropdownState.ts
index 310f9db0d8d2..31eeb84fc7a2 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/states/aggregateDropdownState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/states/aggregateDropdownState.ts
@@ -1,5 +1,5 @@
 import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 type AggregateOperation = {
   operation: AGGREGATE_OPERATIONS | null;
diff --git a/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts b/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts
index 42e159bbd086..dce923b37bda 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const lastShowPageRecordIdState = createState<string | null>({
   key: 'lastShowPageRecordIdState',
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts
index dfd92d42e7a5..1b260d3c9c20 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts
index b60300f83c9b..f196c4893190 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts
index 3cc57f14f9e7..cd1d83fbb89f 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const recordIndexIsCompactModeActiveState = createState<boolean>({
   key: 'recordIndexIsCompactModeActiveState',
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts
index c0ba9cf3c18f..65004f32938d 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts
@@ -1,5 +1,5 @@
 import { ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export type KanbanAggregateOperation = {
   operation?: ExtendedAggregateOperations | null;
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts
index bb28f4ad0523..f1527934d48c 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const recordIndexKanbanFieldMetadataIdState = createState<string | null>(
   {
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts
index 2d839afdd7a7..57088c8e5670 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
 
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewFilterGroupsState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewFilterGroupsState.ts
index ea07e363d4f0..978614756ca7 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewFilterGroupsState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewFilterGroupsState.ts
@@ -1,5 +1,5 @@
 import { ViewFilterGroup } from '@/views/types/ViewFilterGroup';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const recordIndexViewFilterGroupsState = createState<ViewFilterGroup[]>({
   key: 'recordIndexViewFilterGroupsState',
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts
index ad8fbfc5c21e..49b032c860d1 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { ViewType } from '@/views/types/ViewType';
 
diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts
index 7e5b6e2bc449..904677204cc6 100644
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isNewViewableRecordLoadingState = createState<boolean>({
   key: 'activities/is-new-viewable-record-loading',
diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts
index ae72a94359b6..c75e6cf8a8a5 100644
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const viewableRecordIdState = createState<string | null>({
   key: 'activities/viewable-record-id',
diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts
index 6e0e5a6eaeff..3116430e10c3 100644
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const viewableRecordNameSingularState = createState<string | null>({
   key: 'activities/viewable-record-name-singular',
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordInGroup.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordInGroup.test.tsx
index 84ab424776be..ee690ec18b88 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordInGroup.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordInGroup.test.tsx
@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
-import { createState } from '@ui/utilities/state/utils/createState';
 import { ReactNode, act } from 'react';
 import { RecoilRoot } from 'recoil';
+import { createState } from 'twenty-ui';
 
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordNoGroup.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordNoGroup.test.tsx
index ac3e65e89927..d1f29e2c9afe 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordNoGroup.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordNoGroup.test.tsx
@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
-import { createState } from '@ui/utilities/state/utils/createState';
 import { ReactNode, act } from 'react';
 import { RecoilRoot } from 'recoil';
+import { createState } from 'twenty-ui';
 
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts
index 542c069d2a16..9f8627f2a4dc 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isRemoveSortingModalOpenState = createState<boolean>({
   key: 'isRemoveSortingModalOpenState',
diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts
index 4d295db425f1..d25f46faa3b6 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isSoftFocusUsingMouseState = createState<boolean>({
   key: 'isSoftFocusUsingMouseState',
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/settingsPreviewRecordIdState.ts b/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/settingsPreviewRecordIdState.ts
index a810c8c002b2..68a5bbff9608 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/settingsPreviewRecordIdState.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/settingsPreviewRecordIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const settingsPreviewRecordIdState = createState<string | null>({
   key: 'settingsPreviewRecordIdState',
diff --git a/packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts b/packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts
index db9cd89fbc9e..76dc7cfdfbde 100644
--- a/packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts
+++ b/packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts
@@ -1,7 +1,7 @@
 /* @license Enterprise */
 
 import { SSOIdentityProvider } from '@/settings/security/types/SSOIdentityProvider';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const SSOIdentitiesProvidersState = createState<
   Omit<SSOIdentityProvider, '__typename'>[]
diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx
index eec4e1606b90..0d7da9dd48b1 100644
--- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx
@@ -9,8 +9,7 @@ import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/consta
 import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
-import { getOsControlSymbol } from '@ui/utilities/device/getOsControlSymbol';
-import { IconSearch, IconSettings, useIsMobile } from 'twenty-ui';
+import { IconSearch, IconSettings, getOsControlSymbol, useIsMobile } from 'twenty-ui';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts b/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts
index 4aad187facfc..fceda6736cab 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts
+++ b/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { SpreadsheetImportDialogOptions } from '../types';
 
diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/__stories__/SnackBar.stories.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/__stories__/SnackBar.stories.tsx
index e9650ca64a18..72d84c01bced 100644
--- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/__stories__/SnackBar.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/__stories__/SnackBar.stories.tsx
@@ -2,10 +2,10 @@ import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
 import {
-  CatalogDecorator,
-  CatalogStory,
-  ComponentDecorator,
-} from '@ui/testing';
+    CatalogDecorator,
+    CatalogStory,
+    ComponentDecorator,
+} from 'twenty-ui';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts
index 17cf76ba6304..fca8a5ba6f6b 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const activeDropdownFocusIdState = createState<string | null>({
   key: 'activeDropdownFocusIdState',
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts
index 060d78a191e6..e311d1f3fe4b 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const previousDropdownFocusIdState = createState<string | null>({
   key: 'previousDropdownFocusIdState',
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState.ts
index 61d75e2d5c65..3e1cb030a30c 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isRightDrawerAnimationCompletedState = createState<boolean>({
   key: 'isRightDrawerAnimationCompletedState',
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerMinimizedState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerMinimizedState.ts
index 822f909c0226..9b2124030610 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerMinimizedState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerMinimizedState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isRightDrawerMinimizedState = createState<boolean>({
   key: 'ui/layout/is-right-drawer-minimized',
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts
index 0fad6afabfec..b0149a5881a6 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isRightDrawerOpenState = createState<boolean>({
   key: 'ui/layout/is-right-drawer-open',
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts
index 77f9cd76a8c0..2e1febcf6e2f 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { MessageThread } from '@/activities/emails/types/MessageThread';
 
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts
index 9601f157214e..ac0813d8ea93 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const rightDrawerCloseEventState = createState<Event | null>({
   key: 'rightDrawerCloseEventState',
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts
index e61330290b11..a0f2a84965e7 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { RightDrawerTopBarDropdownButtons } from '@/ui/layout/right-drawer/types/RightDrawerTopBarDropdownButtons';
 
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts
index 441988db3a50..0cbcdee85f46 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { RightDrawerPages } from '../types/RightDrawerPages';
 
diff --git a/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts b/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts
index 7054e811ef38..c181a6a7d572 100644
--- a/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const isDefaultLayoutAuthModalVisibleState = createState<boolean>({
   key: 'isDefaultLayoutAuthModalVisibleState',
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx
index 5a73598450c3..b7860045cd6b 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx
@@ -5,7 +5,7 @@ import { CatalogDecorator, CatalogStory, IconSearch } from 'twenty-ui';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 
-import { getOsControlSymbol } from '@ui/utilities/device/getOsControlSymbol';
+import { getOsControlSymbol } from 'twenty-ui';
 import { NavigationDrawerItem } from '../NavigationDrawerItem';
 
 const StyledContainer = styled.div`
diff --git a/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts b/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts
index b8b681891320..bb8318ecd952 100644
--- a/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const navigationMemorizedUrlState = createState<string>({
   key: 'navigationMemorizedUrlState',
diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts b/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts
index e25c33352faa..d2bf60d60839 100644
--- a/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export type StepsState = {
   activeStep: number;
diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts
index 61b8165f0126..6b41a6705ed2 100644
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { INITIAL_HOTKEYS_SCOPE } from '../../constants/InitialHotkeysScope';
 import { HotkeyScope } from '../../types/HotkeyScope';
diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts
index 9478ec88674e..e2e06b62f46d 100644
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const internalHotkeysEnabledScopesState = createState<string[]>({
   key: 'internalHotkeysEnabledScopesState',
diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts
index d4d8db3b1c3a..13e1cc652c3d 100644
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts
@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
 import { Keys } from 'react-hotkeys-hook/dist/types';
+import { createState } from 'twenty-ui';
 
 export const pendingHotkeyState = createState<Keys | null>({
   key: 'pendingHotkeyState',
diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts
index 4585d8f32be7..3e438fef1b94 100644
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { HotkeyScope } from '../../types/HotkeyScope';
 
diff --git a/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts b/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts
index 0deeeb3dd8b2..601831e5a312 100644
--- a/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const currentPageLocationState = createState<string>({
   key: 'currentPageLocationState',
diff --git a/packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts b/packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts
index 97da85be3d1a..1320a964207d 100644
--- a/packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const openOverrideWorkflowDraftConfirmationModalState =
   createState<boolean>({
diff --git a/packages/twenty-front/src/modules/workflow/states/workflowIdState.ts b/packages/twenty-front/src/modules/workflow/states/workflowIdState.ts
index f107f5dd4bf7..112729ea4166 100644
--- a/packages/twenty-front/src/modules/workflow/states/workflowIdState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/workflowIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const workflowIdState = createState<string | undefined>({
   key: 'workflowIdState',
diff --git a/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts b/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts
index 998ac7a8641a..e39718e9cc29 100644
--- a/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const workflowLastCreatedStepIdState = createState<string | undefined>({
   key: 'workflowLastCreatedStepIdState',
diff --git a/packages/twenty-front/src/modules/workflow/states/workflowVersionIdState.ts b/packages/twenty-front/src/modules/workflow/states/workflowVersionIdState.ts
index f72cb3933f8f..2894697965dd 100644
--- a/packages/twenty-front/src/modules/workflow/states/workflowVersionIdState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/workflowVersionIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const workflowVersionIdState = createState<string | undefined>({
   key: 'workflowVersionIdState',
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramState.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramState.ts
index 740370e6e2aa..8d8fd17bc141 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramState.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramState.ts
@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
 import { WorkflowDiagram } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import { createState } from 'twenty-ui';
 
 export const workflowDiagramState = createState<WorkflowDiagram | undefined>({
   key: 'workflowDiagramState',
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramTriggerNodeSelectionState.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramTriggerNodeSelectionState.ts
index 06e64aded0c2..91630a30046e 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramTriggerNodeSelectionState.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramTriggerNodeSelectionState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const workflowDiagramTriggerNodeSelectionState = createState<
   string | undefined
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowReactFlowRefState.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowReactFlowRefState.ts
index 579eff7db8f4..d9c902916cc9 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowReactFlowRefState.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowReactFlowRefState.ts
@@ -1,5 +1,5 @@
-import { createState } from '@ui/utilities/state/utils/createState';
 import { RefObject } from 'react';
+import { createState } from 'twenty-ui';
 
 export const workflowReactFlowRefState =
   createState<RefObject<HTMLDivElement> | null>({
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowSelectedNodeState.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowSelectedNodeState.ts
index b393f8627c11..d920489d673d 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowSelectedNodeState.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowSelectedNodeState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const workflowSelectedNodeState = createState<string | undefined>({
   key: 'workflowSelectedNodeState',
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState.ts
index 95752ce60eac..4e64010b9630 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const workflowCreateStepFromParentStepIdState = createState<
   string | undefined
diff --git a/packages/twenty-front/src/modules/workspace-invitation/states/workspaceInvitationsStates.ts b/packages/twenty-front/src/modules/workspace-invitation/states/workspaceInvitationsStates.ts
index 80b84c3abb87..df720a3e5908 100644
--- a/packages/twenty-front/src/modules/workspace-invitation/states/workspaceInvitationsStates.ts
+++ b/packages/twenty-front/src/modules/workspace-invitation/states/workspaceInvitationsStates.ts
@@ -1,5 +1,5 @@
 import { WorkspaceInvitation } from '@/workspace-member/types/WorkspaceMember';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const workspaceInvitationsState = createState<
   Omit<WorkspaceInvitation, '__typename'>[]
diff --git a/packages/twenty-front/src/modules/workspace/states/workspaceAuthProvidersState.ts b/packages/twenty-front/src/modules/workspace/states/workspaceAuthProvidersState.ts
index a7a8b0f64501..55a8ed3a3ae6 100644
--- a/packages/twenty-front/src/modules/workspace/states/workspaceAuthProvidersState.ts
+++ b/packages/twenty-front/src/modules/workspace/states/workspaceAuthProvidersState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 import { AuthProviders } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectNamePluralState.ts b/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectNamePluralState.ts
index 8b4606eb6177..49b019922492 100644
--- a/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectNamePluralState.ts
+++ b/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectNamePluralState.ts
@@ -1,4 +1,4 @@
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-ui';
 
 export const updatedObjectNamePluralState = createState<string>({
   key: 'updatedObjectNamePluralState',

From 9e42ff284805188ab5ccce05f3bedd0b250df42e Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Thu, 30 Jan 2025 13:48:50 +0100
Subject: [PATCH 03/21] lint(front): fix

---
 .../components/SignInAppNavigationDrawerMock.tsx          | 7 ++++++-
 .../components/__stories__/SnackBar.stories.tsx           | 6 +-----
 .../__stories__/NavigationDrawerItem.stories.tsx          | 8 ++++++--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx
index 0d7da9dd48b1..cece1f04ee3c 100644
--- a/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx
+++ b/packages/twenty-front/src/modules/sign-in-background-mock/components/SignInAppNavigationDrawerMock.tsx
@@ -9,7 +9,12 @@ import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/consta
 import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceName';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
-import { IconSearch, IconSettings, getOsControlSymbol, useIsMobile } from 'twenty-ui';
+import {
+  IconSearch,
+  IconSettings,
+  getOsControlSymbol,
+  useIsMobile,
+} from 'twenty-ui';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 
diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/__stories__/SnackBar.stories.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/__stories__/SnackBar.stories.tsx
index 72d84c01bced..e5f3e63dc058 100644
--- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/__stories__/SnackBar.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/__stories__/SnackBar.stories.tsx
@@ -1,11 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
-import {
-    CatalogDecorator,
-    CatalogStory,
-    ComponentDecorator,
-} from 'twenty-ui';
+import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx
index b7860045cd6b..56e94623ed75 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx
@@ -1,11 +1,15 @@
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
-import { CatalogDecorator, CatalogStory, IconSearch } from 'twenty-ui';
+import {
+  CatalogDecorator,
+  CatalogStory,
+  IconSearch,
+  getOsControlSymbol,
+} from 'twenty-ui';
 
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
 
-import { getOsControlSymbol } from 'twenty-ui';
 import { NavigationDrawerItem } from '../NavigationDrawerItem';
 
 const StyledContainer = styled.div`

From def6e62f1ca8e4a8442c133f7be3740f730850a9 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Thu, 30 Jan 2025 13:49:03 +0100
Subject: [PATCH 04/21] chore(front): remove twenty-ui tsconfig paths

---
 packages/twenty-front/tsconfig.json      | 2 --
 packages/twenty-front/tsconfig.spec.json | 2 --
 packages/twenty-front/vite.config.ts     | 4 ----
 3 files changed, 8 deletions(-)

diff --git a/packages/twenty-front/tsconfig.json b/packages/twenty-front/tsconfig.json
index 4d00fbc3e30e..a7ffae976ec3 100644
--- a/packages/twenty-front/tsconfig.json
+++ b/packages/twenty-front/tsconfig.json
@@ -23,8 +23,6 @@
     "paths": {
       "@/*": ["./src/modules/*"],
       "~/*": ["./src/*"],
-      "twenty-ui": ["../twenty-ui/src/index.ts"],
-      "@ui/*": ["../twenty-ui/src/*"]
     }
   },
   "files": [],
diff --git a/packages/twenty-front/tsconfig.spec.json b/packages/twenty-front/tsconfig.spec.json
index 026604daaaca..dcac4be985c6 100644
--- a/packages/twenty-front/tsconfig.spec.json
+++ b/packages/twenty-front/tsconfig.spec.json
@@ -6,8 +6,6 @@
     "paths": {
      "@/*": ["./packages/twenty-front/src/modules/*"],
       "~/*": ["./packages/twenty-front/src/*"],
-      "twenty-ui": ["./packages/twenty-ui/src/index.ts"],
-      "@ui/*": ["./packages/twenty-ui/src/*"]
     }
   },
   "include": [
diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts
index 9a8a8033139a..29e3886ef856 100644
--- a/packages/twenty-front/vite.config.ts
+++ b/packages/twenty-front/vite.config.ts
@@ -8,7 +8,6 @@ import path from 'path';
 import { defineConfig, loadEnv, searchForWorkspaceRoot } from 'vite';
 import checker from 'vite-plugin-checker';
 import svgr from 'vite-plugin-svgr';
-import tsconfigPaths from 'vite-tsconfig-paths';
 
 type Checkers = Parameters<typeof checker>[0];
 
@@ -98,9 +97,6 @@ export default defineConfig(({ command, mode }) => {
         jsxImportSource: '@emotion/react',
         plugins: [['@lingui/swc-plugin', {}]],
       }),
-      tsconfigPaths({
-        projects: ['tsconfig.json', '../twenty-ui/tsconfig.json'],
-      }),
       svgr(),
       lingui({
         configPath: path.resolve(__dirname, './lingui.config.ts'),

From 7e36ab0d8b7c7cc3e95fb7294edd0c87542e44c9 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Thu, 30 Jan 2025 15:35:08 +0100
Subject: [PATCH 05/21] chore(ui): tsconfig build declaration and
 declarationMap

---
 packages/twenty-ui/tsconfig.build.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/twenty-ui/tsconfig.build.json b/packages/twenty-ui/tsconfig.build.json
index a6281404512a..ff1fcb4bf6f5 100644
--- a/packages/twenty-ui/tsconfig.build.json
+++ b/packages/twenty-ui/tsconfig.build.json
@@ -1,5 +1,9 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true
+  },
   "exclude": [
     "**/*.spec.ts",
     "**/*.spec.tsx",

From 152bad481de790f4e25fce45d14573d86e40ab51 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Thu, 30 Jan 2025 16:01:02 +0100
Subject: [PATCH 06/21] chore(shared): remove unused paths

---
 packages/twenty-shared/tsconfig.json | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/twenty-shared/tsconfig.json b/packages/twenty-shared/tsconfig.json
index bf6a9dfeb968..f65e4065274a 100644
--- a/packages/twenty-shared/tsconfig.json
+++ b/packages/twenty-shared/tsconfig.json
@@ -5,10 +5,7 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "types": ["vite/client"],
-    "baseUrl": ".",
-    "paths": {
-      "twenty-shared": ["packages/twenty-shared/dist"]
-    }
+     "baseUrl": "."
   },
   "files": [],
   "include": [],

From 3256c48c9bd463ad651c0387ffe0580a056be59c Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Thu, 30 Jan 2025 18:12:52 +0100
Subject: [PATCH 07/21] fix(ui): vite-tsconfig-paths needs baseurl

---
 packages/twenty-ui/tsconfig.build.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-ui/tsconfig.build.json b/packages/twenty-ui/tsconfig.build.json
index ff1fcb4bf6f5..9b48e2dc2fbf 100644
--- a/packages/twenty-ui/tsconfig.build.json
+++ b/packages/twenty-ui/tsconfig.build.json
@@ -2,7 +2,9 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "declaration": true,
-    "declarationMap": true
+    "declarationMap": true,
+    "baseUrl": ".",
+    "noEmit": false
   },
   "exclude": [
     "**/*.spec.ts",

From 18b0701fee18b10735d1d5e2229bfcc7b2187f03 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Thu, 30 Jan 2025 18:24:01 +0100
Subject: [PATCH 08/21] fix(front): vite config tsconfigPaths for own import

---
 packages/twenty-front/vite.config.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts
index 29e3886ef856..7f378525ba0f 100644
--- a/packages/twenty-front/vite.config.ts
+++ b/packages/twenty-front/vite.config.ts
@@ -8,7 +8,7 @@ import path from 'path';
 import { defineConfig, loadEnv, searchForWorkspaceRoot } from 'vite';
 import checker from 'vite-plugin-checker';
 import svgr from 'vite-plugin-svgr';
-
+import tsconfigPaths from "vite-tsconfig-paths";
 type Checkers = Parameters<typeof checker>[0];
 
 export default defineConfig(({ command, mode }) => {
@@ -97,6 +97,7 @@ export default defineConfig(({ command, mode }) => {
         jsxImportSource: '@emotion/react',
         plugins: [['@lingui/swc-plugin', {}]],
       }),
+      tsconfigPaths(),
       svgr(),
       lingui({
         configPath: path.resolve(__dirname, './lingui.config.ts'),

From e6d99f94f1aa9040740ee29347c7363a0e9de861 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Thu, 30 Jan 2025 18:24:27 +0100
Subject: [PATCH 09/21] fix(front,shared): define baseUrl for build tsc project

---
 packages/twenty-front/tsconfig.build.json | 3 ++-
 packages/twenty-shared/tsconfig.json      | 1 -
 packages/twenty-shared/tsconfig.lib.json  | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/tsconfig.build.json b/packages/twenty-front/tsconfig.build.json
index 7a17e21fdea8..f8e633b39582 100644
--- a/packages/twenty-front/tsconfig.build.json
+++ b/packages/twenty-front/tsconfig.build.json
@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "types": ["node"]
+    "types": ["node"],
+    "baseUrl": "."
   },
   "exclude": [
     "**/__mocks__/**/*",
diff --git a/packages/twenty-shared/tsconfig.json b/packages/twenty-shared/tsconfig.json
index f65e4065274a..a45b1acbd494 100644
--- a/packages/twenty-shared/tsconfig.json
+++ b/packages/twenty-shared/tsconfig.json
@@ -5,7 +5,6 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "types": ["vite/client"],
-     "baseUrl": "."
   },
   "files": [],
   "include": [],
diff --git a/packages/twenty-shared/tsconfig.lib.json b/packages/twenty-shared/tsconfig.lib.json
index 90abc8d4fd0d..1a07699820b1 100644
--- a/packages/twenty-shared/tsconfig.lib.json
+++ b/packages/twenty-shared/tsconfig.lib.json
@@ -7,7 +7,8 @@
     "types": [
       "node",
       "vite/client"
-    ]
+    ],
+    "baseUrl": "."
   },
   "exclude": [
     "**/*.spec.ts",

From 3addc85fd4871e5d7b2c039645247ae77d395e28 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Fri, 31 Jan 2025 00:48:44 +0100
Subject: [PATCH 10/21] fix(front): tscongig spec invalid json

---
 packages/twenty-front/tsconfig.spec.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/twenty-front/tsconfig.spec.json b/packages/twenty-front/tsconfig.spec.json
index dcac4be985c6..fc6b5202925a 100644
--- a/packages/twenty-front/tsconfig.spec.json
+++ b/packages/twenty-front/tsconfig.spec.json
@@ -5,7 +5,7 @@
     "baseUrl": "../..",
     "paths": {
      "@/*": ["./packages/twenty-front/src/modules/*"],
-      "~/*": ["./packages/twenty-front/src/*"],
+      "~/*": ["./packages/twenty-front/src/*"]
     }
   },
   "include": [

From 9634cd0a51ba821d323841fa87340fa36667d280 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Fri, 31 Jan 2025 16:29:23 +0100
Subject: [PATCH 11/21] fix(ui,front): wyw include

---
 packages/twenty-front/vite.config.ts |  8 +-------
 packages/twenty-ui/vite.config.ts    | 10 +++++++---
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts
index 7f378525ba0f..8fe1016ac224 100644
--- a/packages/twenty-front/vite.config.ts
+++ b/packages/twenty-front/vite.config.ts
@@ -109,13 +109,8 @@ export default defineConfig(({ command, mode }) => {
         include: [
           '**/CurrencyDisplay.tsx',
           '**/EllipsisDisplay.tsx',
-          '**/ContactLink.tsx',
           '**/BooleanDisplay.tsx',
           '**/LinksDisplay.tsx',
-          '**/RoundedLink.tsx',
-          '**/OverflowingTextWithTooltip.tsx',
-          '**/Chip.tsx',
-          '**/Tag.tsx',
           '**/MultiSelectFieldDisplay.tsx',
           '**/RatingInput.tsx',
           '**/RecordTableCellContainer.tsx',
@@ -127,7 +122,6 @@ export default defineConfig(({ command, mode }) => {
           '**/RecordTableTd.tsx',
           '**/RecordTableHeaderDragDropColumn.tsx',
           '**/ActorDisplay.tsx',
-          '**/AvatarChip.tsx',
         ],
         babelOptions: {
           presets: ['@babel/preset-typescript', '@babel/preset-react'],
@@ -136,7 +130,7 @@ export default defineConfig(({ command, mode }) => {
     ],
 
     optimizeDeps: {
-      exclude: ['../../node_modules/.vite', '../../node_modules/.cache'],
+      exclude: ['../../node_modules/.vite/*', '../../node_modules/.cache/*'],
     },
 
     build: {
diff --git a/packages/twenty-ui/vite.config.ts b/packages/twenty-ui/vite.config.ts
index 03fc2e351fbd..c83d50b53c02 100644
--- a/packages/twenty-ui/vite.config.ts
+++ b/packages/twenty-ui/vite.config.ts
@@ -43,11 +43,13 @@ export default defineConfig(({ command }) => {
       checker(checkersConfig),
       wyw({
         include: [
-          '**/OverflowingTextWithTooltip.tsx',
-          '**/Chip.tsx',
-          '**/Tag.tsx',
           '**/Avatar.tsx',
           '**/AvatarChip.tsx',
+          '**/Chip.tsx',
+          '**/Tag.tsx',
+          '**/OverflowingTextWithTooltip.tsx',
+          '**/ContactLink.tsx',
+          '**/RoundedLink.tsx'
         ],
         babelOptions: {
           presets: ['@babel/preset-typescript', '@babel/preset-react'],
@@ -58,6 +60,7 @@ export default defineConfig(({ command }) => {
     // Configuration for building your library.
     // See: https://vitejs.dev/guide/build.html#library-mode
     build: {
+      minify: false,
       outDir: './dist',
       reportCompressedSize: true,
       commonjsOptions: {
@@ -74,6 +77,7 @@ export default defineConfig(({ command }) => {
       },
       rollupOptions: {
         // External packages that should not be bundled into your library.
+        // Way to many dependencies here
         external: Object.keys(packageJson.dependencies || {}),
       },
     },

From 2447c86730e8d80e8fa4392cc2d07d29ba24d759 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Fri, 31 Jan 2025 19:09:18 +0100
Subject: [PATCH 12/21] refactor(ui): eject from barrels

---
 packages/twenty-ui/package.json               |  12 +-
 packages/twenty-ui/project.json               |  11 +-
 packages/twenty-ui/scripts/generateBarrels.js | 105 ------------------
 packages/twenty-ui/src/accessibility/index.ts |   3 -
 packages/twenty-ui/src/components/index.ts    |   1 -
 .../src/display/avatar/components/Avatar.tsx  |   9 +-
 .../components/__stories__/Avatar.stories.tsx |   4 +-
 .../__stories__/AvatarGroup.stories.tsx       |   7 +-
 .../display/chip/components/AvatarChip.tsx    |   3 +
 packages/twenty-ui/src/display/index.ts       |  62 -----------
 packages/twenty-ui/src/feedback/index.ts      |   4 -
 packages/twenty-ui/src/index.ts               |  10 --
 .../components/AnimatedLightIconButton.tsx    |   8 +-
 .../src/input/button/components/Button.tsx    |   2 +-
 .../button/components/ColorPickerButton.tsx   |   2 +-
 .../button/components/FloatingButton.tsx      |   2 +-
 .../button/components/FloatingIconButton.tsx  |   2 +-
 .../components/FloatingIconButtonGroup.tsx    |   8 +-
 .../input/button/components/IconButton.tsx    |   2 +-
 .../button/components/IconButtonGroup.tsx     |   2 +-
 .../input/button/components/LightButton.tsx   |   2 +-
 .../button/components/LightIconButton.tsx     |   2 +-
 .../components/LightIconButtonGroup.tsx       |   2 +-
 .../input/button/components/MainButton.tsx    |   2 +-
 .../button/components/RoundedIconButton.tsx   |   2 +-
 .../src/input/button/components/index.ts      |   0
 .../twenty-ui/src/input/code-editor/index.ts  |   3 -
 .../twenty-ui/src/input/components/Toggle.tsx |   2 +-
 packages/twenty-ui/src/input/index.ts         |  27 -----
 .../src/layout/animated-placeholder/index.ts  |   7 --
 packages/twenty-ui/src/layout/index.ts        |  21 ----
 packages/twenty-ui/src/navigation/index.ts    |  30 -----
 .../components/AdvancedSettingsToggle.tsx     |   4 +-
 .../link/components/GithubVersionLink.tsx     |   2 +-
 .../navigation/link/components/SocialLink.tsx |   2 +-
 .../src/navigation/link/components/index.ts   |   8 --
 .../twenty-ui/src/navigation/link/index.ts    |   3 -
 .../menu-item/components/MenuItem.tsx         |   4 +-
 .../menu-item/components/MenuItemCommand.tsx  |   2 +-
 .../components/MenuItemDraggable.tsx          |   4 +-
 .../components/MenuItemMultiSelect.tsx        |   3 +-
 .../components/MenuItemMultiSelectAvatar.tsx  |   2 +-
 .../components/MenuItemMultiSelectTag.tsx     |   5 +-
 .../menu-item/components/MenuItemNavigate.tsx |   3 +-
 .../menu-item/components/MenuItemSelect.tsx   |   3 +-
 .../components/MenuItemSelectAvatar.tsx       |   2 +-
 .../components/MenuItemSelectColor.tsx        |   2 +-
 .../components/MenuItemSelectTag.tsx          |   3 +-
 .../components/MenuItemSuggestion.tsx         |   2 +-
 .../menu-item/components/MenuItemToggle.tsx   |   4 +-
 .../navigation/menu-item/components/index.ts  |  15 ---
 .../src/navigation/menu-item/index.ts         |   4 -
 .../components/MenuItemLeftContent.tsx        |   9 +-
 .../components/StyledMenuItemBase.tsx         |   2 +-
 packages/twenty-ui/src/testing/index.ts       |   8 --
 .../src/utilities/animation/index.ts          |   7 --
 .../twenty-ui/src/utilities/config/index.ts   |  28 -----
 packages/twenty-ui/src/utilities/index.ts     |  17 ---
 .../utilities/responsive/hooks/useIsMobile.ts |   2 +-
 packages/twenty-ui/vite.config.ts             |  29 ++++-
 yarn.lock                                     |   3 +-
 61 files changed, 102 insertions(+), 439 deletions(-)
 delete mode 100644 packages/twenty-ui/scripts/generateBarrels.js
 delete mode 100644 packages/twenty-ui/src/accessibility/index.ts
 delete mode 100644 packages/twenty-ui/src/components/index.ts
 delete mode 100644 packages/twenty-ui/src/display/index.ts
 delete mode 100644 packages/twenty-ui/src/feedback/index.ts
 delete mode 100644 packages/twenty-ui/src/index.ts
 delete mode 100644 packages/twenty-ui/src/input/button/components/index.ts
 delete mode 100644 packages/twenty-ui/src/input/code-editor/index.ts
 delete mode 100644 packages/twenty-ui/src/input/index.ts
 delete mode 100644 packages/twenty-ui/src/layout/animated-placeholder/index.ts
 delete mode 100644 packages/twenty-ui/src/layout/index.ts
 delete mode 100644 packages/twenty-ui/src/navigation/index.ts
 delete mode 100644 packages/twenty-ui/src/navigation/link/components/index.ts
 delete mode 100644 packages/twenty-ui/src/navigation/link/index.ts
 delete mode 100644 packages/twenty-ui/src/navigation/menu-item/components/index.ts
 delete mode 100644 packages/twenty-ui/src/navigation/menu-item/index.ts
 delete mode 100644 packages/twenty-ui/src/testing/index.ts
 delete mode 100644 packages/twenty-ui/src/utilities/animation/index.ts
 delete mode 100644 packages/twenty-ui/src/utilities/config/index.ts
 delete mode 100644 packages/twenty-ui/src/utilities/index.ts

diff --git a/packages/twenty-ui/package.json b/packages/twenty-ui/package.json
index 7d30345aa849..b5ca5daf3d27 100644
--- a/packages/twenty-ui/package.json
+++ b/packages/twenty-ui/package.json
@@ -4,10 +4,11 @@
   "type": "module",
   "main": "./src/index.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+    "./*": {
+      "import": {
+        "types": "./dist/*.d.ts",
+        "default": "./dist/*.js"
+      }
     }
   },
   "dependencies": {
@@ -15,5 +16,8 @@
   },
   "scripts": {
     "build": "npx vite build"
+  },
+  "devDependencies": {
+    "glob": "^11.0.1"
   }
 }
diff --git a/packages/twenty-ui/project.json b/packages/twenty-ui/project.json
index 951e50cd78cb..89c827529b34 100644
--- a/packages/twenty-ui/project.json
+++ b/packages/twenty-ui/project.json
@@ -6,16 +6,7 @@
   "tags": ["scope:frontend"],
   "targets": {
     "build": {
-      "dependsOn": ["^build", "generateBarrels"]
-    },
-    "generateBarrels": {
-      "executor": "nx:run-commands",
-      "cache": true,
-      "inputs": ["production", "{projectRoot}/scripts/generateBarrels.js"],
-      "outputs": ["{projectRoot}/src/index.ts", "{projectRoot}/src/*/index.ts"],
-      "options": {
-        "command": "node {projectRoot}/scripts/generateBarrels.js"
-      }
+      "dependsOn": ["^build"]
     },
     "lint": {
       "options": {
diff --git a/packages/twenty-ui/scripts/generateBarrels.js b/packages/twenty-ui/scripts/generateBarrels.js
deleted file mode 100644
index 6d91aa19de54..000000000000
--- a/packages/twenty-ui/scripts/generateBarrels.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import * as fs from 'fs';
-import path from 'path';
-import slash from 'slash';
-
-const extensions = ['.ts', '.tsx'];
-const excludedExtensions = [
-  '.test.ts',
-  '.test.tsx',
-  '.spec.ts',
-  '.spec.tsx',
-  '.stories.ts',
-  '.stories.tsx',
-];
-const excludedDirectories = [
-  '__tests__',
-  '__mocks__',
-  '__stories__',
-  'internal',
-];
-const srcPath = path.resolve('packages/twenty-ui/src');
-
-/**
- * @param {string} directoryPath
- * @returns {string[]}
- */
-const getSubDirectoryPaths = (directoryPath) =>
-  fs
-    .readdirSync(directoryPath)
-    .filter(
-      (fileOrDirectoryName) =>
-        !excludedDirectories.includes(fileOrDirectoryName) &&
-        fs
-          .statSync(path.join(directoryPath, fileOrDirectoryName))
-          .isDirectory(),
-    )
-    .map((subDirectoryName) => path.join(directoryPath, subDirectoryName));
-
-/**
- *
- * @param {string} directoryPath
- * @returns {string[]}
- */
-const getDirectoryPathsRecursive = (directoryPath) => [
-  directoryPath,
-  ...getSubDirectoryPaths(directoryPath).flatMap(getDirectoryPathsRecursive),
-];
-
-/**
- *
- * @param {string} directoryPath
- * @returns {string[]}
- */
-const getFilesPaths = (directoryPath) =>
-  fs
-    .readdirSync(directoryPath)
-    .filter(
-      (filePath) =>
-        fs.statSync(path.join(directoryPath, filePath)).isFile() &&
-        !filePath.startsWith('index.') &&
-        extensions.some((extension) => filePath.endsWith(extension)) &&
-        excludedExtensions.every(
-          (excludedExtension) => !filePath.endsWith(excludedExtension),
-        ),
-    );
-
-const moduleDirectories = getSubDirectoryPaths(srcPath);
-
-moduleDirectories.forEach((moduleDirectoryPath) => {
-  const directoryPaths = getDirectoryPathsRecursive(moduleDirectoryPath);
-
-  const moduleExports = directoryPaths
-    .flatMap((directoryPath) => {
-      const directFilesPaths = getFilesPaths(directoryPath);
-
-      return directFilesPaths.map((filePath) => {
-        const fileName = filePath.split('.').slice(0, -1).join('.');
-        return `export * from './${slash(path.relative(
-          moduleDirectoryPath,
-          path.join(directoryPath, fileName),
-        ))}';`;
-      });
-    })
-    .sort((a, b) => a.localeCompare(b))
-    .join('\n');
-
-  fs.writeFileSync(
-    path.join(moduleDirectoryPath, 'index.ts'),
-    `${moduleExports}\n`,
-    'utf-8',
-  );
-});
-
-const mainBarrelExports = moduleDirectories
-  .map(
-    (moduleDirectoryPath) =>
-      `export * from './${slash(path.relative(srcPath, moduleDirectoryPath))}';`,
-  )
-  .sort((a, b) => a.localeCompare(b))
-  .join('\n');
-
-fs.writeFileSync(
-  path.join(srcPath, 'index.ts'),
-  `${mainBarrelExports}\n`,
-  'utf-8',
-);
diff --git a/packages/twenty-ui/src/accessibility/index.ts b/packages/twenty-ui/src/accessibility/index.ts
deleted file mode 100644
index 70d4702dd067..000000000000
--- a/packages/twenty-ui/src/accessibility/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './components/VisibilityHidden';
-export * from './components/VisibilityHiddenInput';
-export * from './utils/visibility-hidden';
diff --git a/packages/twenty-ui/src/components/index.ts b/packages/twenty-ui/src/components/index.ts
deleted file mode 100644
index 9421600e95d0..000000000000
--- a/packages/twenty-ui/src/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Pill/Pill';
diff --git a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
index 0f17ca9edf10..aad9ac64797e 100644
--- a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
+++ b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
@@ -9,9 +9,9 @@ import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
 import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ThemeContext } from '@ui/theme';
-import { Nullable, stringToHslColor } from '@ui/utilities';
-import { REACT_APP_SERVER_BASE_URL } from '@ui/utilities/config';
+import { stringToHslColor } from '@ui/utilities/color/utils/stringToHslColor';
 import { getImageAbsoluteURI } from 'twenty-shared';
+import { Nullable } from 'vitest';
 
 const StyledAvatar = styled.div<{
   size: AvatarSize;
@@ -63,6 +63,7 @@ export type AvatarProps = {
   color?: string;
   backgroundColor?: string;
   onClick?: () => void;
+  baseUrl: string;
 };
 
 // TODO: Remove recoil because we don't want it into twenty-ui and find a solution for invalid avatar urls
@@ -77,6 +78,7 @@ export const Avatar = ({
   type = 'squared',
   color,
   backgroundColor,
+  baseUrl
 }: AvatarProps) => {
   const { theme } = useContext(ThemeContext);
   const [invalidAvatarUrls, setInvalidAvatarUrls] = useRecoilState(
@@ -86,7 +88,8 @@ export const Avatar = ({
   const avatarImageURI = isNonEmptyString(avatarUrl)
     ? getImageAbsoluteURI({
         imageUrl: avatarUrl,
-        baseUrl: REACT_APP_SERVER_BASE_URL,
+        // TODO outsource the URL computation, should not be done within twenty-ui
+        baseUrl,
       })
     : null;
 
diff --git a/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx b/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
index ab304d0f8450..5ba454c74bcb 100644
--- a/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
+++ b/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { AVATAR_URL_MOCK, ComponentDecorator } from '@ui/testing';
-
+import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
 import { Avatar } from '../Avatar';
 
 const meta: Meta<typeof Avatar> = {
@@ -10,6 +9,7 @@ const meta: Meta<typeof Avatar> = {
   decorators: [ComponentDecorator],
   args: {
     avatarUrl: AVATAR_URL_MOCK,
+    baseUrl: 'http://localhost:3000',
     size: 'md',
     placeholder: 'L',
     type: 'rounded',
diff --git a/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx b/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx
index e3792988dc5a..c0e025ea5415 100644
--- a/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx
+++ b/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx
@@ -3,12 +3,9 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Avatar, AvatarProps } from '@ui/display/avatar/components/Avatar';
 import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
-import {
-  AVATAR_URL_MOCK,
-  CatalogDecorator,
-  ComponentDecorator,
-} from '@ui/testing';
 
+import { CatalogDecorator } from '@ui/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
 import { AvatarGroup, AvatarGroupProps } from '../AvatarGroup';
 
 const makeAvatar = (userName: string, props: Partial<AvatarProps> = {}) => (
diff --git a/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx b/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx
index 46d098293fcf..a7e898a705b6 100644
--- a/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx
+++ b/packages/twenty-ui/src/display/chip/components/AvatarChip.tsx
@@ -25,6 +25,7 @@ export type AvatarChipProps = {
   onClick?: (event: MouseEvent) => void;
   to?: string;
   maxWidth?: number;
+  baseUrl: string;
 };
 
 export enum AvatarChipVariant {
@@ -62,6 +63,7 @@ export const AvatarChip = ({
   to,
   size = ChipSize.Small,
   maxWidth,
+  baseUrl
 }: AvatarChipProps) => {
   const { theme } = useContext(ThemeContext);
 
@@ -102,6 +104,7 @@ export const AvatarChip = ({
             placeholder={name}
             size="sm"
             type={avatarType}
+            baseUrl={baseUrl}
           />
         )
       }
diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts
deleted file mode 100644
index b8dca47f3251..000000000000
--- a/packages/twenty-ui/src/display/index.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-export * from './avatar/components/Avatar';
-export * from './avatar/components/AvatarGroup';
-export * from './avatar/components/states/isInvalidAvatarUrlState';
-export * from './avatar/constants/AvatarPropertiesBySize';
-export * from './avatar/types/AvatarSize';
-export * from './avatar/types/AvatarType';
-export * from './banner/components/Banner';
-export * from './checkmark/components/AnimatedCheckmark';
-export * from './checkmark/components/Checkmark';
-export * from './chip/components/AvatarChip';
-export * from './chip/components/Chip';
-export * from './color/components/ColorSample';
-export * from './icon/components/IconAddressBook';
-export * from './icon/components/IconGmail';
-export * from './icon/components/IconGoogle';
-export * from './icon/components/IconGoogleCalendar';
-export * from './icon/components/IconLock';
-export * from './icon/components/IconMicrosoft';
-export * from './icon/components/IconMicrosoftCalendar';
-export * from './icon/components/IconMicrosoftOutlook';
-export * from './icon/components/IconRelationManyToOne';
-export * from './icon/components/IconTwentyStar';
-export * from './icon/components/IconTwentyStarFilled';
-export * from './icon/components/IllustrationIconArray';
-export * from './icon/components/IllustrationIconCalendarEvent';
-export * from './icon/components/IllustrationIconCalendarTime';
-export * from './icon/components/IllustrationIconCurrency';
-export * from './icon/components/IllustrationIconJson';
-export * from './icon/components/IllustrationIconLink';
-export * from './icon/components/IllustrationIconMail';
-export * from './icon/components/IllustrationIconManyToMany';
-export * from './icon/components/IllustrationIconMap';
-export * from './icon/components/IllustrationIconNumbers';
-export * from './icon/components/IllustrationIconOneToMany';
-export * from './icon/components/IllustrationIconOneToOne';
-export * from './icon/components/IllustrationIconPhone';
-export * from './icon/components/IllustrationIconSetting';
-export * from './icon/components/IllustrationIconStar';
-export * from './icon/components/IllustrationIconTag';
-export * from './icon/components/IllustrationIconTags';
-export * from './icon/components/IllustrationIconText';
-export * from './icon/components/IllustrationIconToggle';
-export * from './icon/components/IllustrationIconUid';
-export * from './icon/components/IllustrationIconUser';
-export * from './icon/components/IllustrationIconWrapper';
-export * from './icon/components/TablerIcons';
-export * from './icon/hooks/useIcons';
-export * from './icon/providers/IconsProvider';
-export * from './icon/states/iconsState';
-export * from './icon/types/IconComponent';
-export * from './info/components/Info';
-export * from './status/components/Status';
-export * from './tag/components/Tag';
-export * from './text/components/HorizontalSeparator';
-export * from './text/components/SeparatorLineText';
-export * from './tooltip/AppTooltip';
-export * from './tooltip/OverflowingTextWithTooltip';
-export * from './typography/components/H1Title';
-export * from './typography/components/H2Title';
-export * from './typography/components/H3Title';
-export * from './typography/components/Label';
-export * from './typography/components/StyledText';
diff --git a/packages/twenty-ui/src/feedback/index.ts b/packages/twenty-ui/src/feedback/index.ts
deleted file mode 100644
index cabe6fa44642..000000000000
--- a/packages/twenty-ui/src/feedback/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './loader/components/Loader';
-export * from './progress-bar/components/CircularProgressBar';
-export * from './progress-bar/components/ProgressBar';
-export * from './progress-bar/hooks/useProgressAnimation';
diff --git a/packages/twenty-ui/src/index.ts b/packages/twenty-ui/src/index.ts
deleted file mode 100644
index bd63145e43d4..000000000000
--- a/packages/twenty-ui/src/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export * from './accessibility';
-export * from './components';
-export * from './display';
-export * from './feedback';
-export * from './input';
-export * from './layout';
-export * from './navigation';
-export * from './testing';
-export * from './theme';
-export * from './utilities';
diff --git a/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx
index 077141859d4d..e180788756b8 100644
--- a/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx
@@ -1,11 +1,11 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import {
-  LightIconButtonAccent,
-  LightIconButtonSize,
+    LightIconButtonAccent,
+    LightIconButtonSize,
 } from '@ui/input/button/components/LightIconButton';
-import { motion, MotionProps } from 'framer-motion';
+import { MotionProps, motion } from 'framer-motion';
 import { ComponentProps, MouseEvent } from 'react';
 
 export type AnimatedLightIconButtonProps = {
diff --git a/packages/twenty-ui/src/input/button/components/Button.tsx b/packages/twenty-ui/src/input/button/components/Button.tsx
index 8f968644d566..9e0cce14185b 100644
--- a/packages/twenty-ui/src/input/button/components/Button.tsx
+++ b/packages/twenty-ui/src/input/button/components/Button.tsx
@@ -3,8 +3,8 @@ import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Pill } from '@ui/components/Pill/Pill';
 import { IconComponent } from '@ui/display/icon/types/IconComponent';
-import { useIsMobile } from '@ui/utilities';
 import { getOsShortcutSeparator } from '@ui/utilities/device/getOsShortcutSeparator';
+import { useIsMobile } from '@ui/utilities/responsive/hooks/useIsMobile';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx b/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx
index 8b950620962b..37e9be8170c5 100644
--- a/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/ColorPickerButton.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ColorSample, ColorSampleProps } from '@ui/display';
+import { ColorSample, ColorSampleProps } from '@ui/display/color/components/ColorSample';
 import {
   LightIconButton,
   LightIconButtonProps,
diff --git a/packages/twenty-ui/src/input/button/components/FloatingButton.tsx b/packages/twenty-ui/src/input/button/components/FloatingButton.tsx
index 9b3aacc2104b..f78c5b7193d3 100644
--- a/packages/twenty-ui/src/input/button/components/FloatingButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/FloatingButton.tsx
@@ -1,7 +1,7 @@
 import isPropValid from '@emotion/is-prop-valid';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { Link } from 'react-router-dom';
 
 export type FloatingButtonSize = 'small' | 'medium';
diff --git a/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx b/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx
index d43b07b9420d..1dc273fe84e0 100644
--- a/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx
@@ -1,6 +1,6 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import React from 'react';
 
 export type FloatingIconButtonSize = 'small' | 'medium';
diff --git a/packages/twenty-ui/src/input/button/components/FloatingIconButtonGroup.tsx b/packages/twenty-ui/src/input/button/components/FloatingIconButtonGroup.tsx
index cc7b6d96e228..af5379056661 100644
--- a/packages/twenty-ui/src/input/button/components/FloatingIconButtonGroup.tsx
+++ b/packages/twenty-ui/src/input/button/components/FloatingIconButtonGroup.tsx
@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { MouseEvent } from 'react';
 
 import {
-  FloatingIconButton,
-  FloatingIconButtonPosition,
-  FloatingIconButtonProps,
+    FloatingIconButton,
+    FloatingIconButtonPosition,
+    FloatingIconButtonProps,
 } from './FloatingIconButton';
 
 const StyledFloatingIconButtonGroupContainer = styled.div`
diff --git a/packages/twenty-ui/src/input/button/components/IconButton.tsx b/packages/twenty-ui/src/input/button/components/IconButton.tsx
index 1501bc410142..e2ca9a3c4fe7 100644
--- a/packages/twenty-ui/src/input/button/components/IconButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/IconButton.tsx
@@ -1,6 +1,6 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import React from 'react';
 
 export type IconButtonSize = 'medium' | 'small';
diff --git a/packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx b/packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx
index 2b8f0e758a3b..18ce0cf41b29 100644
--- a/packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx
+++ b/packages/twenty-ui/src/input/button/components/IconButtonGroup.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { MouseEvent } from 'react';
 
 import { IconButton, IconButtonPosition, IconButtonProps } from './IconButton';
diff --git a/packages/twenty-ui/src/input/button/components/LightButton.tsx b/packages/twenty-ui/src/input/button/components/LightButton.tsx
index 9fc383be883f..61e586a7c7bb 100644
--- a/packages/twenty-ui/src/input/button/components/LightButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/LightButton.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { MouseEvent } from 'react';
 
 export type LightButtonAccent = 'secondary' | 'tertiary';
diff --git a/packages/twenty-ui/src/input/button/components/LightIconButton.tsx b/packages/twenty-ui/src/input/button/components/LightIconButton.tsx
index fedf7fcd9ff8..aa17b12d0bfa 100644
--- a/packages/twenty-ui/src/input/button/components/LightIconButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/LightIconButton.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ComponentProps, MouseEvent } from 'react';
 
 export type LightIconButtonAccent = 'secondary' | 'tertiary';
diff --git a/packages/twenty-ui/src/input/button/components/LightIconButtonGroup.tsx b/packages/twenty-ui/src/input/button/components/LightIconButtonGroup.tsx
index 6f6d530a4e7d..9e9565c2a23e 100644
--- a/packages/twenty-ui/src/input/button/components/LightIconButtonGroup.tsx
+++ b/packages/twenty-ui/src/input/button/components/LightIconButtonGroup.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
 import { FunctionComponent, MouseEvent, ReactElement } from 'react';
 
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { LightIconButton, LightIconButtonProps } from './LightIconButton';
 
 const StyledLightIconButtonGroupContainer = styled.div`
diff --git a/packages/twenty-ui/src/input/button/components/MainButton.tsx b/packages/twenty-ui/src/input/button/components/MainButton.tsx
index ddfba85f259c..a46cf9a396a5 100644
--- a/packages/twenty-ui/src/input/button/components/MainButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/MainButton.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import React from 'react';
 
 export type MainButtonVariant = 'primary' | 'secondary';
diff --git a/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx b/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx
index 1ede7c239328..a7f3421f8b73 100644
--- a/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/RoundedIconButton.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 
 const StyledIconButton = styled.button`
   align-items: center;
diff --git a/packages/twenty-ui/src/input/button/components/index.ts b/packages/twenty-ui/src/input/button/components/index.ts
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/packages/twenty-ui/src/input/code-editor/index.ts b/packages/twenty-ui/src/input/code-editor/index.ts
deleted file mode 100644
index d5f85820f47f..000000000000
--- a/packages/twenty-ui/src/input/code-editor/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './components/CodeEditor';
-export * from './components/CodeEditorHeader';
-export * from './theme/utils/codeEditorTheme';
diff --git a/packages/twenty-ui/src/input/components/Toggle.tsx b/packages/twenty-ui/src/input/components/Toggle.tsx
index c9f95385d2c5..a99cae320562 100644
--- a/packages/twenty-ui/src/input/components/Toggle.tsx
+++ b/packages/twenty-ui/src/input/components/Toggle.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { VisibilityHiddenInput } from '@ui/accessibility';
+import { VisibilityHiddenInput } from '@ui/accessibility/components/VisibilityHiddenInput';
 import { motion } from 'framer-motion';
 
 export type ToggleSize = 'small' | 'medium';
diff --git a/packages/twenty-ui/src/input/index.ts b/packages/twenty-ui/src/input/index.ts
deleted file mode 100644
index 1c9282835224..000000000000
--- a/packages/twenty-ui/src/input/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export * from './button/components/AnimatedLightIconButton';
-export * from './button/components/Button';
-export * from './button/components/ButtonGroup';
-export * from './button/components/ColorPickerButton';
-export * from './button/components/FloatingButton';
-export * from './button/components/FloatingButtonGroup';
-export * from './button/components/FloatingIconButton';
-export * from './button/components/FloatingIconButtonGroup';
-export * from './button/components/IconButton';
-export * from './button/components/IconButtonGroup';
-export * from './button/components/LightButton';
-export * from './button/components/LightIconButton';
-export * from './button/components/LightIconButtonGroup';
-export * from './button/components/MainButton';
-export * from './button/components/RoundedIconButton';
-export * from './code-editor/components/CodeEditor';
-export * from './code-editor/components/CodeEditorHeader';
-export * from './code-editor/theme/utils/codeEditorTheme';
-export * from './color-scheme/components/ColorSchemeCard';
-export * from './color-scheme/components/ColorSchemePicker';
-export * from './components/CardPicker';
-export * from './components/Checkbox';
-export * from './components/IconListViewGrip';
-export * from './components/Radio';
-export * from './components/RadioGroup';
-export * from './components/Toggle';
-export * from './types/ColorScheme';
diff --git a/packages/twenty-ui/src/layout/animated-placeholder/index.ts b/packages/twenty-ui/src/layout/animated-placeholder/index.ts
deleted file mode 100644
index 74da7bd40c82..000000000000
--- a/packages/twenty-ui/src/layout/animated-placeholder/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './components/AnimatedPlaceholder';
-export * from './components/EmptyPlaceholderStyled';
-export * from './components/ErrorPlaceholderStyled';
-export * from './constants/Background';
-export * from './constants/DarkBackground';
-export * from './constants/DarkMovingImage';
-export * from './constants/MovingImage';
diff --git a/packages/twenty-ui/src/layout/index.ts b/packages/twenty-ui/src/layout/index.ts
deleted file mode 100644
index 8f33feb754a4..000000000000
--- a/packages/twenty-ui/src/layout/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export * from './animated-expandable-container/components/AnimatedExpandableContainer';
-export * from './animated-expandable-container/types/AnimationDimension';
-export * from './animated-expandable-container/types/AnimationDurationObject';
-export * from './animated-expandable-container/types/AnimationDurations';
-export * from './animated-expandable-container/types/AnimationMode';
-export * from './animated-expandable-container/types/AnimationSize';
-export * from './animated-expandable-container/utils/getCommonStyles';
-export * from './animated-expandable-container/utils/getExpandableAnimationConfig';
-export * from './animated-expandable-container/utils/getTransitionValues';
-export * from './animated-placeholder/components/AnimatedPlaceholder';
-export * from './animated-placeholder/components/EmptyPlaceholderStyled';
-export * from './animated-placeholder/components/ErrorPlaceholderStyled';
-export * from './animated-placeholder/constants/Background';
-export * from './animated-placeholder/constants/DarkBackground';
-export * from './animated-placeholder/constants/DarkMovingImage';
-export * from './animated-placeholder/constants/MovingImage';
-export * from './card/components/Card';
-export * from './card/components/CardContent';
-export * from './card/components/CardFooter';
-export * from './card/components/CardHeader';
-export * from './section/components/Section';
diff --git a/packages/twenty-ui/src/navigation/index.ts b/packages/twenty-ui/src/navigation/index.ts
deleted file mode 100644
index f4b07da311ba..000000000000
--- a/packages/twenty-ui/src/navigation/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export * from './link/components/ActionLink';
-export * from './link/components/AdvancedSettingsToggle';
-export * from './link/components/ContactLink';
-export * from './link/components/GithubVersionLink';
-export * from './link/components/RawLink';
-export * from './link/components/RoundedLink';
-export * from './link/components/SocialLink';
-export * from './link/components/UndecoratedLink';
-export * from './link/constants/Cal';
-export * from './link/constants/GithubLink';
-export * from './menu-item/components/MenuItem';
-export * from './menu-item/components/MenuItemAvatar';
-export * from './menu-item/components/MenuItemCommand';
-export * from './menu-item/components/MenuItemCommandHotKeys';
-export * from './menu-item/components/MenuItemDraggable';
-export * from './menu-item/components/MenuItemMultiSelect';
-export * from './menu-item/components/MenuItemMultiSelectAvatar';
-export * from './menu-item/components/MenuItemMultiSelectTag';
-export * from './menu-item/components/MenuItemNavigate';
-export * from './menu-item/components/MenuItemSelect';
-export * from './menu-item/components/MenuItemSelectAvatar';
-export * from './menu-item/components/MenuItemSelectColor';
-export * from './menu-item/components/MenuItemSelectTag';
-export * from './menu-item/components/MenuItemSuggestion';
-export * from './menu-item/components/MenuItemToggle';
-export * from './menu-item/internals/components/MenuItemLeftContent';
-export * from './menu-item/internals/components/StyledMenuItemBase';
-export * from './menu-item/types/MenuItemAccent';
-export * from './navigation-bar/components/NavigationBar';
-export * from './navigation-bar/components/NavigationBarItem';
diff --git a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
index d3532df4dbe8..7cadd90cea08 100644
--- a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
+++ b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import { IconPoint } from '@ui/display';
-import { Toggle } from '@ui/input';
+import { IconPoint } from '@tabler/icons-react';
+import { Toggle } from '@ui/input/components/Toggle';
 import { MAIN_COLORS } from '@ui/theme';
 import { useId } from 'react';
 
diff --git a/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx b/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx
index 10e4534d6ea4..cbe4d4b51260 100644
--- a/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx
+++ b/packages/twenty-ui/src/navigation/link/components/GithubVersionLink.tsx
@@ -1,5 +1,5 @@
 import { useTheme } from '@emotion/react';
-import { IconBrandGithub } from '@ui/display';
+import { IconBrandGithub } from '@tabler/icons-react';
 import { ActionLink } from '@ui/navigation/link/components/ActionLink';
 import { GITHUB_LINK } from '../constants/GithubLink';
 
diff --git a/packages/twenty-ui/src/navigation/link/components/SocialLink.tsx b/packages/twenty-ui/src/navigation/link/components/SocialLink.tsx
index a5b756e30b00..f3fc0fe10e87 100644
--- a/packages/twenty-ui/src/navigation/link/components/SocialLink.tsx
+++ b/packages/twenty-ui/src/navigation/link/components/SocialLink.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { getDisplayValueByUrlType } from '@ui/utilities';
+import { getDisplayValueByUrlType } from '@ui/utilities/utils/getDisplayValueByUrlType';
 import { RoundedLink } from './RoundedLink';
 
 export enum LinkType {
diff --git a/packages/twenty-ui/src/navigation/link/components/index.ts b/packages/twenty-ui/src/navigation/link/components/index.ts
deleted file mode 100644
index 153a89d7af7a..000000000000
--- a/packages/twenty-ui/src/navigation/link/components/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './ActionLink';
-export * from './AdvancedSettingsToggle';
-export * from './ContactLink';
-export * from './GithubVersionLink';
-export * from './RawLink';
-export * from './RoundedLink';
-export * from './SocialLink';
-export * from './UndecoratedLink';
diff --git a/packages/twenty-ui/src/navigation/link/index.ts b/packages/twenty-ui/src/navigation/link/index.ts
deleted file mode 100644
index c46a592e0131..000000000000
--- a/packages/twenty-ui/src/navigation/link/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './components';
-export * from './constants/Cal';
-export * from './constants/GithubLink';
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx
index 0f789680a3df..788d150865cb 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItem.tsx
@@ -1,9 +1,9 @@
 import { useTheme } from '@emotion/react';
-import { IconChevronRight, IconComponent } from '@ui/display';
+import { IconChevronRight } from '@tabler/icons-react';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { LightIconButtonProps } from '@ui/input/button/components/LightIconButton';
 import { LightIconButtonGroup } from '@ui/input/button/components/LightIconButtonGroup';
 import { FunctionComponent, MouseEvent, ReactElement, ReactNode } from 'react';
-
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {
   StyledHoverableMenuItemBase,
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
index 2aed3ce35201..13fd761929bb 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
@@ -6,7 +6,7 @@ import {
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { useIsMobile } from '@ui/utilities/responsive/hooks/useIsMobile';
 import { ReactNode } from 'react';
 import { MenuItemCommandHotKeys } from './MenuItemCommandHotKeys';
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx
index 59cb8771f6d4..12f378a099cc 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemDraggable.tsx
@@ -2,8 +2,8 @@ import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent
 import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
 import { MenuItemAccent } from '../types/MenuItemAccent';
 
-import { IconComponent } from '@ui/display';
-import { LightIconButtonGroup } from '@ui/input';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
+import { LightIconButtonGroup } from '@ui/input/button/components/LightIconButtonGroup';
 import { ReactNode } from 'react';
 import { MenuItemIconButton } from './MenuItem';
 
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelect.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelect.tsx
index e049fa2d3879..88fcda567322 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelect.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelect.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
-import { IconComponent, Tag } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
+import { Tag } from '@ui/display/tag/components/Tag';
 import { Checkbox } from '@ui/input/components/Checkbox';
 import { MenuItemLeftContent } from '@ui/navigation/menu-item/internals/components/MenuItemLeftContent';
 import { ThemeColor } from '@ui/theme';
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx
index 6674fd9c6423..cabc3cd4ae6b 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
-import { OverflowingTextWithTooltip } from '@ui/display';
+import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';
 import { Checkbox } from '@ui/input/components/Checkbox';
 import {
   StyledMenuItemBase,
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectTag.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectTag.tsx
index 2b9694d26ef4..188a159ee4bb 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectTag.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectTag.tsx
@@ -1,5 +1,6 @@
-import { IconComponent, Tag } from '@ui/display';
-import { Checkbox, CheckboxShape, CheckboxSize } from '@ui/input';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
+import { Tag } from '@ui/display/tag/components/Tag';
+import { Checkbox, CheckboxShape, CheckboxSize } from '@ui/input/components/Checkbox';
 import { ThemeColor } from '@ui/theme';
 import {
   StyledMenuItemBase,
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemNavigate.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemNavigate.tsx
index 76bde9c48d8f..d3e592ae857f 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemNavigate.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemNavigate.tsx
@@ -1,6 +1,7 @@
 import { useTheme } from '@emotion/react';
 
-import { IconChevronRight, IconComponent } from '@ui/display';
+import { IconChevronRight } from '@tabler/icons-react';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {
   StyledMenuItemBase,
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx
index 1b2a64181333..3511f13b7030 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelect.tsx
@@ -1,7 +1,8 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { IconCheck, IconChevronRight, IconComponent } from '@ui/display';
+import { IconCheck, IconChevronRight } from '@tabler/icons-react';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
 
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx
index c44159c08bfb..3075fdc942a5 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx
@@ -7,7 +7,7 @@ import {
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 
-import { OverflowingTextWithTooltip } from '@ui/display';
+import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';
 import { StyledMenuItemSelect } from './MenuItemSelect';
 
 type MenuItemSelectAvatarProps = {
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx
index 7f00f75bc5fd..52601e7eb3d3 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx
@@ -6,7 +6,7 @@ import {
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 
-import { ColorSample, ColorSampleVariant } from '@ui/display';
+import { ColorSample, ColorSampleVariant } from '@ui/display/color/components/ColorSample';
 import { ThemeColor } from '@ui/theme';
 import { StyledMenuItemSelect } from './MenuItemSelect';
 
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx
index ee2d1c37eeca..f348e60b1012 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectTag.tsx
@@ -5,7 +5,8 @@ import {
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
 
-import { IconComponent, Tag } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
+import { Tag } from '@ui/display/tag/components/Tag';
 import { ThemeColor } from '@ui/theme';
 import { StyledMenuItemSelect } from './MenuItemSelect';
 
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSuggestion.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSuggestion.tsx
index 24811d75c0eb..62595163045d 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSuggestion.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemSuggestion.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { MouseEvent } from 'react';
 
-import { IconComponent } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
 import { HOVER_BACKGROUND } from '@ui/theme';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase';
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx
index 813d9e357098..951c50be5895 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import { IconComponent } from '@ui/display';
-import { Toggle, ToggleSize } from '@ui/input';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
+import { Toggle, ToggleSize } from '@ui/input/components/Toggle';
 import { useId } from 'react';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/index.ts b/packages/twenty-ui/src/navigation/menu-item/components/index.ts
deleted file mode 100644
index 9325e153481e..000000000000
--- a/packages/twenty-ui/src/navigation/menu-item/components/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export * from './MenuItem';
-export * from './MenuItemAvatar';
-export * from './MenuItemCommand';
-export * from './MenuItemCommandHotKeys';
-export * from './MenuItemDraggable';
-export * from './MenuItemMultiSelect';
-export * from './MenuItemMultiSelectAvatar';
-export * from './MenuItemMultiSelectTag';
-export * from './MenuItemNavigate';
-export * from './MenuItemSelect';
-export * from './MenuItemSelectAvatar';
-export * from './MenuItemSelectColor';
-export * from './MenuItemSelectTag';
-export * from './MenuItemSuggestion';
-export * from './MenuItemToggle';
diff --git a/packages/twenty-ui/src/navigation/menu-item/index.ts b/packages/twenty-ui/src/navigation/menu-item/index.ts
deleted file mode 100644
index 41664f3f2fa9..000000000000
--- a/packages/twenty-ui/src/navigation/menu-item/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './components';
-export * from './internals/components/MenuItemLeftContent';
-export * from './internals/components/StyledMenuItemBase';
-export * from './types/MenuItemAccent';
diff --git a/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
index 6954ce80bce6..3e6b21c59c94 100644
--- a/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
@@ -3,11 +3,10 @@ import { isString } from '@sniptt/guards';
 import { ReactNode } from 'react';
 
 import styled from '@emotion/styled';
-import {
-  IconComponent,
-  IconGripVertical,
-  OverflowingTextWithTooltip,
-} from '@ui/display';
+
+import { IconGripVertical } from '@tabler/icons-react';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
+import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';
 import {
   StyledDraggableItem,
   StyledMenuItemLabel,
diff --git a/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
index d67bb7af0dff..bbfb1ff9b921 100644
--- a/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { isUndefined } from '@sniptt/guards';
 
-import { IconCheck } from '@ui/display';
+import { IconCheck } from '@tabler/icons-react';
 import { HOVER_BACKGROUND } from '@ui/theme';
 import { MenuItemAccent } from '../../types/MenuItemAccent';
 
diff --git a/packages/twenty-ui/src/testing/index.ts b/packages/twenty-ui/src/testing/index.ts
deleted file mode 100644
index af19d7a0856f..000000000000
--- a/packages/twenty-ui/src/testing/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './ComponentStorybookLayout';
-export * from './decorators/CatalogDecorator';
-export * from './decorators/ComponentDecorator';
-export * from './decorators/ComponentWithRouterDecorator';
-export * from './decorators/RouterDecorator';
-export * from './mocks/avatarUrlMock';
-export * from './types/CatalogStory';
-export * from './utils/getCanvasElementForDropdownTesting';
diff --git a/packages/twenty-ui/src/utilities/animation/index.ts b/packages/twenty-ui/src/utilities/animation/index.ts
deleted file mode 100644
index cba279289a69..000000000000
--- a/packages/twenty-ui/src/utilities/animation/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './components/AnimatedContainer';
-export * from './components/AnimatedEaseIn';
-export * from './components/AnimatedEaseInOut';
-export * from './components/AnimatedFadeOut';
-export * from './components/AnimatedTextWord';
-export * from './components/AnimatedTranslation';
-export * from './components/AnimatedCircleLoading';
diff --git a/packages/twenty-ui/src/utilities/config/index.ts b/packages/twenty-ui/src/utilities/config/index.ts
deleted file mode 100644
index 5a9b2ce3986f..000000000000
--- a/packages/twenty-ui/src/utilities/config/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-declare global {
-  interface Window {
-    _env_?: Record<string, string>;
-    __APOLLO_CLIENT__?: any;
-  }
-}
-
-const getDefaultUrl = () => {
-  if (
-    window.location.hostname === 'localhost' ||
-    window.location.hostname === '127.0.0.1'
-  ) {
-    // In development environment front and backend usually run on separate ports
-    // we set the default value to localhost:3000.
-    // In dev context, we use env vars to overwrite it
-    return 'http://localhost:3000';
-  } else {
-    // Outside of localhost we assume that they run on the same port
-    // because the backend will serve the frontend
-    // In prod context, we use index.html + window var to ovewrite it
-    return `${window.location.protocol}//${window.location.hostname}${
-      window.location.port ? `:${window.location.port}` : ''
-    }`;
-  }
-};
-
-export const REACT_APP_SERVER_BASE_URL =
-  window._env_?.REACT_APP_SERVER_BASE_URL || getDefaultUrl();
diff --git a/packages/twenty-ui/src/utilities/index.ts b/packages/twenty-ui/src/utilities/index.ts
deleted file mode 100644
index 189ce4fb5ea3..000000000000
--- a/packages/twenty-ui/src/utilities/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export * from './animation/components/AnimatedCircleLoading';
-export * from './animation/components/AnimatedContainer';
-export * from './animation/components/AnimatedEaseIn';
-export * from './animation/components/AnimatedEaseInOut';
-export * from './animation/components/AnimatedFadeOut';
-export * from './animation/components/AnimatedTextWord';
-export * from './animation/components/AnimatedTranslation';
-export * from './color/utils/stringToHslColor';
-export * from './device/getOsControlSymbol';
-export * from './device/getOsShortcutSeparator';
-export * from './device/getUserDevice';
-export * from './dimensions/components/ComputeNodeDimensions';
-export * from './responsive/hooks/useIsMobile';
-export * from './screen-size/hooks/useScreenSize';
-export * from './state/utils/createState';
-export * from './types/Nullable';
-export * from './utils/getDisplayValueByUrlType';
diff --git a/packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts b/packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts
index 69458b8915e4..ac4f9126ecf5 100644
--- a/packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts
+++ b/packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts
@@ -1,4 +1,4 @@
-import { MOBILE_VIEWPORT } from '@ui/theme';
+import { MOBILE_VIEWPORT } from '@ui/theme/constants/MobileViewport';
 import { useMediaQuery } from 'react-responsive';
 
 export const useIsMobile = () =>
diff --git a/packages/twenty-ui/vite.config.ts b/packages/twenty-ui/vite.config.ts
index c83d50b53c02..389e8762b401 100644
--- a/packages/twenty-ui/vite.config.ts
+++ b/packages/twenty-ui/vite.config.ts
@@ -1,6 +1,8 @@
 /// <reference types='vitest' />
 import react from '@vitejs/plugin-react-swc';
 import wyw from '@wyw-in-js/vite';
+import { glob } from 'glob';
+import { fileURLToPath } from 'node:url';
 import * as path from 'path';
 import { defineConfig } from 'vite';
 import checker from 'vite-plugin-checker';
@@ -49,7 +51,7 @@ export default defineConfig(({ command }) => {
           '**/Tag.tsx',
           '**/OverflowingTextWithTooltip.tsx',
           '**/ContactLink.tsx',
-          '**/RoundedLink.tsx'
+          '**/RoundedLink.tsx',
         ],
         babelOptions: {
           presets: ['@babel/preset-typescript', '@babel/preset-react'],
@@ -60,6 +62,7 @@ export default defineConfig(({ command }) => {
     // Configuration for building your library.
     // See: https://vitejs.dev/guide/build.html#library-mode
     build: {
+      copyPublicDir: false,
       minify: false,
       outDir: './dist',
       reportCompressedSize: true,
@@ -76,9 +79,29 @@ export default defineConfig(({ command }) => {
         formats: ['es', 'cjs'],
       },
       rollupOptions: {
-        // External packages that should not be bundled into your library.
-        // Way to many dependencies here
         external: Object.keys(packageJson.dependencies || {}),
+        input: Object.fromEntries(
+          glob
+            .sync('src/**/*.{ts,tsx}', {
+              ignore: ['src/**/*.d.ts'],
+            })
+            .map((file) => [
+              // The name of the entry point
+              // lib/nested/foo.ts becomes nested/foo
+              path.relative(
+                'src',
+                file.slice(0, file.length - path.extname(file).length),
+              ),
+              // The absolute path to the entry file
+              // lib/nested/foo.ts becomes /project/lib/nested/foo.ts
+              // @ts-expect-error TODO LEAVE LIKE THAT FOR THE MOMENT FIND ESNEXT EQUIVALENT
+              fileURLToPath(new URL(file, import.meta.url)),
+            ]),
+        ),
+        output: {
+          assetFileNames: 'assets/[name][extname]',
+          entryFileNames: '[name].js',
+        }
       },
     },
   };
diff --git a/yarn.lock b/yarn.lock
index 22e2960b346d..055c2d986bc5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -28938,7 +28938,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^11.0.0":
+"glob@npm:^11.0.0, glob@npm:^11.0.1":
   version: 11.0.1
   resolution: "glob@npm:11.0.1"
   dependencies:
@@ -45954,6 +45954,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "twenty-ui@workspace:packages/twenty-ui"
   dependencies:
+    glob: "npm:^11.0.1"
     twenty-shared: "workspace:*"
   languageName: unknown
   linkType: soft

From d093c69dbb85755f8948a0c50027ec8bbfd53887 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Fri, 31 Jan 2025 20:08:38 +0100
Subject: [PATCH 13/21] chore: wip jest is running tests from dist

---
 .../ObjectOptionsDropdownHiddenFieldsContent.tsx     |  2 +-
 packages/twenty-front/tsup.ui.index.tsx              |  1 -
 packages/twenty-ui/jest.config.ts                    |  2 +-
 .../avatar/components/__stories__/Avatar.stories.tsx |  3 ++-
 .../components/__stories__/AvatarGroup.stories.tsx   |  8 +++++++-
 .../display/icon/hooks/__tests__/useIcons.test.ts    |  3 +--
 .../twenty-ui/src/display/icon/hooks/useIcons.ts     |  5 ++---
 .../__stories__/AnimatedLightIconButton.stories.tsx  |  2 +-
 .../button/components/__stories__/Button.stories.tsx |  2 +-
 .../components/__stories__/ButtonGroup.stories.tsx   |  2 +-
 .../__stories__/FloatingButton.stories.tsx           |  2 +-
 .../__stories__/FloatingButtonGroup.stories.tsx      |  2 +-
 .../__stories__/FloatingIconButton.stories.tsx       |  2 +-
 .../__stories__/FloatingIconButtonGroup.stories.tsx  |  2 +-
 .../components/__stories__/IconButton.stories.tsx    |  2 +-
 .../__stories__/IconButtonGroup.stories.tsx          |  8 ++------
 .../components/__stories__/LightButton.stories.tsx   |  8 ++------
 .../__stories__/LightIconButton.stories.tsx          |  8 ++------
 .../components/__stories__/MainButton.stories.tsx    |  2 +-
 .../__stories__/RoundedIconButton.stories.tsx        |  2 +-
 .../components/__stories__/MenuItem.stories.tsx      |  8 ++------
 .../__stories__/MenuItemCommand.stories.tsx          |  8 ++------
 .../__stories__/MenuItemDraggable.stories.tsx        |  2 +-
 .../__stories__/MenuItemMultiSelect.stories.tsx      | 11 ++---------
 .../MenuItemMultiSelectAvatar.stories.tsx            | 10 +++++-----
 .../__stories__/MenuItemNavigate.stories.tsx         | 11 ++---------
 .../__stories__/MenuItemSelect.stories.tsx           | 12 ++++--------
 .../__stories__/MenuItemSelectAvatar.stories.tsx     | 10 +++++-----
 .../__stories__/MenuItemSelectColor.stories.tsx      | 10 ++--------
 .../__stories__/MenuItemToggle.stories.tsx           | 10 ++--------
 packages/twenty-ui/src/testing/constants.ts          |  1 +
 packages/twenty-ui/src/testing/index.ts              |  9 +++++++++
 packages/twenty-ui/src/theme/constants/Rgba.ts       |  1 -
 .../{isMobile.test.tsx => useIsMobile.test.tsx}      |  0
 .../src/utilities/responsive/hooks/useIsMobile.ts    |  2 +-
 packages/twenty-ui/tsconfig.dev.json                 |  7 +++++--
 packages/twenty-ui/tsconfig.spec.json                |  1 -
 packages/twenty-ui/vite.config.ts                    |  1 -
 38 files changed, 73 insertions(+), 109 deletions(-)
 create mode 100644 packages/twenty-ui/src/testing/constants.ts
 create mode 100644 packages/twenty-ui/src/testing/index.ts
 rename packages/twenty-ui/src/utilities/responsive/hooks/__tests__/{isMobile.test.tsx => useIsMobile.test.tsx} (100%)

diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
index d47380a497a5..3c92b76a693e 100644
--- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
@@ -5,7 +5,7 @@ import {
   IconSettings,
   MenuItem,
   UndecoratedLink,
-} from 'twenty-ui';
+} from 'twenty-ui/index';
 
 import { useObjectNamePluralFromSingular } from '@/object-metadata/hooks/useObjectNamePluralFromSingular';
 
diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx
index 85c47c03f5cd..89a4d193d0d6 100644
--- a/packages/twenty-front/tsup.ui.index.tsx
+++ b/packages/twenty-front/tsup.ui.index.tsx
@@ -1,7 +1,6 @@
 import { ThemeType } from 'twenty-ui';
 
 export { ThemeProvider } from '@emotion/react';
-export * from 'twenty-ui';
 export * from './src/modules/ui/input/components/AutosizeTextInput';
 export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput';
 export * from './src/modules/ui/input/components/IconPicker';
diff --git a/packages/twenty-ui/jest.config.ts b/packages/twenty-ui/jest.config.ts
index e3b09b8aef52..48306c0dfd40 100644
--- a/packages/twenty-ui/jest.config.ts
+++ b/packages/twenty-ui/jest.config.ts
@@ -8,7 +8,7 @@ const jestConfig: JestConfigWithTsJest = {
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['./setupTests.ts'],
   testEnvironment: 'jsdom',
-  transformIgnorePatterns: ['../../node_modules/'],
+  transformIgnorePatterns: ['../../node_modules/', "./dist/"],
   transform: {
     '^.+\\.[tj]sx?$': [
       '@swc/jest',
diff --git a/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx b/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
index 5ba454c74bcb..973840bf4bff 100644
--- a/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
+++ b/packages/twenty-ui/src/display/avatar/components/__stories__/Avatar.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { AVATAR_URL_MOCK, SERVER_URL_MOCK } from '@ui/testing';
 import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
 import { Avatar } from '../Avatar';
 
@@ -9,7 +10,7 @@ const meta: Meta<typeof Avatar> = {
   decorators: [ComponentDecorator],
   args: {
     avatarUrl: AVATAR_URL_MOCK,
-    baseUrl: 'http://localhost:3000',
+    baseUrl: SERVER_URL_MOCK,
     size: 'md',
     placeholder: 'L',
     type: 'rounded',
diff --git a/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx b/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx
index c0e025ea5415..c2c3f2bd7b4c 100644
--- a/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx
+++ b/packages/twenty-ui/src/display/avatar/components/__stories__/AvatarGroup.stories.tsx
@@ -4,13 +4,19 @@ import { Avatar, AvatarProps } from '@ui/display/avatar/components/Avatar';
 import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { AvatarType } from '@ui/display/avatar/types/AvatarType';
 
+import { AVATAR_URL_MOCK, SERVER_URL_MOCK } from '@ui/testing';
 import { CatalogDecorator } from '@ui/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '@ui/testing/decorators/ComponentDecorator';
 import { AvatarGroup, AvatarGroupProps } from '../AvatarGroup';
 
 const makeAvatar = (userName: string, props: Partial<AvatarProps> = {}) => (
   // eslint-disable-next-line react/jsx-props-no-spreading
-  <Avatar placeholder={userName} placeholderColorSeed={userName} {...props} />
+  <Avatar
+    placeholder={userName}
+    placeholderColorSeed={userName}
+    baseUrl={SERVER_URL_MOCK}
+    {...props}
+  />
 );
 
 const getAvatars = (commonProps: Partial<AvatarProps> = {}) => [
diff --git a/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts b/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts
index 4a7da2d156e2..cabdacdd830e 100644
--- a/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts
+++ b/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts
@@ -1,12 +1,11 @@
 import { renderHook } from '@testing-library/react';
-import * as recoil from 'recoil';
-
 import {
   Icon123,
   IconBuildingSkyscraper,
   IconUser,
 } from '@ui/display/icon/components/TablerIcons';
 import { useIcons } from '@ui/display/icon/hooks/useIcons';
+import * as recoil from 'recoil';
 
 describe('useIcons', () => {
   const mockedStateIcons = {
diff --git a/packages/twenty-ui/src/display/icon/hooks/useIcons.ts b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts
index 981fae839cbc..5812d2d8cfd3 100644
--- a/packages/twenty-ui/src/display/icon/hooks/useIcons.ts
+++ b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts
@@ -1,7 +1,6 @@
-import { useRecoilValue } from 'recoil';
-
-import { Icon123 } from '@ui/display/icon/components/TablerIcons';
 import { iconsState } from '@ui/display/icon/states/iconsState';
+import { useRecoilValue } from 'recoil';
+import { Icon123 } from '../components/TablerIcons';
 
 export const useIcons = () => {
   const icons = useRecoilValue(iconsState);
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/AnimatedLightIconButton.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/AnimatedLightIconButton.stories.tsx
index 0dd4a2ee62ef..fd2675ec67c1 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/AnimatedLightIconButton.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/AnimatedLightIconButton.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { IconSearch } from '@ui/display';
+import { IconSearch } from '@tabler/icons-react';
 import {
   LightIconButtonAccent,
   LightIconButtonSize,
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx
index a52510fd5c74..5e4f7dcca39e 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { IconSearch } from '@ui/display';
+import { IconSearch } from '@tabler/icons-react';
 import {
   CatalogDecorator,
   CatalogStory,
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx
index ec4e492c7fb6..9d6f49a5cd10 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { IconCheckbox, IconNotes, IconTimelineEvent } from '@ui/display';
+import { IconCheckbox, IconNotes, IconTimelineEvent } from '@tabler/icons-react';
 import {
   CatalogDecorator,
   CatalogStory,
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/FloatingButton.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/FloatingButton.stories.tsx
index b0ce9fc138d1..2872a84a9676 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/FloatingButton.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/FloatingButton.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { IconSearch } from '@ui/display';
+import { IconSearch } from '@tabler/icons-react';
 import {
   CatalogDecorator,
   CatalogStory,
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/FloatingButtonGroup.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/FloatingButtonGroup.stories.tsx
index 248ed0c5eaef..70ba0884813a 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/FloatingButtonGroup.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/FloatingButtonGroup.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { IconCheckbox, IconNotes, IconTimelineEvent } from '@ui/display';
+import { IconCheckbox, IconNotes, IconTimelineEvent } from '@tabler/icons-react';
 import {
   CatalogDecorator,
   CatalogStory,
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/FloatingIconButton.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/FloatingIconButton.stories.tsx
index 71c4e0c56d2a..4afeb66af1ba 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/FloatingIconButton.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/FloatingIconButton.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { IconSearch } from '@ui/display';
+import { IconSearch } from '@tabler/icons-react';
 import {
   CatalogDecorator,
   CatalogStory,
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/FloatingIconButtonGroup.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/FloatingIconButtonGroup.stories.tsx
index 494a644cbcd7..facfb2770f31 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/FloatingIconButtonGroup.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/FloatingIconButtonGroup.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { IconCheckbox, IconNotes, IconTimelineEvent } from '@ui/display';
+import { IconCheckbox, IconNotes, IconTimelineEvent } from '@tabler/icons-react';
 import {
   CatalogDecorator,
   CatalogStory,
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/IconButton.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/IconButton.stories.tsx
index 538a98753937..842a55f45392 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/IconButton.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/IconButton.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { IconSearch } from '@ui/display';
+import { IconSearch } from '@tabler/icons-react';
 import {
   CatalogDecorator,
   CatalogStory,
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/IconButtonGroup.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/IconButtonGroup.stories.tsx
index a9a431b4dcca..81e73afccaf8 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/IconButtonGroup.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/IconButtonGroup.stories.tsx
@@ -1,10 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { IconCheckbox, IconNotes, IconTimelineEvent } from '@ui/display';
-import {
-  CatalogDecorator,
-  CatalogStory,
-  ComponentDecorator,
-} from '@ui/testing';
+import { IconCheckbox, IconNotes, IconTimelineEvent } from '@tabler/icons-react';
+import { CatalogDecorator, CatalogStory, ComponentDecorator } from '@ui/testing';
 import {
   IconButtonAccent,
   IconButtonSize,
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/LightButton.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/LightButton.stories.tsx
index d5a3ceacb7c0..59165d5d54d2 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/LightButton.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/LightButton.stories.tsx
@@ -1,10 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { IconSearch } from '@ui/display';
-import {
-  CatalogDecorator,
-  CatalogStory,
-  ComponentDecorator,
-} from '@ui/testing';
+import { IconSearch } from '@tabler/icons-react';
+import { CatalogDecorator, CatalogStory, ComponentDecorator } from '@ui/testing';
 import { LightButton, LightButtonAccent } from '../LightButton';
 
 const meta: Meta<typeof LightButton> = {
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/LightIconButton.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/LightIconButton.stories.tsx
index a2d40a79dba2..d86e49e0b8e0 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/LightIconButton.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/LightIconButton.stories.tsx
@@ -1,10 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { IconSearch } from '@ui/display';
-import {
-  CatalogDecorator,
-  CatalogStory,
-  ComponentDecorator,
-} from '@ui/testing';
+import { IconSearch } from '@tabler/icons-react';
+import { CatalogDecorator, CatalogStory, ComponentDecorator } from '@ui/testing';
 import {
   LightIconButton,
   LightIconButtonAccent,
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/MainButton.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/MainButton.stories.tsx
index c1f715bd03fd..8e6cbf28ee09 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/MainButton.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/MainButton.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
-import { IconBrandGoogle } from '@ui/display';
+import { IconBrandGoogle } from '@tabler/icons-react';
 import { ComponentDecorator } from '@ui/testing';
 import { MainButton } from '../MainButton';
 
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/RoundedIconButton.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/RoundedIconButton.stories.tsx
index e36e3eadd151..f31c5f562cda 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/RoundedIconButton.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/RoundedIconButton.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
-import { IconArrowRight } from '@ui/display';
+import { IconArrowRight } from '@tabler/icons-react';
 import { ComponentDecorator } from '@ui/testing';
 import { RoundedIconButton } from '../RoundedIconButton';
 
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItem.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItem.stories.tsx
index 1a3b43b26988..b3dd8dd851aa 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItem.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItem.stories.tsx
@@ -1,12 +1,8 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { IconBell } from '@ui/display';
-import {
-  CatalogDecorator,
-  CatalogStory,
-  ComponentDecorator,
-} from '@ui/testing';
+import { IconBell } from '@tabler/icons-react';
+import { CatalogDecorator, CatalogStory, ComponentDecorator } from '@ui/testing';
 import { MenuItemAccent } from '../../types/MenuItemAccent';
 import { MenuItem } from '../MenuItem';
 
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx
index be80bb93baf4..d40390f84a57 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx
@@ -1,11 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { IconBell } from '@ui/display';
-import {
-  CatalogDecorator,
-  CatalogStory,
-  ComponentDecorator,
-} from '@ui/testing';
+import { IconBell } from '@tabler/icons-react';
+import { CatalogDecorator, CatalogStory, ComponentDecorator } from '@ui/testing';
 import { MenuItemCommand } from '../MenuItemCommand';
 
 const meta: Meta<typeof MenuItemCommand> = {
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx
index a66000df4c4a..15917f132913 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx
@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { IconBell, IconMinus } from '@ui/display';
+import { IconBell, IconMinus } from '@tabler/icons-react';
 import {
   CatalogDecorator,
   CatalogDimension,
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx
index a69104d56136..dede76de253d 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx
@@ -1,13 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-
-import { IconBell } from '@ui/display';
-import {
-  CatalogDecorator,
-  CatalogDimension,
-  CatalogOptions,
-  CatalogStory,
-  ComponentDecorator,
-} from '@ui/testing';
+import { IconBell } from '@tabler/icons-react';
+import { CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator } from '@ui/testing';
 import { MenuItemMultiSelect } from '../MenuItemMultiSelect';
 
 const meta: Meta<typeof MenuItemMultiSelect> = {
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx
index f564890657bf..c32781b84746 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemMultiSelectAvatar.stories.tsx
@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-
-import { Avatar } from '@ui/display';
+import { Avatar } from '@ui/display/avatar/components/Avatar';
 import {
   AVATAR_URL_MOCK,
   CatalogDecorator,
@@ -8,6 +7,7 @@ import {
   CatalogOptions,
   CatalogStory,
   ComponentDecorator,
+  SERVER_URL_MOCK,
 } from '@ui/testing';
 import { MenuItemMultiSelectAvatar } from '../MenuItemMultiSelectAvatar';
 
@@ -23,7 +23,7 @@ type Story = StoryObj<typeof MenuItemMultiSelectAvatar>;
 export const Default: Story = {
   args: {
     text: 'First option',
-    avatar: <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />,
+    avatar: <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" baseUrl={SERVER_URL_MOCK}/>,
   },
   decorators: [ComponentDecorator],
 };
@@ -42,9 +42,9 @@ export const Catalog: CatalogStory<Story, typeof MenuItemMultiSelectAvatar> = {
           values: [true, false],
           props: (withAvatar: boolean) => ({
             avatar: withAvatar ? (
-              <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />
+              <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" baseUrl={SERVER_URL_MOCK}/>
             ) : (
-              <Avatar avatarUrl={''} placeholder="L" />
+              <Avatar avatarUrl={''} placeholder="L" baseUrl={SERVER_URL_MOCK}/>
             ),
           }),
           labels: (withAvatar: boolean) =>
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx
index c9a8b2739824..8283877b9723 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx
@@ -1,16 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { IconBell } from '@ui/display';
+import { IconBell } from '@tabler/icons-react';
+import { CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator } from '@ui/testing';
 import { MenuItemNavigate } from '../MenuItemNavigate';
 
-import {
-  CatalogDecorator,
-  CatalogDimension,
-  CatalogOptions,
-  CatalogStory,
-  ComponentDecorator,
-} from '@ui/testing';
-
 const meta: Meta<typeof MenuItemNavigate> = {
   title: 'UI/Navigation/MenuItem/MenuItemNavigate',
   component: MenuItemNavigate,
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx
index 65e05b3b06fb..6307c8f7963f 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx
@@ -1,15 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import {
-  CatalogDecorator,
-  CatalogDimension,
-  CatalogOptions,
-  CatalogStory,
-  ComponentDecorator,
-} from '@ui/testing';
+
+import { IconBell } from '@tabler/icons-react';
+import { CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator } from '@ui/testing';
 import { MenuItemSelect } from '../MenuItemSelect';
 
-import { IconBell } from '@ui/display';
+
 const meta: Meta<typeof MenuItemSelect> = {
   title: 'UI/Navigation/MenuItem/MenuItemSelect',
   component: MenuItemSelect,
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx
index 0d8748b37993..f5dd3c0371d7 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectAvatar.stories.tsx
@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-
-import { Avatar } from '@ui/display';
+import { Avatar } from '@ui/display/avatar/components/Avatar';
 import {
   AVATAR_URL_MOCK,
   CatalogDecorator,
@@ -8,6 +7,7 @@ import {
   CatalogOptions,
   CatalogStory,
   ComponentDecorator,
+  SERVER_URL_MOCK,
 } from '@ui/testing';
 import { MenuItemSelectAvatar } from '../MenuItemSelectAvatar';
 
@@ -22,7 +22,7 @@ type Story = StoryObj<typeof MenuItemSelectAvatar>;
 export const Default: Story = {
   args: {
     text: 'First option',
-    avatar: <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />,
+    avatar: <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" baseUrl={SERVER_URL_MOCK}/>,
   },
   argTypes: {
     className: { control: false },
@@ -44,9 +44,9 @@ export const Catalog: CatalogStory<Story, typeof MenuItemSelectAvatar> = {
           values: [true, false],
           props: (withAvatar: boolean) => ({
             avatar: withAvatar ? (
-              <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" />
+              <Avatar avatarUrl={AVATAR_URL_MOCK} placeholder="L" baseUrl={SERVER_URL_MOCK}/>
             ) : (
-              <Avatar avatarUrl={''} placeholder="L" />
+              <Avatar avatarUrl={''} placeholder="L" baseUrl={SERVER_URL_MOCK}/>
             ),
           }),
           labels: (withAvatar: boolean) =>
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx
index a5f1060d7a1e..59ca0dd08544 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx
@@ -1,13 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { ColorSampleVariant } from '@ui/display';
-import {
-  CatalogDecorator,
-  CatalogDimension,
-  CatalogOptions,
-  CatalogStory,
-  ComponentDecorator,
-} from '@ui/testing';
+import { ColorSampleVariant } from '@ui/display/color/components/ColorSample';
+import { CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator } from '@ui/testing';
 import { MAIN_COLOR_NAMES, ThemeColor } from '@ui/theme';
 import { MenuItemSelectColor } from '../MenuItemSelectColor';
 
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx
index a55476a555ae..13206201c13c 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx
@@ -1,13 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { IconBell } from '@ui/display';
-import {
-  CatalogDecorator,
-  CatalogDimension,
-  CatalogOptions,
-  CatalogStory,
-  ComponentDecorator,
-} from '@ui/testing';
+import { IconBell } from '@tabler/icons-react';
+import { CatalogDecorator, CatalogDimension, CatalogOptions, CatalogStory, ComponentDecorator } from '@ui/testing';
 import { MenuItemToggle } from '../MenuItemToggle';
 
 const meta: Meta<typeof MenuItemToggle> = {
diff --git a/packages/twenty-ui/src/testing/constants.ts b/packages/twenty-ui/src/testing/constants.ts
new file mode 100644
index 000000000000..9f73e25dce5a
--- /dev/null
+++ b/packages/twenty-ui/src/testing/constants.ts
@@ -0,0 +1 @@
+export const SERVER_URL_MOCK = 'http://localhost:3000'
\ No newline at end of file
diff --git a/packages/twenty-ui/src/testing/index.ts b/packages/twenty-ui/src/testing/index.ts
new file mode 100644
index 000000000000..4f249905610c
--- /dev/null
+++ b/packages/twenty-ui/src/testing/index.ts
@@ -0,0 +1,9 @@
+export * from './ComponentStorybookLayout';
+export * from './constants';
+export * from './decorators/CatalogDecorator';
+export * from './decorators/ComponentDecorator';
+export * from './decorators/ComponentWithRouterDecorator';
+export * from './decorators/RouterDecorator';
+export * from './mocks/avatarUrlMock';
+export * from './types/CatalogStory';
+export * from './utils/getCanvasElementForDropdownTesting';
diff --git a/packages/twenty-ui/src/theme/constants/Rgba.ts b/packages/twenty-ui/src/theme/constants/Rgba.ts
index 6b06f2a64e9d..28b174489e11 100644
--- a/packages/twenty-ui/src/theme/constants/Rgba.ts
+++ b/packages/twenty-ui/src/theme/constants/Rgba.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @nx/workspace-no-hardcoded-colors */
 import hexRgb from 'hex-rgb';
 
 export const RGBA = (hex: string, alpha: number) => {
diff --git a/packages/twenty-ui/src/utilities/responsive/hooks/__tests__/isMobile.test.tsx b/packages/twenty-ui/src/utilities/responsive/hooks/__tests__/useIsMobile.test.tsx
similarity index 100%
rename from packages/twenty-ui/src/utilities/responsive/hooks/__tests__/isMobile.test.tsx
rename to packages/twenty-ui/src/utilities/responsive/hooks/__tests__/useIsMobile.test.tsx
diff --git a/packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts b/packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts
index ac4f9126ecf5..69458b8915e4 100644
--- a/packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts
+++ b/packages/twenty-ui/src/utilities/responsive/hooks/useIsMobile.ts
@@ -1,4 +1,4 @@
-import { MOBILE_VIEWPORT } from '@ui/theme/constants/MobileViewport';
+import { MOBILE_VIEWPORT } from '@ui/theme';
 import { useMediaQuery } from 'react-responsive';
 
 export const useIsMobile = () =>
diff --git a/packages/twenty-ui/tsconfig.dev.json b/packages/twenty-ui/tsconfig.dev.json
index 82ab7669eb27..0f7c47687db6 100644
--- a/packages/twenty-ui/tsconfig.dev.json
+++ b/packages/twenty-ui/tsconfig.dev.json
@@ -1,8 +1,11 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "baseUrl": "../..",
+    "paths": {
+      "@ui/*": ["./packages/twenty-ui/src/*"]
+    }
   },
   "include": [
     "vite.config.ts",
diff --git a/packages/twenty-ui/tsconfig.spec.json b/packages/twenty-ui/tsconfig.spec.json
index 12bcba742063..a299ab7186b4 100644
--- a/packages/twenty-ui/tsconfig.spec.json
+++ b/packages/twenty-ui/tsconfig.spec.json
@@ -1,7 +1,6 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs",
     "types": ["jest", "node"],
     "baseUrl": "../..",
     "paths": {
diff --git a/packages/twenty-ui/vite.config.ts b/packages/twenty-ui/vite.config.ts
index 389e8762b401..15dd86ed96c5 100644
--- a/packages/twenty-ui/vite.config.ts
+++ b/packages/twenty-ui/vite.config.ts
@@ -94,7 +94,6 @@ export default defineConfig(({ command }) => {
               ),
               // The absolute path to the entry file
               // lib/nested/foo.ts becomes /project/lib/nested/foo.ts
-              // @ts-expect-error TODO LEAVE LIKE THAT FOR THE MOMENT FIND ESNEXT EQUIVALENT
               fileURLToPath(new URL(file, import.meta.url)),
             ]),
         ),

From 48d1e5d4ebf3b1bd5b57f343defee03f4a8783c0 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Sat, 1 Feb 2025 08:32:43 +0100
Subject: [PATCH 14/21] chore(ui): var typo

---
 .../src/navigation/menu-item/components/MenuItemAvatar.tsx     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx
index e62fb81e2d27..b3c596d023d7 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx
@@ -31,6 +31,7 @@ export type MenuItemAvatarProps = {
   testId?: string;
   text: string;
   hasSubMenu?: boolean;
+  baseUrl: string
 };
 
 // TODO: merge with MenuItem
@@ -46,6 +47,7 @@ export const MenuItemAvatar = ({
   avatar,
   hasSubMenu = false,
   text,
+  baseUrl
 }: MenuItemAvatarProps) => {
   const theme = useTheme();
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
@@ -76,6 +78,7 @@ export const MenuItemAvatar = ({
             placeholderColorSeed={avatar.placeholderColorSeed}
             size={avatar.size}
             type={avatar.type}
+            baseUrl={baseUrl}
           />
         )}
         <OverflowingTextWithTooltip text={text ?? ''} />

From 796f00b9bbbc9d6858bc4a4a4a173db3da112ad9 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Sat, 1 Feb 2025 08:32:56 +0100
Subject: [PATCH 15/21] fix(ui): avoid building tests

---
 packages/twenty-ui/tsconfig.dev.json |  4 +++-
 packages/twenty-ui/vite.config.ts    | 10 +++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/twenty-ui/tsconfig.dev.json b/packages/twenty-ui/tsconfig.dev.json
index 0f7c47687db6..705aa430fa9b 100644
--- a/packages/twenty-ui/tsconfig.dev.json
+++ b/packages/twenty-ui/tsconfig.dev.json
@@ -2,6 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "types": ["jest", "node"],
+    // Why should this have a different baseUrl ?
     "baseUrl": "../..",
     "paths": {
       "@ui/*": ["./packages/twenty-ui/src/*"]
@@ -18,5 +19,6 @@
     "src/**/*.tsx",
     "src/**/*.ts",
     "vite.config.ts"
-]
+  ],
+  "exclude": []
 }
diff --git a/packages/twenty-ui/vite.config.ts b/packages/twenty-ui/vite.config.ts
index 15dd86ed96c5..d58c3a33942d 100644
--- a/packages/twenty-ui/vite.config.ts
+++ b/packages/twenty-ui/vite.config.ts
@@ -6,11 +6,12 @@ import { fileURLToPath } from 'node:url';
 import * as path from 'path';
 import { defineConfig } from 'vite';
 import checker from 'vite-plugin-checker';
+import { UserPluginConfig } from 'vite-plugin-checker/dist/esm/types';
 import dts, { PluginOptions } from 'vite-plugin-dts';
 import svgr from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
-
-import { UserPluginConfig } from 'vite-plugin-checker/dist/esm/types';
+import tsconfigBuild from "./tsconfig.build.json";
+import tsconfigDev from "./tsconfig.dev.json";
 
 // eslint-disable-next-line @nx/enforce-module-boundaries, import/no-relative-packages
 import packageJson from '../../package.json';
@@ -18,6 +19,7 @@ import packageJson from '../../package.json';
 export default defineConfig(({ command }) => {
   const isBuildCommand = command === 'build';
 
+  // TODO CHECK IF REMOVEABLE
   const tsConfigPath = isBuildCommand
     ? path.resolve(__dirname, './tsconfig.build.json')
     : path.resolve(__dirname, './tsconfig.dev.json');
@@ -83,11 +85,13 @@ export default defineConfig(({ command }) => {
         input: Object.fromEntries(
           glob
             .sync('src/**/*.{ts,tsx}', {
-              ignore: ['src/**/*.d.ts'],
+              // Empty exclude for dev ?
+              ignore: isBuildCommand ? tsconfigBuild.exclude : tsconfigDev.exclude,
             })
             .map((file) => [
               // The name of the entry point
               // lib/nested/foo.ts becomes nested/foo
+              // Is it necessary with tsconfig paths to debug ?
               path.relative(
                 'src',
                 file.slice(0, file.length - path.extname(file).length),

From 1e1cb38ad25ab0e71a3a0ebbff5f509ccb6d5e0d Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Sat, 1 Feb 2025 08:46:02 +0100
Subject: [PATCH 16/21] refactor(ui,front,shared): move createState utils to
 shared

---
 .../copilot/right-drawer/states/copilotQueryState.ts           | 2 +-
 .../activities/emails/states/lastViewableEmailThreadIdState.ts | 2 +-
 .../activities/states/activityTargetableEntityArrayState.ts    | 2 +-
 .../src/modules/activities/states/canCreateActivityState.ts    | 2 +-
 .../modules/activities/states/isActivityInCreateModeState.ts   | 2 +-
 .../modules/activities/states/isCreatingActivityInDBState.ts   | 2 +-
 .../auth/states/availableIdentityProviderForAuthState.ts       | 2 +-
 .../src/modules/auth/states/billingCheckoutSessionState.ts     | 2 +-
 .../twenty-front/src/modules/auth/states/currentUserState.ts   | 2 +-
 .../src/modules/auth/states/currentWorkspaceMemberState.ts     | 2 +-
 .../src/modules/auth/states/currentWorkspaceMembersStates.ts   | 2 +-
 .../src/modules/auth/states/currentWorkspaceState.ts           | 2 +-
 .../src/modules/auth/states/isCurrentUserLoadingState.ts       | 2 +-
 .../src/modules/auth/states/isVerifyPendingState.ts            | 2 +-
 .../twenty-front/src/modules/auth/states/previousUrlState.ts   | 2 +-
 .../twenty-front/src/modules/auth/states/signInUpModeState.ts  | 2 +-
 .../twenty-front/src/modules/auth/states/signInUpStepState.ts  | 2 +-
 .../twenty-front/src/modules/auth/states/tokenPairState.ts     | 2 +-
 .../src/modules/auth/states/workspacePublicDataState.ts        | 2 +-
 packages/twenty-front/src/modules/auth/states/workspaces.ts    | 2 +-
 .../src/modules/captcha/states/captchaTokenState.ts            | 2 +-
 .../src/modules/captcha/states/isCaptchaScriptLoadedState.ts   | 2 +-
 .../modules/captcha/states/isRequestingCaptchaTokenState.ts    | 2 +-
 .../states/isLoadingTokensFromExtensionState.ts                | 2 +-
 .../src/modules/client-config/states/apiConfigState.ts         | 2 +-
 .../src/modules/client-config/states/authProvidersState.ts     | 2 +-
 .../src/modules/client-config/states/billingState.ts           | 2 +-
 .../modules/client-config/states/canManageFeatureFlagsState.ts | 2 +-
 .../src/modules/client-config/states/captchaState.ts           | 2 +-
 .../src/modules/client-config/states/chromeExtensionIdState.ts | 2 +-
 .../modules/client-config/states/clientConfigApiStatusState.ts | 2 +-
 .../modules/client-config/states/isAnalyticsEnabledState.ts    | 2 +-
 .../src/modules/client-config/states/isDebugModeState.ts       | 2 +-
 .../states/isDeveloperDefaultSignInPrefilledState.ts           | 2 +-
 .../client-config/states/isEmailVerificationRequiredState.ts   | 2 +-
 .../client-config/states/isMultiWorkspaceEnabledState.ts       | 2 +-
 .../src/modules/client-config/states/sentryConfigState.ts      | 2 +-
 .../src/modules/client-config/states/supportChatState.ts       | 2 +-
 .../src/modules/command-menu/states/commandMenuPageState.ts    | 2 +-
 .../src/modules/command-menu/states/commandMenuSearchState.ts  | 2 +-
 .../states/mainContextStoreComponentInstanceId.ts              | 2 +-
 .../modules/domain-manager/states/domainConfigurationState.ts  | 2 +-
 .../states/lastAuthenticatedWorkspaceDomainState.ts            | 2 +-
 .../src/modules/localization/states/dateTimeFormatState.ts     | 2 +-
 .../navigation/states/currentMobileNavigationDrawerState.ts    | 2 +-
 .../states/isAppWaitingForFreshObjectMetadataState.ts          | 2 +-
 .../modules/object-metadata/states/objectMetadataItemsState.ts | 3 +--
 .../record-board-column/states/aggregateDropdownState.ts       | 2 +-
 .../object-record/record-field/states/lastShowPageRecordId.ts  | 2 +-
 .../record-index/states/recordIndexFieldDefinitionsState.ts    | 2 +-
 .../record-index/states/recordIndexFiltersState.ts             | 2 +-
 .../record-index/states/recordIndexIsCompactModeActiveState.ts | 2 +-
 .../states/recordIndexKanbanAggregateOperationState.ts         | 2 +-
 .../states/recordIndexKanbanFieldMetadataIdState.ts            | 2 +-
 .../object-record/record-index/states/recordIndexSortsState.ts | 2 +-
 .../record-index/states/recordIndexViewFilterGroupsState.ts    | 2 +-
 .../record-index/states/recordIndexViewTypeState.ts            | 2 +-
 .../record-right-drawer/states/isNewViewableRecordLoading.ts   | 2 +-
 .../record-right-drawer/states/viewableRecordIdState.ts        | 2 +-
 .../states/viewableRecordNameSingularState.ts                  | 2 +-
 .../internal/__tests__/useUpsertTableRecordInGroup.test.tsx    | 2 +-
 .../internal/__tests__/useUpsertTableRecordNoGroup.test.tsx    | 2 +-
 .../record-table/states/isRemoveSortingModalOpenState.ts       | 2 +-
 .../record-table/states/isSoftFocusUsingMouseState.ts          | 2 +-
 .../object-record/states/isUpdatingRecordEditableName.ts       | 2 +-
 .../fields/preview/states/settingsPreviewRecordIdState.ts      | 2 +-
 .../settings/security/states/SSOIdentitiesProvidersState.ts    | 2 +-
 .../spreadsheet-import/states/spreadsheetImportDialogState.ts  | 2 +-
 .../ui/layout/dropdown/states/activeDropdownFocusIdState.ts    | 2 +-
 .../ui/layout/dropdown/states/previousDropdownFocusIdState.ts  | 2 +-
 .../states/isRightDrawerAnimationCompletedState.ts             | 2 +-
 .../layout/right-drawer/states/isRightDrawerMinimizedState.ts  | 2 +-
 .../ui/layout/right-drawer/states/isRightDrawerOpenState.ts    | 2 +-
 .../ui/layout/right-drawer/states/messageThreadState.ts        | 2 +-
 .../layout/right-drawer/states/rightDrawerCloseEventsState.ts  | 2 +-
 .../states/rightDrawerHeaderDropdownButtonState.ts             | 2 +-
 .../ui/layout/right-drawer/states/rightDrawerPageState.ts      | 2 +-
 .../ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts   | 2 +-
 .../ui/navigation/states/navigationMemorizedUrlState.ts        | 2 +-
 .../ui/navigation/step-bar/states/stepBarInternalState.ts      | 2 +-
 .../hotkey/states/internal/currentHotkeyScopeState.ts          | 2 +-
 .../states/internal/internalHotkeysEnabledScopesState.ts       | 2 +-
 .../ui/utilities/hotkey/states/internal/pendingHotkeysState.ts | 2 +-
 .../hotkey/states/internal/previousHotkeyScopeState.ts         | 2 +-
 .../utilities/loading-state/states/currentPageLocationState.ts | 2 +-
 .../states/openOverrideWorkflowDraftConfirmationModalState.ts  | 2 +-
 .../src/modules/workflow/states/workflowIdState.ts             | 2 +-
 .../modules/workflow/states/workflowLastCreatedStepIdState.ts  | 2 +-
 .../src/modules/workflow/states/workflowVersionIdState.ts      | 2 +-
 .../workflow/workflow-diagram/states/workflowDiagramState.ts   | 2 +-
 .../states/workflowDiagramTriggerNodeSelectionState.ts         | 2 +-
 .../workflow-diagram/states/workflowReactFlowRefState.ts       | 2 +-
 .../workflow-diagram/states/workflowSelectedNodeState.ts       | 2 +-
 .../states/workflowCreateStepFromParentStepIdState.ts          | 2 +-
 .../workspace-invitation/states/workspaceInvitationsStates.ts  | 2 +-
 .../modules/workspace/states/workspaceAuthProvidersState.ts    | 2 +-
 .../settings/data-model/states/updatedObjectNamePluralState.ts | 2 +-
 packages/twenty-shared/src/index.ts                            | 1 +
 .../utils => twenty-shared/src/utils/state}/createState.ts     | 0
 packages/twenty-ui/jest.config.ts                              | 2 +-
 packages/twenty-ui/src/display/icon/states/iconsState.ts       | 2 +-
 101 files changed, 100 insertions(+), 100 deletions(-)
 rename packages/{twenty-ui/src/utilities/state/utils => twenty-shared/src/utils/state}/createState.ts (100%)

diff --git a/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts b/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts
index ee56e8b0fe80..8f757c1d757a 100644
--- a/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts
+++ b/packages/twenty-front/src/modules/activities/copilot/right-drawer/states/copilotQueryState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const copilotQueryState = createState({
   key: 'activities/copilot-query',
diff --git a/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts b/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts
index 4e90b960566d..23b87c7bee9a 100644
--- a/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts
+++ b/packages/twenty-front/src/modules/activities/emails/states/lastViewableEmailThreadIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const emailThreadIdWhenEmailThreadWasClosedState = createState<
   string | null
diff --git a/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts b/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
index 0d6e06ab4683..3dbb9c57c085 100644
--- a/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
+++ b/packages/twenty-front/src/modules/activities/states/activityTargetableEntityArrayState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
 
diff --git a/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts b/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts
index 5da7f60e1c66..daaa6c730409 100644
--- a/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts
+++ b/packages/twenty-front/src/modules/activities/states/canCreateActivityState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const canCreateActivityState = createState<boolean>({
   key: 'canCreateActivityState',
diff --git a/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts b/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts
index 61aaf33d36db..79a49307300b 100644
--- a/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts
+++ b/packages/twenty-front/src/modules/activities/states/isActivityInCreateModeState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isActivityInCreateModeState = createState<boolean>({
   key: 'isActivityInCreateModeState',
diff --git a/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts b/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts
index 278b2430c172..d0179041c063 100644
--- a/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts
+++ b/packages/twenty-front/src/modules/activities/states/isCreatingActivityInDBState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isUpsertingActivityInDBState = createState<boolean>({
   key: 'isUpsertingActivityInDBState',
diff --git a/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts b/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts
index d3100a826b3a..3f6d68c8abad 100644
--- a/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts
+++ b/packages/twenty-front/src/modules/auth/states/availableIdentityProviderForAuthState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 import { UserExists } from '~/generated/graphql';
 
 export const availableSSOIdentityProvidersForAuthState = createState<
diff --git a/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts b/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts
index d07810b07b42..e6df7cbd5745 100644
--- a/packages/twenty-front/src/modules/auth/states/billingCheckoutSessionState.ts
+++ b/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 { syncEffect } from 'recoil-sync';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const billingCheckoutSessionState = createState<BillingCheckoutSession>({
   key: 'billingCheckoutSessionState',
diff --git a/packages/twenty-front/src/modules/auth/states/currentUserState.ts b/packages/twenty-front/src/modules/auth/states/currentUserState.ts
index 26880ddaef24..643dc94491c7 100644
--- a/packages/twenty-front/src/modules/auth/states/currentUserState.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentUserState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { User } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts
index 4af6c5b8f221..51006a5defb0 100644
--- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMemberState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { WorkspaceMember } from '@/workspace-member/types/WorkspaceMember';
 
diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts
index a8059259a3e7..f7b5b14ab130 100644
--- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceMembersStates.ts
@@ -1,5 +1,5 @@
 import { CurrentWorkspaceMember } from '@/auth/states/currentWorkspaceMemberState';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const currentWorkspaceMembersState = createState<
   CurrentWorkspaceMember[]
diff --git a/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts b/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts
index e54f550d3289..3a3f56baf853 100644
--- a/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts
+++ b/packages/twenty-front/src/modules/auth/states/currentWorkspaceState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { Workspace } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts b/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts
index 0a62d92ab4cf..aad5844760e5 100644
--- a/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts
+++ b/packages/twenty-front/src/modules/auth/states/isCurrentUserLoadingState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isCurrentUserLoadedState = createState<boolean>({
   key: 'isCurrentUserLoadedState',
diff --git a/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts b/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts
index 567910389ba5..c86b4cc3d915 100644
--- a/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts
+++ b/packages/twenty-front/src/modules/auth/states/isVerifyPendingState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isVerifyPendingState = createState<boolean>({
   key: 'isVerifyPendingState',
diff --git a/packages/twenty-front/src/modules/auth/states/previousUrlState.ts b/packages/twenty-front/src/modules/auth/states/previousUrlState.ts
index 1de274fb18c5..7320b37cfbf3 100644
--- a/packages/twenty-front/src/modules/auth/states/previousUrlState.ts
+++ b/packages/twenty-front/src/modules/auth/states/previousUrlState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const previousUrlState = createState<string>({
   key: 'previousUrlState',
diff --git a/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts b/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts
index c04ef6056b57..db46f2b64335 100644
--- a/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts
+++ b/packages/twenty-front/src/modules/auth/states/signInUpModeState.ts
@@ -1,5 +1,5 @@
 import { SignInUpMode } from '@/auth/types/signInUpMode';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const signInUpModeState = createState<SignInUpMode>({
   key: 'signInUpModeState',
diff --git a/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts b/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts
index a12b92ee03a0..43d2e24531b2 100644
--- a/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts
+++ b/packages/twenty-front/src/modules/auth/states/signInUpStepState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export enum SignInUpStep {
   Init = 'init',
diff --git a/packages/twenty-front/src/modules/auth/states/tokenPairState.ts b/packages/twenty-front/src/modules/auth/states/tokenPairState.ts
index 718e67ad6277..91d2ec4c21b2 100644
--- a/packages/twenty-front/src/modules/auth/states/tokenPairState.ts
+++ b/packages/twenty-front/src/modules/auth/states/tokenPairState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { AuthTokenPair } from '~/generated/graphql';
 import { cookieStorageEffect } from '~/utils/recoil-effects';
diff --git a/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts b/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts
index f4866fa653ca..2b3b232c9316 100644
--- a/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts
+++ b/packages/twenty-front/src/modules/auth/states/workspacePublicDataState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 import { PublicWorkspaceDataOutput } from '~/generated/graphql';
 
 export const workspacePublicDataState =
diff --git a/packages/twenty-front/src/modules/auth/states/workspaces.ts b/packages/twenty-front/src/modules/auth/states/workspaces.ts
index 8e262ecf0e16..627fa2bc4a2e 100644
--- a/packages/twenty-front/src/modules/auth/states/workspaces.ts
+++ b/packages/twenty-front/src/modules/auth/states/workspaces.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { Workspace } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts b/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts
index 24289cac6c6c..808b5b99bcbe 100644
--- a/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts
+++ b/packages/twenty-front/src/modules/captcha/states/captchaTokenState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const captchaTokenState = createState<string | undefined>({
   key: 'captchaTokenState',
diff --git a/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts b/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts
index 0db486bbe785..bfaf00fd9ba8 100644
--- a/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts
+++ b/packages/twenty-front/src/modules/captcha/states/isCaptchaScriptLoadedState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isCaptchaScriptLoadedState = createState<boolean>({
   key: 'isCaptchaScriptLoadedState',
diff --git a/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts b/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts
index df7daeb4ddb5..d1d770096408 100644
--- a/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts
+++ b/packages/twenty-front/src/modules/captcha/states/isRequestingCaptchaTokenState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isRequestingCaptchaTokenState = createState<boolean>({
   key: 'isRequestingCaptchaTokenState',
diff --git a/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts b/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts
index e04798f19995..12a001143a0d 100644
--- a/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts
+++ b/packages/twenty-front/src/modules/chrome-extension-sidecar/states/isLoadingTokensFromExtensionState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isLoadingTokensFromExtensionState = createState<boolean | null>({
   key: 'isLoadingTokensFromExtensionState',
diff --git a/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts b/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts
index 9a01493e4f84..41b20fbb8525 100644
--- a/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/apiConfigState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { ApiConfig } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts b/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts
index d56572b5a969..b9fb515e9251 100644
--- a/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/authProvidersState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { AuthProviders } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/client-config/states/billingState.ts b/packages/twenty-front/src/modules/client-config/states/billingState.ts
index 5634c510b33e..a3dabcc60dde 100644
--- a/packages/twenty-front/src/modules/client-config/states/billingState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/billingState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { Billing } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/client-config/states/canManageFeatureFlagsState.ts b/packages/twenty-front/src/modules/client-config/states/canManageFeatureFlagsState.ts
index 1d0222a6ea9d..0a098c0fc564 100644
--- a/packages/twenty-front/src/modules/client-config/states/canManageFeatureFlagsState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/canManageFeatureFlagsState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const canManageFeatureFlagsState = createState<boolean>({
   key: 'canManageFeatureFlagsState',
diff --git a/packages/twenty-front/src/modules/client-config/states/captchaState.ts b/packages/twenty-front/src/modules/client-config/states/captchaState.ts
index 77cedd1014a4..817961de2863 100644
--- a/packages/twenty-front/src/modules/client-config/states/captchaState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/captchaState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { Captcha } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts b/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts
index bec5ae986aa0..575ebd6e5bc6 100644
--- a/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/chromeExtensionIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const chromeExtensionIdState = createState<string | null | undefined>({
   key: 'chromeExtensionIdState',
diff --git a/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts b/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts
index 08793188ff1a..49da52812429 100644
--- a/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/clientConfigApiStatusState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 type ClientConfigApiStatus = {
   isLoaded: boolean;
diff --git a/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts b/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts
index 50c0f5c89c25..8bb15d80c813 100644
--- a/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isAnalyticsEnabledState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isAnalyticsEnabledState = createState<boolean>({
   key: 'isAnalyticsEnabled',
diff --git a/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts b/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts
index b2efbf8fc883..51f4ded7cab0 100644
--- a/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isDebugModeState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isDebugModeState = createState<boolean>({
   key: 'isDebugModeState',
diff --git a/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts b/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts
index 5f4d82bed79a..7970c552f1c4 100644
--- a/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isDeveloperDefaultSignInPrefilledState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isDeveloperDefaultSignInPrefilledState = createState<boolean>({
   key: 'isDeveloperDefaultSignInPrefilledState',
diff --git a/packages/twenty-front/src/modules/client-config/states/isEmailVerificationRequiredState.ts b/packages/twenty-front/src/modules/client-config/states/isEmailVerificationRequiredState.ts
index e06d73779a3a..74de6c5a9fb2 100644
--- a/packages/twenty-front/src/modules/client-config/states/isEmailVerificationRequiredState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isEmailVerificationRequiredState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isEmailVerificationRequiredState = createState<boolean>({
   key: 'isEmailVerificationRequired',
diff --git a/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts b/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts
index 4749eeab9e49..4d3391c9a6d9 100644
--- a/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/isMultiWorkspaceEnabledState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isMultiWorkspaceEnabledState = createState<boolean>({
   key: 'isMultiWorkspaceEnabled',
diff --git a/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts b/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts
index 19ca0359955c..756ee11a21e6 100644
--- a/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/sentryConfigState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { Sentry } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/client-config/states/supportChatState.ts b/packages/twenty-front/src/modules/client-config/states/supportChatState.ts
index cca337ba5816..b10d0280a5ea 100644
--- a/packages/twenty-front/src/modules/client-config/states/supportChatState.ts
+++ b/packages/twenty-front/src/modules/client-config/states/supportChatState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { Support } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts
index a1e6b37ccaf7..a44aac00c51d 100644
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts
@@ -1,5 +1,5 @@
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const commandMenuPageState = createState<CommandMenuPages>({
   key: 'command-menu/commandMenuPageState',
diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts
index 61f580a8ae17..658f1a8e782b 100644
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuSearchState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const commandMenuSearchState = createState<string>({
   key: 'command-menu/commandMenuSearchState',
diff --git a/packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts b/packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts
index 461c03be896a..14f13b797b21 100644
--- a/packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts
+++ b/packages/twenty-front/src/modules/context-store/states/mainContextStoreComponentInstanceId.ts
@@ -1,5 +1,5 @@
 import { CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE } from '@/context-store/constants/ContextStoreInstanceIdDefaultValue';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const mainContextStoreComponentInstanceIdState = createState<string>({
   key: 'mainContextStoreComponentInstanceIdState',
diff --git a/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts b/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts
index 89dc124042bf..397c62da068d 100644
--- a/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts
+++ b/packages/twenty-front/src/modules/domain-manager/states/domainConfigurationState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 import { ClientConfig } from '~/generated/graphql';
 
 export const domainConfigurationState = createState<
diff --git a/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts b/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts
index 1c15f96cbc3d..3a4ea886117d 100644
--- a/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts
+++ b/packages/twenty-front/src/modules/domain-manager/states/lastAuthenticatedWorkspaceDomainState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 import { cookieStorageEffect } from '~/utils/recoil-effects';
 
 export const lastAuthenticatedWorkspaceDomainState = createState<
diff --git a/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts b/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts
index 2392151e3a59..14899d0d1909 100644
--- a/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts
+++ b/packages/twenty-front/src/modules/localization/states/dateTimeFormatState.ts
@@ -1,7 +1,7 @@
 import { DateFormat } from '@/localization/constants/DateFormat';
 import { TimeFormat } from '@/localization/constants/TimeFormat';
 import { detectTimeZone } from '@/localization/utils/detectTimeZone';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const dateTimeFormatState = createState<{
   timeZone: string;
diff --git a/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts b/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
index c376b1953102..896c7a9a9e4d 100644
--- a/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
+++ b/packages/twenty-front/src/modules/navigation/states/currentMobileNavigationDrawerState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const currentMobileNavigationDrawerState = createState<
   'main' | 'settings'
diff --git a/packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts b/packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts
index 2cbe59765fdf..d9af2b093b16 100644
--- a/packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts
+++ b/packages/twenty-front/src/modules/object-metadata/states/isAppWaitingForFreshObjectMetadataState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isAppWaitingForFreshObjectMetadataState = createState<boolean>({
   key: 'isAppWaitingForFreshObjectMetadataState',
diff --git a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts
index 5c247fe0e1e5..dd827709d454 100644
--- a/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts
+++ b/packages/twenty-front/src/modules/object-metadata/states/objectMetadataItemsState.ts
@@ -1,6 +1,5 @@
-import { createState } from 'twenty-ui';
-
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { createState } from "twenty-shared";
 
 export const objectMetadataItemsState = createState<ObjectMetadataItem[]>({
   key: 'objectMetadataItemsState',
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/states/aggregateDropdownState.ts b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/states/aggregateDropdownState.ts
index 31eeb84fc7a2..6619dc23ea2a 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/states/aggregateDropdownState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/states/aggregateDropdownState.ts
@@ -1,5 +1,5 @@
 import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 type AggregateOperation = {
   operation: AGGREGATE_OPERATIONS | null;
diff --git a/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts b/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts
index dce923b37bda..e80d34e8f210 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/states/lastShowPageRecordId.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const lastShowPageRecordIdState = createState<string | null>({
   key: 'lastShowPageRecordIdState',
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts
index 1b260d3c9c20..2a677a2450d5 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFieldDefinitionsState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts
index f196c4893190..489eece7808a 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexFiltersState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts
index cd1d83fbb89f..e30bf13a29ac 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexIsCompactModeActiveState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const recordIndexIsCompactModeActiveState = createState<boolean>({
   key: 'recordIndexIsCompactModeActiveState',
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts
index 65004f32938d..6f032b5f767d 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanAggregateOperationState.ts
@@ -1,5 +1,5 @@
 import { ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export type KanbanAggregateOperation = {
   operation?: ExtendedAggregateOperations | null;
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts
index f1527934d48c..205e8127a5c7 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexKanbanFieldMetadataIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const recordIndexKanbanFieldMetadataIdState = createState<string | null>(
   {
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts
index 57088c8e5670..541898eb1193 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexSortsState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { Sort } from '@/object-record/object-sort-dropdown/types/Sort';
 
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewFilterGroupsState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewFilterGroupsState.ts
index 978614756ca7..0e7578c11e4b 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewFilterGroupsState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewFilterGroupsState.ts
@@ -1,5 +1,5 @@
 import { ViewFilterGroup } from '@/views/types/ViewFilterGroup';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const recordIndexViewFilterGroupsState = createState<ViewFilterGroup[]>({
   key: 'recordIndexViewFilterGroupsState',
diff --git a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts
index 49b032c860d1..b89b89215563 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-index/states/recordIndexViewTypeState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { ViewType } from '@/views/types/ViewType';
 
diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts
index 904677204cc6..b131ba7cb822 100644
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/isNewViewableRecordLoading.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isNewViewableRecordLoadingState = createState<boolean>({
   key: 'activities/is-new-viewable-record-loading',
diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts
index c75e6cf8a8a5..f07dd5288b6b 100644
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const viewableRecordIdState = createState<string | null>({
   key: 'activities/viewable-record-id',
diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts
index 3116430e10c3..2c050ccd41ce 100644
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/states/viewableRecordNameSingularState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const viewableRecordNameSingularState = createState<string | null>({
   key: 'activities/viewable-record-name-singular',
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordInGroup.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordInGroup.test.tsx
index ee690ec18b88..43cc5c123d22 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordInGroup.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordInGroup.test.tsx
@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { ReactNode, act } from 'react';
 import { RecoilRoot } from 'recoil';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordNoGroup.test.tsx b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordNoGroup.test.tsx
index d1f29e2c9afe..d10fc06f5795 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordNoGroup.test.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/__tests__/useUpsertTableRecordNoGroup.test.tsx
@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import { ReactNode, act } from 'react';
 import { RecoilRoot } from 'recoil';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { CoreObjectNamePlural } from '@/object-metadata/types/CoreObjectNamePlural';
diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts
index 9f8627f2a4dc..88d9335ead62 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isRemoveSortingModalOpenState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isRemoveSortingModalOpenState = createState<boolean>({
   key: 'isRemoveSortingModalOpenState',
diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts
index d25f46faa3b6..e6f4e2a4514f 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isSoftFocusUsingMouseState = createState<boolean>({
   key: 'isSoftFocusUsingMouseState',
diff --git a/packages/twenty-front/src/modules/object-record/states/isUpdatingRecordEditableName.ts b/packages/twenty-front/src/modules/object-record/states/isUpdatingRecordEditableName.ts
index 5829911a53c7..e7c8d373c69a 100644
--- a/packages/twenty-front/src/modules/object-record/states/isUpdatingRecordEditableName.ts
+++ b/packages/twenty-front/src/modules/object-record/states/isUpdatingRecordEditableName.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isUpdatingRecordEditableNameState = createState<boolean>({
   key: 'isUpdatingRecordEditableNameState',
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/settingsPreviewRecordIdState.ts b/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/settingsPreviewRecordIdState.ts
index 68a5bbff9608..c4a207cff18f 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/settingsPreviewRecordIdState.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/states/settingsPreviewRecordIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const settingsPreviewRecordIdState = createState<string | null>({
   key: 'settingsPreviewRecordIdState',
diff --git a/packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts b/packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts
index 76dc7cfdfbde..f3fa76384f9a 100644
--- a/packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts
+++ b/packages/twenty-front/src/modules/settings/security/states/SSOIdentitiesProvidersState.ts
@@ -1,7 +1,7 @@
 /* @license Enterprise */
 
 import { SSOIdentityProvider } from '@/settings/security/types/SSOIdentityProvider';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const SSOIdentitiesProvidersState = createState<
   Omit<SSOIdentityProvider, '__typename'>[]
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts b/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts
index fceda6736cab..55cfc0cd7b04 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts
+++ b/packages/twenty-front/src/modules/spreadsheet-import/states/spreadsheetImportDialogState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { SpreadsheetImportDialogOptions } from '../types';
 
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts
index fca8a5ba6f6b..1c78e3ce8f11 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const activeDropdownFocusIdState = createState<string | null>({
   key: 'activeDropdownFocusIdState',
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts
index e311d1f3fe4b..c709eb7c9570 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const previousDropdownFocusIdState = createState<string | null>({
   key: 'previousDropdownFocusIdState',
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState.ts
index 3e1cb030a30c..ec37703646ee 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isRightDrawerAnimationCompletedState = createState<boolean>({
   key: 'isRightDrawerAnimationCompletedState',
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerMinimizedState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerMinimizedState.ts
index 9b2124030610..dff8b7e49be1 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerMinimizedState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerMinimizedState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isRightDrawerMinimizedState = createState<boolean>({
   key: 'ui/layout/is-right-drawer-minimized',
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts
index b0149a5881a6..cf85d80f3c94 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/isRightDrawerOpenState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isRightDrawerOpenState = createState<boolean>({
   key: 'ui/layout/is-right-drawer-open',
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts
index 2e1febcf6e2f..f9de96ce7636 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/messageThreadState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { MessageThread } from '@/activities/emails/types/MessageThread';
 
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts
index ac0813d8ea93..7e6fe74dbae9 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerCloseEventsState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const rightDrawerCloseEventState = createState<Event | null>({
   key: 'rightDrawerCloseEventState',
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts
index a0f2a84965e7..c105399e123c 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerHeaderDropdownButtonState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { RightDrawerTopBarDropdownButtons } from '@/ui/layout/right-drawer/types/RightDrawerTopBarDropdownButtons';
 
diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts
index 0cbcdee85f46..2d781537555d 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/states/rightDrawerPageState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { RightDrawerPages } from '../types/RightDrawerPages';
 
diff --git a/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts b/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts
index c181a6a7d572..971719947238 100644
--- a/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const isDefaultLayoutAuthModalVisibleState = createState<boolean>({
   key: 'isDefaultLayoutAuthModalVisibleState',
diff --git a/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts b/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts
index bb8318ecd952..34fdf9181f89 100644
--- a/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const navigationMemorizedUrlState = createState<string>({
   key: 'navigationMemorizedUrlState',
diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts b/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts
index d2bf60d60839..4f1bfa9cf1fe 100644
--- a/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export type StepsState = {
   activeStep: number;
diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts
index 6b41a6705ed2..a8c8a88693bb 100644
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/currentHotkeyScopeState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { INITIAL_HOTKEYS_SCOPE } from '../../constants/InitialHotkeysScope';
 import { HotkeyScope } from '../../types/HotkeyScope';
diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts
index e2e06b62f46d..d46602f5c8de 100644
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const internalHotkeysEnabledScopesState = createState<string[]>({
   key: 'internalHotkeysEnabledScopesState',
diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts
index 13e1cc652c3d..47f81eafb4e2 100644
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/pendingHotkeysState.ts
@@ -1,5 +1,5 @@
 import { Keys } from 'react-hotkeys-hook/dist/types';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const pendingHotkeyState = createState<Keys | null>({
   key: 'pendingHotkeyState',
diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts
index 3e438fef1b94..f2a0ce77f036 100644
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/states/internal/previousHotkeyScopeState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { HotkeyScope } from '../../types/HotkeyScope';
 
diff --git a/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts b/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts
index 601831e5a312..419e0ac41799 100644
--- a/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/loading-state/states/currentPageLocationState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const currentPageLocationState = createState<string>({
   key: 'currentPageLocationState',
diff --git a/packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts b/packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts
index 1320a964207d..6c798029cdda 100644
--- a/packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/openOverrideWorkflowDraftConfirmationModalState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const openOverrideWorkflowDraftConfirmationModalState =
   createState<boolean>({
diff --git a/packages/twenty-front/src/modules/workflow/states/workflowIdState.ts b/packages/twenty-front/src/modules/workflow/states/workflowIdState.ts
index 112729ea4166..13d86821f908 100644
--- a/packages/twenty-front/src/modules/workflow/states/workflowIdState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/workflowIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const workflowIdState = createState<string | undefined>({
   key: 'workflowIdState',
diff --git a/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts b/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts
index e39718e9cc29..c46847e5cccc 100644
--- a/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/workflowLastCreatedStepIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const workflowLastCreatedStepIdState = createState<string | undefined>({
   key: 'workflowLastCreatedStepIdState',
diff --git a/packages/twenty-front/src/modules/workflow/states/workflowVersionIdState.ts b/packages/twenty-front/src/modules/workflow/states/workflowVersionIdState.ts
index 2894697965dd..c0e695afc104 100644
--- a/packages/twenty-front/src/modules/workflow/states/workflowVersionIdState.ts
+++ b/packages/twenty-front/src/modules/workflow/states/workflowVersionIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const workflowVersionIdState = createState<string | undefined>({
   key: 'workflowVersionIdState',
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramState.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramState.ts
index 8d8fd17bc141..dc9ad623edaf 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramState.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramState.ts
@@ -1,5 +1,5 @@
 import { WorkflowDiagram } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const workflowDiagramState = createState<WorkflowDiagram | undefined>({
   key: 'workflowDiagramState',
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramTriggerNodeSelectionState.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramTriggerNodeSelectionState.ts
index 91630a30046e..afdcede5165c 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramTriggerNodeSelectionState.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowDiagramTriggerNodeSelectionState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const workflowDiagramTriggerNodeSelectionState = createState<
   string | undefined
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowReactFlowRefState.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowReactFlowRefState.ts
index d9c902916cc9..cf6fc64fe46b 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowReactFlowRefState.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowReactFlowRefState.ts
@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const workflowReactFlowRefState =
   createState<RefObject<HTMLDivElement> | null>({
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowSelectedNodeState.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowSelectedNodeState.ts
index d920489d673d..15ae988932de 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowSelectedNodeState.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/states/workflowSelectedNodeState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const workflowSelectedNodeState = createState<string | undefined>({
   key: 'workflowSelectedNodeState',
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState.ts
index 4e64010b9630..50c557cc98a1 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const workflowCreateStepFromParentStepIdState = createState<
   string | undefined
diff --git a/packages/twenty-front/src/modules/workspace-invitation/states/workspaceInvitationsStates.ts b/packages/twenty-front/src/modules/workspace-invitation/states/workspaceInvitationsStates.ts
index df720a3e5908..f5c6a97cfbd4 100644
--- a/packages/twenty-front/src/modules/workspace-invitation/states/workspaceInvitationsStates.ts
+++ b/packages/twenty-front/src/modules/workspace-invitation/states/workspaceInvitationsStates.ts
@@ -1,5 +1,5 @@
 import { WorkspaceInvitation } from '@/workspace-member/types/WorkspaceMember';
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const workspaceInvitationsState = createState<
   Omit<WorkspaceInvitation, '__typename'>[]
diff --git a/packages/twenty-front/src/modules/workspace/states/workspaceAuthProvidersState.ts b/packages/twenty-front/src/modules/workspace/states/workspaceAuthProvidersState.ts
index 55a8ed3a3ae6..82328348985a 100644
--- a/packages/twenty-front/src/modules/workspace/states/workspaceAuthProvidersState.ts
+++ b/packages/twenty-front/src/modules/workspace/states/workspaceAuthProvidersState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 import { AuthProviders } from '~/generated/graphql';
 
diff --git a/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectNamePluralState.ts b/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectNamePluralState.ts
index 49b019922492..5860fc4f839d 100644
--- a/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectNamePluralState.ts
+++ b/packages/twenty-front/src/pages/settings/data-model/states/updatedObjectNamePluralState.ts
@@ -1,4 +1,4 @@
-import { createState } from 'twenty-ui';
+import { createState } from "twenty-shared";
 
 export const updatedObjectNamePluralState = createState<string>({
   key: 'updatedObjectNamePluralState',
diff --git a/packages/twenty-shared/src/index.ts b/packages/twenty-shared/src/index.ts
index 579e14d54785..db0ce298e96c 100644
--- a/packages/twenty-shared/src/index.ts
+++ b/packages/twenty-shared/src/index.ts
@@ -9,3 +9,4 @@ export * from './utils/image/getImageAbsoluteURI';
 export * from './utils/isDefined';
 export * from './utils/strings';
 export * from './workspace';
+
diff --git a/packages/twenty-ui/src/utilities/state/utils/createState.ts b/packages/twenty-shared/src/utils/state/createState.ts
similarity index 100%
rename from packages/twenty-ui/src/utilities/state/utils/createState.ts
rename to packages/twenty-shared/src/utils/state/createState.ts
diff --git a/packages/twenty-ui/jest.config.ts b/packages/twenty-ui/jest.config.ts
index 48306c0dfd40..64ebcd103910 100644
--- a/packages/twenty-ui/jest.config.ts
+++ b/packages/twenty-ui/jest.config.ts
@@ -8,7 +8,7 @@ const jestConfig: JestConfigWithTsJest = {
   preset: '../../jest.preset.js',
   setupFilesAfterEnv: ['./setupTests.ts'],
   testEnvironment: 'jsdom',
-  transformIgnorePatterns: ['../../node_modules/', "./dist/"],
+  transformIgnorePatterns: ['../../node_modules/', "dist"],
   transform: {
     '^.+\\.[tj]sx?$': [
       '@swc/jest',
diff --git a/packages/twenty-ui/src/display/icon/states/iconsState.ts b/packages/twenty-ui/src/display/icon/states/iconsState.ts
index 45be6145abba..35274a66a1a8 100644
--- a/packages/twenty-ui/src/display/icon/states/iconsState.ts
+++ b/packages/twenty-ui/src/display/icon/states/iconsState.ts
@@ -1,5 +1,5 @@
 import { IconComponent } from '@ui/display/icon/types/IconComponent';
-import { createState } from '@ui/utilities/state/utils/createState';
+import { createState } from 'twenty-shared';
 
 export const iconsState = createState<Record<string, IconComponent>>({
   key: 'iconsState',

From da0382283c01b4e9c2ebfd89ed99b5743b77916c Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Sat, 1 Feb 2025 09:34:02 +0100
Subject: [PATCH 17/21] feat(ui): testing and theme barrel

---
 packages/twenty-ui/README.md    |  3 +++
 packages/twenty-ui/package.json | 12 ++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/packages/twenty-ui/README.md b/packages/twenty-ui/README.md
index 22cbbbf2ad20..e931530d05b5 100644
--- a/packages/twenty-ui/README.md
+++ b/packages/twenty-ui/README.md
@@ -13,3 +13,6 @@ Run `npx nx start twenty-ui` to start the storybook development server on `local
 ## Running unit tests
 
 Run `npx nx test twenty-ui` to execute the unit tests via [Jest](https://jestjs.io).
+
+## Barrel and exports
+TODO add docs about common barrels and other default absolute exports
\ No newline at end of file
diff --git a/packages/twenty-ui/package.json b/packages/twenty-ui/package.json
index b5ca5daf3d27..844e177c9029 100644
--- a/packages/twenty-ui/package.json
+++ b/packages/twenty-ui/package.json
@@ -4,6 +4,18 @@
   "type": "module",
   "main": "./src/index.ts",
   "exports": {
+    "./themeType": {
+      "import": {
+        "types": "./dist/theme/index.d.ts",
+        "default": "./dist/theme/index.js"
+      }
+    },
+    "./testing": {
+      "import": {
+        "types": "./dist/testing/index.d.ts",
+        "default": "./dist/testing/index.js"
+      }
+    },
     "./*": {
       "import": {
         "types": "./dist/*.d.ts",

From a917496b4185a221561fa710f4602f9d95ba7a08 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Sat, 1 Feb 2025 21:43:31 +0100
Subject: [PATCH 18/21] feat(ui): tablerIcon barrel

---
 packages/twenty-ui/package.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/twenty-ui/package.json b/packages/twenty-ui/package.json
index 844e177c9029..940de261138e 100644
--- a/packages/twenty-ui/package.json
+++ b/packages/twenty-ui/package.json
@@ -16,6 +16,12 @@
         "default": "./dist/testing/index.js"
       }
     },
+    "./tablerIcons": {
+      "import": {
+        "types": "./dist/display/icon/components/TablerIcons.d.ts",
+        "default": "./dist/display/icon/components/TablerIcons.js"
+      }
+    },
     "./*": {
       "import": {
         "types": "./dist/*.d.ts",

From 8e2188fe5cb419be721f8b1996f17dbe28ca44b1 Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Sat, 1 Feb 2025 22:41:08 +0100
Subject: [PATCH 19/21] chore: wip prettier ornganize imports

---
 .prettierrc  |  5 +++--
 package.json |  1 +
 yarn.lock    | 17 +++++++++++++++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 9d36f26d83a6..ab9f4b577115 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "endOfLine": "auto"
-}
\ No newline at end of file
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-organize-imports"]
+}
diff --git a/package.json b/package.json
index 58084915be54..989d58d959b1 100644
--- a/package.json
+++ b/package.json
@@ -325,6 +325,7 @@
     "nx": "18.3.3",
     "playwright": "^1.46.0",
     "prettier": "^3.1.1",
+    "prettier-plugin-organize-imports": "^4.1.0",
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.5",
     "source-map-support": "^0.5.20",
diff --git a/yarn.lock b/yarn.lock
index 055c2d986bc5..033a54866830 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -39833,6 +39833,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier-plugin-organize-imports@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "prettier-plugin-organize-imports@npm:4.1.0"
+  peerDependencies:
+    prettier: ">=2.0"
+    typescript: ">=2.9"
+    vue-tsc: ^2.1.0
+  peerDependenciesMeta:
+    vue-tsc:
+      optional: true
+  checksum: 10c0/fb2d6d415bac96b65a77ea7de9f708e8613436aeb9d82bbe63edeb312fd1362c0d3c57319bd4cc4adfc8b9964fb6c205cbbf8efd9546931b0f9874c0ae624a6a
+  languageName: node
+  linkType: hard
+
 "prettier@npm:2.8.8, prettier@npm:^2.0.0, prettier@npm:^2.8.0":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
@@ -45827,6 +45841,8 @@ __metadata:
 "twenty-chrome-extension@workspace:packages/twenty-chrome-extension":
   version: 0.0.0-use.local
   resolution: "twenty-chrome-extension@workspace:packages/twenty-chrome-extension"
+  dependencies:
+    twenty-shared: "workspace:*"
   languageName: unknown
   linkType: soft
 
@@ -46269,6 +46285,7 @@ __metadata:
     playwright: "npm:^1.46.0"
     pluralize: "npm:^8.0.0"
     prettier: "npm:^3.1.1"
+    prettier-plugin-organize-imports: "npm:^4.1.0"
     prism-react-renderer: "npm:^2.1.0"
     qs: "npm:^6.11.2"
     raw-loader: "npm:^4.0.2"

From 965282634b4627bbcac607129ea8883fe369775a Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Sun, 2 Feb 2025 22:21:41 +0100
Subject: [PATCH 20/21] fix(shared): export createState util

---
 packages/twenty-shared/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/twenty-shared/src/index.ts b/packages/twenty-shared/src/index.ts
index db0ce298e96c..fceb6012699e 100644
--- a/packages/twenty-shared/src/index.ts
+++ b/packages/twenty-shared/src/index.ts
@@ -7,6 +7,6 @@ export * from './types/FieldMetadataType';
 export * from './utils/fieldMetadata/isFieldMetadataDateKind';
 export * from './utils/image/getImageAbsoluteURI';
 export * from './utils/isDefined';
+export * from './utils/state/createState';
 export * from './utils/strings';
 export * from './workspace';
-

From b3526f7cf411df68b727f98c99d3e6ac2e14404f Mon Sep 17 00:00:00 2001
From: prastoin <paul@twenty.com>
Date: Sun, 2 Feb 2025 23:01:34 +0100
Subject: [PATCH 21/21] wip fix twenty-ui imports

---
 packages/twenty-ui/package.json                   |  2 +-
 .../src/{input/button/components => }/Button.tsx  |  2 +-
 .../src/display/info/components/Info.tsx          |  2 +-
 .../twenty-ui/src/display/tag/components/Tag.tsx  |  3 ++-
 .../src/input/button/components/ButtonGroup.tsx   |  2 +-
 .../components/__stories__/Button.stories.tsx     |  2 +-
 .../__stories__/ButtonGroup.stories.tsx           |  2 +-
 .../input/code-editor/components/CodeEditor.tsx   |  2 +-
 .../menu-item/components/MenuItemAvatar.tsx       | 15 ++++++---------
 .../twenty-ui/src/theme/constants/ThemeLight.ts   |  2 +-
 packages/twenty-ui/src/theme/types/ThemeType.ts   |  2 +-
 .../utilities/utils/getDisplayValueByUrlType.ts   |  2 +-
 packages/twenty-ui/tsconfig.dev.json              |  1 -
 13 files changed, 18 insertions(+), 21 deletions(-)
 rename packages/twenty-ui/src/{input/button/components => }/Button.tsx (99%)

diff --git a/packages/twenty-ui/package.json b/packages/twenty-ui/package.json
index 940de261138e..786cd471c5cd 100644
--- a/packages/twenty-ui/package.json
+++ b/packages/twenty-ui/package.json
@@ -4,7 +4,7 @@
   "type": "module",
   "main": "./src/index.ts",
   "exports": {
-    "./themeType": {
+    "./theme": {
       "import": {
         "types": "./dist/theme/index.d.ts",
         "default": "./dist/theme/index.js"
diff --git a/packages/twenty-ui/src/input/button/components/Button.tsx b/packages/twenty-ui/src/Button.tsx
similarity index 99%
rename from packages/twenty-ui/src/input/button/components/Button.tsx
rename to packages/twenty-ui/src/Button.tsx
index 9e0cce14185b..e22269f1b065 100644
--- a/packages/twenty-ui/src/input/button/components/Button.tsx
+++ b/packages/twenty-ui/src/Button.tsx
@@ -401,7 +401,7 @@ const StyledShortcutLabel = styled.div<{
   font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 
-export const Button = ({
+export const PrastoinButton = ({
   className,
   Icon,
   title,
diff --git a/packages/twenty-ui/src/display/info/components/Info.tsx b/packages/twenty-ui/src/display/info/components/Info.tsx
index d865c7b632fa..d2e4d180d3a9 100644
--- a/packages/twenty-ui/src/display/info/components/Info.tsx
+++ b/packages/twenty-ui/src/display/info/components/Info.tsx
@@ -2,7 +2,7 @@ import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconInfoCircle } from '@ui/display/icon/components/TablerIcons';
 
-import { Button } from '@ui/input/button/components/Button';
+import { PrastoinButton as Button } from '@ui/Button';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/packages/twenty-ui/src/display/tag/components/Tag.tsx b/packages/twenty-ui/src/display/tag/components/Tag.tsx
index dc1cb65fb9ff..153a46b3a1b7 100644
--- a/packages/twenty-ui/src/display/tag/components/Tag.tsx
+++ b/packages/twenty-ui/src/display/tag/components/Tag.tsx
@@ -1,7 +1,8 @@
 import { styled } from '@linaria/react';
 import { useContext } from 'react';
 
-import { IconComponent, OverflowingTextWithTooltip } from '@ui/display';
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
+import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';
 import {
   BORDER_COMMON,
   THEME_COMMON,
diff --git a/packages/twenty-ui/src/input/button/components/ButtonGroup.tsx b/packages/twenty-ui/src/input/button/components/ButtonGroup.tsx
index 9735685b39a2..81c5f08e9908 100644
--- a/packages/twenty-ui/src/input/button/components/ButtonGroup.tsx
+++ b/packages/twenty-ui/src/input/button/components/ButtonGroup.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 
 import { isDefined } from 'twenty-shared';
 
-import { ButtonPosition, ButtonProps } from './Button';
+import { ButtonPosition, ButtonProps } from '../../../Button';
 
 const StyledButtonGroupContainer = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.md};
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx
index 5e4f7dcca39e..18cb11ba0330 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/Button.stories.tsx
@@ -11,7 +11,7 @@ import {
   ButtonPosition,
   ButtonSize,
   ButtonVariant,
-} from '../Button';
+} from '../../../../Button';
 
 const meta: Meta<typeof Button> = {
   title: 'UI/Input/Button/Button',
diff --git a/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx b/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx
index 9d6f49a5cd10..dda99025084e 100644
--- a/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx
+++ b/packages/twenty-ui/src/input/button/components/__stories__/ButtonGroup.stories.tsx
@@ -5,7 +5,7 @@ import {
   CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
-import { Button, ButtonAccent, ButtonSize, ButtonVariant } from '../Button';
+import { Button, ButtonAccent, ButtonSize, ButtonVariant } from '../../../../Button';
 import { ButtonGroup } from '../ButtonGroup';
 
 const meta: Meta<typeof ButtonGroup> = {
diff --git a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
index d97074ec9976..8316a9d10edc 100644
--- a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
+++ b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
@@ -2,7 +2,7 @@ import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import Editor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Loader } from '@ui/feedback/loader/components/Loader';
-import { codeEditorTheme } from '@ui/input';
+import { codeEditorTheme } from '@ui/input/code-editor/theme/utils/codeEditorTheme';
 import { editor } from 'monaco-editor';
 import { useState } from 'react';
 import { isDefined } from 'twenty-shared';
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx
index b3c596d023d7..a6c93a63b432 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemAvatar.tsx
@@ -1,11 +1,8 @@
 import { useTheme } from '@emotion/react';
-import {
-  Avatar,
-  AvatarProps,
-  IconChevronRight,
-  OverflowingTextWithTooltip,
-} from '@ui/display';
-import { LightIconButtonGroup } from '@ui/input';
+import { Avatar, AvatarProps } from '@ui/display/avatar/components/Avatar';
+import { IconChevronRight } from '@ui/display/icon/components/TablerIcons';
+import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';
+import { LightIconButtonGroup } from '@ui/input/button/components/LightIconButtonGroup';
 import { MenuItemIconButton } from '@ui/navigation/menu-item/components/MenuItem';
 import { MouseEvent } from 'react';
 import { isDefined } from 'twenty-shared';
@@ -31,7 +28,7 @@ export type MenuItemAvatarProps = {
   testId?: string;
   text: string;
   hasSubMenu?: boolean;
-  baseUrl: string
+  baseUrl: string;
 };
 
 // TODO: merge with MenuItem
@@ -47,7 +44,7 @@ export const MenuItemAvatar = ({
   avatar,
   hasSubMenu = false,
   text,
-  baseUrl
+  baseUrl,
 }: MenuItemAvatarProps) => {
   const theme = useTheme();
   const showIconButtons = Array.isArray(iconButtons) && iconButtons.length > 0;
diff --git a/packages/twenty-ui/src/theme/constants/ThemeLight.ts b/packages/twenty-ui/src/theme/constants/ThemeLight.ts
index 781bfc63531b..6755c2005b4e 100644
--- a/packages/twenty-ui/src/theme/constants/ThemeLight.ts
+++ b/packages/twenty-ui/src/theme/constants/ThemeLight.ts
@@ -25,4 +25,4 @@ export const THEME_LIGHT = {
     code: CODE_LIGHT,
     IllustrationIcon: ILLUSTRATION_ICON_LIGHT,
   },
-};
+} as const;
diff --git a/packages/twenty-ui/src/theme/types/ThemeType.ts b/packages/twenty-ui/src/theme/types/ThemeType.ts
index dc71a7b0226f..82fa2340f43f 100644
--- a/packages/twenty-ui/src/theme/types/ThemeType.ts
+++ b/packages/twenty-ui/src/theme/types/ThemeType.ts
@@ -1,3 +1,3 @@
-import { THEME_LIGHT } from '../constants/ThemeLight';
+import { THEME_LIGHT } from '@ui/theme/constants/ThemeLight';
 
 export type ThemeType = typeof THEME_LIGHT;
diff --git a/packages/twenty-ui/src/utilities/utils/getDisplayValueByUrlType.ts b/packages/twenty-ui/src/utilities/utils/getDisplayValueByUrlType.ts
index c630305a4553..c07fc8ecd083 100644
--- a/packages/twenty-ui/src/utilities/utils/getDisplayValueByUrlType.ts
+++ b/packages/twenty-ui/src/utilities/utils/getDisplayValueByUrlType.ts
@@ -1,4 +1,4 @@
-import { LinkType } from '@ui/navigation/link';
+import { LinkType } from '@ui/navigation/link/components/SocialLink';
 import { isDefined } from 'twenty-shared';
 
 type getUrlDisplayValueByUrlTypeProps = {
diff --git a/packages/twenty-ui/tsconfig.dev.json b/packages/twenty-ui/tsconfig.dev.json
index 705aa430fa9b..3535c26b8918 100644
--- a/packages/twenty-ui/tsconfig.dev.json
+++ b/packages/twenty-ui/tsconfig.dev.json
@@ -2,7 +2,6 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "types": ["jest", "node"],
-    // Why should this have a different baseUrl ?
     "baseUrl": "../..",
     "paths": {
       "@ui/*": ["./packages/twenty-ui/src/*"]