diff --git a/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap b/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap index 5e3b51913..fa7f97960 100644 --- a/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap +++ b/lib/src/components/date-input/__snapshots__/DateInput.test.tsx.snap @@ -510,14 +510,14 @@ exports[`DateInput component renders lg size 1`] = ` display: table; } - .c-nNuCY-hztIub-isToday-true { - background: var(--colors-tonal100); - } - .c-nNuCY-huXVXM-isOutsideMonth-true { color: var(--colors-tonal200); } + .c-nNuCY-hztIub-isToday-true { + background: var(--colors-tonal100); + } + .c-iKnjyA-kUaMfZ-size-md { max-width: 400px; } diff --git a/lib/src/components/input/Input.tsx b/lib/src/components/input/Input.tsx index 68f65d130..080c6096d 100644 --- a/lib/src/components/input/Input.tsx +++ b/lib/src/components/input/Input.tsx @@ -3,7 +3,6 @@ import * as React from 'react' import { styled } from '~/stitches' import { disabledStyle } from '~/utilities' import { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue' -import { Override } from '~/utilities/types' import { Flex } from '../flex' import { Text } from '../text' @@ -44,6 +43,8 @@ export const InputBackground = styled(Flex, { } }) +InputBackground.displayName = 'InputBackground' + const StyledInputText = styled.withConfig({ shouldForwardStitchesProp: (propName) => ['as'].includes(propName) })(Text as unknown as 'input', { @@ -63,16 +64,15 @@ const StyledInputText = styled.withConfig({ size: '100%' }) -export type InputTextProps = Override< - React.ComponentProps, - { - 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 - type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search' - as?: never - } -> +export type InputTextProps = Omit< + 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 + type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search' + as?: never +} const toTextSize = { sm: 'sm', @@ -105,14 +105,15 @@ export const InputText = React.forwardRef( } ) +InputText.displayName = 'InputText' + type InputBackgroundProps = React.ComponentProps -export type InputProps = Override< - React.ComponentProps, - { - size?: InputBackgroundProps['size'] - state?: InputBackgroundProps['state'] - } -> +export type InputProps = Omit< + React.ComponentProps, 'size' | 'state'> & +{ + size?: InputBackgroundProps['size'] + state?: InputBackgroundProps['state'] +} export const Input = React.forwardRef( (