@ory/elements-react 1.0.0-next.18 → 1.0.0-next.19

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 1.0.0-next.19 (2024-12-31)
+
+### 🩹 Fixes
+
+- properly handle form submits in settings flow ([#322](https://github.com/ory/elements/pull/322))
+
+### ❤️  Thank You
+
+- Jonas Hungershausen
+
 ## 1.0.0-next.18 (2024-12-30)
 
 ### 🚀 Features

package/api-report/elements-react.api.json

@@ -1043,6 +1043,55 @@
             "endIndex": 2
           }
         },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@ory/elements-react!OryCardSettingsSectionProps:type",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "type OryCardSettingsSectionProps = "
+            },
+            {
+              "kind": "Reference",
+              "text": "PropsWithChildren",
+              "canonicalReference": "@types/react!React.PropsWithChildren:type"
+            },
+            {
+              "kind": "Content",
+              "text": " & {\n    action: string;\n    method: string;\n    onSubmit: "
+            },
+            {
+              "kind": "Reference",
+              "text": "FormEventHandler",
+              "canonicalReference": "@types/react!React.FormEventHandler:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "HTMLFormElement",
+              "canonicalReference": "!HTMLFormElement:interface"
+            },
+            {
+              "kind": "Content",
+              "text": ">;\n}"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "fileUrlPath": "dist/index.d.ts",
+          "releaseTag": "Public",
+          "name": "OryCardSettingsSectionProps",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 7
+          }
+        },
         {
           "kind": "Function",
           "canonicalReference": "@ory/elements-react!OryCardValidationMessages:function(1)",
@@ -1499,8 +1548,8 @@
             },
             {
               "kind": "Reference",
-              "text": "OryFormSectionProps",
-              "canonicalReference": "@ory/elements-react!OryFormSectionProps:type"
+              "text": "OryCardSettingsSectionProps",
+              "canonicalReference": "@ory/elements-react!OryCardSettingsSectionProps:type"
             },
             {
               "kind": "Content",
@@ -2223,7 +2272,7 @@
           "excerptTokens": [
             {
               "kind": "Content",
-              "text": "declare function OryFormSection({ children, nodes }: "
+              "text": "declare function OryFormSection({ children, nodes, ...rest }: "
             },
             {
               "kind": "Reference",
@@ -2253,7 +2302,7 @@
           "overloadIndex": 1,
           "parameters": [
             {
-              "parameterName": "{ children, nodes }",
+              "parameterName": "{ children, nodes, ...rest }",
               "parameterTypeTokenRange": {
                 "startIndex": 1,
                 "endIndex": 2
@@ -2341,7 +2390,16 @@
             },
             {
               "kind": "Content",
-              "text": "<{\n    nodes?: "
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "OryFormProps$1",
+              "canonicalReference": "@ory/elements-react!~OryFormProps$1:type"
+            },
+            {
+              "kind": "Content",
+              "text": " & {\n    nodes?: "
             },
             {
               "kind": "Reference",
@@ -2362,7 +2420,7 @@
           "name": "OryFormSectionProps",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 5
+            "endIndex": 7
           }
         },
         {
@@ -3058,7 +3116,7 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    linkButtons: "
+              "text": "{\n    linkButtons: ("
             },
             {
               "kind": "Reference",
@@ -3067,7 +3125,7 @@
             },
             {
               "kind": "Content",
-              "text": "[];\n    unlinkButtons: "
+              "text": " & {\n        onClick: () => void;\n    })[];\n    unlinkButtons: ("
             },
             {
               "kind": "Reference",
@@ -3076,7 +3134,7 @@
             },
             {
               "kind": "Content",
-              "text": "[];\n}"
+              "text": " & {\n        onClick: () => void;\n    })[];\n}"
             },
             {
               "kind": "Content",
@@ -3111,7 +3169,7 @@
             },
             {
               "kind": "Content",
-              "text": " & {\n        onClick: () => void;\n    };\n    removeButtons: "
+              "text": " & {\n        onClick: () => void;\n    };\n    removeButtons: ("
             },
             {
               "kind": "Reference",
@@ -3120,7 +3178,7 @@
             },
             {
               "kind": "Content",
-              "text": "[];\n}"
+              "text": " & {\n        onClick: () => void;\n    })[];\n}"
             },
             {
               "kind": "Content",
@@ -3146,7 +3204,7 @@
             },
             {
               "kind": "Content",
-              "text": "{\n    codes: string[];\n    regnerateButton?: "
+              "text": "{\n    codes: string[];\n    regnerateButton: "
             },
             {
               "kind": "Reference",
@@ -3155,7 +3213,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n    revealButton?: "
+              "text": " | undefined;\n    revealButton: "
             },
             {
               "kind": "Reference",
@@ -3164,7 +3222,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n}"
+              "text": " | undefined;\n    onRegenerate: () => void;\n    onReveal: () => void;\n}"
             },
             {
               "kind": "Content",
@@ -3199,7 +3257,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n    totpSecret: "
+              "text": " | undefined;\n    totpSecret: "
             },
             {
               "kind": "Reference",
@@ -3208,7 +3266,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n    totpInput: "
+              "text": " | undefined;\n    totpInput: "
             },
             {
               "kind": "Reference",
@@ -3217,7 +3275,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n} | {\n    totpUnlink: "
+              "text": " | undefined;\n    totpUnlink: "
             },
             {
               "kind": "Reference",
@@ -3226,7 +3284,7 @@
             },
             {
               "kind": "Content",
-              "text": ";\n}"
+              "text": " | undefined;\n    onUnlink: () => void;\n}"
             },
             {
               "kind": "Content",
@@ -3270,7 +3328,7 @@
             },
             {
               "kind": "Content",
-              "text": " & {\n        onClick: () => void;\n    };\n    removeButtons: "
+              "text": " & {\n        onClick: () => void;\n    };\n    removeButtons: ("
             },
             {
               "kind": "Reference",
@@ -3279,7 +3337,7 @@
             },
             {
               "kind": "Content",
-              "text": "[];\n}"
+              "text": " & {\n        onClick: () => void;\n    })[];\n}"
             },
             {
               "kind": "Content",

package/api-report/elements-react.api.md

@@ -138,6 +138,13 @@ export type OryCardLogoProps = Record<string, never>;
 // @public (undocumented)
 export type OryCardProps = PropsWithChildren;
 
+// @public (undocumented)
+export type OryCardSettingsSectionProps = PropsWithChildren & {
+    action: string;
+    method: string;
+    onSubmit: FormEventHandler<HTMLFormElement>;
+};
+
 // @public (undocumented)
 export function OryCardValidationMessages({ ...props }: OryMessageRootProps): react_jsx_runtime.JSX.Element | null;
 
@@ -189,7 +196,7 @@ export type OryFlowComponents = {
         Logo: ComponentType<OryCardLogoProps>;
         Divider: ComponentType<OryCardDividerProps>;
         AuthMethodListItem: ComponentType<OryCardAuthMethodListItemProps>;
-        SettingsSection: ComponentType<OryFormSectionProps>;
+        SettingsSection: ComponentType<OryCardSettingsSectionProps>;
         SettingsSectionContent: ComponentType<OryFormSectionContentProps>;
         SettingsSectionFooter: ComponentType<OryFormSectionFooterProps>;
     };
@@ -256,7 +263,7 @@ export type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
 };
 
 // @public (undocumented)
-export function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
+export function OryFormSection({ children, nodes, ...rest }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
 
 // @public (undocumented)
 export type OryFormSectionContentProps = PropsWithChildren<{
@@ -269,8 +276,10 @@ export type OryFormSectionFooterProps = PropsWithChildren<{
     text?: string;
 }>;
 
+// Warning: (ae-forgotten-export) The symbol "OryFormProps$1" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
-export type OryFormSectionProps = PropsWithChildren<{
+export type OryFormSectionProps = PropsWithChildren<OryFormProps$1 & {
     nodes?: UiNode[];
 }>;
 
@@ -352,8 +361,12 @@ export function OrySettingsCard(): react_jsx_runtime.JSX.Element;
 
 // @public (undocumented)
 export type OrySettingsOidcProps = {
-    linkButtons: UiNode[];
-    unlinkButtons: UiNode[];
+    linkButtons: (UiNode & {
+        onClick: () => void;
+    })[];
+    unlinkButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 
 // @public (undocumented)
@@ -361,23 +374,27 @@ export type OrySettingsPasskeyProps = {
     triggerButton: UiNode & {
         onClick: () => void;
     };
-    removeButtons: UiNode[];
+    removeButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 
 // @public (undocumented)
 export type OrySettingsRecoveryCodesProps = {
     codes: string[];
-    regnerateButton?: UiNode;
-    revealButton?: UiNode;
+    regnerateButton: UiNode | undefined;
+    revealButton: UiNode | undefined;
+    onRegenerate: () => void;
+    onReveal: () => void;
 };
 
 // @public (undocumented)
 export type OrySettingsTotpProps = {
-    totpImage: UiNode;
-    totpSecret: UiNode;
-    totpInput: UiNode;
-} | {
-    totpUnlink: UiNode;
+    totpImage: UiNode | undefined;
+    totpSecret: UiNode | undefined;
+    totpInput: UiNode | undefined;
+    totpUnlink: UiNode | undefined;
+    onUnlink: () => void;
 };
 
 // @public (undocumented)
@@ -386,7 +403,9 @@ export type OrySettingsWebauthnProps = {
     triggerButton: UiNode & {
         onClick: () => void;
     };
-    removeButtons: UiNode[];
+    removeButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 
 // @public (undocumented)

package/api-report/temp/elements-react.api.md

@@ -138,6 +138,13 @@ export type OryCardLogoProps = Record<string, never>;
 // @public (undocumented)
 export type OryCardProps = PropsWithChildren;
 
+// @public (undocumented)
+export type OryCardSettingsSectionProps = PropsWithChildren & {
+    action: string;
+    method: string;
+    onSubmit: FormEventHandler<HTMLFormElement>;
+};
+
 // @public (undocumented)
 export function OryCardValidationMessages({ ...props }: OryMessageRootProps): react_jsx_runtime.JSX.Element | null;
 
@@ -189,7 +196,7 @@ export type OryFlowComponents = {
         Logo: ComponentType<OryCardLogoProps>;
         Divider: ComponentType<OryCardDividerProps>;
         AuthMethodListItem: ComponentType<OryCardAuthMethodListItemProps>;
-        SettingsSection: ComponentType<OryFormSectionProps>;
+        SettingsSection: ComponentType<OryCardSettingsSectionProps>;
         SettingsSectionContent: ComponentType<OryFormSectionContentProps>;
         SettingsSectionFooter: ComponentType<OryFormSectionFooterProps>;
     };
@@ -256,7 +263,7 @@ export type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
 };
 
 // @public (undocumented)
-export function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
+export function OryFormSection({ children, nodes, ...rest }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
 
 // @public (undocumented)
 export type OryFormSectionContentProps = PropsWithChildren<{
@@ -269,8 +276,10 @@ export type OryFormSectionFooterProps = PropsWithChildren<{
     text?: string;
 }>;
 
+// Warning: (ae-forgotten-export) The symbol "OryFormProps$1" needs to be exported by the entry point index.d.ts
+//
 // @public (undocumented)
-export type OryFormSectionProps = PropsWithChildren<{
+export type OryFormSectionProps = PropsWithChildren<OryFormProps$1 & {
     nodes?: UiNode[];
 }>;
 
@@ -352,8 +361,12 @@ export function OrySettingsCard(): react_jsx_runtime.JSX.Element;
 
 // @public (undocumented)
 export type OrySettingsOidcProps = {
-    linkButtons: UiNode[];
-    unlinkButtons: UiNode[];
+    linkButtons: (UiNode & {
+        onClick: () => void;
+    })[];
+    unlinkButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 
 // @public (undocumented)
@@ -361,23 +374,27 @@ export type OrySettingsPasskeyProps = {
     triggerButton: UiNode & {
         onClick: () => void;
     };
-    removeButtons: UiNode[];
+    removeButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 
 // @public (undocumented)
 export type OrySettingsRecoveryCodesProps = {
     codes: string[];
-    regnerateButton?: UiNode;
-    revealButton?: UiNode;
+    regnerateButton: UiNode | undefined;
+    revealButton: UiNode | undefined;
+    onRegenerate: () => void;
+    onReveal: () => void;
 };
 
 // @public (undocumented)
 export type OrySettingsTotpProps = {
-    totpImage: UiNode;
-    totpSecret: UiNode;
-    totpInput: UiNode;
-} | {
-    totpUnlink: UiNode;
+    totpImage: UiNode | undefined;
+    totpSecret: UiNode | undefined;
+    totpInput: UiNode | undefined;
+    totpUnlink: UiNode | undefined;
+    onUnlink: () => void;
 };
 
 // @public (undocumented)
@@ -386,7 +403,9 @@ export type OrySettingsWebauthnProps = {
     triggerButton: UiNode & {
         onClick: () => void;
     };
-    removeButtons: UiNode[];
+    removeButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 
 // @public (undocumented)

package/dist/index.d.mts

@@ -120,32 +120,42 @@ declare function OrySettingsCard(): react_jsx_runtime.JSX.Element;
 
 type OrySettingsRecoveryCodesProps = {
     codes: string[];
-    regnerateButton?: UiNode;
-    revealButton?: UiNode;
+    regnerateButton: UiNode | undefined;
+    revealButton: UiNode | undefined;
+    onRegenerate: () => void;
+    onReveal: () => void;
 };
 type OrySettingsTotpProps = {
-    totpImage: UiNode;
-    totpSecret: UiNode;
-    totpInput: UiNode;
-} | {
-    totpUnlink: UiNode;
+    totpImage: UiNode | undefined;
+    totpSecret: UiNode | undefined;
+    totpInput: UiNode | undefined;
+    totpUnlink: UiNode | undefined;
+    onUnlink: () => void;
 };
 type OrySettingsOidcProps = {
-    linkButtons: UiNode[];
-    unlinkButtons: UiNode[];
+    linkButtons: (UiNode & {
+        onClick: () => void;
+    })[];
+    unlinkButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 type OrySettingsWebauthnProps = {
     nameInput: UiNode;
     triggerButton: UiNode & {
         onClick: () => void;
     };
-    removeButtons: UiNode[];
+    removeButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 type OrySettingsPasskeyProps = {
     triggerButton: UiNode & {
         onClick: () => void;
     };
-    removeButtons: UiNode[];
+    removeButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 
 type OryFormGroupsProps = PropsWithChildren<{
@@ -160,10 +170,16 @@ type OryMessageContentProps = {
 type OryMessageRootProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 declare function OryCardValidationMessages({ ...props }: OryMessageRootProps): react_jsx_runtime.JSX.Element | null;
 
-type OryFormSectionProps = PropsWithChildren<{
+type OryFormProps$1 = Omit<ComponentPropsWithoutRef<"form">, "action" | "method" | "onSubmit">;
+type OryFormSectionProps = PropsWithChildren<OryFormProps$1 & {
     nodes?: UiNode[];
 }>;
-declare function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
+type OryCardSettingsSectionProps = PropsWithChildren & {
+    action: string;
+    method: string;
+    onSubmit: FormEventHandler<HTMLFormElement>;
+};
+declare function OryFormSection({ children, nodes, ...rest }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
 
 type OryFormOidcButtonsProps = PropsWithChildren<{
     hideDivider?: boolean;
@@ -259,7 +275,7 @@ type OryFlowComponents = {
         /**
          * The SettingsSection component is rendered around each section of the settings.
          */
-        SettingsSection: ComponentType<OryFormSectionProps>;
+        SettingsSection: ComponentType<OryCardSettingsSectionProps>;
         /**
          * The SettingsSectionContent component is rendered around the content of each section of the settings.
          */
@@ -563,4 +579,4 @@ type OryProviderProps = {
 } & OryFlowContainer & PropsWithChildren;
 declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
 
-export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, OryCardValidationMessages, type OryClientConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };

package/dist/index.d.ts

@@ -120,32 +120,42 @@ declare function OrySettingsCard(): react_jsx_runtime.JSX.Element;
 
 type OrySettingsRecoveryCodesProps = {
     codes: string[];
-    regnerateButton?: UiNode;
-    revealButton?: UiNode;
+    regnerateButton: UiNode | undefined;
+    revealButton: UiNode | undefined;
+    onRegenerate: () => void;
+    onReveal: () => void;
 };
 type OrySettingsTotpProps = {
-    totpImage: UiNode;
-    totpSecret: UiNode;
-    totpInput: UiNode;
-} | {
-    totpUnlink: UiNode;
+    totpImage: UiNode | undefined;
+    totpSecret: UiNode | undefined;
+    totpInput: UiNode | undefined;
+    totpUnlink: UiNode | undefined;
+    onUnlink: () => void;
 };
 type OrySettingsOidcProps = {
-    linkButtons: UiNode[];
-    unlinkButtons: UiNode[];
+    linkButtons: (UiNode & {
+        onClick: () => void;
+    })[];
+    unlinkButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 type OrySettingsWebauthnProps = {
     nameInput: UiNode;
     triggerButton: UiNode & {
         onClick: () => void;
     };
-    removeButtons: UiNode[];
+    removeButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 type OrySettingsPasskeyProps = {
     triggerButton: UiNode & {
         onClick: () => void;
     };
-    removeButtons: UiNode[];
+    removeButtons: (UiNode & {
+        onClick: () => void;
+    })[];
 };
 
 type OryFormGroupsProps = PropsWithChildren<{
@@ -160,10 +170,16 @@ type OryMessageContentProps = {
 type OryMessageRootProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 declare function OryCardValidationMessages({ ...props }: OryMessageRootProps): react_jsx_runtime.JSX.Element | null;
 
-type OryFormSectionProps = PropsWithChildren<{
+type OryFormProps$1 = Omit<ComponentPropsWithoutRef<"form">, "action" | "method" | "onSubmit">;
+type OryFormSectionProps = PropsWithChildren<OryFormProps$1 & {
     nodes?: UiNode[];
 }>;
-declare function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
+type OryCardSettingsSectionProps = PropsWithChildren & {
+    action: string;
+    method: string;
+    onSubmit: FormEventHandler<HTMLFormElement>;
+};
+declare function OryFormSection({ children, nodes, ...rest }: OryFormSectionProps): react_jsx_runtime.JSX.Element;
 
 type OryFormOidcButtonsProps = PropsWithChildren<{
     hideDivider?: boolean;
@@ -259,7 +275,7 @@ type OryFlowComponents = {
         /**
          * The SettingsSection component is rendered around each section of the settings.
          */
-        SettingsSection: ComponentType<OryFormSectionProps>;
+        SettingsSection: ComponentType<OryCardSettingsSectionProps>;
         /**
          * The SettingsSectionContent component is rendered around the content of each section of the settings.
          */
@@ -563,4 +579,4 @@ type OryProviderProps = {
 } & OryFlowContainer & PropsWithChildren;
 declare function OryProvider({ children, components: Components, ...oryFlowProps }: OryProviderProps): react_jsx_runtime.JSX.Element;
 
-export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, OryCardValidationMessages, type OryClientConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };
+export { type ErrorFlowContainer, type FlowContainerSetter, type FlowContextValue, type FormState, type FormStateAction, type FormValues, HeadlessPageHeader, type IntlConfig, type LoginFlowContainer, type OnSubmitHandlerProps, OryCard, type OryCardAuthMethodListItemProps, OryCardContent, type OryCardContentProps, type OryCardDividerProps, OryCardFooter, type OryCardFooterProps, OryCardHeader, type OryCardHeaderProps, type OryCardLogoProps, type OryCardRootProps as OryCardProps, type OryCardSettingsSectionProps, OryCardValidationMessages, type OryClientConfiguration, type OryFlowComponentOverrides, type OryFlowComponents, type OryFlowContainer, OryForm, OryFormGroupDivider, type OryFormGroupProps, OryFormGroups, type OryFormGroupsProps, OryFormOidcButtons, type OryFormOidcButtonsProps, type OryFormOidcRootProps, type OryFormProps, type OryFormRootProps, OryFormSection, type OryFormSectionContentProps, type OryFormSectionFooterProps, type OryFormSectionProps, OryFormSocialButtonsForm, locales as OryLocales, type OryMessageContentProps, type OryMessageRootProps, type OryNodeAnchorProps, type OryNodeButtonProps, type OryNodeImageProps, type OryNodeInputProps, type OryNodeLabelProps, type OryNodeOidcButtonProps, type OryNodeTextProps, type OryPageHeaderProps, OryProvider, type OryProviderProps, OrySettingsCard, type OrySettingsOidcProps, type OrySettingsPasskeyProps, type OrySettingsRecoveryCodesProps, type OrySettingsTotpProps, type OrySettingsWebauthnProps, OryTwoStepCard, type RecoveryFlowContainer, type RegistrationFlowContainer, type SettingsFlowContainer, type VerificationFlowContainer, messageTestId, uiTextToFormattedMessage, useComponents, useNodeSorter, useOryFlow };