-
+
{title}
diff --git a/packages/elements-react/src/theme/default/components/default-components.tsx b/packages/elements-react/src/theme/default/components/default-components.tsx
index f791f16f0..2898b20c2 100644
--- a/packages/elements-react/src/theme/default/components/default-components.tsx
+++ b/packages/elements-react/src/theme/default/components/default-components.tsx
@@ -29,32 +29,34 @@ import { DefaultCurrentIdentifierButton } from "./card/current-identifier-button
import { OryFlowComponents } from "@ory/elements-react"
export const OryDefaultComponents: OryFlowComponents = {
- Card: DefaultCard,
- CardHeader: DefaultCardHeader,
- CardContent: DefaultCardContent,
- CardFooter: DefaultCardFooter,
- CardLogo: DefaultCardLogo,
-
- // Generic
- HorizontalDivider: DefaultHorizontalDivider,
-
- // Form
- FormGroup: DefaultGroupContainer,
-
- SocialButtonContainer: DefaultSocialButtonContainer,
- MessageContainer: DefaultMessageContainer,
- Message: DefaultMessage,
- Input: DefaultInput,
- Image: DefaultImage,
- Label: DefaultLabel,
- Checkbox: DefaultCheckbox,
- Text: DefaultText,
- PinCodeInput: DefaultPinCodeInput,
- Button: DefaultButton,
- LinkButton: DefaultLinkButton,
- SocialButton: DefaultButtonSocial,
- FormContainer: DefaultFormContainer,
-
- AuthMethodListItem: DefaultAuthMethodListItem,
- CurrentIdentifierButton: DefaultCurrentIdentifierButton,
+ Card: {
+ Root: DefaultCard,
+ Footer: DefaultCardFooter,
+ Header: DefaultCardHeader,
+ Content: DefaultCardContent,
+ Logo: DefaultCardLogo,
+ Divider: DefaultHorizontalDivider,
+ AuthMethodListItem: DefaultAuthMethodListItem,
+ },
+ Node: {
+ Button: DefaultButton,
+ OIDCButton: DefaultButtonSocial,
+ CurrentIdentifierButton: DefaultCurrentIdentifierButton,
+ Input: DefaultInput,
+ CodeInput: DefaultPinCodeInput,
+ Image: DefaultImage,
+ Label: DefaultLabel,
+ Checkbox: DefaultCheckbox,
+ Text: DefaultText,
+ Anchor: DefaultLinkButton,
+ },
+ Form: {
+ Root: DefaultFormContainer,
+ Group: DefaultGroupContainer,
+ OIDCRoot: DefaultSocialButtonContainer,
+ },
+ Message: {
+ Root: DefaultMessageContainer,
+ Content: DefaultMessage,
+ },
}
diff --git a/packages/elements-react/src/theme/default/components/form/button.tsx b/packages/elements-react/src/theme/default/components/form/button.tsx
index c8af0e273..2241dc985 100644
--- a/packages/elements-react/src/theme/default/components/form/button.tsx
+++ b/packages/elements-react/src/theme/default/components/form/button.tsx
@@ -1,15 +1,18 @@
+import { getNodeLabel } from "@ory/client-fetch"
+import {
+ OryNodeButtonProps,
+ uiTextToFormattedMessage,
+} from "@ory/elements-react"
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
-import { Spinner } from "./spinner"
import { cn } from "../../utils/cn"
-import { formatMessage, HeadlessButtonProps } from "@ory/elements-react"
-import { getNodeLabel } from "@ory/client-fetch"
+import { Spinner } from "./spinner"
export const DefaultButton = ({
attributes,
node,
onClick,
-}: HeadlessButtonProps) => {
+}: OryNodeButtonProps) => {
const {
type,
name,
@@ -75,7 +78,7 @@ export const DefaultButton = ({
},
)}
>
- {formatMessage(label, intl)}
+ {label ? uiTextToFormattedMessage(label, intl) : ""}
)
diff --git a/packages/elements-react/src/theme/default/components/form/checkbox.tsx b/packages/elements-react/src/theme/default/components/form/checkbox.tsx
index 653e2e4a9..db68cc052 100644
--- a/packages/elements-react/src/theme/default/components/form/checkbox.tsx
+++ b/packages/elements-react/src/theme/default/components/form/checkbox.tsx
@@ -1,11 +1,14 @@
"use client"
+import { getNodeLabel } from "@ory/client-fetch"
+import {
+ OryNodeInputProps,
+ messageTestId,
+ uiTextToFormattedMessage,
+} from "@ory/elements-react"
import { useState } from "react"
import { useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { cn } from "../../utils/cn"
-import { HeadlessInputProps } from "@ory/elements-react"
-import { formatMessage, messageTestId } from "@ory/elements-react"
-import { getNodeLabel } from "@ory/client-fetch"
function CheckboxSVG() {
return (
@@ -34,7 +37,7 @@ function CheckboxSVG() {
export const DefaultCheckbox = ({
attributes: initialAttributes,
node,
-}: HeadlessInputProps) => {
+}: OryNodeInputProps) => {
const {
value,
name,
@@ -76,7 +79,7 @@ export const DefaultCheckbox = ({
{node.messages.map((message) => (
- {formatMessage(message, intl)}
+ {uiTextToFormattedMessage(message, intl)}
))}
diff --git a/packages/elements-react/src/theme/default/components/form/group-container.tsx b/packages/elements-react/src/theme/default/components/form/group-container.tsx
index cd80950a6..98aa3c565 100644
--- a/packages/elements-react/src/theme/default/components/form/group-container.tsx
+++ b/packages/elements-react/src/theme/default/components/form/group-container.tsx
@@ -1,7 +1,5 @@
-import { HeadlessGroupContainerProps } from "@ory/elements-react"
+import { OryFormGroupProps } from "@ory/elements-react"
-export function DefaultGroupContainer({
- children,
-}: HeadlessGroupContainerProps) {
+export function DefaultGroupContainer({ children }: OryFormGroupProps) {
return {children}
}
diff --git a/packages/elements-react/src/theme/default/components/form/image.tsx b/packages/elements-react/src/theme/default/components/form/image.tsx
index 2812217f9..3c7b79151 100644
--- a/packages/elements-react/src/theme/default/components/form/image.tsx
+++ b/packages/elements-react/src/theme/default/components/form/image.tsx
@@ -1,6 +1,6 @@
-import { HeadlessImageProps } from "@ory/elements-react"
+import { OryNodeImageProps } from "@ory/elements-react"
-export function DefaultImage({ attributes }: HeadlessImageProps) {
+export function DefaultImage({ attributes }: OryNodeImageProps) {
// const intl = useIntl()
return (