@ory/elements-react 1.0.0-next.10 → 1.0.0-next.11

package/dist/theme/default/index.mjs

@@ -291,9 +291,9 @@ function useCardHeaderText(nodes, opts) {
 // src/theme/default/components/card/header.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function InnerCardHeader({ title, text }) {
-  const { CardLogo } = useComponents();
+  const { Card } = useComponents();
   return /* @__PURE__ */ jsxs5("header", { className: "flex flex-col gap-8 antialiased", children: [
-    /* @__PURE__ */ jsx5(CardLogo, {}),
+    /* @__PURE__ */ jsx5(Card.Logo, {}),
     /* @__PURE__ */ jsxs5("div", { children: [
       /* @__PURE__ */ jsx5("h2", { className: "font-semibold text-lg text-dialog-fg-default leading-normal", children: title }),
       /* @__PURE__ */ jsx5("p", { className: "text-sm leading-normal text-dialog-fg-subtle", children: text })
@@ -343,8 +343,8 @@ function cn(...inputs) {
 }
 
 // src/theme/default/components/form/index.tsx
-import { formatMessage } from "@ory/elements-react";
 import { useIntl as useIntl3 } from "react-intl";
+import { uiTextToFormattedMessage } from "@ory/elements-react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function DefaultFormContainer({
   children,
@@ -380,11 +380,14 @@ function DefaultMessage({ message }) {
         "text-forms-fg-default": message.type === "info",
         "text-forms-fg-success": message.type === "success"
       }),
-      children: formatMessage(message, intl)
+      children: uiTextToFormattedMessage(message, intl)
     }
   );
 }
 
+// src/theme/default/components/card/auth-methods.tsx
+import { useIntl as useIntl4 } from "react-intl";
+
 // src/theme/default/assets/icons/code.svg
 import * as React3 from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
@@ -422,7 +425,6 @@ var SvgWebauthn = (props) => {
 var webauthn_default = SvgWebauthn;
 
 // src/theme/default/components/card/auth-methods.tsx
-import { useIntl as useIntl4 } from "react-intl";
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var iconsMap = {
   code: code_default,
@@ -453,6 +455,10 @@ function DefaultAuthMethodListItem({
 }
 
 // src/theme/default/components/form/button.tsx
+import { getNodeLabel } from "@ory/client-fetch";
+import {
+  uiTextToFormattedMessage as uiTextToFormattedMessage2
+} from "@ory/elements-react";
 import { useFormContext } from "react-hook-form";
 import { useIntl as useIntl5 } from "react-intl";
 
@@ -496,8 +502,6 @@ function Spinner({ className }) {
 }
 
 // src/theme/default/components/form/button.tsx
-import { formatMessage as formatMessage2 } from "@ory/elements-react";
-import { getNodeLabel } from "@ory/client-fetch";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var DefaultButton = ({
   attributes,
@@ -562,7 +566,7 @@ var DefaultButton = ({
                 "text-button-secondary-fg-default/20": isSubmitting && !isPrimary
               }
             ),
-            children: formatMessage2(label, intl)
+            children: label ? uiTextToFormattedMessage2(label, intl) : ""
           }
         )
       ]
@@ -572,11 +576,14 @@ var DefaultButton = ({
 DefaultButton.displayName = "DefaultButton";
 
 // src/theme/default/components/form/checkbox.tsx
+import { getNodeLabel as getNodeLabel2 } from "@ory/client-fetch";
+import {
+  messageTestId,
+  uiTextToFormattedMessage as uiTextToFormattedMessage3
+} from "@ory/elements-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useIntl as useIntl6 } from "react-intl";
-import { formatMessage as formatMessage3, messageTestId } from "@ory/elements-react";
-import { getNodeLabel as getNodeLabel2 } from "@ory/client-fetch";
 import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function CheckboxSVG() {
   return /* @__PURE__ */ jsxs10(
@@ -653,13 +660,13 @@ var DefaultCheckbox = ({
           /* @__PURE__ */ jsx16(CheckboxSVG, {})
         ] }),
         /* @__PURE__ */ jsxs10("div", { className: "text-sm items-center", children: [
-          /* @__PURE__ */ jsx16("label", { className: "text-sm font-normal leading-normal text-forms-fg-default", children: label && formatMessage3(label, intl) }),
+          /* @__PURE__ */ jsx16("label", { className: "text-sm font-normal leading-normal text-forms-fg-default", children: label && uiTextToFormattedMessage3(label, intl) }),
           node.messages.map((message) => /* @__PURE__ */ jsx16(
             "span",
             {
               className: "text-sm text-red-900 mt-1",
               ...messageTestId(message),
-              children: formatMessage3(message, intl)
+              children: uiTextToFormattedMessage3(message, intl)
             },
             message.id
           ))
@@ -671,9 +678,7 @@ var DefaultCheckbox = ({
 
 // src/theme/default/components/form/group-container.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
-function DefaultGroupContainer({
-  children
-}) {
+function DefaultGroupContainer({ children }) {
   return /* @__PURE__ */ jsx17("div", { className: "grid grid-cols-1 gap-6", children });
 }
 
@@ -691,7 +696,9 @@ function DefaultImage({ attributes }) {
 
 // src/theme/default/components/form/input.tsx
 import { getNodeLabel as getNodeLabel3 } from "@ory/client-fetch";
-import { formatMessage as formatMessage4 } from "@ory/elements-react";
+import {
+  uiTextToFormattedMessage as uiTextToFormattedMessage4
+} from "@ory/elements-react";
 import { useFormContext as useFormContext2 } from "react-hook-form";
 import { useIntl as useIntl7 } from "react-intl";
 import { jsx as jsx20 } from "react/jsx-runtime";
@@ -710,7 +717,7 @@ var DefaultInput = ({
       defaultMessage: "Enter your {placeholder}"
     },
     {
-      placeholder: formatMessage4(label, intl)
+      placeholder: uiTextToFormattedMessage4(label, intl)
     }
   ) : "";
   return /* @__PURE__ */ jsx20(
@@ -729,9 +736,12 @@ var DefaultInput = ({
 
 // src/theme/default/components/form/label.tsx
 import { FlowType as FlowType3, getNodeLabel as getNodeLabel4 } from "@ory/client-fetch";
+import {
+  messageTestId as messageTestId2,
+  uiTextToFormattedMessage as uiTextToFormattedMessage5,
+  useOryFlow as useOryFlow4
+} from "@ory/elements-react";
 import { useIntl as useIntl8 } from "react-intl";
-import { useOryFlow as useOryFlow4 } from "@ory/elements-react";
-import { formatMessage as formatMessage5, messageTestId as messageTestId2 } from "@ory/elements-react";
 import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 function DefaultLabel({
   node,
@@ -753,7 +763,7 @@ function DefaultLabel({
           className: "text-sm font-medium leading-normal",
           htmlFor: attributes.name,
           ...rest,
-          children: formatMessage5(label, intl)
+          children: uiTextToFormattedMessage5(label, intl)
         }
       ),
       isPassword && config.project.recovery_enabled && flowType === FlowType3.Login && // TODO: make it possible to override with a custom component
@@ -787,7 +797,7 @@ function DefaultLabel({
           "text-forms-fg-success": message.type === "success"
         }),
         ...messageTestId2(message),
-        children: formatMessage5(message, intl)
+        children: uiTextToFormattedMessage5(message, intl)
       },
       message.id
     ))
@@ -795,10 +805,12 @@ function DefaultLabel({
 }
 
 // src/theme/default/components/form/link-button.tsx
+import { getNodeLabel as getNodeLabel5 } from "@ory/client-fetch";
+import {
+  uiTextToFormattedMessage as uiTextToFormattedMessage6
+} from "@ory/elements-react";
 import { forwardRef } from "react";
 import { useIntl as useIntl9 } from "react-intl";
-import { formatMessage as formatMessage6 } from "@ory/elements-react";
-import { getNodeLabel as getNodeLabel5 } from "@ory/client-fetch";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var DefaultLinkButton = forwardRef(({ attributes, node }, ref) => {
   const intl = useIntl9();
@@ -808,11 +820,11 @@ var DefaultLinkButton = forwardRef(({ attributes, node }, ref) => {
     {
       ...attributes,
       ref,
-      title: formatMessage6(label, intl),
+      title: label ? uiTextToFormattedMessage6(label, intl) : "",
       className: cn(
         "antialiased rounded cursor-pointer text-center border border-transparent gap-3 leading-none bg-button-primary-bg-default hover:bg-button-primary-bg-hover transition-colors text-button-primary-fg-default hover:text-button-primary-fg-hover px-4 py-4.5 text-sm font-medium"
       ),
-      children: formatMessage6(label, intl)
+      children: label ? uiTextToFormattedMessage6(label, intl) : ""
     }
   );
 });
@@ -899,7 +911,7 @@ var DefaultPinCodeInput = ({ attributes }) => {
 
 // src/theme/default/components/form/social.tsx
 import {
-  formatMessage as formatMessage7,
+  uiTextToFormattedMessage as uiTextToFormattedMessage7,
   useOryFlow as useOryFlow5
 } from "@ory/elements-react";
 
@@ -1132,7 +1144,7 @@ function DefaultButtonSocial({
             className: "object-fill w-full h-full"
           }
         ) : /* @__PURE__ */ jsx38("span", { className: "rounded-full aspect-square border flex items-center justify-center text-xs", children: provider.slice(0, 2) }) }),
-        showLabel ? /* @__PURE__ */ jsx38("span", { className: "text-sm text-left leading-none font-medium text-forms-fg-default flex-grow", children: formatMessage7(node.meta.label, intl) }) : null
+        showLabel && node.meta.label ? /* @__PURE__ */ jsx38("span", { className: "text-sm text-left leading-none font-medium text-forms-fg-default flex-grow", children: uiTextToFormattedMessage7(node.meta.label, intl) }) : null
       ]
     }
   );
@@ -1156,15 +1168,15 @@ function DefaultSocialButtonContainer({
 }
 
 // src/theme/default/components/form/text.tsx
+import { uiTextToFormattedMessage as uiTextToFormattedMessage8 } from "@ory/elements-react";
 import { useIntl as useIntl11 } from "react-intl";
-import { formatMessage as formatMessage8 } from "@ory/elements-react";
 import { Fragment, jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 function DefaultText({ node, attributes }) {
   var _a;
   const intl = useIntl11();
   return /* @__PURE__ */ jsxs25(Fragment, { children: [
-    /* @__PURE__ */ jsx39("p", { "data-testid": `node/text/${attributes.id}/label`, children: formatMessage8(node.meta.label, intl) }),
-    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ jsx39("pre", { "data-testid": `node/text/lookup_secret_codes/text`, children: /* @__PURE__ */ jsx39("code", { children: formatMessage8(text, intl) }) }, index))
+    /* @__PURE__ */ jsx39("p", { "data-testid": `node/text/${attributes.id}/label`, children: node.meta.label ? uiTextToFormattedMessage8(node.meta.label, intl) : "" }),
+    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ jsx39("pre", { "data-testid": `node/text/lookup_secret_codes/text`, children: /* @__PURE__ */ jsx39("code", { children: text ? uiTextToFormattedMessage8(text, intl) : "" }) }, index))
   ] });
 }
 
@@ -1204,30 +1216,36 @@ function DefaultCurrentIdentifierButton({
 
 // src/theme/default/components/default-components.tsx
 var OryDefaultComponents = {
-  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
+  }
 };
 
 // src/theme/default/flows/error.tsx
@@ -1245,6 +1263,7 @@ import {
   OryProvider,
   OryTwoStepCard
 } from "@ory/elements-react";
+import merge from "lodash.merge";
 import { jsx as jsx43 } from "react/jsx-runtime";
 function Login({
   flow,
@@ -1252,10 +1271,7 @@ function Login({
   children,
   components: flowOverrideComponents
 }) {
-  const components = {
-    ...OryDefaultComponents,
-    ...flowOverrideComponents
-  };
+  const components = flowOverrideComponents ? merge({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
   return /* @__PURE__ */ jsx43(
     OryProvider,
     {
@@ -1274,6 +1290,7 @@ import {
   OryProvider as OryProvider2,
   OryTwoStepCard as OryTwoStepCard2
 } from "@ory/elements-react";
+import merge2 from "lodash.merge";
 import { jsx as jsx44 } from "react/jsx-runtime";
 function Recovery({
   flow,
@@ -1281,10 +1298,7 @@ function Recovery({
   children,
   components: flowOverrideComponents
 }) {
-  const components = {
-    ...OryDefaultComponents,
-    ...flowOverrideComponents
-  };
+  const components = flowOverrideComponents ? merge2({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
   return /* @__PURE__ */ jsx44(
     OryProvider2,
     {
@@ -1303,6 +1317,7 @@ import {
   OryProvider as OryProvider3,
   OryTwoStepCard as OryTwoStepCard3
 } from "@ory/elements-react";
+import merge3 from "lodash.merge";
 import { jsx as jsx45 } from "react/jsx-runtime";
 function Registration({
   flow,
@@ -1310,10 +1325,7 @@ function Registration({
   components: flowOverrideComponents,
   config
 }) {
-  const components = {
-    ...OryDefaultComponents,
-    ...flowOverrideComponents
-  };
+  const components = flowOverrideComponents ? merge3({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
   return /* @__PURE__ */ jsx45(
     OryProvider3,
     {
@@ -1332,6 +1344,7 @@ import {
   OryProvider as OryProvider4,
   OryTwoStepCard as OryTwoStepCard4
 } from "@ory/elements-react";
+import merge4 from "lodash.merge";
 import { jsx as jsx46 } from "react/jsx-runtime";
 function Settings({
   flow,
@@ -1339,10 +1352,7 @@ function Settings({
   children,
   components: flowOverrideComponents
 }) {
-  const components = {
-    ...OryDefaultComponents,
-    ...flowOverrideComponents
-  };
+  const components = flowOverrideComponents ? merge4({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
   return /* @__PURE__ */ jsx46(
     OryProvider4,
     {
@@ -1361,6 +1371,7 @@ import {
   OryProvider as OryProvider5,
   OryTwoStepCard as OryTwoStepCard5
 } from "@ory/elements-react";
+import merge5 from "lodash.merge";
 import { jsx as jsx47 } from "react/jsx-runtime";
 function Verification({
   flow,
@@ -1368,10 +1379,7 @@ function Verification({
   children,
   components: flowOverrideComponents
 }) {
-  const components = {
-    ...OryDefaultComponents,
-    ...flowOverrideComponents
-  };
+  const components = flowOverrideComponents ? merge5({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
   return /* @__PURE__ */ jsx47(
     OryProvider5,
     {