removed @chakra-ui dependencies (#7004)

Issue #6976 
@FelixMalfait 

I could not do
```
import { Banner } from 'twenty-ui';

const StyledBanner = styled(Banner)
  display: flex;
  align-items: center;
  padding: ${({ theme }) => theme.spacing(8)};
  position: absolute;
  border-radius: 8px;
  &:hover {
    background-color: ${({ theme }) => theme.accent.primary};
  }
;
```
The styles wont get overridden for Banner, so for now I styled a new
banner in `UnmatchColumnBanner` which is inconsistent.
I couldnt figure out why css properties are not being overridden, need
help!

@Bonapara 
Question - 
Should the click work on entire banner or just cheveron? For now it just
on cheveron click.


https://github.com/user-attachments/assets/0f409e78-a341-4f26-af74-117e4b2775a9

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/display/banner/components/Banner.tsx

@@ -22,12 +22,18 @@ const StyledBanner = styled.div<{ variant?: BannerVariant }>`
 
 export type BannerVariant = 'danger' | 'default';
 
+type BannerProps = {
+  variant?: BannerVariant;
+  className?: string;
+  children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
 export const Banner = ({
   variant = 'default',
+  className,
   children,
-}: {
-  variant?: BannerVariant;
-  children: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>) => (
-  <StyledBanner variant={variant}>{children}</StyledBanner>
+}: BannerProps) => (
+  <StyledBanner variant={variant} className={className}>
+    {children}
+  </StyledBanner>
 );

packages/twenty-ui/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components';
 export * from './display';
+export * from './layout';
 export * from './testing';
 export * from './theme';
 export * from './utilities';

packages/twenty-ui/src/layout/expandableContainer/components/ExpandableContainer.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import { isDefined } from '@ui/utilities';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+
+const StyledTransitionContainer = styled.div<{
+  isExpanded: boolean;
+  height: number;
+}>`
+  max-height: ${({ isExpanded, height }) => (isExpanded ? `${height}px` : '0')};
+  overflow: hidden;
+  position: relative;
+  transition: max-height
+    ${({ theme, isExpanded }) =>
+      `${theme.animation.duration.normal}s ${isExpanded ? 'ease-in' : 'ease-out'}`};
+`;
+
+type ExpandableContainerProps = {
+  isExpanded: boolean;
+  children: React.ReactNode;
+};
+
+export const ExpandableContainer = ({
+  isExpanded,
+  children,
+}: ExpandableContainerProps) => {
+  const [contentHeight, setContentHeight] = useState(0);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    if (isDefined(contentRef.current)) {
+      setContentHeight(contentRef.current.scrollHeight);
+    }
+  }, [isExpanded]);
+
+  return (
+    <StyledTransitionContainer isExpanded={isExpanded} height={contentHeight}>
+      <div ref={contentRef}>{children}</div>
+    </StyledTransitionContainer>
+  );
+};
+
+export default ExpandableContainer;

packages/twenty-ui/src/layout/expandableContainer/components/__stories__/ExpandableContainer.stories.tsx

@@ -0,0 +1,81 @@
+import styled from '@emotion/styled';
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from '@ui/testing';
+import { useState } from 'react';
+import ExpandableContainer from '../ExpandableContainer';
+
+const StyledButton = styled.button`
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(4)};
+  background-color: ${({ theme }) => theme.color.blue50};
+  color: ${({ theme }) => theme.font.color.primary};
+  border: none;
+  border-radius: ${({ theme }) => theme.spacing(1)};
+  cursor: pointer;
+  margin-bottom: ${({ theme }) => theme.spacing(3)};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.blue40};
+  }
+`;
+
+const StyledContent = styled.div`
+  background-color: ${({ theme }) => theme.background.primary};
+  height: 200px;
+  padding: ${({ theme }) => theme.spacing(3)};
+
+  p {
+    color: ${({ theme }) => theme.font.color.primary};
+    margin-bottom: ${({ theme }) => theme.spacing(2)};
+    font-size: ${({ theme }) => theme.font.size.md};
+  }
+`;
+
+const ExpandableContainerWithButton = (args: any) => {
+  const [isExpanded, setIsExpanded] = useState(args.isExpanded);
+
+  return (
+    <div>
+      <StyledButton onClick={() => setIsExpanded(!isExpanded)}>
+        {isExpanded ? 'Collapse' : 'Expand'}
+      </StyledButton>
+      <ExpandableContainer isExpanded={isExpanded}>
+        <StyledContent>
+          <p>
+            This is some content inside the ExpandableContainer. It will grow
+            and shrink depending on the expand/collapse state.
+          </p>
+          <p>
+            Add more text or even other components here to test how the
+            container handles more content.
+          </p>
+          <p>
+            Feel free to adjust the height and content to see how it affects the
+            expand/collapse behavior.
+          </p>
+        </StyledContent>
+      </ExpandableContainer>
+    </div>
+  );
+};
+
+const meta: Meta<typeof ExpandableContainer> = {
+  title: 'UI/Layout/ExpandableContainer',
+  component: ExpandableContainerWithButton,
+  decorators: [ComponentDecorator],
+  argTypes: {
+    isExpanded: {
+      control: 'boolean',
+      description: 'Controls whether the container is expanded or collapsed',
+      defaultValue: false,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ExpandableContainerWithButton>;
+
+export const Default: Story = {
+  args: {
+    isExpanded: false,
+  },
+};

packages/twenty-ui/src/layout/index.ts

@@ -0,0 +1 @@
+export * from './expandableContainer/components/ExpandableContainer';