@sproutsocial/seeds-react-menu 1.17.0 → 1.18.1

package/src/v3/Common/ComboboxStyles.tsx

@@ -1,319 +1,250 @@
+import * as React from "react";
 import { Combobox } from "@base-ui/react/combobox";
-import styled, { css } from "styled-components";
-import { focusRing } from "@sproutsocial/seeds-react-mixins";
 import Checkbox from "@sproutsocial/seeds-react-checkbox";
-import { StyledChevron } from "./SelectIcons";
-
-const invalidStyles = css`
-  border-color: ${({ theme }) => theme.colors.form.border.error};
-
-  ${StyledChevron} {
-    color: ${({ theme }) => theme.colors.icon.error};
-  }
-`;
-
-export const ComboboxLabel = styled.label`
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-
-export const ComboboxInputGroup = styled(Combobox.InputGroup)<{
+import { cn, type WithStringClassName } from "./cn";
+
+/**
+ * v3 Combobox / Searchable Select surface, rendered with CSS classes from
+ * menu.css (imported via @sproutsocial/seeds-react-menu/base/css) instead of
+ * styled-components. Each export keeps its previous name and forwards
+ * props/refs to the underlying Base UI component; the transient `$isInvalid`
+ * prop is translated to a modifier class here so call sites are unchanged.
+ */
+
+export const ComboboxLabel = React.forwardRef<
+  HTMLLabelElement,
+  React.ComponentProps<"label">
+>(({ className, ...rest }, ref) => (
+  <label ref={ref} className={cn("seeds-menu-label", className)} {...rest} />
+));
+ComboboxLabel.displayName = "ComboboxLabel";
+
+type InputGroupProps = WithStringClassName<
+  React.ComponentProps<typeof Combobox.InputGroup>
+> & {
   $isInvalid?: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  min-width: 160px;
-  border-radius: ${({ theme }) => theme.radii[500]};
-  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
-  background: ${({ theme }) => theme.colors.form.background.base};
-  color: ${({ theme }) => theme.colors.text.body};
-  transition: border-color ${({ theme }) => theme.duration.fast}
-      ${({ theme }) => theme.easing.ease_in},
-    box-shadow ${({ theme }) => theme.duration.fast}
-      ${({ theme }) => theme.easing.ease_in};
-
-  &:focus-within {
-    ${focusRing}
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles}
-`;
-
-export const ComboboxInput = styled(Combobox.Input)`
-  flex: 1;
-  min-width: 30px;
-  padding: ${({ theme }) => theme.space[300]};
-  border: none !important;
-  background: transparent;
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  line-height: ${({ theme }) => theme.typography[200].lineHeight};
-  color: ${({ theme }) => theme.colors.text.body};
-  outline: none;
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.text.subtext};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-
-export const ComboboxTokenInput = styled(Combobox.Input)`
-  flex: 1;
-  min-width: 60px;
-  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]}
-    ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[350]};
-  border: none !important;
-  background: transparent;
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  line-height: ${({ theme }) => theme.typography[200].lineHeight};
-  color: ${({ theme }) => theme.colors.text.body};
-  outline: none;
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.text.subtext};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-
-export const ComboboxActionButtons = styled.div`
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  margin-left: auto;
-  gap: ${({ theme }) => theme.space[100]};
-`;
-
-export const ComboboxClear = styled(Combobox.Clear).attrs({ tabIndex: 0 })`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border: none;
-  background: transparent;
-  color: ${({ theme }) => theme.colors.icon.base};
-  cursor: pointer;
-  border-radius: ${({ theme }) => theme.radii[300]};
-  padding: 0;
-
-  &:hover {
-    color: ${({ theme }) => theme.colors.text.body};
-  }
-
-  &:focus-visible {
-    ${focusRing}
-  }
-
-  &[data-empty] {
-    display: none;
-  }
-`;
-
-export const ComboboxTrigger = styled(Combobox.Trigger)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border: none;
-  background: transparent;
-  color: ${({ theme }) => theme.colors.icon.base};
-  cursor: default;
-  padding: 0;
-
-  &:hover {
-    color: ${({ theme }) => theme.colors.text.body};
-  }
-`;
-
-export const ComboboxPositioner = styled(Combobox.Positioner)`
-  width: var(--anchor-width);
-  z-index: 7;
-`;
-
-export const ComboboxPopup = styled(Combobox.Popup)`
-  font-family: ${({ theme }) => theme.fontFamily};
-  background: ${({ theme }) => theme.colors.container.background.base};
-  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
-  border-radius: ${({ theme }) => theme.radii[500]};
-  box-shadow: ${({ theme }) => theme.shadows.medium};
-  outline: none;
-  width: 100%;
-  max-height: min(var(--available-height, 400px), 400px);
-  overflow-y: auto;
-  padding: 0;
-
-  &[data-open] {
-    animation: combobox-popup-in 120ms ease-out;
-  }
-
-  &[data-closed] {
-    animation: combobox-popup-out 100ms ease-in;
-  }
-
-  @keyframes combobox-popup-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes combobox-popup-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-`;
-
-export const ComboboxList = styled(Combobox.List)`
-  padding: ${({ theme }) => theme.space[200]};
-
-  &:empty {
-    padding: 0;
-  }
-`;
-
-export const ComboboxStatus = styled(Combobox.Status)`
-  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[350]}`};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  color: ${({ theme }) => theme.colors.text.subtext};
-
-  &:empty {
-    padding: 0;
-  }
-`;
-
-export const ComboboxEmpty = styled(Combobox.Empty)`
-  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[350]}`};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  color: ${({ theme }) => theme.colors.text.subtext};
-
-  &:empty {
-    padding: 0;
-  }
-`;
-
-export const ComboboxItem = styled(Combobox.Item)`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]}`};
-  border-radius: ${({ theme }) => theme.radii[500]};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  color: ${({ theme }) => theme.colors.text.body};
-  cursor: default;
-  outline: none;
-
-  &[data-highlighted] {
-    background: ${({ theme }) => theme.colors.listItem.background.hover};
-  }
-
-  &[data-selected] {
-    font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  }
-
-  &[data-disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-
-export const ComboboxItemIndicator = styled(Combobox.ItemIndicator)`
-  display: flex;
-  align-items: center;
-  width: ${({ theme }) => theme.space[400]};
-  color: ${({ theme }) => theme.colors.text.body};
-  visibility: hidden;
-
-  &[data-selected] {
-    visibility: visible;
-  }
-`;
-
-export const ComboboxGroup = styled(Combobox.Group)`
-  display: block;
-`;
-
-export const ComboboxGroupLabel = styled(Combobox.GroupLabel)`
-  padding: ${({ theme }) =>
-    `${theme.space[300]} ${theme.space[300]} ${theme.space[200]}`};
-  font-size: ${({ theme }) => theme.typography[100].fontSize};
-  font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: ${({ theme }) => theme.colors.text.subtext};
-`;
-
-export const ComboboxSeparator = styled.div`
-  height: 1px;
-  margin: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
-  background: ${({ theme }) => theme.colors.container.border.base};
-`;
-
-export const ComboboxGroupHeaderItem = styled(Combobox.Item)`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]}`};
-  border-radius: ${({ theme }) => theme.radii[500]};
-  font-size: ${({ theme }) => theme.typography[100].fontSize};
-  font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: ${({ theme }) => theme.colors.text.subtext};
-  cursor: default;
-  outline: none;
-
-  &[data-highlighted] {
-    background: ${({ theme }) => theme.colors.listItem.background.hover};
-    color: ${({ theme }) => theme.colors.text.body};
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-`;
-
-export const ComboboxSelectAllItem = styled(Combobox.Item)`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-  padding: ${({ theme }) => `${theme.space[300]} ${theme.space[300]}`};
-  border-radius: ${({ theme }) => theme.radii[500]};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  font-weight: ${({ theme }) => theme.fontWeights.semibold};
-  color: ${({ theme }) => theme.colors.text.body};
-  cursor: default;
-  outline: none;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
-  margin-bottom: ${({ theme }) => theme.space[200]};
-
-  &[data-highlighted] {
-    background: ${({ theme }) => theme.colors.listItem.background.hover};
-  }
-`;
+};
+
+export const ComboboxInputGroup = React.forwardRef<
+  React.ElementRef<typeof Combobox.InputGroup>,
+  InputGroupProps
+>(({ $isInvalid, className, ...rest }, ref) => (
+  <Combobox.InputGroup
+    ref={ref}
+    className={cn(
+      "seeds-combobox-input-group",
+      { "seeds-combobox-input-group--invalid": !!$isInvalid },
+      className
+    )}
+    {...rest}
+  />
+));
+ComboboxInputGroup.displayName = "ComboboxInputGroup";
+
+export const ComboboxInput = React.forwardRef<
+  React.ElementRef<typeof Combobox.Input>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Input>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Input
+    ref={ref}
+    className={cn("seeds-combobox-input", className)}
+    {...rest}
+  />
+));
+ComboboxInput.displayName = "ComboboxInput";
+
+export const ComboboxTokenInput = React.forwardRef<
+  React.ElementRef<typeof Combobox.Input>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Input>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Input
+    ref={ref}
+    className={cn("seeds-combobox-token-input", className)}
+    {...rest}
+  />
+));
+ComboboxTokenInput.displayName = "ComboboxTokenInput";
+
+export const ComboboxActionButtons = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...rest }, ref) => (
+  <div
+    ref={ref}
+    className={cn("seeds-combobox-action-buttons", className)}
+    {...rest}
+  />
+));
+ComboboxActionButtons.displayName = "ComboboxActionButtons";
+
+export const ComboboxClear = React.forwardRef<
+  React.ElementRef<typeof Combobox.Clear>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Clear>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Clear
+    ref={ref}
+    tabIndex={0}
+    className={cn("seeds-combobox-clear", className)}
+    {...rest}
+  />
+));
+ComboboxClear.displayName = "ComboboxClear";
+
+export const ComboboxTrigger = React.forwardRef<
+  React.ElementRef<typeof Combobox.Trigger>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Trigger>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Trigger
+    ref={ref}
+    className={cn("seeds-combobox-trigger", className)}
+    {...rest}
+  />
+));
+ComboboxTrigger.displayName = "ComboboxTrigger";
+
+export const ComboboxPositioner = React.forwardRef<
+  React.ElementRef<typeof Combobox.Positioner>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Positioner>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Positioner
+    ref={ref}
+    className={cn("seeds-combobox-positioner", className)}
+    {...rest}
+  />
+));
+ComboboxPositioner.displayName = "ComboboxPositioner";
+
+export const ComboboxPopup = React.forwardRef<
+  React.ElementRef<typeof Combobox.Popup>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Popup>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Popup
+    ref={ref}
+    className={cn("seeds-combobox-popup", className)}
+    {...rest}
+  />
+));
+ComboboxPopup.displayName = "ComboboxPopup";
+
+export const ComboboxList = React.forwardRef<
+  React.ElementRef<typeof Combobox.List>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.List>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.List
+    ref={ref}
+    className={cn("seeds-combobox-list", className)}
+    {...rest}
+  />
+));
+ComboboxList.displayName = "ComboboxList";
+
+export const ComboboxStatus = React.forwardRef<
+  React.ElementRef<typeof Combobox.Status>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Status>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Status
+    ref={ref}
+    className={cn("seeds-combobox-status", className)}
+    {...rest}
+  />
+));
+ComboboxStatus.displayName = "ComboboxStatus";
+
+export const ComboboxEmpty = React.forwardRef<
+  React.ElementRef<typeof Combobox.Empty>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Empty>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Empty
+    ref={ref}
+    className={cn("seeds-combobox-empty", className)}
+    {...rest}
+  />
+));
+ComboboxEmpty.displayName = "ComboboxEmpty";
+
+export const ComboboxItem = React.forwardRef<
+  React.ElementRef<typeof Combobox.Item>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Item>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Item
+    ref={ref}
+    className={cn("seeds-combobox-item", className)}
+    {...rest}
+  />
+));
+ComboboxItem.displayName = "ComboboxItem";
+
+export const ComboboxItemIndicator = React.forwardRef<
+  React.ElementRef<typeof Combobox.ItemIndicator>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.ItemIndicator>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.ItemIndicator
+    ref={ref}
+    className={cn("seeds-combobox-item-indicator", className)}
+    {...rest}
+  />
+));
+ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
+
+export const ComboboxGroup = React.forwardRef<
+  React.ElementRef<typeof Combobox.Group>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Group>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Group
+    ref={ref}
+    className={cn("seeds-combobox-group", className)}
+    {...rest}
+  />
+));
+ComboboxGroup.displayName = "ComboboxGroup";
+
+export const ComboboxGroupLabel = React.forwardRef<
+  React.ElementRef<typeof Combobox.GroupLabel>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.GroupLabel>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.GroupLabel
+    ref={ref}
+    className={cn("seeds-combobox-group-label", className)}
+    {...rest}
+  />
+));
+ComboboxGroupLabel.displayName = "ComboboxGroupLabel";
+
+export const ComboboxSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...rest }, ref) => (
+  <div
+    ref={ref}
+    className={cn("seeds-combobox-separator", className)}
+    {...rest}
+  />
+));
+ComboboxSeparator.displayName = "ComboboxSeparator";
+
+export const ComboboxGroupHeaderItem = React.forwardRef<
+  React.ElementRef<typeof Combobox.Item>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Item>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Item
+    ref={ref}
+    className={cn("seeds-combobox-group-header-item", className)}
+    {...rest}
+  />
+));
+ComboboxGroupHeaderItem.displayName = "ComboboxGroupHeaderItem";
+
+export const ComboboxSelectAllItem = React.forwardRef<
+  React.ElementRef<typeof Combobox.Item>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Item>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Item
+    ref={ref}
+    className={cn("seeds-combobox-select-all-item", className)}
+    {...rest}
+  />
+));
+ComboboxSelectAllItem.displayName = "ComboboxSelectAllItem";
 
 export function ComboboxGroupHeaderCheckbox({
   $state,
@@ -334,210 +265,164 @@ export function ComboboxGroupHeaderCheckbox({
 }
 
 // Multi-select Token components
-export const ComboboxToken = styled(Combobox.Chips)`
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-  gap: ${({ theme }) => theme.space[200]};
-`;
-
-export const ComboboxTokenInputGroup = styled(Combobox.InputGroup)<{
+export const ComboboxToken = React.forwardRef<
+  React.ElementRef<typeof Combobox.Chips>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Chips>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Chips
+    ref={ref}
+    className={cn("seeds-combobox-tokens", className)}
+    {...rest}
+  />
+));
+ComboboxToken.displayName = "ComboboxToken";
+
+type TokenInputGroupProps = WithStringClassName<
+  React.ComponentProps<typeof Combobox.InputGroup>
+> & {
   $isInvalid?: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  border-radius: ${({ theme }) => theme.radii[500]};
-  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
-  background: ${({ theme }) => theme.colors.form.background.base};
-  color: ${({ theme }) => theme.colors.text.body};
-  padding: ${({ theme }) =>
-    `${theme.space[200]} ${theme.space[300]} ${theme.space[200]} ${theme.space[200]}`};
-  gap: ${({ theme }) => theme.space[200]};
-  transition: border-color ${({ theme }) => theme.duration.fast}
-      ${({ theme }) => theme.easing.ease_in},
-    box-shadow ${({ theme }) => theme.duration.fast}
-      ${({ theme }) => theme.easing.ease_in};
-
-  &:focus-within {
-    ${focusRing}
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles}
-`;
-
-export const Token = styled.span`
-  display: inline-flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[200]};
-  padding: ${({ theme }) => `${theme.space[200]} ${theme.space[300]}`};
-  border-radius: ${({ theme }) => theme.radii[500]};
-  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
-  background: ${({ theme }) => theme.colors.container.background.base};
-  color: ${({ theme }) => theme.colors.text.body};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  font-weight: ${({ theme }) => theme.fontWeights.normal};
-  line-height: 1;
-  white-space: nowrap;
-  transition: all ${({ theme }) => theme.duration.fast}
-    ${({ theme }) => theme.easing.ease_inout};
-
-  &:hover {
-    box-shadow: ${({ theme }) => theme.shadows.low};
-    border-color: ${({ theme }) => theme.colors.container.border.base};
-  }
-`;
-
-export const TokenRemove = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-
-  &:focus-visible {
-    ${focusRing}
-  }
-`;
+};
+
+export const ComboboxTokenInputGroup = React.forwardRef<
+  React.ElementRef<typeof Combobox.InputGroup>,
+  TokenInputGroupProps
+>(({ $isInvalid, className, ...rest }, ref) => (
+  <Combobox.InputGroup
+    ref={ref}
+    className={cn(
+      "seeds-combobox-token-input-group",
+      { "seeds-combobox-token-input-group--invalid": !!$isInvalid },
+      className
+    )}
+    {...rest}
+  />
+));
+ComboboxTokenInputGroup.displayName = "ComboboxTokenInputGroup";
+
+export const Token = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentProps<"span">
+>(({ className, ...rest }, ref) => (
+  <span ref={ref} className={cn("seeds-combobox-token", className)} {...rest} />
+));
+Token.displayName = "Token";
+
+export const TokenRemove = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...rest }, ref) => (
+  <button
+    ref={ref}
+    className={cn("seeds-combobox-token-remove", className)}
+    {...rest}
+  />
+));
+TokenRemove.displayName = "TokenRemove";
 
 // Searchable select components
 
-export const SearchableSelectTrigger = styled(Combobox.Trigger)<{
+type SearchableTriggerProps = WithStringClassName<
+  React.ComponentProps<typeof Combobox.Trigger>
+> & {
   $isInvalid?: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${({ theme }) => theme.space[300]};
-  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[350]};
-  min-width: 160px;
-  border-radius: ${({ theme }) => theme.radii[500]};
-  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
-  background: ${({ theme }) => theme.colors.form.background.base};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  color: ${({ theme }) => theme.colors.text.body};
-  cursor: default;
-  outline: none;
-  user-select: none;
-  transition: border-color ${({ theme }) => theme.duration.fast}
-      ${({ theme }) => theme.easing.ease_in},
-    box-shadow ${({ theme }) => theme.duration.fast}
-      ${({ theme }) => theme.easing.ease_in};
-
-  &:focus-visible {
-    ${focusRing}
-  }
-
-  &[data-popup-open] [data-chevron] {
-    transform: rotate(-180deg);
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles}
-`;
-
-export const SearchableSelectTriggerIcon = styled(Combobox.Icon)`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.colors.icon.base};
-  flex-shrink: 0;
-`;
-
-export const SearchableSelectPlaceholder = styled.span`
-  color: ${({ theme }) => theme.colors.text.subtext};
-  padding: ${({ theme }) => theme.space[200]} 0;
-`;
+};
+
+export const SearchableSelectTrigger = React.forwardRef<
+  React.ElementRef<typeof Combobox.Trigger>,
+  SearchableTriggerProps
+>(({ $isInvalid, className, ...rest }, ref) => (
+  <Combobox.Trigger
+    ref={ref}
+    className={cn(
+      "seeds-searchable-select-trigger",
+      { "seeds-searchable-select-trigger--invalid": !!$isInvalid },
+      className
+    )}
+    {...rest}
+  />
+));
+SearchableSelectTrigger.displayName = "SearchableSelectTrigger";
+
+export const SearchableSelectTriggerIcon = React.forwardRef<
+  React.ElementRef<typeof Combobox.Icon>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Icon>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Icon
+    ref={ref}
+    className={cn("seeds-searchable-select-trigger-icon", className)}
+    {...rest}
+  />
+));
+SearchableSelectTriggerIcon.displayName = "SearchableSelectTriggerIcon";
+
+export const SearchableSelectPlaceholder = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentProps<"span">
+>(({ className, ...rest }, ref) => (
+  <span
+    ref={ref}
+    className={cn("seeds-searchable-select-placeholder", className)}
+    {...rest}
+  />
+));
+SearchableSelectPlaceholder.displayName = "SearchableSelectPlaceholder";
 
 export const SearchableSelectPopup = ComboboxPopup;
 
-export const SearchableSelectSearchContainer = styled.div`
-  padding: ${({ theme }) => theme.space[300]};
-  border-bottom: 1px solid ${({ theme }) => theme.colors.container.border.base};
-  flex-shrink: 0;
-`;
-
-export const SearchableSelectInput = styled(Combobox.Input)`
-  width: 100%;
-  height: ${({ theme }) => theme.space[500]};
-  padding: 0 ${({ theme }) => theme.space[300]};
-  border-radius: ${({ theme }) => theme.radii[500]};
-  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
-  background: ${({ theme }) => theme.colors.container.background.base};
-  font-size: ${({ theme }) => theme.typography[200].fontSize};
-  color: ${({ theme }) => theme.colors.text.body};
-  outline: none;
-  box-sizing: border-box;
-
-  &:focus {
-    ${focusRing}
-  }
-
-  &::placeholder {
-    color: ${({ theme }) => theme.colors.text.subtext};
-  }
-`;
-
-export const SearchableSelectList = styled(Combobox.List)`
-  overflow-y: auto;
-  padding: ${({ theme }) => theme.space[200]};
-  flex: 1;
-  min-height: 0;
-  &:empty {
-    padding: 0;
-  }
-`;
-
-export const SearchableSelectTokenTrigger = styled(Combobox.Trigger)<{
+export const SearchableSelectSearchContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...rest }, ref) => (
+  <div
+    ref={ref}
+    className={cn("seeds-searchable-select-search-container", className)}
+    {...rest}
+  />
+));
+SearchableSelectSearchContainer.displayName = "SearchableSelectSearchContainer";
+
+export const SearchableSelectInput = React.forwardRef<
+  React.ElementRef<typeof Combobox.Input>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.Input>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.Input
+    ref={ref}
+    className={cn("seeds-searchable-select-input", className)}
+    {...rest}
+  />
+));
+SearchableSelectInput.displayName = "SearchableSelectInput";
+
+export const SearchableSelectList = React.forwardRef<
+  React.ElementRef<typeof Combobox.List>,
+  WithStringClassName<React.ComponentProps<typeof Combobox.List>>
+>(({ className, ...rest }, ref) => (
+  <Combobox.List
+    ref={ref}
+    className={cn("seeds-searchable-select-list", className)}
+    {...rest}
+  />
+));
+SearchableSelectList.displayName = "SearchableSelectList";
+
+type TokenTriggerProps = WithStringClassName<
+  React.ComponentProps<typeof Combobox.Trigger>
+> & {
   $isInvalid?: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  min-width: 160px;
-  border-radius: ${({ theme }) => theme.radii[500]};
-  border: 1px solid ${({ theme }) => theme.colors.form.border.base};
-  background: ${({ theme }) => theme.colors.form.background.base};
-  color: ${({ theme }) => theme.colors.text.body};
-  padding: ${({ theme }) => theme.space[200]} ${({ theme }) => theme.space[300]};
-  gap: ${({ theme }) => theme.space[200]};
-  cursor: default;
-  text-align: left;
-  outline: none;
-  user-select: none;
-  transition: border-color ${({ theme }) => theme.duration.fast}
-      ${({ theme }) => theme.easing.ease_in},
-    box-shadow ${({ theme }) => theme.duration.fast}
-      ${({ theme }) => theme.easing.ease_in};
-
-  &:focus-visible {
-    ${focusRing}
-  }
-
-  &[data-popup-open] {
-    border-color: ${({ theme }) => theme.colors.blue[600]};
-  }
-
-  &[data-popup-open] [data-chevron] {
-    transform: rotate(-180deg);
-  }
-
-  &[data-disabled] {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  ${({ $isInvalid }) => $isInvalid && invalidStyles}
-`;
+};
+
+export const SearchableSelectTokenTrigger = React.forwardRef<
+  React.ElementRef<typeof Combobox.Trigger>,
+  TokenTriggerProps
+>(({ $isInvalid, className, ...rest }, ref) => (
+  <Combobox.Trigger
+    ref={ref}
+    className={cn(
+      "seeds-searchable-select-token-trigger",
+      { "seeds-searchable-select-token-trigger--invalid": !!$isInvalid },
+      className
+    )}
+    {...rest}
+  />
+));
+SearchableSelectTokenTrigger.displayName = "SearchableSelectTokenTrigger";