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-ui/src/layout/index.ts

@@ -10,3 +10,4 @@ export * from './card/components/CardContent';
 export * from './card/components/CardFooter';
 export * from './card/components/CardHeader';
 export * from './expandableContainer/components/ExpandableContainer';
+export * from './section/components/Section';

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

@@ -0,0 +1,48 @@
+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>
+);