feat: allow overriding of field messages

packages/elements-react/src/theme/default/components/form/index.tsx

@@ -5,6 +5,7 @@ import { PropsWithChildren } from "react"
 import { cn } from "../../utils/cn"
 import { useIntl } from "react-intl"
 import {
+  messageTestId,
   OryFormRootProps,
   uiTextToFormattedMessage,
   useOryFlow,
@@ -52,11 +53,12 @@ export function DefaultMessage({ message }: OryMessageContentProps) {
   const intl = useIntl()
   return (
     <span
-      className={cn("text-sm mt-1 leading-normal", {
+      className={cn("text-sm leading-normal", {
         "text-forms-fg-error": message.type === "error",
         "text-forms-fg-default": message.type === "info",
         "text-forms-fg-success": message.type === "success",
       })}
+      {...messageTestId(message)}
     >
       {uiTextToFormattedMessage(message, intl)}
     </span>

packages/elements-react/src/theme/default/components/form/label.tsx

@@ -6,10 +6,10 @@
   OryNodeLabelProps,
   messageTestId,
   uiTextToFormattedMessage,
+  useComponents,
   useOryFlow,
 } from "@ory/elements-react"
 import { useIntl } from "react-intl"
-import { cn } from "../../utils/cn"
 
 export function DefaultLabel({
   node,
@@ -19,6 +19,7 @@
 }: OryNodeLabelProps) {
   const intl = useIntl()
   const label = getNodeLabel(node)
+  const { Message } = useComponents()
   const { config, flowType, flow } = useOryFlow()
 
   const isPassword = attributes.type === "password"
@@ -70,17 +71,7 @@
       )}
       {children}
       {node.messages.map((message) => (
-        <span
-          key={message.id}
-          className={cn("text-sm leading-normal", {
-            "text-forms-fg-error": message.type === "error",
-            "text-forms-fg-default": message.type === "info",
-            "text-forms-fg-success": message.type === "success",
-          })}
-          {...messageTestId(message)}
-        >
-          {uiTextToFormattedMessage(message, intl)}
-        </span>
+        <Message.Content key={message.id} message={message} />
       ))}
     </div>
   )