Fix React warnings for custom props on styled DOM elements (#17553)

React was warning that custom props like `isExpanded` and `allMatched`
were being passed to DOM elements (SVG icons and divs), which only
accept standard HTML/SVG attributes.

## Changes

Added `shouldForwardProp` configuration to styled components to filter
out custom props before they reach the DOM:

```typescript
import isPropValid from '@emotion/is-prop-valid';

const StyledChevronIcon = styled(IconChevronDown, {
  shouldForwardProp: (prop) =>
    isPropValid(prop) && prop !== 'isExpanded',
})<{ isExpanded: boolean }>`
  transform: ${({ isExpanded }) => isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'};
`;
```

This pattern is already used in other components (e.g.,
`NavigationDrawerItem`, `TableRow`) and ensures custom props are
available for styling logic but don't leak to the underlying DOM
element.

## Files Modified

- `FieldsWidgetSectionContainer.tsx` - `isExpanded` on icon component
- `UnmatchColumnBanner.tsx` - `isExpanded`, `allMatched` on icon, div,
and Banner components

<!-- START COPILOT CODING AGENT TIPS -->
---

💡 You can make Copilot smarter by setting up custom instructions,
customizing its development environment and configuring Model Context
Protocol (MCP) servers. Learn more [Copilot coding agent
tips](https://gh.io/copilot-coding-agent-tips) in the docs.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Devessier <29370468+Devessier@users.noreply.github.com>
Co-authored-by: Devessier <baptiste@devessier.fr>

packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsWidgetSectionContainer.tsx

@@ -1,4 +1,5 @@
 import { useTheme } from '@emotion/react';
+import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 import { useState } from 'react';
 import { IconChevronDown } from 'twenty-ui/display';
@@ -17,7 +18,9 @@ const StyledTitleLabel = styled.div`
   font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 
-const StyledChevronIcon = styled(IconChevronDown)<{ isExpanded: boolean }>`
+const StyledChevronIcon = styled(IconChevronDown, {
+  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'isExpanded',
+})<{ isExpanded: boolean }>`
   color: ${({ theme }) => theme.font.color.tertiary};
   transform: ${({ isExpanded }) =>
     isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'};

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UnmatchColumnBanner.tsx

@@ -1,16 +1,21 @@
 import { useTheme } from '@emotion/react';
+import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
 import { Banner, IconChevronDown, IconInfoCircle } from 'twenty-ui/display';
 
-const StyledBanner = styled(Banner)<{ allMatched: boolean }>`
+const StyledBanner = styled(Banner, {
+  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'allMatched',
+})<{ allMatched: boolean }>`
   background: ${({ allMatched, theme }) =>
     allMatched ? theme.accent.secondary : theme.background.transparent.light};
   border-radius: ${({ theme }) => theme.spacing(2)};
   padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(2.5)};
 `;
 
-const StyledText = styled.div<{ allMatched: boolean }>`
+const StyledText = styled('div', {
+  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'allMatched',
+})<{ allMatched: boolean }>`
   color: ${({ allMatched, theme }) =>
     allMatched ? theme.color.blue : theme.font.color.secondary};
   flex: 1;
@@ -19,7 +24,10 @@ const StyledText = styled.div<{ allMatched: boolean }>`
   white-space: nowrap;
 `;
 
-const StyledTransitionedIconChevronDown = styled(IconChevronDown)<{
+const StyledTransitionedIconChevronDown = styled(IconChevronDown, {
+  shouldForwardProp: (prop) =>
+    isPropValid(prop) && !['isExpanded', 'allMatched'].includes(prop),
+})<{
   isExpanded: boolean;
   allMatched: boolean;
 }>`