Migrate to twenty-ui - layout/section (#8068)

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

 --- 

Description \
\
Move Section component from twenty-front to twenty-ui and update
imports\
\
\
Fixes twentyhq/private-issues#85

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>

packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx

@@ -1,17 +1,20 @@
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 import { ReactNode, useState } from 'react';
-import { Button, ButtonAccent, H1Title, H1TitleFontColor } from 'twenty-ui';
+import {
+  Button,
+  ButtonAccent,
+  H1Title,
+  H1TitleFontColor,
+  Section,
+  SectionAlignment,
+  SectionFontColor,
+} from 'twenty-ui';
 import { useDebouncedCallback } from 'use-debounce';
 
 import { TextInput } from '@/ui/input/components/TextInput';
 
 import { Modal, ModalVariants } from '@/ui/layout/modal/components/Modal';
-import {
-  Section,
-  SectionAlignment,
-  SectionFontColor,
-} from '@/ui/layout/section/components/Section';
 
 export type ConfirmationModalProps = {
   isOpen: boolean;

packages/twenty-front/src/modules/ui/layout/section/components/Section.tsx

@@ -1,48 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-
-type SectionProps = {
-  children: ReactNode;
-  className?: string;
-  alignment?: SectionAlignment;
-  fullWidth?: boolean;
-  fontColor?: SectionFontColor;
-};
-
-export enum SectionAlignment {
-  Left = 'left',
-  Center = 'center',
-}
-
-export enum SectionFontColor {
-  Primary = 'primary',
-  Secondary = 'secondary',
-  Tertiary = 'tertiary',
-}
-
-const StyledSection = styled.div<{
-  alignment: SectionAlignment;
-  fullWidth: boolean;
-  fontColor: SectionFontColor;
-}>`
-  color: ${({ theme, fontColor }) => theme.font.color[fontColor]};
-  text-align: ${({ alignment }) => alignment};
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-`;
-
-export const Section = ({
-  children,
-  className,
-  alignment = SectionAlignment.Left,
-  fullWidth = true,
-  fontColor = SectionFontColor.Primary,
-}: SectionProps) => (
-  <StyledSection
-    className={className}
-    alignment={alignment}
-    fullWidth={fullWidth}
-    fontColor={fontColor}
-  >
-    {children}
-  </StyledSection>
-);