Migrate to twenty-ui - display (#8004)

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

 --- 

### Description

Migrate:

- Info display component
- Status display component
- SeparatorLineText display component

### Demo

###### SeparatorLineText In Storybook


![](https://assets-service.gitstart.com/4814/c0a2cd49-e545-469a-b3d3-c02eb462b60d.png)

Info Component on Storybook


![](https://assets-service.gitstart.com/4814/6f3019c5-99e0-4365-a81e-241294887f9e.png)

Status Component on Storybook


![](https://assets-service.gitstart.com/4814/29b5142a-468f-4d7e-88ff-4f3bfdd5abda.png)

###### Fixes twentyhq/private-issues#95

---------

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

packages/twenty-ui/src/display/text/components/SeparatorLineText.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const StyledContainer = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  color: ${({ theme }) => theme.font.color.extraLight};
+
+  &:before,
+  &:after {
+    content: '';
+    height: 1px;
+    flex-grow: 1;
+    background: ${({ theme }) => theme.background.transparent.light};
+  }
+
+  &:before {
+    margin: 0 ${({ theme }) => theme.spacing(4)} 0 0;
+  }
+  &:after {
+    margin: 0 0 0 ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+export const SeparatorLineText = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <StyledContainer>{children}</StyledContainer>;
+};

packages/twenty-ui/src/display/text/components/__stories__/SeparatorLineText.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from '@ui/testing';
+
+import { SeparatorLineText } from '../SeparatorLineText';
+
+const meta: Meta<typeof SeparatorLineText> = {
+  title: 'UI/Display/Text/SeparatorLineText',
+  component: SeparatorLineText,
+  args: { children: 'Or' },
+  decorators: [ComponentDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof SeparatorLineText>;
+
+export const Default: Story = {};