feat(FilteredSearch): remove support for sx and styled (#6840)

Author: joshblack

.changeset/rotten-carpets-raise.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove support for `sx` prop from `deprecated/FilteredSearch`

packages/react/src/deprecated/FilteredSearch/FilteredSearch.module.css

@@ -0,0 +1,19 @@
+.FilteredSearch {
+  display: flex;
+  align-items: stretch;
+
+  & summary,
+  & > button {
+    border-radius: 0;
+    border-top-left-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+    border-right: 0;
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  & :global(.TextInput-wrapper) {
+    border-radius: 0;
+    border-top-right-radius: var(--borderRadius-medium);
+    border-bottom-right-radius: var(--borderRadius-medium);
+  }
+}

packages/react/src/deprecated/FilteredSearch/FilteredSearch.tsx

@@ -1,32 +1,19 @@
-import styled from 'styled-components'
-import {get} from '../../constants'
-import type {SxProp} from '../../sx'
-import sx from '../../sx'
-import type {ComponentProps} from '../../utils/types'
+import {clsx} from 'clsx'
+import classes from './FilteredSearch.module.css'
+
+type FilteredSearchProps = React.HTMLAttributes<HTMLElement>
 
 /**
  * @deprecated A new filter component is in progress.
  * Until the new filter component is ready, you can use Button + TextInput + ActionList to reproduce this pattern.
  */
-const FilteredSearch = styled.div<SxProp>`
-  display: flex;
-  align-items: stretch;
-
-  summary,
-  > button {
-    border-radius: 0;
-    border-top-left-radius: ${get('radii.2')};
-    border-bottom-left-radius: ${get('radii.2')};
-    border-right: 0;
-  }
-  .TextInput-wrapper {
-    border-radius: 0;
-    border-top-right-radius: ${get('radii.2')};
-    border-bottom-right-radius: ${get('radii.2')};
-  }
-
-  ${sx}
-`
+function FilteredSearch({children, className, ...rest}: FilteredSearchProps) {
+  return (
+    <div {...rest} className={clsx(classes.FilteredSearch, className)}>
+      {children}
+    </div>
+  )
+}
 
-export type FilteredSearchProps = ComponentProps<typeof FilteredSearch>
+export type {FilteredSearchProps}
 export default FilteredSearch