@ory/elements-react 1.0.0-next.29 → 1.0.0-next.30

package/dist/index.js

@@ -92,7 +92,7 @@ function isChoosingMethod(uiNodes) {
     (node) => node.group === clientFetch.UiNodeGroupEnum.IdentifierFirst && "name" in node.attributes && node.attributes.name === "identifier" && node.attributes.type === "hidden"
   );
 }
-function filterZeroStepGroups(nodes) {
+function filterOidcOut(nodes) {
   return nodes.filter((node) => node.group !== clientFetch.UiNodeGroupEnum.Oidc);
 }
 function getFinalNodes(uniqueGroups, selectedGroup) {
@@ -153,7 +153,7 @@ function triggerToFunction(trigger) {
   }
   return triggerFn;
 }
-function nodesToAuthMethodGroups(nodes, excludeAuthMethods = [clientFetch.UiNodeGroupEnum.Oidc]) {
+function nodesToAuthMethodGroups(nodes, excludeAuthMethods = []) {
   var _a;
   const groups = {};
   for (const node of nodes) {
@@ -341,139 +341,6 @@ function OryCardHeader() {
   const { Card } = useComponents();
   return /* @__PURE__ */ jsxRuntime.jsx(Card.Header, {});
 }
-function OryCardFooter() {
-  const { Card } = useComponents();
-  return /* @__PURE__ */ jsxRuntime.jsx(Card.Footer, {});
-}
-var NodeInput = ({
-  node,
-  attributes
-}) => {
-  var _a;
-  const { Node: Node2 } = useComponents();
-  const { setValue } = reactHookForm.useFormContext();
-  const {
-    onloadTrigger,
-    onclickTrigger,
-    // These properties do not exist on input fields so we remove them (as we already have handled them).
-    onclick: _ignoredOnclick,
-    onload: _ignoredOnload,
-    //
-    ...attrs
-  } = attributes;
-  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
-  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
-  const setFormValue = () => {
-    if (attrs.value && !(isResendNode || isScreenSelectionNode)) {
-      setValue(attrs.name, attrs.value);
-    }
-  };
-  const hasRun = react.useRef(false);
-  react.useEffect(
-    () => {
-      setFormValue();
-      if (!hasRun.current && onloadTrigger) {
-        hasRun.current = true;
-        triggerToWindowCall(onloadTrigger);
-      }
-    },
-    // TODO(jonas): make sure onloadTrigger is stable
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- ignore onloadTrigger for now, until we make sure this is stable
-    []
-  );
-  const handleClick = () => {
-    setFormValue();
-    if (onclickTrigger) {
-      triggerToWindowCall(onclickTrigger);
-    }
-  };
-  const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
-  const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
-  switch (attributes.type) {
-    case clientFetch.UiNodeInputAttributesTypeEnum.Submit:
-    case clientFetch.UiNodeInputAttributesTypeEnum.Button:
-      if (isSocial) {
-        return /* @__PURE__ */ jsxRuntime.jsx(Node2.OidcButton, { attributes: attrs, node });
-      }
-      if (isResendNode || isScreenSelectionNode) {
-        return null;
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Node2.Label,
-        {
-          attributes: { ...attrs, label: void 0 },
-          node: { ...node, meta: { ...node.meta, label: void 0 } },
-          children: /* @__PURE__ */ jsxRuntime.jsx(Node2.Button, { attributes: attrs, node, onClick: handleClick })
-        }
-      );
-    case clientFetch.UiNodeInputAttributesTypeEnum.DatetimeLocal:
-      throw new Error("Not implemented");
-    case clientFetch.UiNodeInputAttributesTypeEnum.Checkbox:
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Node2.Label,
-        {
-          attributes: { ...attrs, label: void 0 },
-          node: { ...node, meta: { ...node.meta, label: void 0 } },
-          children: /* @__PURE__ */ jsxRuntime.jsx(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick })
-        }
-      );
-    case clientFetch.UiNodeInputAttributesTypeEnum.Hidden:
-      return /* @__PURE__ */ jsxRuntime.jsx(Node2.Input, { attributes: attrs, node, onClick: handleClick });
-    default:
-      if (isPinCodeInput) {
-        return /* @__PURE__ */ jsxRuntime.jsx(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Node2.CodeInput,
-          {
-            attributes: attrs,
-            node,
-            onClick: handleClick
-          }
-        ) });
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsxRuntime.jsx(Node2.Input, { attributes: attrs, node, onClick: handleClick }) });
-  }
-};
-var Node = ({ node, onClick }) => {
-  const { Node: Node2 } = useComponents();
-  if (clientFetch.isUiNodeImageAttributes(node.attributes)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Node2.Image, { node, attributes: node.attributes });
-  } else if (clientFetch.isUiNodeTextAttributes(node.attributes)) {
-    const attrs = node.attributes;
-    return /* @__PURE__ */ jsxRuntime.jsx(Node2.Text, { attributes: attrs, node });
-  } else if (clientFetch.isUiNodeInputAttributes(node.attributes)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(NodeInput, { node, attributes: node.attributes, onClick });
-  } else if (clientFetch.isUiNodeAnchorAttributes(node.attributes)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Node2.Anchor, { attributes: node.attributes, node });
-  } else if (clientFetch.isUiNodeScriptAttributes(node.attributes)) {
-    const {
-      crossorigin,
-      referrerpolicy,
-      node_type: _nodeType,
-      ...attributes
-    } = node.attributes;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "script",
-      {
-        crossOrigin: crossorigin,
-        referrerPolicy: referrerpolicy,
-        ...attributes
-      }
-    );
-  }
-  return null;
-};
-function OryFormGroups({ children, groups }) {
-  const {
-    flow: { ui }
-  } = useOryFlow();
-  const nodeSorter = useNodeSorter();
-  const { flowType } = useOryFlow();
-  const { Form } = useComponents();
-  const nodes = ui.nodes.filter((node) => groups.indexOf(node.group) > -1).sort((a, b) => nodeSorter(a, b, { flowType }));
-  return /* @__PURE__ */ jsxRuntime.jsx(Form.Group, { children: children != null ? children : nodes.map((node, k) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k);
-  }) });
-}
 function computeDefaultValues(nodes) {
   return nodes.reduce((acc, node) => {
     const attrs = node.attributes;
@@ -559,52 +426,22 @@ function OryFormProvider({
   });
   return /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...methods, children });
 }
-function OryFormOidcButtons({
-  children,
-  hideDivider
-}) {
-  const {
-    flow: { ui }
-  } = useOryFlow();
-  const { setValue } = reactHookForm.useFormContext();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
-  const { Form, Card, Node: Node2 } = useComponents();
-  if (filteredNodes.length === 0) {
-    return null;
-  }
-  const otherNodes = ui.nodes.filter(
-    (node) => node.group !== "oidc" && node.group !== "default"
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Form.OidcRoot, { nodes: filteredNodes, children: children != null ? children : filteredNodes.map((node, k) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Node2.OidcButton,
-        {
-          node,
-          attributes: node.attributes,
-          onClick: () => {
-            setValue(
-              "provider",
-              node.attributes.value
-            );
-            setValue("method", "oidc");
-          }
-        },
-        k
-      );
-    }) }),
-    !hideDivider && filteredNodes.length > 0 && otherNodes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {})
-  ] });
+function OryCard({ children }) {
+  const { Card } = useComponents();
+  return /* @__PURE__ */ jsxRuntime.jsx(Card.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children }) });
 }
-function OryFormSocialButtonsForm() {
-  const {
-    flow: { ui }
-  } = useOryFlow();
-  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
-  if (filteredNodes.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(OryForm, { children: /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}) }) });
+function OryCardFooter() {
+  const { Card } = useComponents();
+  return /* @__PURE__ */ jsxRuntime.jsx(Card.Footer, {});
+}
+function OryCardContent({ children }) {
+  const { Card } = useComponents();
+  return /* @__PURE__ */ jsxRuntime.jsx(Card.Content, { children });
+}
+
+// src/theme/default/utils/form.ts
+function isGroupImmediateSubmit(group) {
+  return group === "code";
 }
 function frontendClient(sdkUrl, opts = {}) {
   const config = new clientFetch.Configuration({
@@ -984,7 +821,7 @@ function OryForm({ children, onAfterSubmit }) {
   const methods = reactHookForm.useFormContext();
   const intl = reactIntl.useIntl();
   const onSubmit = useOryFormSubmit(onAfterSubmit);
-  const hasMethods = flowContainer.flow.ui.nodes.filter((node) => {
+  const hasMethods = flowContainer.flow.ui.nodes.some((node) => {
     if (clientFetch.isUiNodeInputAttributes(node.attributes)) {
       return node.attributes.name !== "csrf_token";
     } else if (clientFetch.isUiNodeAnchorAttributes(node.attributes)) {
@@ -995,7 +832,7 @@ function OryForm({ children, onAfterSubmit }) {
       return true;
     }
     return false;
-  }).length > 0;
+  });
   if (!hasMethods && ((_a = flowContainer.flow.ui.messages) != null ? _a : []).length === 0) {
     return intl.formatMessage({
       id: `identities.messages.${5000002}`,
@@ -1008,22 +845,7 @@ function OryForm({ children, onAfterSubmit }) {
       action: flowContainer.flow.ui.action,
       method: flowContainer.flow.ui.method,
       onSubmit: (e) => void methods.handleSubmit(onSubmit)(e),
-      children: children != null ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          OryFormGroups,
-          {
-            groups: [
-              "default",
-              "password",
-              "code",
-              "webauthn",
-              "passkey",
-              "identifier_first"
-            ]
-          }
-        )
-      ] })
+      children
     }
   );
 }
@@ -1040,88 +862,176 @@ function OryCardValidationMessages({ ...props }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Message.Root, { ...props, children: messages == null ? void 0 : messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(Message.Content, { message }, message.id)) });
 }
-function OryFormSection({
-  children,
-  nodes,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { nodes, children: /* @__PURE__ */ jsxRuntime.jsx(OryFormSectionInner, { ...rest, children }) });
-}
-function OryFormSectionInner({
-  children,
-  ...rest
-}) {
-  const { Card } = useComponents();
-  const flowContainer = useOryFlow();
-  const onSubmit = useOryFormSubmit();
-  const methods = reactHookForm.useFormContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Card.SettingsSection,
-    {
-      action: flowContainer.flow.ui.action,
-      method: flowContainer.flow.ui.method,
-      onSubmit: (e) => void methods.handleSubmit(onSubmit)(e),
-      ...rest,
-      children
+var NodeInput = ({
+  node,
+  attributes
+}) => {
+  var _a;
+  const { Node: Node2 } = useComponents();
+  const { setValue } = reactHookForm.useFormContext();
+  const {
+    onloadTrigger,
+    onclickTrigger,
+    // These properties do not exist on input fields so we remove them (as we already have handled them).
+    onclick: _ignoredOnclick,
+    onload: _ignoredOnload,
+    //
+    ...attrs
+  } = attributes;
+  const isResendNode = ((_a = node.meta.label) == null ? void 0 : _a.id) === 1070008;
+  const isScreenSelectionNode = "name" in node.attributes && node.attributes.name === "screen";
+  const setFormValue = () => {
+    if (attrs.value && !(isResendNode || isScreenSelectionNode)) {
+      setValue(attrs.name, attrs.value);
     }
+  };
+  const hasRun = react.useRef(false);
+  react.useEffect(
+    () => {
+      setFormValue();
+      if (!hasRun.current && onloadTrigger) {
+        hasRun.current = true;
+        triggerToWindowCall(onloadTrigger);
+      }
+    },
+    // TODO(jonas): make sure onloadTrigger is stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- ignore onloadTrigger for now, until we make sure this is stable
+    []
   );
-}
-function OryCardContent({ children }) {
-  const { Card } = useComponents();
-  if (children) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card.Content, { children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Card.Content, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(OryForm, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        OryFormGroups,
+  const handleClick = () => {
+    setFormValue();
+    if (onclickTrigger) {
+      triggerToWindowCall(onclickTrigger);
+    }
+  };
+  const isSocial = (attrs.name === "provider" || attrs.name === "link") && node.group === "oidc";
+  const isPinCodeInput = attrs.name === "code" && node.group === "code" || attrs.name === "totp_code" && node.group === "totp";
+  switch (attributes.type) {
+    case clientFetch.UiNodeInputAttributesTypeEnum.Submit:
+    case clientFetch.UiNodeInputAttributesTypeEnum.Button:
+      if (isSocial) {
+        return null;
+      }
+      if (isResendNode || isScreenSelectionNode) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Node2.Label,
         {
-          groups: [
-            "default",
-            "password",
-            "passkey",
-            "code",
-            "webauthn",
-            "profile",
-            "totp",
-            "identifier_first"
-          ]
+          attributes: { ...attrs, label: void 0 },
+          node: { ...node, meta: { ...node.meta, label: void 0 } },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Node2.Button, { attributes: attrs, node, onClick: handleClick })
         }
-      )
-    ] })
-  ] });
+      );
+    case clientFetch.UiNodeInputAttributesTypeEnum.DatetimeLocal:
+      throw new Error("Not implemented");
+    case clientFetch.UiNodeInputAttributesTypeEnum.Checkbox:
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Node2.Label,
+        {
+          attributes: { ...attrs, label: void 0 },
+          node: { ...node, meta: { ...node.meta, label: void 0 } },
+          children: /* @__PURE__ */ jsxRuntime.jsx(Node2.Checkbox, { attributes: attrs, node, onClick: handleClick })
+        }
+      );
+    case clientFetch.UiNodeInputAttributesTypeEnum.Hidden:
+      return /* @__PURE__ */ jsxRuntime.jsx(Node2.Input, { attributes: attrs, node, onClick: handleClick });
+    default:
+      if (isPinCodeInput) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Node2.CodeInput,
+          {
+            attributes: attrs,
+            node,
+            onClick: handleClick
+          }
+        ) });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(Node2.Label, { attributes: attrs, node, children: /* @__PURE__ */ jsxRuntime.jsx(Node2.Input, { attributes: attrs, node, onClick: handleClick }) });
+  }
+};
+var Node = ({ node, onClick }) => {
+  const { Node: Node2 } = useComponents();
+  if (clientFetch.isUiNodeImageAttributes(node.attributes)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Node2.Image, { node, attributes: node.attributes });
+  } else if (clientFetch.isUiNodeTextAttributes(node.attributes)) {
+    const attrs = node.attributes;
+    return /* @__PURE__ */ jsxRuntime.jsx(Node2.Text, { attributes: attrs, node });
+  } else if (clientFetch.isUiNodeInputAttributes(node.attributes)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(NodeInput, { node, attributes: node.attributes, onClick });
+  } else if (clientFetch.isUiNodeAnchorAttributes(node.attributes)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Node2.Anchor, { attributes: node.attributes, node });
+  } else if (clientFetch.isUiNodeScriptAttributes(node.attributes)) {
+    const {
+      crossorigin,
+      referrerpolicy,
+      node_type: _nodeType,
+      ...attributes
+    } = node.attributes;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "script",
+      {
+        crossOrigin: crossorigin,
+        referrerPolicy: referrerpolicy,
+        ...attributes
+      }
+    );
+  }
+  return null;
+};
+function OryFormOidcButtons() {
+  const {
+    flow: { ui }
+  } = useOryFlow();
+  const { setValue } = reactHookForm.useFormContext();
+  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  const { Form, Node: Node2 } = useComponents();
+  if (filteredNodes.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Form.OidcRoot, { nodes: filteredNodes, children: filteredNodes.map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(
+    Node2.OidcButton,
+    {
+      node,
+      attributes: node.attributes,
+      onClick: () => {
+        setValue(
+          "provider",
+          node.attributes.value
+        );
+        setValue("method", "oidc");
+      }
+    },
+    k
+  )) });
 }
-function OryCard({ children }) {
-  const { Card } = useComponents();
-  if (children) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children }) });
+function OryFormSocialButtonsForm() {
+  const {
+    flow: { ui }
+  } = useOryFlow();
+  const filteredNodes = ui.nodes.filter((node) => node.group === "oidc");
+  if (filteredNodes.length === 0) {
+    return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Card.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(OryFormProvider, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(OryCardContent, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(OryForm, { children: /* @__PURE__ */ jsxRuntime.jsx(OryFormOidcButtons, {}) }) });
 }
-
-// src/theme/default/utils/form.ts
-function isGroupImmediateSubmit(group) {
-  return group === "code";
+function isUINodeGroupEnum(method) {
+  return Object.values(clientFetch.UiNodeGroupEnum).includes(method);
 }
 function OryTwoStepCard() {
-  var _a;
   const {
-    flow: { ui }
+    flow: { ui },
+    flowType,
+    formState,
+    dispatchFormState
   } = useOryFlow();
   const { Form, Card } = useComponents();
-  const { flowType, formState, dispatchFormState } = useOryFlow();
   const nodeSorter = useNodeSorter();
   const sortNodes = (a, b) => nodeSorter(a, b, { flowType });
   const uniqueGroups = useNodesGroups(ui.nodes);
   const options = Object.values(clientFetch.UiNodeGroupEnum).filter((group) => {
-    var _a2;
-    return (_a2 = uniqueGroups.groups[group]) == null ? void 0 : _a2.length;
+    var _a;
+    return (_a = uniqueGroups.groups[group]) == null ? void 0 : _a.length;
   }).filter(
     (group) => ![
       clientFetch.UiNodeGroupEnum.Oidc,
@@ -1130,46 +1040,52 @@ function OryTwoStepCard() {
       clientFetch.UiNodeGroupEnum.Profile
     ].includes(group)
   );
-  const hasOidc = Boolean((_a = uniqueGroups.groups[clientFetch.UiNodeGroupEnum.Oidc]) == null ? void 0 : _a.length);
-  const zeroStepGroups = filterZeroStepGroups(ui.nodes);
+  const nonOidcNodes = filterOidcOut(ui.nodes);
   const finalNodes = formState.current === "method_active" ? getFinalNodes(uniqueGroups.groups, formState.method) : [];
+  const handleAfterFormSubmit = (method) => {
+    if (typeof method !== "string" || !isUINodeGroupEnum(method)) {
+      return;
+    }
+    if (isGroupImmediateSubmit(method)) {
+      dispatchFormState({
+        type: "action_select_method",
+        method
+      });
+    }
+  };
+  const hasOidc = ui.nodes.some((node) => node.group === clientFetch.UiNodeGroupEnum.Oidc);
+  const showOidc = !(formState.current === "method_active" && formState.method !== "oidc");
   return /* @__PURE__ */ jsxRuntime.jsxs(OryCard, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(OryCardHeader, {}),
     /* @__PURE__ */ jsxRuntime.jsxs(OryCardContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(OryCardValidationMessages, {}),
-      formState.current === "provide_identifier" && hasOidc && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        OryForm,
-        {
-          onAfterSubmit: (method) => isGroupImmediateSubmit(method + "") ? dispatchFormState({
-            type: "action_select_method",
-            method
-          }) : void 0,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
-              formState.current === "provide_identifier" && zeroStepGroups.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
-              formState.current === "select_method" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  AuthMethodList,
-                  {
-                    options,
-                    setSelectedGroup: (group) => dispatchFormState({
-                      type: "action_select_method",
-                      method: group
-                    })
-                  }
-                )
-              ] }),
-              formState.current === "method_active" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                ui.nodes.filter((n) => n.type === "script").map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
-                finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
-          ]
-        }
-      )
+      showOidc && /* @__PURE__ */ jsxRuntime.jsx(OryFormSocialButtonsForm, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(OryForm, { onAfterSubmit: handleAfterFormSubmit, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Form.Group, { children: [
+          formState.current === "provide_identifier" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            hasOidc && /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+            nonOidcNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          ] }),
+          formState.current === "select_method" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Card.Divider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AuthMethodList,
+              {
+                options,
+                setSelectedGroup: (group) => dispatchFormState({
+                  type: "action_select_method",
+                  method: group
+                })
+              }
+            )
+          ] }),
+          formState.current === "method_active" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            ui.nodes.filter((n) => n.type === "script").map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k)),
+            finalNodes.sort(sortNodes).map((node, k) => /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(OryCardFooter, {})
+      ] })
     ] })
   ] });
 }
@@ -1192,6 +1108,44 @@ function AuthMethodList({ options, setSelectedGroup }) {
     option
   )) });
 }
+function OryFormGroups({ groups }) {
+  const {
+    flow: { ui }
+  } = useOryFlow();
+  const nodeSorter = useNodeSorter();
+  const { flowType } = useOryFlow();
+  const { Form } = useComponents();
+  const nodes = ui.nodes.filter((node) => groups.indexOf(node.group) > -1).sort((a, b) => nodeSorter(a, b, { flowType }));
+  return /* @__PURE__ */ jsxRuntime.jsx(Form.Group, { children: nodes.map((node, k) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Node, { node }, k);
+  }) });
+}
+function OryFormSection({
+  children,
+  nodes,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(OryFormProvider, { nodes, children: /* @__PURE__ */ jsxRuntime.jsx(OryFormSectionInner, { ...rest, children }) });
+}
+function OryFormSectionInner({
+  children,
+  ...rest
+}) {
+  const { Card } = useComponents();
+  const flowContainer = useOryFlow();
+  const onSubmit = useOryFormSubmit();
+  const methods = reactHookForm.useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Card.SettingsSection,
+    {
+      action: flowContainer.flow.ui.action,
+      method: flowContainer.flow.ui.method,
+      onSubmit: (e) => void methods.handleSubmit(onSubmit)(e),
+      ...rest,
+      children
+    }
+  );
+}
 function OryFormGroupDivider() {
   const { Card } = useComponents();
   const {