From 1dfeba39ebdef51b64cdcb429008331bcf0f3ec0 Mon Sep 17 00:00:00 2001
From: "gitstart-app[bot]"
 <57568882+gitstart-app[bot]@users.noreply.github.com>
Date: Thu, 24 Oct 2024 16:36:06 +0200
Subject: [PATCH] Migrate to twenty-ui - layout/card (#8003)

This PR was created by [GitStart](https://gitstart.com/) to address the
requirements from this ticket:
[TWNTY-7532](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7532).

 ---

### Description

Migrate:

- Card
- CardContent
- CardFooter
- CardHeader

### Demo

Card in Storybook


![](https://assets-service.gitstart.com/4814/d6759b99-7d5f-4177-acdf-1c57786330a3.png)

###### Fixes twentyhq/private-issues#86

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../calendar/components/CalendarDayCardContent.tsx    |  2 +-
 .../calendar/components/CalendarEventRow.tsx          |  4 ++--
 .../calendar/components/CalendarMonthCard.tsx         |  2 +-
 .../modules/activities/components/ActivityList.tsx    |  2 +-
 .../src/modules/activities/components/ActivityRow.tsx |  2 +-
 .../timeline-activities/rows/components/EventCard.tsx |  2 +-
 .../SettingsAccountsCalendarChannelDetails.tsx        |  3 +--
 .../components/SettingsAccountsListEmptyStateCard.tsx |  5 +----
 .../SettingsAccountsMessageChannelDetails.tsx         |  3 +--
 .../components/SettingsAccountsRadioSettingsCard.tsx  |  3 +--
 .../src/modules/settings/components/SettingsCard.tsx  |  4 +---
 .../modules/settings/components/SettingsListCard.tsx  |  6 ++----
 .../components/SettingsListItemCardContent.tsx        |  6 ++----
 .../settings/components/SettingsListSkeletonCard.tsx  |  2 +-
 .../settings/components/SettingsOptionCardContent.tsx |  3 +--
 .../modules/settings/components/SettingsRadioCard.tsx |  3 +--
 .../settings/components/SettingsSummaryCard.tsx       |  5 ++---
 .../components/SettingsDataModelPreviewFormCard.tsx   |  3 +--
 .../components/SettingsDataModelFieldBooleanForm.tsx  |  5 ++---
 .../components/SettingsDataModelFieldCurrencyForm.tsx |  2 +-
 .../components/SettingsDataModelFieldDateForm.tsx     |  3 +--
 .../components/SettingsDataModelFieldNumberForm.tsx   |  2 +-
 .../components/SettingsDataModelFieldSelectForm.tsx   | 11 ++++++++---
 .../components/SettingsDataModelFieldPreviewCard.tsx  |  6 +++---
 .../objects/components/SettingsObjectCoverImage.tsx   |  4 +---
 .../SettingsDataModelObjectSettingsFormCard.tsx       |  3 +--
 .../components/SettingsIntegrationPreview.tsx         |  3 +--
 ...ttingsSSOIdentitiesProvidersListEmptyStateCard.tsx |  5 +----
 .../components/SettingsSecurityOptionsList.tsx        |  3 +--
 .../src}/layout/card/components/Card.tsx              |  0
 .../src}/layout/card/components/CardContent.tsx       |  0
 .../src}/layout/card/components/CardFooter.tsx        |  0
 .../src}/layout/card/components/CardHeader.tsx        |  0
 .../card/components/__stories__/Card.stories.tsx      |  2 +-
 packages/twenty-ui/src/layout/index.ts                |  4 ++++
 35 files changed, 48 insertions(+), 65 deletions(-)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/layout/card/components/Card.tsx (100%)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/layout/card/components/CardContent.tsx (100%)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/layout/card/components/CardFooter.tsx (100%)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/layout/card/components/CardHeader.tsx (100%)
 rename packages/{twenty-front/src/modules/ui => twenty-ui/src}/layout/card/components/__stories__/Card.stories.tsx (94%)

diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
index ca656f3b5..1ccf03716 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarDayCardContent.tsx
@@ -4,7 +4,7 @@ import { differenceInSeconds, endOfDay, format } from 'date-fns';
 
 import { CalendarEventRow } from '@/activities/calendar/components/CalendarEventRow';
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { CardContent } from 'twenty-ui';
 import { TimelineCalendarEvent } from '~/generated/graphql';
 
 type CalendarDayCardContentProps = {
diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
index cb9548f8b..5874898e0 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventRow.tsx
@@ -9,6 +9,8 @@ import {
   IconArrowRight,
   IconLock,
   isDefined,
+  Card,
+  CardContent,
 } from 'twenty-ui';
 
 import { CalendarCurrentEventCursor } from '@/activities/calendar/components/CalendarCurrentEventCursor';
@@ -18,8 +20,6 @@ import { getCalendarEventEndDate } from '@/activities/calendar/utils/getCalendar
 import { getCalendarEventStartDate } from '@/activities/calendar/utils/getCalendarEventStartDate';
 import { hasCalendarEventEnded } from '@/activities/calendar/utils/hasCalendarEventEnded';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import {
   CalendarChannelVisibility,
   TimelineCalendarEvent,
diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx
index f42f2e35f..97ca1d029 100644
--- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarMonthCard.tsx
@@ -2,7 +2,7 @@ import { useContext } from 'react';
 
 import { CalendarDayCardContent } from '@/activities/calendar/components/CalendarDayCardContent';
 import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card } from 'twenty-ui';
 
 type CalendarMonthCardProps = {
   dayTimes: number[];
diff --git a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
index b8b8b2f61..0bb0e367e 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx
@@ -1,5 +1,5 @@
-import { Card } from '@/ui/layout/card/components/Card';
 import styled from '@emotion/styled';
+import { Card } from 'twenty-ui';
 
 const StyledList = styled(Card)`
   & > :not(:last-child) {
diff --git a/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
index 00fdbb1a6..075758fc8 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx
@@ -1,5 +1,5 @@
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import styled from '@emotion/styled';
+import { CardContent } from 'twenty-ui';
 import React from 'react';
 
 const StyledRowContent = styled(CardContent)<{
diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
index 67e4f78cd..52b8fa0de 100644
--- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/components/EventCard.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card } from 'twenty-ui';
 
 type EventCardProps = {
   children: React.ReactNode;
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
index 3152e98ba..5d0fab05d 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx
@@ -3,10 +3,9 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts/components/SettingsAccountsCalendarVisibilitySettingsCard';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
-import { Card } from '@/ui/layout/card/components/Card';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
-import { H2Title, Toggle } from 'twenty-ui';
+import { H2Title, Toggle, Card } from 'twenty-ui';
 import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
 
 const StyledDetailsContainer = styled.div`
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 981bbcb6d..8500264c4 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
@@ -1,10 +1,7 @@
 import styled from '@emotion/styled';
-import { Button, IconGoogle } from 'twenty-ui';
+import { Button, Card, CardContent, CardHeader, IconGoogle } from 'twenty-ui';
 
 import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { CardHeader } from '@/ui/layout/card/components/CardHeader';
 
 const StyledHeader = styled(CardHeader)`
   align-items: center;
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
index cfe203a15..3d4c81d0e 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { H2Title, Toggle } from 'twenty-ui';
+import { H2Title, Toggle, Card } from 'twenty-ui';
 
 import {
   MessageChannel,
@@ -10,7 +10,6 @@ import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/components/SettingsAccountsMessageAutoCreationCard';
 import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
-import { Card } from '@/ui/layout/card/components/Card';
 import { Section } from '@/ui/layout/section/components/Section';
 import { MessageChannelVisibility } from '~/generated-metadata/graphql';
 
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 aaf856456..81c8a6629 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRadioSettingsCard.tsx
@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
 import { Radio } from '@/ui/input/components/Radio';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 type SettingsAccountsRadioSettingsCardProps<Option extends { value: string }> =
   {
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx
index 972bac3d7..07c54e1c9 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsCard.tsx
@@ -1,9 +1,7 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconChevronRight, Pill } from 'twenty-ui';
+import { IconChevronRight, Pill, Card, CardContent } from 'twenty-ui';
 
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { ReactNode } from 'react';
 
 type SettingsCardProps = {
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
index ad580b2e3..a07fd6b2b 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx
@@ -1,11 +1,9 @@
-import { ComponentType } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent, IconPlus } from 'twenty-ui';
+import { ComponentType } from 'react';
+import { IconComponent, IconPlus, Card, CardFooter } from 'twenty-ui';
 
 import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 
 import { SettingsListItemCardContent } from './SettingsListItemCardContent';
 
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
index b0292e112..73885bc34 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx
@@ -1,9 +1,7 @@
-import { ReactNode } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconComponent } from 'twenty-ui';
-
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { ReactNode } from 'react';
+import { IconComponent, CardContent } from 'twenty-ui';
 
 const StyledRow = styled(CardContent)`
   align-items: center;
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx
index 1a4732fed..a934b7e52 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsListSkeletonCard.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card } from 'twenty-ui';
 
 const StyledCard = styled(Card)`
   background-color: ${({ theme }) => theme.background.secondary};
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx b/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx
index 90b61b7c0..7384b1d58 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx
@@ -1,8 +1,7 @@
 import styled from '@emotion/styled';
 import { useTheme } from '@emotion/react';
 
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, CardContent } from 'twenty-ui';
 import { ReactNode } from 'react';
 
 type SettingsOptionCardContentProps = {
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
index 6a5c8c08f..d224e73b0 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 { CardContent } from '@/ui/layout/card/components/CardContent';
-import { IconComponent } from 'twenty-ui';
+import { IconComponent, CardContent } from 'twenty-ui';
 import { useTheme } from '@emotion/react';
 
 const StyledRadioCardContent = styled(CardContent)`
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx
index 6c7eeeed8..24bc59d52 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsSummaryCard.tsx
@@ -1,8 +1,7 @@
-import { ReactNode } from 'react';
 import styled from '@emotion/styled';
+import { ReactNode } from 'react';
 
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 type SettingsSummaryCardProps = {
   title: ReactNode;
diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx
index bf02470ca..29064d6e1 100644
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelPreviewFormCard.tsx
@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
 import { ReactNode } from 'react';
 
 import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 type SettingsDataModelPreviewFormCardProps = {
   className?: string;
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx
index c737fab7d..106fbac9a 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/boolean/components/SettingsDataModelFieldBooleanForm.tsx
@@ -1,12 +1,11 @@
-import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
-import { IconCheck, IconX } from 'twenty-ui';
+import { Controller, useFormContext } from 'react-hook-form';
+import { IconCheck, IconX, CardContent } from 'twenty-ui';
 import { z } from 'zod';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { useBooleanSettingsFormInitialValues } from '@/settings/data-model/fields/forms/boolean/hooks/useBooleanSettingsFormInitialValues';
 import { Select } from '@/ui/input/components/Select';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { isDefined } from '~/utils/isDefined';
 
 export const settingsDataModelFieldBooleanFormSchema = z.object({
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx
index 52b0a4d01..8c0c63947 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/currency/components/SettingsDataModelFieldCurrencyForm.tsx
@@ -6,7 +6,7 @@ import { currencyFieldDefaultValueSchema } from '@/object-record/record-field/va
 import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes';
 import { useCurrencySettingsFormInitialValues } from '@/settings/data-model/fields/forms/currency/hooks/useCurrencySettingsFormInitialValues';
 import { Select } from '@/ui/input/components/Select';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { CardContent } from 'twenty-ui';
 import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToString';
 
 export const settingsDataModelFieldCurrencyFormSchema = z.object({
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
index c7d029abe..c90fba312 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
@@ -5,8 +5,7 @@ import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { StyledFormCardTitle } from '@/settings/data-model/fields/components/StyledFormCardTitle';
 import { SettingsDataModelFieldToggle } from '@/settings/data-model/fields/forms/components/SettingsDataModelFieldToggle';
 import { useDateSettingsFormInitialValues } from '@/settings/data-model/fields/forms/date/hooks/useDateSettingsFormInitialValues';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { IconClockShare } from 'twenty-ui';
+import { IconClockShare, CardContent } from 'twenty-ui';
 
 export const settingsDataModelFieldDateFormSchema = z.object({
   settings: z
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
index 3a80bf0e6..ec5686ff3 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
@@ -4,7 +4,7 @@ import { z } from 'zod';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { numberFieldDefaultValueSchema } from '@/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema';
 import { SettingsDataModelFieldNumberDecimalsInput } from '@/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberDecimalInput';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { CardContent } from 'twenty-ui';
 import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/number';
 
 export const settingsDataModelFieldNumberFormSchema = z.object({
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
index f78a23b45..6796f34a2 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
@@ -1,7 +1,14 @@
 import styled from '@emotion/styled';
 import { DropResult } from '@hello-pangea/dnd';
 import { Controller, useFormContext } from 'react-hook-form';
-import { IconPlus, IconTool, LightButton, MAIN_COLORS } from 'twenty-ui';
+import {
+  CardContent,
+  CardFooter,
+  IconPlus,
+  IconTool,
+  LightButton,
+  MAIN_COLORS,
+} from 'twenty-ui';
 import { z } from 'zod';
 
 import {
@@ -14,8 +21,6 @@ import { selectFieldDefaultValueSchema } from '@/object-record/record-field/vali
 import { useSelectSettingsFormInitialValues } from '@/settings/data-model/fields/forms/select/hooks/useSelectSettingsFormInitialValues';
 import { generateNewSelectOption } from '@/settings/data-model/fields/forms/select/utils/generateNewSelectOption';
 import { isSelectOptionDefaultValue } from '@/settings/data-model/utils/isSelectOptionDefaultValue';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
index c052e01ff..ce3f80b64 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx
@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 
 import {
-  SettingsDataModelFieldPreview,
+  // eslint-disable-next-line prettier/prettier
+    SettingsDataModelFieldPreview,
   SettingsDataModelFieldPreviewProps,
 } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview';
 import { SettingsDataModelObjectSummary } from '@/settings/data-model/objects/components/SettingsDataModelObjectSummary';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 export type SettingsDataModelFieldPreviewCardProps =
   SettingsDataModelFieldPreviewProps & {
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
index d260936f3..2dcb375d9 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectCoverImage.tsx
@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
-import { FloatingButton, IconEye } from 'twenty-ui';
-
-import { Card } from '@/ui/layout/card/components/Card';
+import { Card, FloatingButton, IconEye } from 'twenty-ui';
 
 import { SettingsPath } from '@/types/SettingsPath';
 import DarkCoverImage from '../../assets/cover-dark.png';
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx
index 4b2782b69..228df4c44 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectSettingsFormCard.tsx
@@ -11,8 +11,7 @@ import {
   SettingsDataModelObjectIdentifiersForm,
   SettingsDataModelObjectIdentifiersFormValues,
 } from '@/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 type SettingsDataModelObjectSettingsFormCardProps = {
   objectMetadataItem: ObjectMetadataItem;
diff --git a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx
index 4b66adedc..3be1ee397 100644
--- a/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationPreview.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { Card, CardContent } from 'twenty-ui';
 
 import PreviewBackgroundImage from '../assets/preview-background.svg';
 import SyncImage from '../assets/sync.svg?react';
diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListEmptyStateCard.tsx
index f7bffb918..7645a3213 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListEmptyStateCard.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListEmptyStateCard.tsx
@@ -2,11 +2,8 @@
 
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
-import { Card } from '@/ui/layout/card/components/Card';
-import { CardContent } from '@/ui/layout/card/components/CardContent';
-import { CardHeader } from '@/ui/layout/card/components/CardHeader';
 import styled from '@emotion/styled';
-import { Button, IconKey } from 'twenty-ui';
+import { Button, Card, CardContent, CardHeader, IconKey } from 'twenty-ui';
 
 const StyledHeader = styled(CardHeader)`
   align-items: center;
diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx
index b2855d93b..73c8aa42d 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx
@@ -2,10 +2,9 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
-import { Card } from '@/ui/layout/card/components/Card';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
-import { IconLink, Toggle } from 'twenty-ui';
+import { IconLink, Toggle, Card } from 'twenty-ui';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
 
 const StyledToggle = styled(Toggle)`
diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/Card.tsx b/packages/twenty-ui/src/layout/card/components/Card.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/ui/layout/card/components/Card.tsx
rename to packages/twenty-ui/src/layout/card/components/Card.tsx
diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/CardContent.tsx b/packages/twenty-ui/src/layout/card/components/CardContent.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/ui/layout/card/components/CardContent.tsx
rename to packages/twenty-ui/src/layout/card/components/CardContent.tsx
diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx b/packages/twenty-ui/src/layout/card/components/CardFooter.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/ui/layout/card/components/CardFooter.tsx
rename to packages/twenty-ui/src/layout/card/components/CardFooter.tsx
diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/CardHeader.tsx b/packages/twenty-ui/src/layout/card/components/CardHeader.tsx
similarity index 100%
rename from packages/twenty-front/src/modules/ui/layout/card/components/CardHeader.tsx
rename to packages/twenty-ui/src/layout/card/components/CardHeader.tsx
diff --git a/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx b/packages/twenty-ui/src/layout/card/components/__stories__/Card.stories.tsx
similarity index 94%
rename from packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx
rename to packages/twenty-ui/src/layout/card/components/__stories__/Card.stories.tsx
index dd8e61973..aaaa9e642 100644
--- a/packages/twenty-front/src/modules/ui/layout/card/components/__stories__/Card.stories.tsx
+++ b/packages/twenty-ui/src/layout/card/components/__stories__/Card.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { ComponentDecorator } from 'twenty-ui';
+import { ComponentDecorator } from '@ui/testing';
 
 import { Card } from '../Card';
 import { CardContent } from '../CardContent';
diff --git a/packages/twenty-ui/src/layout/index.ts b/packages/twenty-ui/src/layout/index.ts
index 8bd6c13dc..f650ba537 100644
--- a/packages/twenty-ui/src/layout/index.ts
+++ b/packages/twenty-ui/src/layout/index.ts
@@ -5,4 +5,8 @@ export * from './animated-placeholder/constants/Background';
 export * from './animated-placeholder/constants/DarkBackground';
 export * from './animated-placeholder/constants/DarkMovingImage';
 export * from './animated-placeholder/constants/MovingImage';
+export * from './card/components/Card';
+export * from './card/components/CardContent';
+export * from './card/components/CardFooter';
+export * from './card/components/CardHeader';
 export * from './expandableContainer/components/ExpandableContainer';