refactor: move Tabler Icon exports to twenty-ui (#4727)

Split from https://github.com/twentyhq/twenty/pull/4518

packages/twenty-front/src/modules/ui/display/checkmark/components/Checkmark.tsx

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

packages/twenty-front/src/modules/ui/display/icon/components/IconAddressBook.tsx

@@ -1,4 +1,4 @@
-import { TablerIconsProps } from '@/ui/display/icon';
+import { TablerIconsProps } from 'twenty-ui';
 
 import IconAddressBookRaw from '../assets/address-book.svg?react';
 

packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStar.tsx

@@ -1,4 +1,4 @@
-import { TablerIconsProps } from '@/ui/display/icon';
+import { TablerIconsProps } from 'twenty-ui';
 
 import IconTwentyStarRaw from '../assets/twenty-star.svg?react';
 

packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx

@@ -1,4 +1,4 @@
-import { TablerIconsProps } from '@/ui/display/icon';
+import { TablerIconsProps } from 'twenty-ui';
 
 import IconTwentyStarFilledRaw from '../assets/twenty-star-filled.svg?react';
 

packages/twenty-front/src/modules/ui/display/icon/hooks/__tests__/useIcons.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 import * as recoil from 'recoil';
+import { Icon123, IconBuildingSkyscraper, IconUser } from 'twenty-ui';
 
-import { Icon123, IconBuildingSkyscraper, IconUser } from '@/ui/display/icon';
 import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 
 describe('useIcons', () => {

packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts

@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
+import { Icon123 } from 'twenty-ui';
 
-import { Icon123 } from '@/ui/display/icon';
 import { iconsState } from '@/ui/display/icon/states/iconsState';
 
 export const useIcons = () => {

packages/twenty-front/src/modules/ui/display/icon/index.ts

@@ -1,138 +0,0 @@
-/* eslint-disable no-restricted-imports */
-export type { TablerIconsProps } from '@tabler/icons-react';
-export {
-  Icon123,
-  IconAlertCircle,
-  IconAlertTriangle,
-  IconApps,
-  IconArchive,
-  IconArchiveOff,
-  IconArrowBackUp,
-  IconArrowDown,
-  IconArrowLeft,
-  IconArrowRight,
-  IconArrowUp,
-  IconArrowUpRight,
-  IconAt,
-  IconBaselineDensitySmall,
-  IconBell,
-  IconBolt,
-  IconBook2,
-  IconBox,
-  IconBrandGithub,
-  IconBrandGoogle,
-  IconBrandLinkedin,
-  IconBrandX,
-  IconBriefcase,
-  IconBuildingSkyscraper,
-  IconCalendar,
-  IconCalendarEvent,
-  IconCalendarX,
-  IconCheck,
-  IconCheckbox,
-  IconChevronDown,
-  IconChevronLeft,
-  IconChevronRight,
-  IconChevronsRight,
-  IconChevronUp,
-  IconCircleDot,
-  IconCircleOff,
-  IconCirclePlus,
-  IconCircleX,
-  IconClick,
-  IconCode,
-  IconCoins,
-  IconColorSwatch,
-  IconMessageCircle as IconComment,
-  IconCopy,
-  IconCreditCard,
-  IconCurrencyDollar,
-  IconCurrencyEuro,
-  IconCurrencyFrank,
-  IconCurrencyPound,
-  IconCurrencyYen,
-  IconCurrencyYuan,
-  IconDatabase,
-  IconDeviceFloppy,
-  IconDoorEnter,
-  IconDotsVertical,
-  IconDownload,
-  IconEditCircle,
-  IconEye,
-  IconEyeOff,
-  IconFile,
-  IconFileCheck,
-  IconFileExport,
-  IconFileImport,
-  IconFileText,
-  IconFileUpload,
-  IconFileZip,
-  IconFilterOff,
-  IconFocusCentered,
-  IconForbid,
-  IconGripVertical,
-  IconH1,
-  IconH2,
-  IconH3,
-  IconHeadphones,
-  IconHeart,
-  IconHeartOff,
-  IconHelpCircle,
-  IconHierarchy2,
-  IconInbox,
-  IconInfoCircle,
-  IconKey,
-  IconLanguage,
-  IconLayersLinked,
-  IconLayoutKanban,
-  IconLayoutSidebarLeftCollapse,
-  IconLayoutSidebarRightCollapse,
-  IconLayoutSidebarRightExpand,
-  IconLink,
-  IconLinkOff,
-  IconList,
-  IconListNumbers,
-  IconLock,
-  IconMail,
-  IconMailCog,
-  IconMap,
-  IconMinus,
-  IconMoneybag,
-  IconMouse2,
-  IconNotes,
-  IconNumbers,
-  IconPaperclip,
-  IconPencil,
-  IconPhone,
-  IconPhoto,
-  IconPilcrow,
-  IconPlug,
-  IconPlus,
-  IconPresentation,
-  IconProgressCheck,
-  IconPuzzle,
-  IconRefresh,
-  IconRelationManyToMany,
-  IconRelationOneToMany,
-  IconRelationOneToOne,
-  IconRepeat,
-  IconSearch,
-  IconSend,
-  IconSettings,
-  IconTable,
-  IconTag,
-  IconTarget,
-  IconTargetArrow,
-  IconTextSize,
-  IconTimelineEvent,
-  IconTrash,
-  IconUnlink,
-  IconUpload,
-  IconUser,
-  IconUserCircle,
-  IconUsers,
-  IconVideo,
-  IconWand,
-  IconWorld,
-  IconX,
-} from '@tabler/icons-react';

packages/twenty-front/src/modules/ui/display/info/components/Info.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconInfoCircle } from 'twenty-ui';
 
-import { IconInfoCircle } from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button.tsx';
 
 export type InfoAccent = 'blue' | 'danger';

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconAlertTriangle, IconX } from 'twenty-ui';
 
-import { IconAlertTriangle, IconX } from '@/ui/display/icon';
 import {
   ProgressBar,
   ProgressBarControls,

packages/twenty-front/src/modules/ui/field/input/components/BooleanInput.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
-import { IconCheck, IconX } from '@/ui/display/icon';
+import { IconCheck, IconX } from 'twenty-ui';
 
 const StyledEditableBooleanFieldContainer = styled.div`
   align-items: center;

packages/twenty-front/src/modules/ui/input/button/components/__stories__/Button.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconSearch } from 'twenty-ui';
 
-import { IconSearch } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/input/button/components/__stories__/ButtonGroup.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconCheckbox, IconNotes, IconTimelineEvent } from 'twenty-ui';
 
-import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/input/button/components/__stories__/FloatingButton.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconSearch } from 'twenty-ui';
 
-import { IconSearch } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/input/button/components/__stories__/FloatingButtonGroup.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconCheckbox, IconNotes, IconTimelineEvent } from 'twenty-ui';
 
-import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/input/button/components/__stories__/FloatingIconButton.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconSearch } from 'twenty-ui';
 
-import { IconSearch } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/input/button/components/__stories__/FloatingIconButtonGroup.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconCheckbox, IconNotes, IconTimelineEvent } from 'twenty-ui';
 
-import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/input/button/components/__stories__/IconButton.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconSearch } from 'twenty-ui';
 
-import { IconSearch } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/input/button/components/__stories__/IconButtonGroup.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconCheckbox, IconNotes, IconTimelineEvent } from 'twenty-ui';
 
-import { IconCheckbox, IconNotes, IconTimelineEvent } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/input/button/components/__stories__/LightButton.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconSearch } from 'twenty-ui';
 
-import { IconSearch } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/input/button/components/__stories__/LightIconButton.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconSearch } from 'twenty-ui';
 
-import { IconSearch } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/input/button/components/__stories__/MainButton.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
+import { IconBrandGoogle } from 'twenty-ui';
 
-import { IconBrandGoogle } from '@/ui/display/icon';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { MainButton } from '../MainButton';

packages/twenty-front/src/modules/ui/input/button/components/__stories__/RoundedIconButton.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
+import { IconArrowRight } from 'twenty-ui';
 
-import { IconArrowRight } from '@/ui/display/icon';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { RoundedIconButton } from '../RoundedIconButton';

packages/twenty-front/src/modules/ui/input/components/AutosizeTextInput.tsx

@@ -3,8 +3,8 @@ import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
 import TextareaAutosize from 'react-textarea-autosize';
 import styled from '@emotion/styled';
 import { Key } from 'ts-key-enum';
+import { IconArrowRight } from 'twenty-ui';
 
-import { IconArrowRight } from '@/ui/display/icon/index';
 import { Button } from '@/ui/input/button/components/Button';
 import { RoundedIconButton } from '@/ui/input/button/components/RoundedIconButton';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';

packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
+import { IconCheck, IconMinus } from 'twenty-ui';
 import { v4 } from 'uuid';
 
-import { IconCheck, IconMinus } from '@/ui/display/icon';
-
 export enum CheckboxVariant {
   Primary = 'primary',
   Secondary = 'secondary',

packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx

@@ -1,8 +1,8 @@
 import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
+import { IconApps } from 'twenty-ui';
 
-import { IconApps } from '@/ui/display/icon';
 import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';

packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconFileUpload, IconTrash, IconUpload, IconX } from 'twenty-ui';
 
-import {
-  IconFileUpload,
-  IconTrash,
-  IconUpload,
-  IconX,
-} from '@/ui/display/icon';
 import { Button } from '@/ui/input/button/components/Button';
 import { isDefined } from '~/utils/isDefined';
 

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -1,8 +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 } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';

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 } from '@/ui/display/icon';
-import { IconEye, IconEyeOff } from '@/ui/display/icon/index';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';

packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconChevronDown } from 'twenty-ui';
 
 import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
-import { IconChevronDown } from '@/ui/display/icon';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { isDefined } from '~/utils/isDefined';

packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDatePicker from 'react-datepicker';
 import styled from '@emotion/styled';
+import { IconCalendarX } from 'twenty-ui';
 
-import { IconCalendarX } from '@/ui/display/icon';
 import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
 import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase';
 import { OVERLAY_BACKGROUND } from '@/ui/theme/constants/OverlayBackground';

packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconChevronDown, IconWorld } from 'twenty-ui';
 
-import { IconChevronDown, IconWorld } from '@/ui/display/icon';
 import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
 import { Country } from '@/ui/input/components/internal/types/Country';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';

packages/twenty-front/src/modules/ui/input/hooks/__tests__/useIconPicker.test.tsx

@@ -1,8 +1,8 @@
 import { act } from 'react-dom/test-utils';
 import { renderHook } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
+import { Icon123, IconApps } from 'twenty-ui';
 
-import { Icon123, IconApps } from '@/ui/display/icon';
 import { useIconPicker } from '@/ui/input/hooks/useIconPicker';
 
 describe('useIconPicker', () => {

packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts

@@ -1,4 +1,5 @@
-import { IconApps } from '@/ui/display/icon';
+import { IconApps } from 'twenty-ui';
+
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { createState } from '@/ui/utilities/state/utils/createState';
 

packages/twenty-front/src/modules/ui/layout/draggable-list/__stories__/DraggableItem.stories.tsx

@@ -1,7 +1,7 @@
 import { DragDropContext, Droppable } from '@hello-pangea/dnd';
 import { Meta, StoryObj } from '@storybook/react';
+import { IconBell } from 'twenty-ui';
 
-import { IconBell } from '@/ui/display/icon';
 import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 

packages/twenty-front/src/modules/ui/layout/draggable-list/__stories__/DraggableList.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconBell } from 'twenty-ui';
 
-import { IconBell } from '@/ui/display/icon';
 import { MenuItemDraggable } from '@/ui/navigation/menu-item/components/MenuItemDraggable';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 

packages/twenty-front/src/modules/ui/layout/page/PageAddButton.tsx

@@ -1,4 +1,5 @@
-import { IconPlus } from '@/ui/display/icon';
+import { IconPlus } from 'twenty-ui';
+
 import { IconButton } from '@/ui/input/button/components/IconButton';
 
 type PageAddButtonProps = {

packages/twenty-front/src/modules/ui/layout/page/PageFavoriteButton.tsx

@@ -1,4 +1,5 @@
-import { IconHeart } from '@/ui/display/icon';
+import { IconHeart } from 'twenty-ui';
+
 import { IconButton } from '@/ui/input/button/components/IconButton';
 
 type PageFavoriteButtonProps = {

packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx

@@ -4,8 +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 } from '@/ui/display/icon/index';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
 import { IconButton } from '@/ui/input/button/components/IconButton';

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx

@@ -1,4 +1,5 @@
-import { IconChevronsRight } from '@/ui/display/icon/index';
+import { IconChevronsRight } from 'twenty-ui';
+
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 
 import { useRightDrawer } from '../hooks/useRightDrawer';

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarExpandButton.tsx

@@ -1,9 +1,9 @@
 import { useRecoilState } from 'recoil';
-
 import {
   IconLayoutSidebarRightCollapse,
   IconLayoutSidebarRightExpand,
-} from '@/ui/display/icon';
+} from 'twenty-ui';
+
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 
 import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState';

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
+import { IconCheckbox, IconNotes, IconPlus } from 'twenty-ui';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityType } from '@/activities/types/Activity';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { IconCheckbox, IconNotes, IconPlus } from '@/ui/display/icon/index';
 import { IconButton } from '@/ui/input/button/components/IconButton';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx

@@ -1,10 +1,10 @@
 import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
+import { IconDotsVertical, IconTrash } from 'twenty-ui';
 
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { IconDotsVertical, IconTrash } from '@/ui/display/icon/index';
 import { IconButton } from '@/ui/input/button/components/IconButton';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -1,5 +1,13 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
+import {
+  IconCalendarEvent,
+  IconCheckbox,
+  IconMail,
+  IconNotes,
+  IconPaperclip,
+  IconTimelineEvent,
+} from 'twenty-ui';
 
 import { Calendar } from '@/activities/calendar/components/Calendar';
 import { EmailThreads } from '@/activities/emails/components/EmailThreads';
@@ -11,14 +19,6 @@ import { Timeline } from '@/activities/timeline/components/Timeline';
 import { TimelineQueryEffect } from '@/activities/timeline/components/TimelineQueryEffect';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import {
-  IconCalendarEvent,
-  IconCheckbox,
-  IconMail,
-  IconNotes,
-  IconPaperclip,
-  IconTimelineEvent,
-} from '@/ui/display/icon';
 import { TabList } from '@/ui/layout/tab/components/TabList';
 import { useTabList } from '@/ui/layout/tab/hooks/useTabList';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

packages/twenty-front/src/modules/ui/layout/tab/components/__stories__/Tab.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconCheckbox } from 'twenty-ui';
 
-import { IconCheckbox } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/layout/tab/components/__stories__/Tablist.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { expect, within } from '@storybook/test';
+import { IconCheckbox } from 'twenty-ui';
 
-import { IconCheckbox } from '@/ui/display/icon';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 

packages/twenty-front/src/modules/ui/layout/table/components/TableSection.tsx

@@ -1,8 +1,7 @@
 import { ReactNode, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
-import { IconChevronDown, IconChevronUp } from '@/ui/display/icon';
+import { IconChevronDown, IconChevronUp } from 'twenty-ui';
 
 import { TableBody } from './TableBody';
 

packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBarItem.tsx

@@ -1,8 +1,8 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { MenuItem } from 'tsup.ui.index';
+import { IconChevronDown } from 'twenty-ui';
 
-import { IconChevronDown } from '@/ui/display/icon';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';

packages/twenty-front/src/modules/ui/navigation/link/components/GithubVersionLink.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
+import { IconBrandGithub } from 'twenty-ui';
 
-import { IconBrandGithub } from '@/ui/display/icon';
 import { ActionLink } from '@/ui/navigation/link/components/ActionLink.tsx';
 
 import packageJson from '../../../../../../package.json';

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
+import { IconChevronRight } from 'twenty-ui';
 
-import { IconChevronRight } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx

@@ -1,7 +1,7 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { IconCheck } from 'twenty-ui';
 
-import { IconCheck } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectAvatar.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
+import { IconCheck } from 'twenty-ui';
 
-import { IconCheck } from '@/ui/display/icon';
 import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
 
 import {

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx

@@ -1,10 +1,10 @@
 import { useTheme } from '@emotion/react';
+import { IconCheck } from 'twenty-ui';
 
 import {
   ColorSample,
   ColorSampleVariant,
 } from '@/ui/display/color/components/ColorSample';
-import { IconCheck } from '@/ui/display/icon';
 import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 import {

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react';
 import { Tag } from 'tsup.ui.index';
+import { IconCheck } from 'twenty-ui';
 
-import { IconCheck } from '@/ui/display/icon';
 import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
 
 import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase';

packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconBell } from 'twenty-ui';
 
-import { IconBell } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconBell } from 'twenty-ui';
 
-import { IconBell } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { CatalogStory } from '~/testing/types';

packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconBell, IconMinus } from 'twenty-ui';
 
-import { IconBell, IconMinus } from '@/ui/display/icon';
 import {
   CatalogDecorator,
   CatalogDimension,

packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemMultiSelect.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconBell } from 'twenty-ui';
 
-import { IconBell } from '@/ui/display/icon';
 import {
   CatalogDecorator,
   CatalogDimension,

packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemNavigate.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconBell } from 'twenty-ui';
 
-import { IconBell } from '@/ui/display/icon';
 import {
   CatalogDecorator,
   CatalogDimension,

packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelect.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconBell } from 'twenty-ui';
 
-import { IconBell } from '@/ui/display/icon';
 import {
   CatalogDecorator,
   CatalogDimension,

packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemToggle.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconBell } from 'twenty-ui';
 
-import { IconBell } from '@/ui/display/icon';
 import {
   CatalogDecorator,
   CatalogDimension,

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
+import { IconGripVertical } from 'twenty-ui';
 
-import { IconGripVertical } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
 

packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/__stories__/NavigationBar.stories.tsx

@@ -1,11 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
+import { IconCheckbox, IconList, IconSearch, IconSettings } from 'twenty-ui';
 
-import {
-  IconCheckbox,
-  IconList,
-  IconSearch,
-  IconSettings,
-} from '@/ui/display/icon';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdownButton.tsx

@@ -2,10 +2,10 @@ import { useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
+import { IconChevronDown } from 'twenty-ui';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { Workspaces } from '@/auth/states/workspaces';
-import { IconChevronDown } from '@/ui/display/icon';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx

@@ -2,8 +2,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 } from '@/ui/display/icon/index';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 
 type NavigationDrawerBackButtonProps = {

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
-
 import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
-} from '@/ui/display/icon';
+} from 'twenty-ui';
+
 import { IconButton } from '@/ui/input/button/components/IconButton';
 import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
 

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx

@@ -1,8 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-
-import { Favorites } from '@/favorites/components/Favorites';
-import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
-import { SettingsPath } from '@/types/SettingsPath';
 import {
   IconAt,
   IconBell,
@@ -18,7 +14,11 @@ import {
   IconUser,
   IconUserCircle,
   IconUsers,
-} from '@/ui/display/icon';
+} from 'twenty-ui';
+
+import { Favorites } from '@/favorites/components/Favorites';
+import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
+import { SettingsPath } from '@/types/SettingsPath';
 import { GithubVersionLink } from '@/ui/navigation/link/components/GithubVersionLink';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerItem.stories.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { Meta, StoryObj } from '@storybook/react';
+import { IconSearch } from 'twenty-ui';
 
-import { IconSearch } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';