diff --git a/.github/workflows/ci-docs.yaml b/.github/workflows/ci-docs.yaml
index a08cd741a5..27a18f5dbe 100644
--- a/.github/workflows/ci-docs.yaml
+++ b/.github/workflows/ci-docs.yaml
@@ -6,10 +6,12 @@ on:
paths:
- 'package.json'
- 'packages/twenty-docs/**'
+ - 'packages/twenty-ui/**'
pull_request:
paths:
- 'package.json'
- 'packages/twenty-docs/**'
+ - 'packages/twenty-ui/**'
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml
index 80e21acff6..c9205b4f11 100644
--- a/.github/workflows/ci-front.yaml
+++ b/.github/workflows/ci-front.yaml
@@ -6,10 +6,12 @@ on:
paths:
- 'package.json'
- 'packages/twenty-front/**'
+ - 'packages/twenty-ui/**'
pull_request:
paths:
- 'package.json'
- 'packages/twenty-front/**'
+ - 'packages/twenty-ui/**'
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
diff --git a/nx.json b/nx.json
index 44fcf672ef..95354af935 100644
--- a/nx.json
+++ b/nx.json
@@ -21,6 +21,7 @@
},
"storybook:build": {
"cache": true,
+ "dependsOn": ["^build"],
"inputs": [
"default",
"^default",
diff --git a/packages/twenty-docker/twenty-docs/Dockerfile b/packages/twenty-docker/twenty-docs/Dockerfile
index 38a1151326..9e97d09675 100644
--- a/packages/twenty-docker/twenty-docs/Dockerfile
+++ b/packages/twenty-docker/twenty-docs/Dockerfile
@@ -10,6 +10,7 @@ COPY ./.yarnrc.yml .
COPY ./.yarn/releases /app/.yarn/releases
COPY ./packages/twenty-docs/package.json /app/packages/twenty-docs/package.json
COPY ./packages/twenty-emails /app/packages/twenty-emails
+COPY ./packages/twenty-ui /app/packages/twenty-ui
RUN yarn
COPY ./packages/twenty-docs /app/packages/twenty-docs
diff --git a/packages/twenty-docs/docs/ui-components/display/chip.mdx b/packages/twenty-docs/docs/ui-components/display/chip.mdx
index d1edfc418c..a6f044122e 100644
--- a/packages/twenty-docs/docs/ui-components/display/chip.mdx
+++ b/packages/twenty-docs/docs/ui-components/display/chip.mdx
@@ -176,7 +176,7 @@ A Chip-like element to display information about an entity.
diff --git a/packages/twenty-docs/docs/ui-components/display/icons.mdx b/packages/twenty-docs/docs/ui-components/display/icons.mdx
index 1497c70edd..222cf7ab12 100644
--- a/packages/twenty-docs/docs/ui-components/display/icons.mdx
+++ b/packages/twenty-docs/docs/ui-components/display/icons.mdx
@@ -32,7 +32,7 @@ yarn add @tabler/icons-react
You can import each icon as a component. Here's an example:
@@ -93,7 +93,7 @@ Displays an address book icon.
diff --git a/packages/twenty-docs/docs/ui-components/input/select.mdx b/packages/twenty-docs/docs/ui-components/input/select.mdx
index 78b8befd06..ef83cbb81f 100644
--- a/packages/twenty-docs/docs/ui-components/input/select.mdx
+++ b/packages/twenty-docs/docs/ui-components/input/select.mdx
@@ -16,7 +16,7 @@ Allows users to pick a value from a list of predefined options.
diff --git a/packages/twenty-docs/src/ui/display/entityChipCode.js b/packages/twenty-docs/src/ui/display/entityChipCode.js
index 423e199859..d7f81c178a 100644
--- a/packages/twenty-docs/src/ui/display/entityChipCode.js
+++ b/packages/twenty-docs/src/ui/display/entityChipCode.js
@@ -1,6 +1,7 @@
-import { BrowserRouter as Router } from "react-router-dom";
-import { EntityChip } from "@/ui/display/chip/components/EntityChip";
-import { IconComponent } from "@/ui/display/icon/types/IconComponent";
+import { BrowserRouter as Router } from 'react-router-dom';
+import { IconTwentyStar } from 'twenty-ui';
+
+import { EntityChip } from '@/ui/display/chip/components/EntityChip';
export const MyComponent = () => {
return (
@@ -12,7 +13,7 @@ export const MyComponent = () => {
pictureUrl=""
avatarType="rounded"
variant="regular"
- LeftIcon={IconComponent}
+ LeftIcon={IconTwentyStar}
/>
);
diff --git a/packages/twenty-docs/src/ui/display/iconAddressBookCode.js b/packages/twenty-docs/src/ui/display/iconAddressBookCode.js
index f1549a88a3..89044322e0 100644
--- a/packages/twenty-docs/src/ui/display/iconAddressBookCode.js
+++ b/packages/twenty-docs/src/ui/display/iconAddressBookCode.js
@@ -1,4 +1,4 @@
-import { IconAddressBook } from "@/ui/display/icon/components/IconAddressBook";
+import { IconAddressBook } from 'twenty-ui';
export const MyComponent = () => {
return ;
diff --git a/packages/twenty-docs/src/ui/input/components/selectCode.js b/packages/twenty-docs/src/ui/input/components/selectCode.js
index 7713beef79..3832f21b9b 100644
--- a/packages/twenty-docs/src/ui/input/components/selectCode.js
+++ b/packages/twenty-docs/src/ui/input/components/selectCode.js
@@ -1,6 +1,7 @@
-import { RecoilRoot } from "recoil";
-import { Select } from "@/ui/input/components/Select";
-import { IconComponent } from "@/ui/display/icon/types/IconComponent";
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui';
+
+import { Select } from '@/ui/input/components/Select';
export const MyComponent = () => {
const handleSelectChange = (selectedValue) => {
@@ -16,8 +17,8 @@ export const MyComponent = () => {
label="Select an option"
onChange={handleSelectChange}
options={[
- { value: "option1", label: "Option A", Icon: IconComponent },
- { value: "option2", label: "Option B", Icon: IconComponent },
+ { value: 'option1', label: 'Option A', Icon: IconTwentyStar },
+ { value: 'option2', label: 'Option B', Icon: IconTwentyStar },
]}
value="option1"
/>
diff --git a/packages/twenty-front/.storybook/preview.tsx b/packages/twenty-front/.storybook/preview.tsx
index 86745cdf78..d7b1255fc9 100644
--- a/packages/twenty-front/.storybook/preview.tsx
+++ b/packages/twenty-front/.storybook/preview.tsx
@@ -2,9 +2,7 @@ import { ThemeProvider } from '@emotion/react';
import { Preview } from '@storybook/react';
import { initialize, mswDecorator } from 'msw-storybook-addon';
import { useDarkMode } from 'storybook-dark-mode';
-
-import { THEME_DARK } from '@/ui/theme/constants/ThemeDark';
-import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight';
+import { THEME_DARK, THEME_LIGHT } from 'twenty-ui';
import { RootDecorator } from '../src/testing/decorators/RootDecorator';
import { mockedUserJWT } from '../src/testing/mock-data/jwt';
diff --git a/packages/twenty-front/jest.config.ts b/packages/twenty-front/jest.config.ts
index 24279df510..22f9353df4 100644
--- a/packages/twenty-front/jest.config.ts
+++ b/packages/twenty-front/jest.config.ts
@@ -1,8 +1,5 @@
-/* eslint-disable @nx/enforce-module-boundaries,import/no-relative-packages */
import { JestConfigWithTsJest, pathsToModuleNameMapper } from 'ts-jest';
-import { compilerOptions as twentyUiCompilerOptions } from '../twenty-ui/tsconfig.json';
-
import { compilerOptions } from './tsconfig.json';
const jestConfig: JestConfigWithTsJest = {
@@ -17,12 +14,10 @@ const jestConfig: JestConfigWithTsJest = {
'^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
},
moduleNameMapper: {
- ...pathsToModuleNameMapper(compilerOptions.paths),
- // Include internal library aliases, so there is no need to build the library before tests.
- ...pathsToModuleNameMapper(twentyUiCompilerOptions.paths),
'\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$':
'/__mocks__/imageMock.js',
'\\.css$': '/__mocks__/styleMock.js',
+ ...pathsToModuleNameMapper(compilerOptions.paths),
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
extensionsToTreatAsEsm: ['.ts', '.tsx'],
diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json
index cede2c86b3..a359035603 100644
--- a/packages/twenty-front/package.json
+++ b/packages/twenty-front/package.json
@@ -5,30 +5,31 @@
"type": "module",
"scripts": {
"nx": "NX_DEFAULT_PROJECT=twenty-front node ../../node_modules/nx/bin/nx.js",
- "start": "vite --host",
+ "start": "npx vite --host",
"start:clean": "yarn start --force",
- "build": "tsc && vite build && yarn build:inject-runtime-env",
+ "build": "yarn tsc && npx vite build && yarn build:inject-runtime-env",
"build:inject-runtime-env": "sh ./scripts/inject-runtime-env.sh",
- "tsc": "tsc --project tsconfig.app.json --watch",
- "tsc:ci": "tsc",
- "tsc:spec": "tsc --project tsconfig.spec.json",
+ "tsc": "npx tsc --project tsconfig.app.json",
+ "tsc:ci": "yarn tsc --project tsconfig.json",
+ "tsc:watch": "yarn tsc --watch",
+ "tsc:spec": "yarn tsc --project tsconfig.spec.json",
"preview": "vite preview",
- "lint": "eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs",
+ "lint": "npx eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs",
"lint:ci": "yarn lint --config .eslintrc-ci.cjs",
"fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\"",
"fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
- "test": "jest",
+ "test": "npx jest",
"test-watch": "jest --watch",
"tsup": "tsup",
"coverage": "jest --coverage",
"storybook:modules:dev": "STORYBOOK_SCOPE=modules yarn storybook:dev",
- "storybook:dev": "storybook dev -p 6006 --no-open",
+ "storybook:dev": "npx storybook dev -p 6006 --no-open",
"storybook:pages:dev": "STORYBOOK_SCOPE=pages yarn storybook:dev",
"storybook:docs:dev": "STORYBOOK_SCOPE=ui-docs yarn storybook:dev",
- "storybook:build": "storybook build",
- "storybook:modules:build": "STORYBOOK_SCOPE=modules yarn storybook:build",
- "storybook:pages:build": "STORYBOOK_SCOPE=pages yarn storybook:build",
- "storybook:docs:build": "STORYBOOK_SCOPE=ui-docs yarn storybook:build",
+ "storybook:build": "npx storybook build",
+ "storybook:modules:build": "STORYBOOK_SCOPE=modules npx nx storybook:build",
+ "storybook:pages:build": "STORYBOOK_SCOPE=pages npx nx storybook:build",
+ "storybook:docs:build": "STORYBOOK_SCOPE=ui-docs npx nx storybook:build",
"storybook:test": "test-storybook",
"storybook:test-slow": "test-storybook --maxWorkers=3",
"storybook:test-single-worker": "test-storybook --maxWorkers=1",
diff --git a/packages/twenty-front/src/index.tsx b/packages/twenty-front/src/index.tsx
index 756d1cc59d..1f17ce21fe 100644
--- a/packages/twenty-front/src/index.tsx
+++ b/packages/twenty-front/src/index.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
import { HelmetProvider } from 'react-helmet-async';
import { BrowserRouter } from 'react-router-dom';
import { RecoilRoot } from 'recoil';
+import { IconsProvider } from 'twenty-ui';
import { ApolloProvider } from '@/apollo/components/ApolloProvider';
import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
@@ -15,7 +16,6 @@ import { PromiseRejectionEffect } from '@/error-handler/components/PromiseReject
import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider';
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider';
-import { IconsProvider } from '@/ui/display/icon/components/IconsProvider';
import { DialogManager } from '@/ui/feedback/dialog-manager/components/DialogManager';
import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
import { SnackBarProvider } from '@/ui/feedback/snack-bar-manager/components/SnackBarProvider';
diff --git a/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx b/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx
index 8db3376e81..a338228490 100644
--- a/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx
+++ b/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx
@@ -1,5 +1,6 @@
import { getDefaultReactSlashMenuItems } from '@blocknote/react';
import {
+ IconComponent,
IconFile,
IconH1,
IconH2,
@@ -11,7 +12,6 @@ import {
IconTable,
} from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { SuggestionItem } from '@/ui/input/editor/components/CustomSlashMenu';
import { blockSchema } from './schema';
diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx
index 5061ab65fe..fd74b42b24 100644
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx
@@ -1,6 +1,7 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import {
+ IconComponent,
IconFile,
IconFileText,
IconFileZip,
@@ -12,7 +13,6 @@ import {
} from 'twenty-ui';
import { AttachmentType } from '@/activities/files/types/Attachment';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
const StyledIconContainer = styled.div<{ background: string }>`
align-items: center;
diff --git a/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx b/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx
index 25bfda7511..79e915dc64 100644
--- a/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx
+++ b/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx
@@ -4,6 +4,7 @@ import { MockedProvider } from '@apollo/client/testing';
import { expect } from '@storybook/test';
import { act, renderHook } from '@testing-library/react';
import { RecoilRoot, useRecoilValue } from 'recoil';
+import { iconsState } from 'twenty-ui';
import { useAuth } from '@/auth/hooks/useAuth';
import { authProvidersState } from '@/client-config/states/authProvidersState';
@@ -12,7 +13,6 @@ import { isDebugModeState } from '@/client-config/states/isDebugModeState';
import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
import { supportChatState } from '@/client-config/states/supportChatState';
import { telemetryState } from '@/client-config/states/telemetryState';
-import { iconsState } from '@/ui/display/icon/states/iconsState';
import { email, mocks, password, results, token } from '../__mocks__/useAuth';
diff --git a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
index dce9f59424..5b1664fc36 100644
--- a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
+++ b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts
@@ -7,6 +7,7 @@ import {
useRecoilState,
useSetRecoilState,
} from 'recoil';
+import { iconsState } from 'twenty-ui';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@@ -20,7 +21,6 @@ import { isDebugModeState } from '@/client-config/states/isDebugModeState';
import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
import { supportChatState } from '@/client-config/states/supportChatState';
import { telemetryState } from '@/client-config/states/telemetryState';
-import { iconsState } from '@/ui/display/icon/states/iconsState';
import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import {
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
index 1825542e4d..6aa443e249 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx
@@ -4,13 +4,13 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { useRecoilState } from 'recoil';
+import { IconGoogle } from 'twenty-ui';
import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword.ts';
import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm.ts';
import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle.ts';
import { useWorkspaceFromInviteHash } from '@/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts';
import { authProvidersState } from '@/client-config/states/authProvidersState.ts';
-import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { Loader } from '@/ui/feedback/loader/components/Loader';
import { MainButton } from '@/ui/input/button/components/MainButton';
import { TextInput } from '@/ui/input/components/TextInput';
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
index e19cea3094..e275f6c5c5 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
@@ -1,8 +1,7 @@
import { isNonEmptyString } from '@sniptt/guards';
import { useRecoilValue } from 'recoil';
-import { IconArrowUpRight } from 'twenty-ui';
+import { IconArrowUpRight, IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
import { MenuItemCommand } from '@/ui/navigation/menu-item/components/MenuItemCommand';
diff --git a/packages/twenty-front/src/modules/command-menu/types/Command.ts b/packages/twenty-front/src/modules/command-menu/types/Command.ts
index eb7e43c72e..38b430bb34 100644
--- a/packages/twenty-front/src/modules/command-menu/types/Command.ts
+++ b/packages/twenty-front/src/modules/command-menu/types/Command.ts
@@ -1,4 +1,4 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
export enum CommandType {
Navigate = 'Navigate',
diff --git a/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx b/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx
index ecd37e8e26..eb80049a95 100644
--- a/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx
+++ b/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx
@@ -1,5 +1,7 @@
import { ErrorInfo, ReactNode } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
+import { ThemeProvider } from '@emotion/react';
+import { THEME_LIGHT } from 'twenty-ui';
import { GenericErrorFallback } from '@/error-handler/components/GenericErrorFallback';
@@ -9,11 +11,13 @@ export const AppErrorBoundary = ({ children }: { children: ReactNode }) => {
};
return (
-
- {children}
-
+
+
+ {children}
+
+
);
};
diff --git a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
index 593f57ff3c..6c73d56332 100644
--- a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
+++ b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx
@@ -1,11 +1,16 @@
import { useNavigate } from 'react-router-dom';
import { useRecoilState } from 'recoil';
-import { IconCheckbox, IconList, IconSearch, IconSettings } from 'twenty-ui';
+import {
+ IconCheckbox,
+ IconComponent,
+ IconList,
+ IconSearch,
+ IconSettings,
+} from 'twenty-ui';
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
import { AppPath } from '@/types/AppPath';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { NavigationBar } from '@/ui/navigation/navigation-bar/components/NavigationBar';
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
diff --git a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
index 6bcd4c8194..cbecac5758 100644
--- a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
@@ -1,9 +1,9 @@
import { useLocation, useNavigate } from 'react-router-dom';
+import { useIcons } from 'twenty-ui';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
import { GraphQLView } from '@/views/types/GraphQLView';
import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews';
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
index 38e3b89c41..b64988cec7 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx
@@ -1,5 +1,6 @@
+import { IconComponent } from 'twenty-ui';
+
import { EntityChip } from '@/ui/display/chip/components/EntityChip';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Filter } from '../types/Filter';
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
index 676fcb9a32..bd8c69977d 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
@@ -1,8 +1,8 @@
import { useRecoilValue } from 'recoil';
+import { useIcons } from 'twenty-ui';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterDefinition.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterDefinition.ts
index 63b517d3eb..954562f4fe 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterDefinition.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterDefinition.ts
@@ -1,4 +1,4 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
import { FilterType } from './FilterType';
diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
index 89da251bcd..02ca431845 100644
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@@ -1,9 +1,8 @@
-import { IconChevronDown } from 'twenty-ui';
+import { IconChevronDown, useIcons } from 'twenty-ui';
import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { LightButton } from '@/ui/input/button/components/LightButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
diff --git a/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnAction.ts b/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnAction.ts
index f2a5713cb9..46e880ff84 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnAction.ts
+++ b/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnAction.ts
@@ -1,4 +1,4 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
export type RecordBoardColumnAction = {
id: string;
diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts
index 4dde37b2e1..ebec13c249 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts
@@ -1,8 +1,7 @@
import { useContext } from 'react';
-import { IconPencil } from 'twenty-ui';
+import { IconComponent, IconPencil } from 'twenty-ui';
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
import { FieldContext } from '../contexts/FieldContext';
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
index cddd82ddb0..a35a3b7cbe 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
@@ -1,4 +1,5 @@
import { useContext } from 'react';
+import { useIcons } from 'twenty-ui';
import { FieldDisplay } from '@/object-record/record-field/components/FieldDisplay';
import { FieldInput } from '@/object-record/record-field/components/FieldInput';
@@ -9,7 +10,6 @@ import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFie
import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { useInlineCell } from '../hooks/useInlineCell';
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
index 64b349301c..d16ebd20fd 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@@ -3,9 +3,9 @@ import { Tooltip } from 'react-tooltip';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
+import { IconComponent } from 'twenty-ui';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx
index af19540811..3bd50946bc 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx
@@ -1,4 +1,5 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
+
import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
export const RecordInlineCellButton = ({ Icon }: { Icon: IconComponent }) => {
diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx
index 3cd8696435..a47aa9de03 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx
@@ -1,8 +1,8 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
type RecordDetailRelationRecordsListEmptyStateProps = {
relationObjectMetadataItem: ObjectMetadataItem;
diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
index fd46315aea..319073b014 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import {
IconChevronDown,
+ IconComponent,
IconDotsVertical,
IconTrash,
IconUnlink,
@@ -30,7 +31,6 @@ import { RecordDetailRecordsListItem } from '@/object-record/record-show/record-
import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx
index 5f3207bfa2..f9150703d0 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx
@@ -1,9 +1,9 @@
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
+import { useIcons } from 'twenty-ui';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState';
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
index 136a888ccb..2c7000458e 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
@@ -2,13 +2,12 @@ import { useCallback } from 'react';
import { Link } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
-import { IconSettings } from 'twenty-ui';
+import { IconSettings, useIcons } from 'twenty-ui';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx
index fb528c947a..51202803b2 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx
@@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
+import { IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
const StyledEditButtonContainer = styled(motion.div)`
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx
index 69887f7749..5aec39f9a1 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx
@@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
+import { IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton';
const StyledEditButtonContainer = styled(motion.div)`
diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
index a71fa24a96..3ede46b1df 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx
@@ -1,10 +1,9 @@
import { useRef } from 'react';
import { isNonEmptyString } from '@sniptt/guards';
import { Key } from 'ts-key-enum';
-import { IconPlus } from 'twenty-ui';
+import { IconComponent, IconPlus } from 'twenty-ui';
import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton';
import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
diff --git a/packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts b/packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts
index 56453adf17..d426ba6bc3 100644
--- a/packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts
+++ b/packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts
@@ -1,12 +1,11 @@
import { isNonEmptyString } from '@sniptt/guards';
+import { IconComponent, useIcons } from 'twenty-ui';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useCreateManyRecords } from '@/object-record/hooks/useCreateManyRecords';
import { getSpreadSheetValidation } from '@/object-record/spreadsheet-import/util/getSpreadSheetValidation';
import { useSpreadsheetImport } from '@/spreadsheet-import/hooks/useSpreadsheetImport';
import { SpreadsheetOptions, Validation } from '@/spreadsheet-import/types';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { isDefined } from '~/utils/isDefined';
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
index 3222dc89ba..06ed539816 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
@@ -1,7 +1,7 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
-import { IconChevronRight } from 'twenty-ui';
+import { IconChevronRight, IconGoogleCalendar } from 'twenty-ui';
import { CalendarChannel } from '@/accounts/types/CalendarChannel';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
@@ -14,7 +14,6 @@ import {
SettingsAccountsSynchronizationStatusProps,
} from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
import { SettingsListCard } from '@/settings/components/SettingsListCard';
-import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
const StyledRowRightContainer = styled.div`
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
index 1f215f81f7..5bb870d774 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
@@ -1,12 +1,12 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
+import { IconGoogle } from 'twenty-ui';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
-import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { Status } from '@/ui/display/status/components/Status';
import { SettingsListCard } from '../../components/SettingsListCard';
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
index ffdc1deaf4..3ea6369398 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
@@ -1,7 +1,7 @@
import styled from '@emotion/styled';
+import { IconGoogle } from 'twenty-ui';
import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
-import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
import { Button } from '@/ui/input/button/components/Button';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
index 3500d3035f..0106917443 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
@@ -1,7 +1,7 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
-import { IconChevronRight } from 'twenty-ui';
+import { IconChevronRight, IconGmail } from 'twenty-ui';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { MessageChannel } from '@/accounts/types/MessageChannel';
@@ -14,7 +14,6 @@ import {
SettingsAccountsSynchronizationStatusProps,
} from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
import { SettingsListCard } from '@/settings/components/SettingsListCard';
-import { IconGmail } from '@/ui/display/icon/components/IconGmail';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
const StyledRowRightContainer = styled.div`
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
index b1b35854a3..86466c6ffe 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
@@ -1,10 +1,9 @@
import { ComponentType } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { IconPlus } from 'twenty-ui';
+import { IconComponent, IconPlus } from 'twenty-ui';
import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Card } from '@/ui/layout/card/components/Card';
import { CardFooter } from '@/ui/layout/card/components/CardFooter';
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
index 2daae18f56..b0292e1124 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
@@ -1,8 +1,8 @@
import { ReactNode } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { CardContent } from '@/ui/layout/card/components/CardContent';
const StyledRow = styled(CardContent)`
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
index 9ea5854fc6..8d44dfcfc3 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx
@@ -1,9 +1,8 @@
import { ReactNode } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { IconChevronRight, Pill } from 'twenty-ui';
+import { IconChevronRight, IconComponent, Pill } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
index 76ecf2a83c..4df29780d0 100644
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
@@ -1,9 +1,9 @@
import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { Select } from '@/ui/input/components/Select';
import { TextInput } from '@/ui/input/components/TextInput';
diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts b/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts
index 2dda881ab2..5fc89008d0 100644
--- a/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts
@@ -1,6 +1,9 @@
-import { IconLayersLinked, IconRelationOneToOne } from 'twenty-ui';
+import {
+ IconComponent,
+ IconLayersLinked,
+ IconRelationOneToOne,
+} from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { RelationMetadataType } from '~/generated-metadata/graphql';
import OneToManySvg from '../assets/OneToMany.svg';
diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts
index 89cf79ee46..2461602215 100644
--- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts
@@ -1,4 +1,5 @@
import {
+ IconComponent,
IconCurrencyDollar,
IconCurrencyEuro,
IconCurrencyFrank,
@@ -8,7 +9,6 @@ import {
} from 'twenty-ui';
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
export const SETTINGS_FIELD_CURRENCY_CODES: Record<
CurrencyCode,
diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts
index 1ee3a27550..168b8ef3ab 100644
--- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts
@@ -2,6 +2,7 @@ import {
IconCalendarEvent,
IconCheck,
IconCoins,
+ IconComponent,
IconJson,
IconKey,
IconLink,
@@ -13,14 +14,13 @@ import {
IconTag,
IconTags,
IconTextSize,
+ IconTwentyStar,
IconUser,
} from 'twenty-ui';
import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
import { DEFAULT_DATE_VALUE } from '@/settings/data-model/constants/DefaultDateValue';
import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
-import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FieldMetadataType } from '~/generated-metadata/graphql';
DEFAULT_DATE_VALUE.setFullYear(DEFAULT_DATE_VALUE.getFullYear() + 2);
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
index 2914dee782..e41e18e343 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx
@@ -1,5 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@@ -11,7 +12,6 @@ import { SettingsObjectFieldSelectFormValues } from '@/settings/data-model/compo
import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetFieldValueEffect';
import { SettingsDataModelSetRecordEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect';
import { useFieldPreview } from '@/settings/data-model/fields/preview/hooks/useFieldPreview';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { FieldMetadataType } from '~/generated-metadata/graphql';
export type SettingsDataModelFieldPreviewProps = {
diff --git a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
index c20aebd32d..85aecd3051 100644
--- a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
@@ -1,8 +1,8 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { Checkbox } from '@/ui/input/components/Checkbox';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
index 7b16f2a05e..699fb380be 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
@@ -1,10 +1,9 @@
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { IconComponent, IconTwentyStar } from 'twenty-ui';
import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType';
import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
-import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { FieldMetadataType } from '~/generated-metadata/graphql';
type SettingsObjectFieldDataTypeProps = {
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
index 49d5b96422..7cb0549e20 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@@ -2,13 +2,13 @@ import { ReactNode, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';
import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
import { FieldIdentifierType } from '@/settings/data-model/types/FieldIdentifierType';
import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import { Nullable } from '~/types/Nullable';
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
index 7a4ac6ab76..f19004c5a9 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
@@ -1,12 +1,12 @@
import { ReactNode } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
index 4b3627f549..c592bcc804 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
@@ -1,12 +1,11 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { IconArchive, IconDotsVertical, IconPencil } from 'twenty-ui';
+import { IconArchive, IconDotsVertical, IconPencil, useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx
index 0e73363849..f6b8aaa0ab 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx
@@ -1,10 +1,10 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { useIcons } from 'twenty-ui';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
export type SettingsDataModelObjectSummaryProps = {
className?: string;
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx
index 6677111db5..5a7b7cb1f3 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx
@@ -1,14 +1,13 @@
import { useMemo } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import styled from '@emotion/styled';
-import { IconCircleOff } from 'twenty-ui';
+import { IconCircleOff, useIcons } from 'twenty-ui';
import { z } from 'zod';
import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { getActiveFieldMetadataItems } from '@/object-metadata/utils/getActiveFieldMetadataItems';
import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { Select, SelectOption } from '@/ui/input/components/Select';
export const settingsDataModelObjectIdentifiersFormSchema =
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts b/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts
index cadcf4c926..e85ccf299e 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts
+++ b/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts
@@ -1,9 +1,9 @@
+import { IconComponent } from 'twenty-ui';
import { ReadonlyDeep } from 'type-fest';
import { Columns } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
import { StepState } from '@/spreadsheet-import/steps/components/UploadFlow';
import { Meta } from '@/spreadsheet-import/steps/components/ValidationStep/types';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
export type SpreadsheetOptions = {
// Is modal visible.
diff --git a/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx b/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx
index 017921da17..76d4cd201d 100644
--- a/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx
+++ b/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import { isNonEmptyString } from '@sniptt/guards';
+import { IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Avatar, AvatarType } from '@/users/components/Avatar';
import { Nullable } from '~/types/Nullable';
diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconAddressBook.tsx b/packages/twenty-front/src/modules/ui/display/icon/components/IconAddressBook.tsx
deleted file mode 100644
index 2c8c72bfcf..0000000000
--- a/packages/twenty-front/src/modules/ui/display/icon/components/IconAddressBook.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { TablerIconsProps } from 'twenty-ui';
-
-import IconAddressBookRaw from '../assets/address-book.svg?react';
-
-type IconAddressBookProps = TablerIconsProps;
-
-export const IconAddressBook = (props: IconAddressBookProps): JSX.Element => {
- const size = props.size ?? 24;
- const stroke = props.stroke ?? 2;
-
- return ;
-};
diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStar.tsx b/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStar.tsx
deleted file mode 100644
index 25ce2eba04..0000000000
--- a/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStar.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { TablerIconsProps } from 'twenty-ui';
-
-import IconTwentyStarRaw from '../assets/twenty-star.svg?react';
-
-type IconTwentyStarProps = TablerIconsProps;
-
-export const IconTwentyStar = (props: IconTwentyStarProps): JSX.Element => {
- const size = props.size ?? 24;
- const stroke = props.stroke ?? 2;
-
- return ;
-};
diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx b/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx
deleted file mode 100644
index e1933ea6d3..0000000000
--- a/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TablerIconsProps } from 'twenty-ui';
-
-import IconTwentyStarFilledRaw from '../assets/twenty-star-filled.svg?react';
-
-type IconTwentyStarFilledProps = TablerIconsProps;
-
-export const IconTwentyStarFilled = (
- props: IconTwentyStarFilledProps,
-): JSX.Element => {
- const size = props.size ?? 24;
- const stroke = props.stroke ?? 2;
-
- return (
-
- );
-};
diff --git a/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts b/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts
deleted file mode 100644
index 654d6bcb7e..0000000000
--- a/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { createState } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
-
-export const iconsState = createState>({
- key: 'iconsState',
- defaultValue: {},
-});
diff --git a/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx b/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx
index c475965e7c..3a06c02344 100644
--- a/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx
+++ b/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx
@@ -1,7 +1,7 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
index 925bcc1b9b..26b08752a5 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
@@ -1,10 +1,10 @@
import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';
import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton';
import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle';
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx
index ce16119264..58d1fd060b 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx
@@ -1,10 +1,10 @@
import { useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { IconTwentyStarFilled } from 'twenty-ui';
import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues';
import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata';
-import { IconTwentyStarFilled } from '@/ui/display/icon/components/IconTwentyStarFilled';
const StyledContainer = styled.div`
align-items: center;
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
index 14a896c80a..fcd9097854 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx
@@ -1,9 +1,7 @@
import React from 'react';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { Pill } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent, Pill } from 'twenty-ui';
export type ButtonSize = 'medium' | 'small';
export type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx
index 5406f26320..7ccecc0ffe 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx
@@ -1,8 +1,7 @@
import React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
export type FloatingButtonSize = 'small' | 'medium';
export type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx
index 6e5f7e8d0e..4a22cd1c45 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx
@@ -1,8 +1,7 @@
import React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
export type FloatingIconButtonSize = 'small' | 'medium';
export type FloatingIconButtonPosition =
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx b/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx
index e704bdefd9..6d9a3ad601 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx
@@ -1,7 +1,6 @@
import { MouseEvent } from 'react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
import {
FloatingIconButton,
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx
index 38a34b0cfb..421962c878 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx
@@ -1,8 +1,7 @@
import React from 'react';
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
export type IconButtonSize = 'medium' | 'small';
export type IconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/IconButtonGroup.tsx b/packages/twenty-front/src/modules/ui/input/button/components/IconButtonGroup.tsx
index 6335ee64d6..32c989c689 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/IconButtonGroup.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/IconButtonGroup.tsx
@@ -1,7 +1,6 @@
import { MouseEvent } from 'react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
import { IconButton, IconButtonPosition, IconButtonProps } from './IconButton';
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx
index 140c4fc95f..d358582518 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx
@@ -1,8 +1,7 @@
import { MouseEvent } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
export type LightButtonAccent = 'secondary' | 'tertiary';
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx
index 87fe9144af..e8247c0365 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx
@@ -1,8 +1,7 @@
import { ComponentProps, MouseEvent } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
export type LightIconButtonAccent = 'secondary' | 'tertiary';
export type LightIconButtonSize = 'small' | 'medium';
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx
index adb20d64bc..f1369cbf99 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx
@@ -1,7 +1,6 @@
import { MouseEvent } from 'react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
import { LightIconButton, LightIconButtonProps } from './LightIconButton';
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
index 5bdc9ae0b9..ae7550a01b 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx
@@ -1,8 +1,7 @@
import React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
type Variant = 'primary' | 'secondary';
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/RoundedIconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/RoundedIconButton.tsx
index b6d9ac46cd..3d9e89a264 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/RoundedIconButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/RoundedIconButton.tsx
@@ -1,7 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
const StyledIconButton = styled.button`
align-items: center;
diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
index f22bf568e1..b0a0dd2276 100644
--- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
@@ -1,10 +1,8 @@
import { useMemo, useState } from 'react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
-import { IconApps } from 'twenty-ui';
+import { IconApps, IconComponent, useIcons } from 'twenty-ui';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
index 783958fbde..dba88edbbc 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx
@@ -1,9 +1,8 @@
import { useMemo, useRef, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { IconChevronDown } from 'twenty-ui';
+import { IconChevronDown, IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
index f7453fbb1b..2efe7b8357 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
@@ -10,9 +10,8 @@ import {
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { Key } from 'ts-key-enum';
-import { IconAlertCircle, IconEye, IconEyeOff } from 'twenty-ui';
+import { IconAlertCircle, IconComponent, IconEye, IconEyeOff } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useCombinedRefs } from '~/hooks/useCombinedRefs';
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx
index 38bbbd98f2..376f738d1f 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx
@@ -1,6 +1,6 @@
import { useMemo } from 'react';
+import { IconComponentProps } from 'twenty-ui';
-import { IconComponentProps } from '@/ui/display/icon/types/IconComponent';
import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
import { Select, SelectOption } from '@/ui/input/components/Select';
diff --git a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
index 509fd9a740..6a7fd920e6 100644
--- a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
+++ b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx
@@ -1,7 +1,7 @@
import { SuggestionMenuProps } from '@blocknote/react';
import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { MenuItemSuggestion } from '@/ui/navigation/menu-item/components/MenuItemSuggestion';
diff --git a/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts b/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts
index 8d744bee4a..36e2faf222 100644
--- a/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts
+++ b/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts
@@ -1,6 +1,4 @@
-import { createState, IconApps } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { createState, IconApps, IconComponent } from 'twenty-ui';
type IconPickerState = {
Icon: IconComponent;
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
index 3b6c829cdf..0e46ef5e4a 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx
@@ -1,8 +1,8 @@
import { ComponentProps, MouseEvent } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
const StyledHeader = styled.li`
diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
index c258a5d55a..061d45fd8a 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx
@@ -4,9 +4,8 @@ import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
-import { IconChevronLeft } from 'twenty-ui';
+import { IconChevronLeft, IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
import { IconButton } from '@/ui/input/button/components/IconButton';
import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton';
diff --git a/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
index 3c9642961e..7114005329 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx
@@ -1,7 +1,7 @@
import { JSX } from 'react';
import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { PageHeader } from './PageHeader';
diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
index 240cc1666a..ff024d20f9 100644
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx
@@ -1,9 +1,7 @@
import * as React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { Pill } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent, Pill } from 'twenty-ui';
type TabProps = {
id: string;
diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
index ccb821faf5..d65cee2229 100644
--- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
+import { IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
diff --git a/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts b/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts
index 1ef345e3c5..f37a9b2e84 100644
--- a/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts
@@ -1,4 +1,5 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
+
import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
export type ActionBarEntry = {
diff --git a/packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts b/packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts
index d858b6462e..d56820d6eb 100644
--- a/packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts
+++ b/packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts
@@ -1,4 +1,5 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
+
import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
export type ContextMenuEntry = {
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
index ea0c09c2be..eb97bad4a8 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx
@@ -1,6 +1,6 @@
import { MouseEvent } from 'react';
+import { IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
index 8b93424c67..7438aaf527 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
@@ -1,7 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
import {
StyledMenuItemLabel,
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
index 185a58cb09..773de35e02 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx
@@ -1,4 +1,5 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
+
import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx
index 81e1cd324b..44ff578cfa 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx
@@ -1,6 +1,6 @@
import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';
-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';
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx
index e8f9ef8a4f..c0726868c7 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx
@@ -1,7 +1,5 @@
import { useTheme } from '@emotion/react';
-import { IconChevronRight } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconChevronRight, IconComponent } from 'twenty-ui';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
import {
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx
index 8d6e24ecd3..d9329fe80a 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx
@@ -1,8 +1,6 @@
import { css, useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { IconCheck } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconCheck, IconComponent } from 'twenty-ui';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx
index 52d3a12ee8..1876d1e1f3 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx
@@ -1,7 +1,7 @@
import { MouseEvent } from 'react';
import styled from '@emotion/styled';
+import { IconComponent } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { HOVER_BACKGROUND } from '@/ui/theme/constants/HoverBackground';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx
index 99465e0ca8..2692c65773 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx
@@ -1,4 +1,5 @@
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
+
import { Toggle, ToggleSize } from '@/ui/input/components/Toggle';
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
index 7c41b4a31b..3b3d636a28 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
@@ -1,7 +1,6 @@
import { useTheme } from '@emotion/react';
-import { IconGripVertical } from 'twenty-ui';
+import { IconComponent, IconGripVertical } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
import {
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx
index 8ab53a38bc..92c8e00724 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx
@@ -1,6 +1,5 @@
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
import { NavigationBarItem } from './NavigationBarItem';
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBarItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBarItem.tsx
index ccd6b7d3fd..e7259d9053 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBarItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBarItem.tsx
@@ -1,7 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent } from 'twenty-ui';
const StyledIconButton = styled.div<{ isActive?: boolean }>`
align-items: center;
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index aec5d35cf5..f1364db207 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -3,9 +3,8 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { useSetRecoilState } from 'recoil';
-import { Pill } from 'twenty-ui';
+import { IconComponent, Pill } from 'twenty-ui';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
index af75297298..c7f727d8b0 100644
--- a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
@@ -1,6 +1,7 @@
+import { useIcons } from 'twenty-ui';
+
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
import { getOperandLabelShort } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
type EditableFilterChipProps = {
diff --git a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
index 3da7f3405a..47106b58c1 100644
--- a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
@@ -1,8 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { IconX } from 'twenty-ui';
-
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { IconComponent, IconX } from 'twenty-ui';
const StyledChip = styled.div`
align-items: center;
diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
index bd8b19cc6c..72954b829f 100644
--- a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx
@@ -5,11 +5,10 @@ import {
OnDragEndResponder,
ResponderProvided,
} from '@hello-pangea/dnd';
-import { IconInfoCircle, IconMinus, IconPlus } from 'twenty-ui';
+import { IconInfoCircle, IconMinus, IconPlus, useIcons } from 'twenty-ui';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { AppTooltip } from '@/ui/display/tooltip/AppTooltip';
import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
index 53e455feb3..89508dbdc2 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
@@ -1,9 +1,8 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
-import { IconChevronDown, IconList } from 'twenty-ui';
+import { IconChevronDown, IconList, useIcons } from 'twenty-ui';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
index 03aec00172..b0314f42cd 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx
@@ -1,9 +1,8 @@
import { MouseEvent } from 'react';
import styled from '@emotion/styled';
import { useSetRecoilState } from 'recoil';
-import { IconLock, IconPencil, IconPlus } from 'twenty-ui';
+import { IconLock, IconPencil, IconPlus, useIcons } from 'twenty-ui';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
diff --git a/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx b/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx
index 4ee949ff97..f92acab85b 100644
--- a/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx
@@ -1,9 +1,9 @@
import { useParams } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
+import { useIcons } from 'twenty-ui';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { PageAddButton } from '@/ui/layout/page/PageAddButton';
import { PageHeader } from '@/ui/layout/page/PageHeader';
import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
index f75b0b0aa3..52c1d9f68a 100644
--- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
@@ -1,6 +1,7 @@
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useSetRecoilState } from 'recoil';
+import { useIcons } from 'twenty-ui';
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { useLabelIdentifierFieldMetadataItem } from '@/object-metadata/hooks/useLabelIdentifierFieldMetadataItem';
@@ -8,7 +9,6 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { PageBody } from '@/ui/layout/page/PageBody';
import { PageContainer } from '@/ui/layout/page/PageContainer';
import { PageFavoriteButton } from '@/ui/layout/page/PageFavoriteButton';
diff --git a/packages/twenty-front/src/testing/decorators/IconsProviderDecorator.tsx b/packages/twenty-front/src/testing/decorators/IconsProviderDecorator.tsx
index b697a5b2d5..9ba0caeab6 100644
--- a/packages/twenty-front/src/testing/decorators/IconsProviderDecorator.tsx
+++ b/packages/twenty-front/src/testing/decorators/IconsProviderDecorator.tsx
@@ -1,6 +1,5 @@
import { Decorator } from '@storybook/react';
-
-import { IconsProvider } from '@/ui/display/icon/components/IconsProvider';
+import { IconsProvider } from 'twenty-ui';
export const IconsProviderDecorator: Decorator = (Story) => {
return (
diff --git a/packages/twenty-front/tsconfig.json b/packages/twenty-front/tsconfig.json
index ae837c98fb..4bde090be0 100644
--- a/packages/twenty-front/tsconfig.json
+++ b/packages/twenty-front/tsconfig.json
@@ -22,7 +22,8 @@
"paths": {
"@/*": ["packages/twenty-front/src/modules/*"],
"~/*": ["packages/twenty-front/src/*"],
- "twenty-ui": ["packages/twenty-ui/src/index.ts"]
+ "twenty-ui": ["packages/twenty-ui/src/index.ts"],
+ "@ui/*": ["packages/twenty-ui/src/*"]
}
},
"files": [],
diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx
index e0e520ce6c..221bbfc061 100644
--- a/packages/twenty-front/tsup.ui.index.tsx
+++ b/packages/twenty-front/tsup.ui.index.tsx
@@ -14,7 +14,6 @@ export * from './src/modules/ui/display/checkmark/components/Checkmark';
export * from './src/modules/ui/display/checkmark/components/AnimatedCheckmark'
export * from './src/modules/ui/display/chip/components/Chip'
export * from './src/modules/ui/display/chip/components/EntityChip'
-export * from './src/modules/ui/display/icon/components/IconAddressBook'
export * from './src/modules/ui/display/tag/components/Tag'
export * from './src/modules/ui/display/tooltip/AppTooltip'
export * from './src/modules/ui/display/tooltip/OverflowingTextWithTooltip'
diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts
index c5b59b84c9..cdfcd2cc79 100644
--- a/packages/twenty-front/vite.config.ts
+++ b/packages/twenty-front/vite.config.ts
@@ -43,11 +43,7 @@ export default defineConfig(({ command, mode }) => {
plugins: [
react({ jsxImportSource: '@emotion/react' }),
tsconfigPaths({
- projects: [
- 'tsconfig.json',
- // Include internal library aliases in development mode, so hot reload is enabled for libraries.
- mode === 'development' ? '../twenty-ui/tsconfig.json' : undefined,
- ].filter(Boolean) as string[],
+ projects: ['tsconfig.json', '../twenty-ui/tsconfig.json'],
}),
svgr(),
checker(checkers),
diff --git a/packages/twenty-ui/jest.config.ts b/packages/twenty-ui/jest.config.ts
index e5840eb2ab..a51f902988 100644
--- a/packages/twenty-ui/jest.config.ts
+++ b/packages/twenty-ui/jest.config.ts
@@ -19,4 +19,3 @@ export default {
extensionsToTreatAsEsm: ['.ts', '.tsx'],
coverageDirectory: './coverage',
};
-
diff --git a/packages/twenty-ui/package.json b/packages/twenty-ui/package.json
index 1653b0fdce..46db162742 100644
--- a/packages/twenty-ui/package.json
+++ b/packages/twenty-ui/package.json
@@ -11,6 +11,6 @@
}
},
"scripts": {
- "build": "vite build"
+ "build": "npx vite build"
}
}
diff --git a/packages/twenty-ui/project.json b/packages/twenty-ui/project.json
index c32123554f..9683e50dd9 100644
--- a/packages/twenty-ui/project.json
+++ b/packages/twenty-ui/project.json
@@ -17,8 +17,7 @@
],
"outputs": ["{projectRoot}/src/index.ts", "{projectRoot}/src/*/index.ts"],
"options": {
- "outputPath": "{projectRoot}/dist",
- "command": "npx ts-node --esm {projectRoot}/scripts/generateBarrels.ts"
+ "command": "node {projectRoot}/scripts/generateBarrels.js"
}
},
"lint": {
diff --git a/packages/twenty-ui/scripts/generateBarrels.ts b/packages/twenty-ui/scripts/generateBarrels.js
similarity index 86%
rename from packages/twenty-ui/scripts/generateBarrels.ts
rename to packages/twenty-ui/scripts/generateBarrels.js
index 23831fd901..8988c1e8e6 100644
--- a/packages/twenty-ui/scripts/generateBarrels.ts
+++ b/packages/twenty-ui/scripts/generateBarrels.js
@@ -18,7 +18,11 @@ const excludedDirectories = [
];
const srcPath = path.resolve('packages/twenty-ui/src');
-const getSubDirectoryPaths = (directoryPath: string) =>
+/**
+ * @param {string} directoryPath
+ * @returns {string[]}
+ */
+const getSubDirectoryPaths = (directoryPath) =>
fs
.readdirSync(directoryPath)
.filter(
@@ -30,12 +34,22 @@ const getSubDirectoryPaths = (directoryPath: string) =>
)
.map((subDirectoryName) => path.join(directoryPath, subDirectoryName));
-const getDirectoryPathsRecursive = (directoryPath: string): string[] => [
+/**
+ *
+ * @param {string} directoryPath
+ * @returns {string[]}
+ */
+const getDirectoryPathsRecursive = (directoryPath) => [
directoryPath,
...getSubDirectoryPaths(directoryPath).flatMap(getDirectoryPathsRecursive),
];
-const getFilesPaths = (directoryPath: string) =>
+/**
+ *
+ * @param {string} directoryPath
+ * @returns {string[]}
+ */
+const getFilesPaths = (directoryPath) =>
fs
.readdirSync(directoryPath)
.filter(
diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/address-book.svg b/packages/twenty-ui/src/display/icon/assets/address-book.svg
similarity index 100%
rename from packages/twenty-front/src/modules/ui/display/icon/assets/address-book.svg
rename to packages/twenty-ui/src/display/icon/assets/address-book.svg
diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg b/packages/twenty-ui/src/display/icon/assets/gmail.svg
similarity index 100%
rename from packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg
rename to packages/twenty-ui/src/display/icon/assets/gmail.svg
diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/google-calendar.svg b/packages/twenty-ui/src/display/icon/assets/google-calendar.svg
similarity index 100%
rename from packages/twenty-front/src/modules/ui/display/icon/assets/google-calendar.svg
rename to packages/twenty-ui/src/display/icon/assets/google-calendar.svg
diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/google.svg b/packages/twenty-ui/src/display/icon/assets/google.svg
similarity index 100%
rename from packages/twenty-front/src/modules/ui/display/icon/assets/google.svg
rename to packages/twenty-ui/src/display/icon/assets/google.svg
diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star-filled.svg b/packages/twenty-ui/src/display/icon/assets/twenty-star-filled.svg
similarity index 100%
rename from packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star-filled.svg
rename to packages/twenty-ui/src/display/icon/assets/twenty-star-filled.svg
diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star.svg b/packages/twenty-ui/src/display/icon/assets/twenty-star.svg
similarity index 100%
rename from packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star.svg
rename to packages/twenty-ui/src/display/icon/assets/twenty-star.svg
diff --git a/packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx b/packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx
new file mode 100644
index 0000000000..aa331c1735
--- /dev/null
+++ b/packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx
@@ -0,0 +1,14 @@
+import { useTheme } from '@emotion/react';
+
+import IconAddressBookRaw from '@ui/display/icon/assets/address-book.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconAddressBookProps = Pick;
+
+export const IconAddressBook = (props: IconAddressBookProps) => {
+ const theme = useTheme();
+ const size = props.size ?? 24;
+ const stroke = props.stroke ?? theme.icon.stroke.md;
+
+ return ;
+};
diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx
similarity index 54%
rename from packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx
rename to packages/twenty-ui/src/display/icon/components/IconGmail.tsx
index 647780e275..babde8ce74 100644
--- a/packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx
@@ -1,10 +1,9 @@
import { useTheme } from '@emotion/react';
-import IconGmailRaw from '../assets/gmail.svg?react';
+import IconGmailRaw from '@ui/display/icon/assets/gmail.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
-interface IconGmailProps {
- size?: number;
-}
+type IconGmailProps = Pick;
export const IconGmail = (props: IconGmailProps) => {
const theme = useTheme();
diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx b/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx
similarity index 54%
rename from packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx
rename to packages/twenty-ui/src/display/icon/components/IconGoogle.tsx
index 7ab67694f1..4322018d55 100644
--- a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx
@@ -1,10 +1,9 @@
import { useTheme } from '@emotion/react';
-import IconGoogleRaw from '../assets/google.svg?react';
+import IconGoogleRaw from '@ui/display/icon/assets/google.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
-interface IconGoogleProps {
- size?: number;
-}
+type IconGoogleProps = Pick;
export const IconGoogle = (props: IconGoogleProps) => {
const theme = useTheme();
diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogleCalendar.tsx b/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx
similarity index 53%
rename from packages/twenty-front/src/modules/ui/display/icon/components/IconGoogleCalendar.tsx
rename to packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx
index 49ee58c958..039d629fcf 100644
--- a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogleCalendar.tsx
+++ b/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx
@@ -1,10 +1,9 @@
import { useTheme } from '@emotion/react';
-import IconGoogleCalendarRaw from '../assets/google-calendar.svg?react';
+import IconGoogleCalendarRaw from '@ui/display/icon/assets/google-calendar.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
-type IconGoogleCalendarProps = {
- size?: number;
-};
+type IconGoogleCalendarProps = Pick;
export const IconGoogleCalendar = (props: IconGoogleCalendarProps) => {
const theme = useTheme();
diff --git a/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx b/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx
new file mode 100644
index 0000000000..8da1dcc56e
--- /dev/null
+++ b/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx
@@ -0,0 +1,14 @@
+import { useTheme } from '@emotion/react';
+
+import IconTwentyStarRaw from '@ui/display/icon/assets/twenty-star.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconTwentyStarProps = Pick;
+
+export const IconTwentyStar = (props: IconTwentyStarProps) => {
+ const theme = useTheme();
+ const size = props.size ?? 24;
+ const stroke = props.stroke ?? theme.icon.stroke.md;
+
+ return ;
+};
diff --git a/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx b/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx
new file mode 100644
index 0000000000..4654830171
--- /dev/null
+++ b/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx
@@ -0,0 +1,16 @@
+import { useTheme } from '@emotion/react';
+
+import IconTwentyStarFilledRaw from '@ui/display/icon/assets/twenty-star-filled.svg?react';
+import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
+
+type IconTwentyStarFilledProps = Pick;
+
+export const IconTwentyStarFilled = (props: IconTwentyStarFilledProps) => {
+ const theme = useTheme();
+ const size = props.size ?? 24;
+ const stroke = props.stroke ?? theme.icon.stroke.md;
+
+ return (
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/ui/display/icon/hooks/__tests__/useIcons.test.ts b/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts
similarity index 87%
rename from packages/twenty-front/src/modules/ui/display/icon/hooks/__tests__/useIcons.test.ts
rename to packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts
index aaf70aa02d..4a7da2d156 100644
--- a/packages/twenty-front/src/modules/ui/display/icon/hooks/__tests__/useIcons.test.ts
+++ b/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts
@@ -1,8 +1,12 @@
import { renderHook } from '@testing-library/react';
import * as recoil from 'recoil';
-import { Icon123, IconBuildingSkyscraper, IconUser } from 'twenty-ui';
-import { useIcons } from '@/ui/display/icon/hooks/useIcons';
+import {
+ Icon123,
+ IconBuildingSkyscraper,
+ IconUser,
+} from '@ui/display/icon/components/TablerIcons';
+import { useIcons } from '@ui/display/icon/hooks/useIcons';
describe('useIcons', () => {
const mockedStateIcons = {
diff --git a/packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts
similarity index 73%
rename from packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts
rename to packages/twenty-ui/src/display/icon/hooks/useIcons.ts
index a1dd37b4c0..c07d0a38ac 100644
--- a/packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts
+++ b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts
@@ -1,7 +1,7 @@
import { useRecoilValue } from 'recoil';
-import { Icon123 } from 'twenty-ui';
-import { iconsState } from '@/ui/display/icon/states/iconsState';
+import { Icon123 } from '@ui/display/icon/components/TablerIcons';
+import { iconsState } from '@ui/display/icon/states/iconsState';
export const useIcons = () => {
const icons = useRecoilValue(iconsState);
diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx b/packages/twenty-ui/src/display/icon/providers/IconsProvider.tsx
similarity index 65%
rename from packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx
rename to packages/twenty-ui/src/display/icon/providers/IconsProvider.tsx
index 918d7d32d6..06197586d6 100644
--- a/packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx
+++ b/packages/twenty-ui/src/display/icon/providers/IconsProvider.tsx
@@ -1,7 +1,7 @@
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
-import { iconsState } from '@/ui/display/icon/states/iconsState';
+import { iconsState } from '@ui/display/icon/states/iconsState';
type IconsProviderProps = {
children: JSX.Element;
@@ -11,8 +11,8 @@ export const IconsProvider = ({ children }: IconsProviderProps) => {
const setIcons = useSetRecoilState(iconsState);
useEffect(() => {
- import('../constants/index').then((lazyLoadedIcons) => {
- setIcons(lazyLoadedIcons.default);
+ import('./internal/AllIcons').then((lazyLoadedIcons) => {
+ setIcons(lazyLoadedIcons.ALL_ICONS);
});
}, [setIcons]);
diff --git a/packages/twenty-front/src/modules/ui/display/icon/constants/index.ts b/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts
similarity index 99%
rename from packages/twenty-front/src/modules/ui/display/icon/constants/index.ts
rename to packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts
index 8c0c4b2676..8e547dbddd 100644
--- a/packages/twenty-front/src/modules/ui/display/icon/constants/index.ts
+++ b/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts
@@ -24,7 +24,6 @@ import {
IconAd2,
IconAdCircle,
IconAdCircleOff,
- IconAddressBook,
IconAddressBookOff,
IconAdjustments,
IconAdjustmentsAlt,
@@ -4198,15 +4197,15 @@ import {
IconZzzOff,
} from '@tabler/icons-react';
-export default {
- Icon123,
- Icon24Hours,
+export const ALL_ICONS = {
Icon2fa,
- Icon360,
- Icon360View,
Icon3dCubeSphere,
Icon3dCubeSphereOff,
Icon3dRotate,
+ Icon24Hours,
+ Icon123,
+ Icon360,
+ Icon360View,
IconAB,
IconAB2,
IconAbacus,
@@ -4223,7 +4222,6 @@ export default {
IconAd2,
IconAdCircle,
IconAdCircleOff,
- IconAddressBook,
IconAddressBookOff,
IconAdjustments,
IconAdjustmentsAlt,
@@ -5440,9 +5438,6 @@ export default {
IconClockExclamation,
IconClockHeart,
IconClockHour1,
- IconClockHour10,
- IconClockHour11,
- IconClockHour12,
IconClockHour2,
IconClockHour3,
IconClockHour4,
@@ -5451,6 +5446,9 @@ export default {
IconClockHour7,
IconClockHour8,
IconClockHour9,
+ IconClockHour10,
+ IconClockHour11,
+ IconClockHour12,
IconClockMinus,
IconClockOff,
IconClockPause,
@@ -7117,10 +7115,10 @@ export default {
IconMovieOff,
IconMug,
IconMugOff,
- IconMultiplier05x,
- IconMultiplier15x,
IconMultiplier1x,
IconMultiplier2x,
+ IconMultiplier05x,
+ IconMultiplier15x,
IconMushroom,
IconMushroomOff,
IconMusic,
@@ -7515,20 +7513,20 @@ export default {
IconReservedLine,
IconResize,
IconRestore,
+ IconRewindBackward5,
IconRewindBackward10,
IconRewindBackward15,
IconRewindBackward20,
IconRewindBackward30,
IconRewindBackward40,
- IconRewindBackward5,
IconRewindBackward50,
IconRewindBackward60,
+ IconRewindForward5,
IconRewindForward10,
IconRewindForward15,
IconRewindForward20,
IconRewindForward30,
IconRewindForward40,
- IconRewindForward5,
IconRewindForward50,
IconRewindForward60,
IconRibbonHealth,
@@ -8080,11 +8078,11 @@ export default {
IconTiltShift,
IconTiltShiftOff,
IconTimeDuration0,
+ IconTimeDuration5,
IconTimeDuration10,
IconTimeDuration15,
IconTimeDuration30,
IconTimeDuration45,
- IconTimeDuration5,
IconTimeDuration60,
IconTimeDuration90,
IconTimeDurationOff,
diff --git a/packages/twenty-ui/src/display/icon/states/iconsState.ts b/packages/twenty-ui/src/display/icon/states/iconsState.ts
new file mode 100644
index 0000000000..45be6145ab
--- /dev/null
+++ b/packages/twenty-ui/src/display/icon/states/iconsState.ts
@@ -0,0 +1,7 @@
+import { IconComponent } from '@ui/display/icon/types/IconComponent';
+import { createState } from '@ui/utilities/state/utils/createState';
+
+export const iconsState = createState>({
+ key: 'iconsState',
+ defaultValue: {},
+});
diff --git a/packages/twenty-front/src/modules/ui/display/icon/types/IconComponent.ts b/packages/twenty-ui/src/display/icon/types/IconComponent.ts
similarity index 100%
rename from packages/twenty-front/src/modules/ui/display/icon/types/IconComponent.ts
rename to packages/twenty-ui/src/display/icon/types/IconComponent.ts
diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts
index bb37a9a663..fb8008a38e 100644
--- a/packages/twenty-ui/src/display/index.ts
+++ b/packages/twenty-ui/src/display/index.ts
@@ -1 +1,11 @@
+export * from './icon/components/IconAddressBook';
+export * from './icon/components/IconGmail';
+export * from './icon/components/IconGoogle';
+export * from './icon/components/IconGoogleCalendar';
+export * from './icon/components/IconTwentyStar';
+export * from './icon/components/IconTwentyStarFilled';
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';
diff --git a/packages/twenty-ui/tsconfig.spec.json b/packages/twenty-ui/tsconfig.spec.json
index 73b7fbbbf2..ec6f83f0fc 100644
--- a/packages/twenty-ui/tsconfig.spec.json
+++ b/packages/twenty-ui/tsconfig.spec.json
@@ -6,6 +6,7 @@
"types": ["jest", "node"]
},
"include": [
+ "vite.config.ts",
"jest.config.ts",
"setupTests.ts",
"src/**/*.d.ts",
diff --git a/packages/twenty-ui/vite.config.ts b/packages/twenty-ui/vite.config.ts
index e8c995a21f..2451d0edaa 100644
--- a/packages/twenty-ui/vite.config.ts
+++ b/packages/twenty-ui/vite.config.ts
@@ -1,18 +1,23 @@
///
-import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import react from '@vitejs/plugin-react-swc';
import * as path from 'path';
import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';
import dts from 'vite-plugin-dts';
+import svgr from 'vite-plugin-svgr';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries, import/no-relative-packages
+import packageJson from '../../package.json';
export default defineConfig({
root: __dirname,
cacheDir: '../../node_modules/.vite/packages/twenty-ui',
plugins: [
- react(),
- nxViteTsPaths(),
+ react({ jsxImportSource: '@emotion/react' }),
+ tsconfigPaths(),
+ svgr(),
dts({
entryRoot: 'src',
tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
@@ -43,7 +48,7 @@ export default defineConfig({
},
rollupOptions: {
// External packages that should not be bundled into your library.
- external: ['react', 'react-dom', 'react/jsx-runtime'],
+ external: Object.keys(packageJson.dependencies || {}),
},
},
});
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 7acdc5e09c..a31bf19eae 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -13,10 +13,12 @@
"lib": ["es2020", "dom"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
+ "resolveJsonModule": true,
"baseUrl": ".",
"paths": {
"twenty-emails": ["packages/twenty-emails/src/index.ts"],
- "twenty-ui": ["packages/twenty-ui/src/index.ts"]
+ "twenty-ui": ["packages/twenty-ui/src/index.ts"],
+ "@ui/*": ["packages/twenty-ui/src/*"]
}
},
"exclude": ["node_modules", "tmp"]