diff --git a/packages/input/Input.tsx b/packages/input/Input.tsx index 9375fd19..a4c30507 100644 --- a/packages/input/Input.tsx +++ b/packages/input/Input.tsx @@ -93,12 +93,12 @@ export const Input = forwardRef( {hasErrorMessage && ( - + {error} )} {hasWarningMessage && ( - + {warning} )} diff --git a/packages/input/InputStyles.ts b/packages/input/InputStyles.ts index 56da5891..80d0b36d 100644 --- a/packages/input/InputStyles.ts +++ b/packages/input/InputStyles.ts @@ -293,6 +293,7 @@ const messageVariants = { export const InputMessageStyle = styled.span<{ $variant: InputMessageVariants $bordered?: boolean + $wrap?: boolean }>` margin-top: ${({ $bordered }) => ($bordered ? 5 : 6)}px; left: ${({ $bordered }) => ($bordered ? -1 : 0)}px; @@ -303,7 +304,7 @@ export const InputMessageStyle = styled.span<{ font-size: ${({ theme }) => theme.fontSizesMap.xxs}px; border-radius: ${({ theme }) => theme.borderRadiusesMap.sm}px; padding: 6px 10px; - white-space: nowrap; + white-space: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')}; overflow: hidden; box-sizing: border-box; text-overflow: ellipsis;