custom-react-select.jsx

import ReactSelect from 'react-select'

export const REACT_SELECT_CUSTOM_STYLES = {
  control: (provided) => ({
    ...provided,
    fontSize: '0.875rem',
    lineHeight: '1.25rem'
  }),
  valueContainer: (provided) => ({
    ...provided,
    minHeight: '38px'
  }),
  option: (provided) => ({
    ...provided,
    fontSize: '0.875rem',
    lineHeight: '1.25rem'
  }),
  input: (provided) => ({
    ...provided,
    fontSize: '0.875rem',
    lineHeight: '1.25rem'
  }),
  placeholder: (provided) => ({
    ...provided,
    fontSize: '0.875rem',
    lineHeight: '1.25rem'
  }),
  noOptionsMessage: (provided) => ({
    ...provided,
    fontSize: '0.875rem',
    lineHeight: '1.25rem'
  })
}

const Select = ({ ...props }) => {
  return (
    <ReactSelect
      styles={REACT_SELECT_CUSTOM_STYLES}
      inputClassName='focus:border-0 focus:ring-0 font-primary font-light text-sm md:text-base'
      theme={(theme) => ({
        ...theme,
        borderRadius: 'calc(var(--radius) - 2px)',
        borderColor: 'red',
        colors: {
          ...theme.colors,
          primary: 'hsl(var(--primary))',
          primary25: '#f4f4f5',
          primary50: '#e5e7eb',
          primary75: '#d1d5db',
          neutral30: 'hsl(var(--input))',
          neutral20: 'hsl(var(--input))'
        }
      })}
      {...props}
    />
  )
}

export default Select