[REFACTOR] Twenty UI multi barrel (#11301)

# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203

packages/twenty-ui/src/components/chip/Chip.tsx

@@ -0,0 +1,156 @@
+import { Theme, withTheme } from '@emotion/react';
+import { styled } from '@linaria/react';
+import { ReactNode } from 'react';
+
+import { OverflowingTextWithTooltip } from '@ui/display/tooltip/OverflowingTextWithTooltip';
+
+export enum ChipSize {
+  Large = 'large',
+  Small = 'small',
+}
+
+export enum ChipAccent {
+  TextPrimary = 'text-primary',
+  TextSecondary = 'text-secondary',
+}
+
+export enum ChipVariant {
+  Highlighted = 'highlighted',
+  Regular = 'regular',
+  Transparent = 'transparent',
+  Rounded = 'rounded',
+}
+
+export type ChipProps = {
+  size?: ChipSize;
+  disabled?: boolean;
+  clickable?: boolean;
+  label: string;
+  isLabelHidden?: boolean;
+  maxWidth?: number;
+  variant?: ChipVariant;
+  accent?: ChipAccent;
+  leftComponent?: (() => ReactNode) | null;
+  rightComponent?: (() => ReactNode) | null;
+  className?: string;
+};
+
+const StyledContainer = withTheme(styled.div<
+  Pick<
+    ChipProps,
+    'accent' | 'clickable' | 'disabled' | 'maxWidth' | 'size' | 'variant'
+  > & { theme: Theme }
+>`
+  --chip-horizontal-padding: ${({ theme }) => theme.spacing(1)};
+  --chip-vertical-padding: ${({ theme }) => theme.spacing(1)};
+
+  text-decoration: none;
+  align-items: center;
+
+  color: ${({ theme, accent, disabled }) =>
+    disabled
+      ? theme.font.color.light
+      : accent === ChipAccent.TextPrimary
+        ? theme.font.color.primary
+        : theme.font.color.secondary};
+
+  cursor: ${({ clickable, disabled, variant }) =>
+    variant === ChipVariant.Transparent
+      ? 'inherit'
+      : clickable
+        ? 'pointer'
+        : disabled
+          ? 'not-allowed'
+          : 'inherit'};
+
+  display: inline-flex;
+  justify-content: flex-start;
+  gap: ${({ theme }) => theme.spacing(1)};
+  height: ${({ theme, size }) =>
+    size === ChipSize.Large ? theme.spacing(4) : theme.spacing(3)};
+  max-width: ${({ maxWidth }) =>
+    maxWidth
+      ? `calc(${maxWidth}px - 2 * var(--chip-horizontal-padding))`
+      : '200px'};
+  overflow: hidden;
+  padding: var(--chip-vertical-padding) var(--chip-horizontal-padding);
+  user-select: none;
+
+  font-weight: ${({ theme, accent }) =>
+    accent === ChipAccent.TextSecondary ? theme.font.weight.medium : 'inherit'};
+
+  &:hover {
+    background-color: ${({ theme, variant, disabled }) =>
+      variant === ChipVariant.Regular && !disabled
+        ? theme.background.transparent.light
+        : variant === ChipVariant.Highlighted
+          ? theme.background.transparent.medium
+          : 'inherit'};
+  }
+
+  &:active {
+    background-color: ${({ theme, disabled, variant }) =>
+      variant === ChipVariant.Regular && !disabled
+        ? theme.background.transparent.medium
+        : variant === ChipVariant.Highlighted
+          ? theme.background.transparent.strong
+          : 'inherit'};
+  }
+
+  background-color: ${({ theme, variant }) =>
+    variant === ChipVariant.Highlighted
+      ? theme.background.transparent.light
+      : variant === ChipVariant.Rounded
+        ? theme.background.transparent.lighter
+        : 'inherit'};
+
+  border: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded
+      ? `1px solid ${theme.border.color.medium}`
+      : 'none'};
+
+  border-radius: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? '50px' : theme.border.radius.sm};
+
+  & > svg {
+    flex-shrink: 0;
+  }
+
+  padding-left: ${({ theme, variant }) =>
+    variant === ChipVariant.Transparent
+      ? theme.spacing(0)
+      : 'var(--chip-horizontal-padding)'};
+`);
+
+export const Chip = ({
+  size = ChipSize.Small,
+  label,
+  isLabelHidden = false,
+  disabled = false,
+  clickable = true,
+  variant = ChipVariant.Regular,
+  leftComponent = null,
+  rightComponent = null,
+  accent = ChipAccent.TextPrimary,
+  className,
+  maxWidth,
+}: ChipProps) => {
+  return (
+    <StyledContainer
+      data-testid="chip"
+      accent={accent}
+      clickable={clickable}
+      disabled={disabled}
+      size={size}
+      variant={variant}
+      className={className}
+      maxWidth={maxWidth}
+    >
+      {leftComponent?.()}
+      {!isLabelHidden && (
+        <OverflowingTextWithTooltip size={size} text={label} />
+      )}
+      {rightComponent?.()}
+    </StyledContainer>
+  );
+};