Add a way to reorder Social login & Password login

[thongxuan]

Preflight checklist

• [x] I could not find a solution in the existing issues, docs, nor discussions.
• [x] I agree to follow this project's Code of Conduct.
• [x] I have read and am following this repository's Contribution Guidelines.
• [x] I have joined the Ory Community Slack.
• [x] I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

No response

Describe your problem

Currently packages/elements-react/src/components/card/two-step/state-provide-identifier.tsx is implement like this

<OryCard>
      <OryCardHeader />
      <OryCardContent>
        <OryCardValidationMessages />
        <OryFormSocialButtonsForm />
        <OryForm
          data-testid={`ory/form/methods/local`}
          onAfterSubmit={handleAfterFormSubmit(dispatchFormState)}
        >
          <Form.Group>
            {showSsoDivider && <Card.Divider />}
            {nonSsoNodes.map((node, k) => (
              <Node node={node} key={k} />
            ))}
          </Form.Group>
        </OryForm>
      </OryCardContent>
      <OryCardFooter />
    </OryCard>

which cause OryFormSocialButtonsForm to show on top of OryForm (non-SSO)

In my custom UI I would like to show social login below, and this could not be achieve.

Ideally I would restyle the <OryCardContent> to display: flex; flex-direction: column-reverse, but there is also OryCardValidationMessages there and this would cause it to also move to the bottom, which is not desired.

Describe your ideal solution

I think we could wrap the <OryFormSocialButtonsForm />, OryForm(and any other possible groups) in one moredivor something, so it would be separated from theOryCardValidationMessages`, then it's up to consumer to style the form as they want.

Workarounds or alternatives

no workaround

Version

@ory/elements-react: ^1.0.0-rc.5

Additional Context

No response