diff --git a/lib/src/components/input/Input.tsx b/lib/src/components/input/Input.tsx index 080c6096d..a50b9bd47 100644 --- a/lib/src/components/input/Input.tsx +++ b/lib/src/components/input/Input.tsx @@ -65,8 +65,9 @@ const StyledInputText = styled.withConfig({ }) export type InputTextProps = Omit< - React.ComponentProps, 'size' | 'type' | 'as'> & -{ + React.ComponentProps, + 'size' | 'type' | 'as' +> & { size: React.ComponentProps['size'] // override default 'type' property to prevent Input from being used to render // checkboxes, radios etc — we have dedicated components for them @@ -81,11 +82,8 @@ const toTextSize = { xl: 'lg' } -export const InputText = React.forwardRef( - ( - { type = 'text', css, size, ...rest }: InputTextProps, - ref: React.ForwardedRef - ) => { +export const InputText: React.ForwardRefExoticComponent = + React.forwardRef(({ type = 'text', css, size, ...rest }, ref) => { const textSize = React.useMemo( () => overrideStitchesVariantValue(size, (s) => toTextSize[s]), [size] @@ -102,30 +100,26 @@ export const InputText = React.forwardRef( {...rest} /> ) - } -) + }) InputText.displayName = 'InputText' type InputBackgroundProps = React.ComponentProps export type InputProps = Omit< - React.ComponentProps, 'size' | 'state'> & -{ + React.ComponentProps, + 'size' | 'state' +> & { size?: InputBackgroundProps['size'] state?: InputBackgroundProps['state'] } -export const Input = React.forwardRef( - ( - { size = 'md', state, disabled, css, ...rest }: InputProps, - ref: React.ForwardedRef - ) => { +export const Input: React.ForwardRefExoticComponent = + React.forwardRef(({ size = 'md', state, disabled, css, ...rest }, ref) => { return ( ) - } -) + }) Input.displayName = 'Input'