Remove all styled(Component) patterns in favor of parent wrappers and props (#18430)

## Summary

Eliminates all ~350 `styled(Component)` usages across `twenty-front` and
`twenty-ui` (212 files changed). Each was replaced following these
rules:

- **Margin/layout CSS** (margin, padding, flex, align-self, width) →
wrapped in a `styled.div`/`styled.span` parent container
- **Third-party components** (Link, TextareaAutosize,
ReactPhoneNumberInput, Handle, etc.) → parent container with child CSS
selectors (`> a`, `> textarea`, `> input`, etc.)
- **Intrinsic behavior via existing props** (TableRow
`gridTemplateColumns`, TableCell `color`/`align`) → replaced
`styled(TableRow)` / `styled(TableCell)` with direct prop usage
- **Other visual overrides on twenty-ui components** (Card, Section,
TabList, Button, MenuItem, ScrollWrapper, etc.) → parent wrappers with
`> div` / `> *` child selectors
- **Extending styled.div/span** → merged all CSS into a single
`styled.div`/`styled.span`

Also adds `overflow: hidden` to parent containers wrapping
`ScrollWrapper` so scroll activates correctly with the new wrapper
structure.

### Migration patterns

| Before | After |
|--------|-------|
| `styled(Avatar)` with `margin-right` | `<StyledAvatarContainer><Avatar
/></StyledAvatarContainer>` |
| `styled(Link)` with `text-decoration: none` |
`<StyledLinkContainer><Link /></StyledLinkContainer>` with `> a { ... }`
|
| `styled(TableRow)` with `grid-template-columns` | `<TableRow
gridTemplateColumns="..." />` |
| `styled(TableCell)` with `color` / `align` | `<TableCell color={...}
align="right" />` |
| `styled(Card)` with `margin-top` | `<StyledCardContainer><Card
/></StyledCardContainer>` |
| `styled(TabList)` with `background` |
`<StyledTabListContainer><TabList /></StyledTabListContainer>` with `>
div { ... }` |
| `styled(StyledBase)` extending a `styled.div` | Single merged
`styled.div` with all styles inlined |

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

@@ -13,8 +13,9 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 import { Tag, type TagColor } from 'twenty-ui/components';
 import { IconChevronDown } from 'twenty-ui/display';
 import { type SelectOption } from 'twenty-ui/input';
-const StyledIconChevronDown = styled(IconChevronDown)`
+const StyledIconChevronDownContainer = styled.div`
   color: ${themeCssVariables.font.color.tertiary};
+  display: flex;
 `;
 
 export type SubMatchingSelectDropdownButtonProps = {
@@ -40,7 +41,9 @@ export const SubMatchingSelectDropdownButton = ({
         text={value?.label ?? placeholder}
         color={value?.color as TagColor}
       />
-      <StyledIconChevronDown size={theme.icon.size.md} />
+      <StyledIconChevronDownContainer>
+        <IconChevronDown size={theme.icon.size.md} />
+      </StyledIconChevronDownContainer>
     </SubMatchingSelectControlContainer>
   );
 };

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

@@ -4,13 +4,15 @@ import { Banner, IconChevronDown, IconInfoCircle } from 'twenty-ui/display';
 import { useContext } from 'react';
 import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
-const StyledBanner = styled(Banner)<{ allMatched: boolean }>`
-  background: ${({ allMatched }) =>
-    allMatched
-      ? themeCssVariables.accent.secondary
-      : themeCssVariables.background.transparent.light};
-  border-radius: ${themeCssVariables.spacing[2]};
-  padding: ${themeCssVariables.spacing[2]} 10px;
+const StyledBannerContainer = styled.div<{ allMatched: boolean }>`
+  > div {
+    background: ${({ allMatched }) =>
+      allMatched
+        ? themeCssVariables.accent.secondary
+        : themeCssVariables.background.transparent.light};
+    border-radius: ${themeCssVariables.spacing[2]};
+    padding: ${themeCssVariables.spacing[2]} 10px;
+  }
 `;
 
 const StyledText = styled.div<{ allMatched: boolean }>`
@@ -65,24 +67,26 @@ export const UnmatchColumnBanner = ({
   const { theme } = useContext(ThemeContext);
 
   return (
-    <StyledBanner allMatched={allMatched}>
-      <IconInfoCircle
-        color={allMatched ? theme.color.blue : theme.font.color.secondary}
-        size={theme.icon.size.md}
-      />
-      {isDefined(buttonOnClick) ? (
-        <StyledClickableContainer onClick={buttonOnClick}>
+    <StyledBannerContainer allMatched={allMatched}>
+      <Banner>
+        <IconInfoCircle
+          color={allMatched ? theme.color.blue : theme.font.color.secondary}
+          size={theme.icon.size.md}
+        />
+        {isDefined(buttonOnClick) ? (
+          <StyledClickableContainer onClick={buttonOnClick}>
+            <StyledText allMatched={allMatched}>{message}</StyledText>
+            <StyledIconChevronDownWrapper
+              isExpanded={isExpanded}
+              allMatched={allMatched}
+            >
+              <IconChevronDown size={theme.icon.size.md} />
+            </StyledIconChevronDownWrapper>
+          </StyledClickableContainer>
+        ) : (
           <StyledText allMatched={allMatched}>{message}</StyledText>
-          <StyledIconChevronDownWrapper
-            isExpanded={isExpanded}
-            allMatched={allMatched}
-          >
-            <IconChevronDown size={theme.icon.size.md} />
-          </StyledIconChevronDownWrapper>
-        </StyledClickableContainer>
-      ) : (
-        <StyledText allMatched={allMatched}>{message}</StyledText>
-      )}
-    </StyledBanner>
+        )}
+      </Banner>
+    </StyledBannerContainer>
   );
 };

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

@@ -15,7 +15,7 @@ import { SpreadsheetImportStepType } from '@/spreadsheet-import/steps/types/Spre
 import { useLingui } from '@lingui/react/macro';
 import { SelectHeaderTable } from './components/SelectHeaderTable';
 
-const StyledHeading = styled(Heading)`
+const StyledHeadingContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[8]};
 `;
 
@@ -105,7 +105,9 @@ export const SelectHeaderStep = ({
   return (
     <>
       <ModalContent>
-        <StyledHeading title={t`Select header row`} />
+        <StyledHeadingContainer>
+          <Heading title={t`Select header row`} />
+        </StyledHeadingContainer>
         <StyledTableContainer>
           <SelectHeaderTable
             importedRows={importedRows}

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

@@ -11,20 +11,16 @@ import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook';
 
 import { ModalContent } from 'twenty-ui/layout';
 import { useLingui } from '@lingui/react/macro';
-import { Radio, RadioGroup } from 'twenty-ui/input';
+import { Radio } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 import { type WorkBook } from 'xlsx-ugnis';
 
-const StyledHeading = styled(Heading)`
-  display: flex;
-`;
-
 const StyledRadioContainer = styled.div`
   display: flex;
   flex-direction: column;
 `;
 
-const StyledRadio = styled(Radio)`
+const StyledRadioItemContainer = styled.div`
   margin-bottom: ${themeCssVariables.spacing[6]};
 `;
 
@@ -104,17 +100,20 @@ export const SelectSheetStep = ({
   return (
     <>
       <ModalContent isVerticallyCentered isHorizontallyCentered gap={8}>
-        <StyledHeading title={t`Select the sheet to use`} />
+        <Heading title={t`Select the sheet to use`} />
         <StyledRadioContainer>
-          <RadioGroup onValueChange={(value) => setValue(value)} value={value}>
-            {sheetNames.map((sheetName) => (
-              <StyledRadio
+          {sheetNames.map((sheetName) => (
+            <StyledRadioItemContainer key={sheetName}>
+              <Radio
                 value={sheetName}
-                key={sheetName}
                 label={sheetName}
+                checked={value === sheetName}
+                onCheckedChange={(checked) => {
+                  if (checked) setValue(sheetName);
+                }}
               />
-            ))}
-          </RadioGroup>
+            </StyledRadioItemContainer>
+          ))}
         </StyledRadioContainer>
       </ModalContent>
       <StepNavigationButton

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

@@ -56,8 +56,10 @@ const StyledToolbar = styled.div`
   box-shadow: ${themeCssVariables.boxShadow.strong};
 `;
 
-const StyledButton = styled(Button)`
-  height: 24px;
+const StyledButtonContainer = styled.div`
+  > button {
+    height: 24px;
+  }
 `;
 
 const StyledErrorToggle = styled.div`
@@ -323,13 +325,15 @@ export const ValidationStep = ({
                 <Trans>Show only rows with errors</Trans>
               </StyledErrorToggleDescription>
             </StyledErrorToggle>
-            <StyledButton
-              Icon={IconTrash}
-              title={t`Remove`}
-              accent="default"
-              onClick={deleteSelectedRows}
-              disabled={selectedRows.size === 0}
-            />
+            <StyledButtonContainer>
+              <Button
+                Icon={IconTrash}
+                title={t`Remove`}
+                accent="default"
+                onClick={deleteSelectedRows}
+                disabled={selectedRows.size === 0}
+              />
+            </StyledButtonContainer>
           </StyledToolbar>
         </StyledContentWrapper>
       </ModalContent>