From f8fb33408a3c0b31eb8674b5a23ce49dc8a44650 Mon Sep 17 00:00:00 2001
From: inscom <286765557+inscomssb@users.noreply.github.com>
Date: Fri, 22 May 2026 12:34:30 +0200
Subject: [PATCH] fix(Input): use fr-message classes instead of
 fr-error/valid/info-text

The DSFR documentation recommends using .fr-message with .fr-message--error,
.fr-message--valid and .fr-message--info instead of the legacy monolithic
class names. The old classes caused icon misalignment on multi-line messages.

Closes #480
---
 src/Input.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 353a17fb3..666d49dd9 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -221,14 +221,15 @@ export const Input = memo(
                             id={messageId}
                             className={cx(
                                 fr.cx(
+                                    "fr-message",
                                     (() => {
                                         switch (state) {
                                             case "error":
-                                                return "fr-error-text";
+                                                return "fr-message--error";
                                             case "success":
-                                                return "fr-valid-text";
+                                                return "fr-message--valid";
                                             case "info":
-                                                return "fr-info-text";
+                                                return "fr-message--info";
                                         }
                                     })()
                                 ),