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>
 );