From fc8c9d9167a4402c24f956c0dabeb19758c97a0d Mon Sep 17 00:00:00 2001
From: "gitstart-app[bot]"
 <57568882+gitstart-app[bot]@users.noreply.github.com>
Date: Mon, 28 Oct 2024 15:36:58 +0100
Subject: [PATCH] Migrate to twenty-ui - input components (#7914)

### Description

Migrate Input components:

- CardPicker
- Radio
- RadioGroup
- Checkbox
- Toggle
- IconListViewGrip

### Demo

Radio Component on Storybook


![](https://assets-service.gitstart.com/4814/2d0c7436-9fab-4f3d-a5c4-be874e885789.png)

Checkbox component on Storybook


![](https://assets-service.gitstart.com/4814/07bcc040-cc92-4c7e-9be8-ca1a5f454993.png)

###### Fixes twentyhq/private-issues#92

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../src/modules/activities/tasks/components/TaskRow.tsx  | 8 ++++++--
 .../record-board-card/components/RecordBoardCard.tsx     | 3 ++-
 .../components/RecordTableCellCheckbox.tsx               | 2 +-
 .../record-table-cell/components/RecordTableCellGrip.tsx | 2 +-
 .../components/RecordTableHeaderCheckboxColumn.tsx       | 2 +-
 .../components/SettingsAccountsRadioSettingsCard.tsx     | 3 +--
 .../modules/settings/components/SettingsRadioCard.tsx    | 5 ++---
 .../SettingsAvailableStandardObjectItemTableRow.tsx      | 3 +--
 .../SelectHeaderStep/components/SelectColumn.tsx         | 2 +-
 .../steps/components/SelectSheetStep/SelectSheetStep.tsx | 3 +--
 .../components/ValidationStep/components/columns.tsx     | 3 +--
 .../menu-item/components/MenuItemMultiSelect.tsx         | 3 +--
 .../menu-item/components/MenuItemMultiSelectAvatar.tsx   | 6 ++----
 .../menu-item/components/MenuItemMultiSelectTag.tsx      | 6 +++---
 .../twenty-front/src/pages/onboarding/ChooseYourPlan.tsx | 9 +++++++--
 packages/twenty-front/tsup.ui.index.tsx                  | 3 ---
 .../ui => twenty-ui/src}/input/components/CardPicker.tsx | 2 +-
 .../ui => twenty-ui/src}/input/components/Checkbox.tsx   | 2 +-
 .../src}/input/components/IconListViewGrip.tsx           | 2 +-
 .../ui => twenty-ui/src}/input/components/Radio.tsx      | 3 +--
 .../ui => twenty-ui/src}/input/components/RadioGroup.tsx | 0
 .../input/components/__stories__/Checkbox.stories.tsx    | 6 +++++-
 .../src}/input/components/__stories__/Radio.stories.tsx  | 6 +++++-
 .../src}/input/components/list-view-grip.svg             | 0
 packages/twenty-ui/src/input/index.ts                    | 5 +++++
 .../src/content/twenty-ui/input/checkbox.mdx             | 2 +-
 .../twenty-website/src/content/twenty-ui/input/radio.mdx | 5 ++---
 27 files changed, 53 insertions(+), 43 deletions(-)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/input/components/CardPicker.tsx (95%)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/input/components/Checkbox.tsx (98%)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/input/components/IconListViewGrip.tsx (81%)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/input/components/Radio.tsx (99%)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/input/components/RadioGroup.tsx (100%)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/input/components/__stories__/Checkbox.stories.tsx (95%)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/input/components/__stories__/Radio.stories.tsx (93%)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/input/components/list-view-grip.svg (100%)

diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
index ad46a8a43..90e11ab06 100644
--- a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
+++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
@@ -1,11 +1,15 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui';
+import {
+  Checkbox,
+  CheckboxShape,
+  IconCalendar,
+  OverflowingTextWithTooltip,
+} from 'twenty-ui';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { ActivityTargetsInlineCell } from '@/activities/inline-cell/components/ActivityTargetsInlineCell';
 import { getActivitySummary } from '@/activities/utils/getActivitySummary';
-import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
 import { beautifyExactDate, hasDatePassed } from '~/utils/date-utils';
 
 import { ActivityRow } from '@/activities/components/ActivityRow';
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
index 648fc221f..8e7e13396 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
@@ -17,7 +17,6 @@ import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/
 import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
 import { RecordBoardScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
@@ -29,6 +28,8 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import {
   AnimatedEaseInOut,
   AvatarChipVariant,
+  Checkbox,
+  CheckboxVariant,
   ChipSize,
   IconEye,
   IconEyeOff,
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
index 597d38e61..c4c542314 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
@@ -4,7 +4,7 @@ import { useCallback, useContext } from 'react';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
 import { useSetCurrentRowSelected } from '@/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected';
-import { Checkbox } from '@/ui/input/components/Checkbox';
+import { Checkbox } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   align-items: center;
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx
index 563646604..d77131dd3 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx
@@ -3,7 +3,7 @@ import { useContext } from 'react';
 
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
-import { IconListViewGrip } from '@/ui/input/components/IconListViewGrip';
+import { IconListViewGrip } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   cursor: grab;
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
index 912789351..3a053fe92 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
-import { Checkbox } from '@/ui/input/components/Checkbox';
+import { Checkbox } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   align-items: center;
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
index 81c8a6629..02e850363 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
-import { Radio } from '@/ui/input/components/Radio';
-import { Card, CardContent } from 'twenty-ui';
+import { Card, CardContent, Radio } from 'twenty-ui';
 
 type SettingsAccountsRadioSettingsCardProps<Option extends { value: string }> =
   {
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
index d224e73b0..0b7aab647 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
@@ -1,7 +1,6 @@
-import styled from '@emotion/styled';
-import { Radio } from '@/ui/input/components/Radio';
-import { IconComponent, CardContent } from 'twenty-ui';
 import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { CardContent, IconComponent, Radio } from 'twenty-ui';
 
 const StyledRadioCardContent = styled(CardContent)`
   display: flex;
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 85aecd305..61cfaaf53 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,9 +1,8 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useIcons } from 'twenty-ui';
+import { Checkbox, useIcons } from 'twenty-ui';
 
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-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/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx
index da8761b37..59e8d9e6f 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx
@@ -2,7 +2,7 @@
 import { Column, FormatterProps, useRowSelection } from 'react-data-grid';
 
 import { ImportedRow } from '@/spreadsheet-import/types';
-import { Radio } from '@/ui/input/components/Radio';
+import { Radio } from 'twenty-ui';
 
 const SELECT_COLUMN_KEY = 'select-row';
 
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
index a6d5165f3..7b9c635c0 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
@@ -8,8 +8,7 @@ import { SpreadsheetImportStep } from '@/spreadsheet-import/steps/types/Spreadsh
 import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/SpreadsheetImportStepType';
 import { exceedsMaxRecords } from '@/spreadsheet-import/utils/exceedsMaxRecords';
 import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook';
-import { Radio } from '@/ui/input/components/Radio';
-import { RadioGroup } from '@/ui/input/components/RadioGroup';
+import { Radio, RadioGroup } from 'twenty-ui';
 
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import { WorkBook } from 'xlsx-ugnis';
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
index de907c23f..cc2f45072 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
@@ -2,11 +2,10 @@ import styled from '@emotion/styled';
 // @ts-expect-error // Todo: remove usage of react-data-grid
 import { Column, useRowSelection } from 'react-data-grid';
 import { createPortal } from 'react-dom';
-import { AppTooltip, Toggle } from 'twenty-ui';
+import { AppTooltip, Checkbox, CheckboxVariant, Toggle } from 'twenty-ui';
 
 import { MatchColumnSelect } from '@/spreadsheet-import/components/MatchColumnSelect';
 import { Fields, ImportedStructuredRow } from '@/spreadsheet-import/types';
-import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { isDefined } from '~/utils/isDefined';
 
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 83400066d..dbeb958ab 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,7 +1,6 @@
 import styled from '@emotion/styled';
-import { IconComponent, Tag, ThemeColor } from 'twenty-ui';
+import { Checkbox, IconComponent, Tag, ThemeColor } from 'twenty-ui';
 
-import { Checkbox } from '@/ui/input/components/Checkbox';
 import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
 
 import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase';
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx
index 8086e4ad0..4d829db05 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx
@@ -1,8 +1,6 @@
-import { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { OverflowingTextWithTooltip } from 'twenty-ui';
-
-import { Checkbox } from '@/ui/input/components/Checkbox';
+import { ReactNode } from 'react';
+import { Checkbox, OverflowingTextWithTooltip } from 'twenty-ui';
 
 import {
   StyledMenuItemBase,
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx
index 8c8d94dc7..30b8fcb36 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectTag.tsx
@@ -1,10 +1,10 @@
-import { Tag, ThemeColor } from 'twenty-ui';
-
 import {
   Checkbox,
   CheckboxShape,
   CheckboxSize,
-} from '@/ui/input/components/Checkbox';
+  Tag,
+  ThemeColor,
+} from 'twenty-ui';
 
 import {
   StyledMenuItemBase,
diff --git a/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx b/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx
index d40907bad..15f8a4d79 100644
--- a/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx
+++ b/packages/twenty-front/src/pages/onboarding/ChooseYourPlan.tsx
@@ -7,12 +7,17 @@ import { billingState } from '@/client-config/states/billingState';
 import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { CardPicker } from '@/ui/input/components/CardPicker';
 import styled from '@emotion/styled';
 import { isNonEmptyString, isNumber } from '@sniptt/guards';
 import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { ActionLink, CAL_LINK, Loader, MainButton } from 'twenty-ui';
+import {
+  ActionLink,
+  CAL_LINK,
+  CardPicker,
+  Loader,
+  MainButton,
+} from 'twenty-ui';
 import {
   ProductPriceEntity,
   SubscriptionInterval,
diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx
index 043ed4405..8a5968cf1 100644
--- a/packages/twenty-front/tsup.ui.index.tsx
+++ b/packages/twenty-front/tsup.ui.index.tsx
@@ -3,12 +3,9 @@ import { ThemeType } from 'twenty-ui';
 export { ThemeProvider } from '@emotion/react';
 export * from 'twenty-ui';
 export * from './src/modules/ui/input/components/AutosizeTextInput';
-export * from './src/modules/ui/input/components/Checkbox';
 export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput';
 export * from './src/modules/ui/input/components/IconPicker';
 export * from './src/modules/ui/input/components/ImageInput';
-export * from './src/modules/ui/input/components/Radio';
-export * from './src/modules/ui/input/components/RadioGroup';
 export * from './src/modules/ui/input/components/Select';
 export * from './src/modules/ui/input/components/TextArea';
 export * from './src/modules/ui/input/components/TextInput';
diff --git a/packages/twenty-front/src/modules/ui/input/components/CardPicker.tsx b/packages/twenty-ui/src/input/components/CardPicker.tsx
similarity index 95%
rename from packages/twenty-front/src/modules/ui/input/components/CardPicker.tsx
rename to packages/twenty-ui/src/input/components/CardPicker.tsx
index e80b990fe..b5565371b 100644
--- a/packages/twenty-front/src/modules/ui/input/components/CardPicker.tsx
+++ b/packages/twenty-ui/src/input/components/CardPicker.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import { Radio } from '@/ui/input/components/Radio';
+import { Radio } from './Radio';
 
 const StyledSubscriptionCardContainer = styled.button`
   background-color: ${({ theme }) => theme.background.secondary};
diff --git a/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx b/packages/twenty-ui/src/input/components/Checkbox.tsx
similarity index 98%
rename from packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
rename to packages/twenty-ui/src/input/components/Checkbox.tsx
index e19d3cb70..b8b7ad3f6 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
+++ b/packages/twenty-ui/src/input/components/Checkbox.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
-import { IconCheck, IconMinus } from 'twenty-ui';
+import { IconCheck, IconMinus } from '@ui/display/icon/components/TablerIcons';
 
 export enum CheckboxVariant {
   Primary = 'primary',
diff --git a/packages/twenty-front/src/modules/ui/input/components/IconListViewGrip.tsx b/packages/twenty-ui/src/input/components/IconListViewGrip.tsx
similarity index 81%
rename from packages/twenty-front/src/modules/ui/input/components/IconListViewGrip.tsx
rename to packages/twenty-ui/src/input/components/IconListViewGrip.tsx
index 8c6c425d4..ac797177f 100644
--- a/packages/twenty-front/src/modules/ui/input/components/IconListViewGrip.tsx
+++ b/packages/twenty-ui/src/input/components/IconListViewGrip.tsx
@@ -1,4 +1,4 @@
-import IconListViewGripRaw from '@/ui/input/components/list-view-grip.svg?react';
+import IconListViewGripRaw from '@ui/input/components/list-view-grip.svg?react';
 import { IconComponentProps } from '@ui/display/icon/types/IconComponent';
 
 type IconListViewGripProps = Pick<IconComponentProps, 'size' | 'stroke'>;
diff --git a/packages/twenty-front/src/modules/ui/input/components/Radio.tsx b/packages/twenty-ui/src/input/components/Radio.tsx
similarity index 99%
rename from packages/twenty-front/src/modules/ui/input/components/Radio.tsx
rename to packages/twenty-ui/src/input/components/Radio.tsx
index 0d41ca1f8..a9d760336 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Radio.tsx
+++ b/packages/twenty-ui/src/input/components/Radio.tsx
@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import * as React from 'react';
-import { RGBA } from 'twenty-ui';
-
+import { RGBA } from '@ui/theme';
 import { RadioGroup } from './RadioGroup';
 
 export enum RadioSize {
diff --git a/packages/twenty-front/src/modules/ui/input/components/RadioGroup.tsx b/packages/twenty-ui/src/input/components/RadioGroup.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/ui/input/components/RadioGroup.tsx
rename to packages/twenty-ui/src/input/components/RadioGroup.tsx
diff --git a/packages/twenty-front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx b/packages/twenty-ui/src/input/components/__stories__/Checkbox.stories.tsx
similarity index 95%
rename from packages/twenty-front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx
rename to packages/twenty-ui/src/input/components/__stories__/Checkbox.stories.tsx
index e4843be46..925933f61 100644
--- a/packages/twenty-front/src/modules/ui/input/components/__stories__/Checkbox.stories.tsx
+++ b/packages/twenty-ui/src/input/components/__stories__/Checkbox.stories.tsx
@@ -1,5 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
+import {
+  CatalogDecorator,
+  CatalogStory,
+  ComponentDecorator,
+} from '@ui/testing';
 
 import {
   Checkbox,
diff --git a/packages/twenty-front/src/modules/ui/input/components/__stories__/Radio.stories.tsx b/packages/twenty-ui/src/input/components/__stories__/Radio.stories.tsx
similarity index 93%
rename from packages/twenty-front/src/modules/ui/input/components/__stories__/Radio.stories.tsx
rename to packages/twenty-ui/src/input/components/__stories__/Radio.stories.tsx
index 319e257e5..8d5db5523 100644
--- a/packages/twenty-front/src/modules/ui/input/components/__stories__/Radio.stories.tsx
+++ b/packages/twenty-ui/src/input/components/__stories__/Radio.stories.tsx
@@ -1,5 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { CatalogDecorator, CatalogStory, ComponentDecorator } from 'twenty-ui';
+import {
+  CatalogDecorator,
+  CatalogStory,
+  ComponentDecorator,
+} from '@ui/testing';
 
 import { LabelPosition, Radio, RadioSize } from '../Radio';
 
diff --git a/packages/twenty-front/src/modules/ui/input/components/list-view-grip.svg b/packages/twenty-ui/src/input/components/list-view-grip.svg
similarity index 100%
rename from packages/twenty-front/src/modules/ui/input/components/list-view-grip.svg
rename to packages/twenty-ui/src/input/components/list-view-grip.svg
diff --git a/packages/twenty-ui/src/input/index.ts b/packages/twenty-ui/src/input/index.ts
index feac4f3f0..581bcb2e7 100644
--- a/packages/twenty-ui/src/input/index.ts
+++ b/packages/twenty-ui/src/input/index.ts
@@ -17,5 +17,10 @@ export * from './code-editor/components/CodeEditorHeader';
 export * from './code-editor/theme/utils/codeEditorTheme';
 export * from './color-scheme/components/ColorSchemeCard';
 export * from './color-scheme/components/ColorSchemePicker';
+export * from './components/CardPicker';
+export * from './components/Checkbox';
+export * from './components/IconListViewGrip';
+export * from './components/Radio';
+export * from './components/RadioGroup';
 export * from './components/Toggle';
 export * from './types/ColorScheme';
diff --git a/packages/twenty-website/src/content/twenty-ui/input/checkbox.mdx b/packages/twenty-website/src/content/twenty-ui/input/checkbox.mdx
index a442f6045..8afea2f99 100644
--- a/packages/twenty-website/src/content/twenty-ui/input/checkbox.mdx
+++ b/packages/twenty-website/src/content/twenty-ui/input/checkbox.mdx
@@ -9,7 +9,7 @@ Used when a user needs to select multiple values from several options.
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { Checkbox } from "@/ui/input/components/Checkbox";
+<SandpackEditor content={`import { Checkbox } from "twenty-ui";
 
 export const MyComponent = () => {
   return (
diff --git a/packages/twenty-website/src/content/twenty-ui/input/radio.mdx b/packages/twenty-website/src/content/twenty-ui/input/radio.mdx
index 93a701325..8de84dcc6 100644
--- a/packages/twenty-website/src/content/twenty-ui/input/radio.mdx
+++ b/packages/twenty-website/src/content/twenty-ui/input/radio.mdx
@@ -9,7 +9,7 @@ Used when users may only choose one option from a series of options.
 <ArticleTabs label1="Usage" label2="Props">
 <ArticleTab>
 
-<SandpackEditor content={`import { Radio } from "@/ui/input/components/Radio";
+<SandpackEditor content={`import { Radio } from "twenty-ui";
 
 export const MyComponent = () => {
 
@@ -65,8 +65,7 @@ Groups together related radio buttons.
 <ArticleTab>
 
 <SandpackEditor content={`import React, { useState } from "react";
-import { Radio } from "@/ui/input/components/Radio";
-import { RadioGroup } from "@/ui/input/components/RadioGroup";
+import { Radio, RadioGroup } from "twenty-ui";
 
 export const MyComponent = () => {