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

package/dist/theme/default/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { OryCardContentProps, OryCardProps, HeadlessFormProps, HeadlessMessageProps, OryFlowComponents, OryClientConfiguration } from '@ory/elements-react';
+import { OryCardContentProps, OryCardProps, OryFormRootProps, OryMessageContentProps, OryFlowComponents, OryFlowComponentOverrides, OryClientConfiguration } from '@ory/elements-react';
 import * as react from 'react';
 import { PropsWithChildren } from 'react';
 import { FlowError, LoginFlow, RecoveryFlow, RegistrationFlow, SettingsFlow, VerificationFlow } from '@ory/client-fetch';
@@ -14,50 +14,50 @@ declare function DefaultCardLogo(): react_jsx_runtime.JSX.Element;
 
 declare function DefaultCard({ children }: OryCardProps): react_jsx_runtime.JSX.Element;
 
-declare function DefaultFormContainer({ children, onSubmit, action, method, }: PropsWithChildren<HeadlessFormProps>): react_jsx_runtime.JSX.Element;
+declare function DefaultFormContainer({ children, onSubmit, action, method, }: PropsWithChildren<OryFormRootProps>): react_jsx_runtime.JSX.Element;
 declare function DefaultMessageContainer({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element | null;
-declare function DefaultMessage({ message }: HeadlessMessageProps): react_jsx_runtime.JSX.Element;
+declare function DefaultMessage({ message }: OryMessageContentProps): react_jsx_runtime.JSX.Element;
 
 declare const OryDefaultComponents: OryFlowComponents;
 
 type ErrorFlowContextProps = {
     error: FlowError;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Error({ error, children, }: PropsWithChildren<ErrorFlowContextProps>): react_jsx_runtime.JSX.Element;
 
 type LoginFlowContextProps = {
     flow: LoginFlow;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Login({ flow, config, children, components: flowOverrideComponents, }: PropsWithChildren<LoginFlowContextProps>): react_jsx_runtime.JSX.Element;
 
 type RecoveryFlowContextProps = {
     flow: RecoveryFlow;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Recovery({ flow, config, children, components: flowOverrideComponents, }: PropsWithChildren<RecoveryFlowContextProps>): react_jsx_runtime.JSX.Element;
 
 type RegistrationFlowContextProps = {
     flow: RegistrationFlow;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Registration({ flow, children, components: flowOverrideComponents, config, }: PropsWithChildren<RegistrationFlowContextProps>): react_jsx_runtime.JSX.Element;
 
 type SettingsFlowContextProps = {
     flow: SettingsFlow;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Settings({ flow, config, children, components: flowOverrideComponents, }: PropsWithChildren<SettingsFlowContextProps>): react_jsx_runtime.JSX.Element;
 
 type VerificationFlowContextProps = {
     flow: VerificationFlow;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Verification({ flow, config, children, components: flowOverrideComponents, }: PropsWithChildren<VerificationFlowContextProps>): react_jsx_runtime.JSX.Element;

package/dist/theme/default/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { OryCardContentProps, OryCardProps, HeadlessFormProps, HeadlessMessageProps, OryFlowComponents, OryClientConfiguration } from '@ory/elements-react';
+import { OryCardContentProps, OryCardProps, OryFormRootProps, OryMessageContentProps, OryFlowComponents, OryFlowComponentOverrides, OryClientConfiguration } from '@ory/elements-react';
 import * as react from 'react';
 import { PropsWithChildren } from 'react';
 import { FlowError, LoginFlow, RecoveryFlow, RegistrationFlow, SettingsFlow, VerificationFlow } from '@ory/client-fetch';
@@ -14,50 +14,50 @@ declare function DefaultCardLogo(): react_jsx_runtime.JSX.Element;
 
 declare function DefaultCard({ children }: OryCardProps): react_jsx_runtime.JSX.Element;
 
-declare function DefaultFormContainer({ children, onSubmit, action, method, }: PropsWithChildren<HeadlessFormProps>): react_jsx_runtime.JSX.Element;
+declare function DefaultFormContainer({ children, onSubmit, action, method, }: PropsWithChildren<OryFormRootProps>): react_jsx_runtime.JSX.Element;
 declare function DefaultMessageContainer({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element | null;
-declare function DefaultMessage({ message }: HeadlessMessageProps): react_jsx_runtime.JSX.Element;
+declare function DefaultMessage({ message }: OryMessageContentProps): react_jsx_runtime.JSX.Element;
 
 declare const OryDefaultComponents: OryFlowComponents;
 
 type ErrorFlowContextProps = {
     error: FlowError;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Error({ error, children, }: PropsWithChildren<ErrorFlowContextProps>): react_jsx_runtime.JSX.Element;
 
 type LoginFlowContextProps = {
     flow: LoginFlow;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Login({ flow, config, children, components: flowOverrideComponents, }: PropsWithChildren<LoginFlowContextProps>): react_jsx_runtime.JSX.Element;
 
 type RecoveryFlowContextProps = {
     flow: RecoveryFlow;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Recovery({ flow, config, children, components: flowOverrideComponents, }: PropsWithChildren<RecoveryFlowContextProps>): react_jsx_runtime.JSX.Element;
 
 type RegistrationFlowContextProps = {
     flow: RegistrationFlow;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Registration({ flow, children, components: flowOverrideComponents, config, }: PropsWithChildren<RegistrationFlowContextProps>): react_jsx_runtime.JSX.Element;
 
 type SettingsFlowContextProps = {
     flow: SettingsFlow;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Settings({ flow, config, children, components: flowOverrideComponents, }: PropsWithChildren<SettingsFlowContextProps>): react_jsx_runtime.JSX.Element;
 
 type VerificationFlowContextProps = {
     flow: VerificationFlow;
-    components?: Partial<OryFlowComponents>;
+    components?: OryFlowComponentOverrides;
     config: OryClientConfiguration;
 };
 declare function Verification({ flow, config, children, components: flowOverrideComponents, }: PropsWithChildren<VerificationFlowContextProps>): react_jsx_runtime.JSX.Element;

package/dist/theme/default/index.js

@@ -340,9 +340,9 @@ function useCardHeaderText(nodes, opts) {
 // src/theme/default/components/card/header.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function InnerCardHeader({ title, text }) {
-  const { CardLogo } = (0, import_elements_react2.useComponents)();
+  const { Card } = (0, import_elements_react2.useComponents)();
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { className: "flex flex-col gap-8 antialiased", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardLogo, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Card.Logo, {}),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { className: "font-semibold text-lg text-dialog-fg-default leading-normal", children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm leading-normal text-dialog-fg-subtle", children: text })
@@ -392,8 +392,8 @@ function cn(...inputs) {
 }
 
 // src/theme/default/components/form/index.tsx
-var import_elements_react4 = require("@ory/elements-react");
 var import_react_intl3 = require("react-intl");
+var import_elements_react4 = require("@ory/elements-react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function DefaultFormContainer({
   children,
@@ -429,11 +429,14 @@ function DefaultMessage({ message }) {
         "text-forms-fg-default": message.type === "info",
         "text-forms-fg-success": message.type === "success"
       }),
-      children: (0, import_elements_react4.formatMessage)(message, intl)
+      children: (0, import_elements_react4.uiTextToFormattedMessage)(message, intl)
     }
   );
 }
 
+// src/theme/default/components/card/auth-methods.tsx
+var import_react_intl4 = require("react-intl");
+
 // src/theme/default/assets/icons/code.svg
 var React3 = __toESM(require("react"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -471,7 +474,6 @@ var SvgWebauthn = (props) => {
 var webauthn_default = SvgWebauthn;
 
 // src/theme/default/components/card/auth-methods.tsx
-var import_react_intl4 = require("react-intl");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var iconsMap = {
   code: code_default,
@@ -502,6 +504,8 @@ function DefaultAuthMethodListItem({
 }
 
 // src/theme/default/components/form/button.tsx
+var import_client_fetch3 = require("@ory/client-fetch");
+var import_elements_react5 = require("@ory/elements-react");
 var import_react_hook_form = require("react-hook-form");
 var import_react_intl5 = require("react-intl");
 
@@ -545,8 +549,6 @@ function Spinner({ className }) {
 }
 
 // src/theme/default/components/form/button.tsx
-var import_elements_react5 = require("@ory/elements-react");
-var import_client_fetch3 = require("@ory/client-fetch");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var DefaultButton = ({
   attributes,
@@ -611,7 +613,7 @@ var DefaultButton = ({
                 "text-button-secondary-fg-default/20": isSubmitting && !isPrimary
               }
             ),
-            children: (0, import_elements_react5.formatMessage)(label, intl)
+            children: label ? (0, import_elements_react5.uiTextToFormattedMessage)(label, intl) : ""
           }
         )
       ]
@@ -621,11 +623,11 @@ var DefaultButton = ({
 DefaultButton.displayName = "DefaultButton";
 
 // src/theme/default/components/form/checkbox.tsx
+var import_client_fetch4 = require("@ory/client-fetch");
+var import_elements_react6 = require("@ory/elements-react");
 var import_react = require("react");
 var import_react_hook_form2 = require("react-hook-form");
 var import_react_intl6 = require("react-intl");
-var import_elements_react6 = require("@ory/elements-react");
-var import_client_fetch4 = require("@ory/client-fetch");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function CheckboxSVG() {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
@@ -702,13 +704,13 @@ var DefaultCheckbox = ({
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckboxSVG, {})
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "text-sm items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "text-sm font-normal leading-normal text-forms-fg-default", children: label && (0, import_elements_react6.formatMessage)(label, intl) }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "text-sm font-normal leading-normal text-forms-fg-default", children: label && (0, import_elements_react6.uiTextToFormattedMessage)(label, intl) }),
           node.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "span",
             {
               className: "text-sm text-red-900 mt-1",
               ...(0, import_elements_react6.messageTestId)(message),
-              children: (0, import_elements_react6.formatMessage)(message, intl)
+              children: (0, import_elements_react6.uiTextToFormattedMessage)(message, intl)
             },
             message.id
           ))
@@ -720,9 +722,7 @@ var DefaultCheckbox = ({
 
 // src/theme/default/components/form/group-container.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-function DefaultGroupContainer({
-  children
-}) {
+function DefaultGroupContainer({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "grid grid-cols-1 gap-6", children });
 }
 
@@ -759,7 +759,7 @@ var DefaultInput = ({
       defaultMessage: "Enter your {placeholder}"
     },
     {
-      placeholder: (0, import_elements_react7.formatMessage)(label, intl)
+      placeholder: (0, import_elements_react7.uiTextToFormattedMessage)(label, intl)
     }
   ) : "";
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -778,9 +778,8 @@ var DefaultInput = ({
 
 // src/theme/default/components/form/label.tsx
 var import_client_fetch6 = require("@ory/client-fetch");
-var import_react_intl8 = require("react-intl");
 var import_elements_react8 = require("@ory/elements-react");
-var import_elements_react9 = require("@ory/elements-react");
+var import_react_intl8 = require("react-intl");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function DefaultLabel({
   node,
@@ -798,11 +797,11 @@ function DefaultLabel({
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "label",
         {
-          ...(0, import_elements_react9.messageTestId)(label),
+          ...(0, import_elements_react8.messageTestId)(label),
           className: "text-sm font-medium leading-normal",
           htmlFor: attributes.name,
           ...rest,
-          children: (0, import_elements_react9.formatMessage)(label, intl)
+          children: (0, import_elements_react8.uiTextToFormattedMessage)(label, intl)
         }
       ),
       isPassword && config.project.recovery_enabled && flowType === import_client_fetch6.FlowType.Login && // TODO: make it possible to override with a custom component
@@ -835,8 +834,8 @@ function DefaultLabel({
           "text-forms-fg-default": message.type === "info",
           "text-forms-fg-success": message.type === "success"
         }),
-        ...(0, import_elements_react9.messageTestId)(message),
-        children: (0, import_elements_react9.formatMessage)(message, intl)
+        ...(0, import_elements_react8.messageTestId)(message),
+        children: (0, import_elements_react8.uiTextToFormattedMessage)(message, intl)
       },
       message.id
     ))
@@ -844,10 +843,10 @@ function DefaultLabel({
 }
 
 // src/theme/default/components/form/link-button.tsx
+var import_client_fetch7 = require("@ory/client-fetch");
+var import_elements_react9 = require("@ory/elements-react");
 var import_react2 = require("react");
 var import_react_intl9 = require("react-intl");
-var import_elements_react10 = require("@ory/elements-react");
-var import_client_fetch7 = require("@ory/client-fetch");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var DefaultLinkButton = (0, import_react2.forwardRef)(({ attributes, node }, ref) => {
   const intl = (0, import_react_intl9.useIntl)();
@@ -857,11 +856,11 @@ var DefaultLinkButton = (0, import_react2.forwardRef)(({ attributes, node }, ref
     {
       ...attributes,
       ref,
-      title: (0, import_elements_react10.formatMessage)(label, intl),
+      title: label ? (0, import_elements_react9.uiTextToFormattedMessage)(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: (0, import_elements_react10.formatMessage)(label, intl)
+      children: label ? (0, import_elements_react9.uiTextToFormattedMessage)(label, intl) : ""
     }
   );
 });
@@ -947,7 +946,7 @@ var DefaultPinCodeInput = ({ attributes }) => {
 };
 
 // src/theme/default/components/form/social.tsx
-var import_elements_react11 = require("@ory/elements-react");
+var import_elements_react10 = require("@ory/elements-react");
 
 // src/theme/default/provider-logos/apple.svg
 var React8 = __toESM(require("react"));
@@ -1152,7 +1151,7 @@ function DefaultButtonSocial({
   } = attributes;
   const {
     flow: { ui }
-  } = (0, import_elements_react11.useOryFlow)();
+  } = (0, import_elements_react10.useOryFlow)();
   const intl = (0, import_react_intl10.useIntl)();
   const oidcNodeCount = (_a = ui.nodes.filter((node2) => node2.group === "oidc").length) != null ? _a : 0;
   const Logo = provider_logos_default[attributes.value];
@@ -1178,7 +1177,7 @@ function DefaultButtonSocial({
             className: "object-fill w-full h-full"
           }
         ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "rounded-full aspect-square border flex items-center justify-center text-xs", children: provider.slice(0, 2) }) }),
-        showLabel ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm text-left leading-none font-medium text-forms-fg-default flex-grow", children: (0, import_elements_react11.formatMessage)(node.meta.label, intl) }) : null
+        showLabel && node.meta.label ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm text-left leading-none font-medium text-forms-fg-default flex-grow", children: (0, import_elements_react10.uiTextToFormattedMessage)(node.meta.label, intl) }) : null
       ]
     }
   );
@@ -1202,15 +1201,15 @@ function DefaultSocialButtonContainer({
 }
 
 // src/theme/default/components/form/text.tsx
+var import_elements_react11 = require("@ory/elements-react");
 var import_react_intl11 = require("react-intl");
-var import_elements_react12 = require("@ory/elements-react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function DefaultText({ node, attributes }) {
   var _a;
   const intl = (0, import_react_intl11.useIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { "data-testid": `node/text/${attributes.id}/label`, children: (0, import_elements_react12.formatMessage)(node.meta.label, intl) }),
-    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("pre", { "data-testid": `node/text/lookup_secret_codes/text`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { children: (0, import_elements_react12.formatMessage)(text, intl) }) }, index))
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { "data-testid": `node/text/${attributes.id}/label`, children: node.meta.label ? (0, import_elements_react11.uiTextToFormattedMessage)(node.meta.label, intl) : "" }),
+    (_a = attributes.text.context.secrets) == null ? void 0 : _a.map((text, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("pre", { "data-testid": `node/text/lookup_secret_codes/text`, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("code", { children: text ? (0, import_elements_react11.uiTextToFormattedMessage)(text, intl) : "" }) }, index))
   ] });
 }
 
@@ -1250,30 +1249,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
@@ -1287,7 +1292,8 @@ function Error2({
 
 // src/theme/default/flows/login.tsx
 var import_client_fetch8 = require("@ory/client-fetch");
-var import_elements_react13 = require("@ory/elements-react");
+var import_elements_react12 = require("@ory/elements-react");
+var import_lodash = __toESM(require("lodash.merge"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function Login({
   flow,
@@ -1295,25 +1301,23 @@ function Login({
   children,
   components: flowOverrideComponents
 }) {
-  const components = {
-    ...OryDefaultComponents,
-    ...flowOverrideComponents
-  };
+  const components = flowOverrideComponents ? (0, import_lodash.default)({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_elements_react13.OryProvider,
+    import_elements_react12.OryProvider,
     {
       config,
       flow,
       flowType: import_client_fetch8.FlowType.Login,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_elements_react13.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_elements_react12.OryTwoStepCard, {})
     }
   );
 }
 
 // src/theme/default/flows/recovery.tsx
 var import_client_fetch9 = require("@ory/client-fetch");
-var import_elements_react14 = require("@ory/elements-react");
+var import_elements_react13 = require("@ory/elements-react");
+var import_lodash2 = __toESM(require("lodash.merge"));
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function Recovery({
   flow,
@@ -1321,25 +1325,23 @@ function Recovery({
   children,
   components: flowOverrideComponents
 }) {
-  const components = {
-    ...OryDefaultComponents,
-    ...flowOverrideComponents
-  };
+  const components = flowOverrideComponents ? (0, import_lodash2.default)({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_elements_react14.OryProvider,
+    import_elements_react13.OryProvider,
     {
       config,
       flow,
       flowType: import_client_fetch9.FlowType.Recovery,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_elements_react14.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_elements_react13.OryTwoStepCard, {})
     }
   );
 }
 
 // src/theme/default/flows/registration.tsx
 var import_client_fetch10 = require("@ory/client-fetch");
-var import_elements_react15 = require("@ory/elements-react");
+var import_elements_react14 = require("@ory/elements-react");
+var import_lodash3 = __toESM(require("lodash.merge"));
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function Registration({
   flow,
@@ -1347,25 +1349,23 @@ function Registration({
   components: flowOverrideComponents,
   config
 }) {
-  const components = {
-    ...OryDefaultComponents,
-    ...flowOverrideComponents
-  };
+  const components = flowOverrideComponents ? (0, import_lodash3.default)({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    import_elements_react15.OryProvider,
+    import_elements_react14.OryProvider,
     {
       config,
       flow,
       flowType: import_client_fetch10.FlowType.Registration,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_elements_react15.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_elements_react14.OryTwoStepCard, {})
     }
   );
 }
 
 // src/theme/default/flows/settings.tsx
 var import_client_fetch11 = require("@ory/client-fetch");
-var import_elements_react16 = require("@ory/elements-react");
+var import_elements_react15 = require("@ory/elements-react");
+var import_lodash4 = __toESM(require("lodash.merge"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function Settings({
   flow,
@@ -1373,25 +1373,23 @@ function Settings({
   children,
   components: flowOverrideComponents
 }) {
-  const components = {
-    ...OryDefaultComponents,
-    ...flowOverrideComponents
-  };
+  const components = flowOverrideComponents ? (0, import_lodash4.default)({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-    import_elements_react16.OryProvider,
+    import_elements_react15.OryProvider,
     {
       config,
       flow,
       flowType: import_client_fetch11.FlowType.Settings,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_elements_react16.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_elements_react15.OryTwoStepCard, {})
     }
   );
 }
 
 // src/theme/default/flows/verification.tsx
 var import_client_fetch12 = require("@ory/client-fetch");
-var import_elements_react17 = require("@ory/elements-react");
+var import_elements_react16 = require("@ory/elements-react");
+var import_lodash5 = __toESM(require("lodash.merge"));
 var import_jsx_runtime47 = require("react/jsx-runtime");
 function Verification({
   flow,
@@ -1399,18 +1397,15 @@ function Verification({
   children,
   components: flowOverrideComponents
 }) {
-  const components = {
-    ...OryDefaultComponents,
-    ...flowOverrideComponents
-  };
+  const components = flowOverrideComponents ? (0, import_lodash5.default)({}, OryDefaultComponents, flowOverrideComponents) : OryDefaultComponents;
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-    import_elements_react17.OryProvider,
+    import_elements_react16.OryProvider,
     {
       config,
       flow,
       flowType: import_client_fetch12.FlowType.Verification,
       components,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_elements_react17.OryTwoStepCard, {})
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_elements_react16.OryTwoStepCard, {})
     }
   );
 }