message: refactor(typings): select
diff: @@ -6,6 +6,7 @@ import {
  PropsOf,
  useMultiStyleConfig,
  ThemingProps,
  + forwardRef,
  } from "@chakra-ui/system"
  import { cx, split, __DEV__ } from "@chakra-ui/utils"
  import * as React from "react"
  @@ -17,10 +18,8 @@ export type SelectFieldProps = Omit<PropsOf<typeof chakra.select>, Omitted> & {
  isDisabled?: boolean
  }
  -export const SelectField = React.forwardRef(function SelectField(
  - props: SelectFieldProps,
  - ref: React.Ref<any>,
  -) {
  +export const SelectField: React.FC<SelectFieldProps> = forwardRef(
  + (props, ref) => {
  const { children, placeholder, className, isDisabled, ...rest } = props
  const select = useFormControl<HTMLSelectElement>(rest)
  @@ -37,7 +36,8 @@ export const SelectField = React.forwardRef(function SelectField(
  {children}
  </chakra.select>
  )
  -})
  + },
  +)
  if (__DEV__) {
  SelectField.displayName = "SelectField"
  @@ -89,10 +89,7 @@ export type SelectProps = SelectFieldProps &
  /**
  * React component used to select one item from a list of options.
  */
  -export const Select = React.forwardRef(function Select(
  - props: SelectProps,
  - ref: React.Ref<any>,
  -) {
  +export const Select: React.FC<SelectProps> = forwardRef((props, ref) => {
  const styles = useMultiStyleConfig("Select", props)
  const { rootProps, placeholder, icon, color, ...rest } = omitThemingProps(
  @@ -138,7 +135,7 @@ if (__DEV__) {
  Select.displayName = "Select"
  }
  -export const DefaultIcon = (props: PropsOf<"svg">) => (
  +export const DefaultIcon: React.FC<PropsOf<"svg">> = (props) => (
  <svg viewBox="0 0 24 24" {...props}>
  <path
  fill="currentColor"
  @@ -164,7 +161,7 @@ const IconWrapper = chakra("div", {
  type SelectIconProps = PropsOf<typeof IconWrapper>
  -function SelectIcon(props: SelectIconProps) {
  +const SelectIcon: React.FC<SelectIconProps> = (props) => {
  const { children = <DefaultIcon />, ...rest } = props
  const clone = React.cloneElement(children as any, {
  