fix(ui): Ensure card take up their max available space

[alexcarpenter]

Description

Up until this point each step has a wrapping div or form element that comes from the Elements step component. This caused some width issues with the max width on the card and adds an extra element in the dom that we could merge into the card root component.

This PR adds asChild props where missing on steps in elements and adds support for an as prop on the card root component to render as either a div or form element. This allows us to use asChild on the step onto the card root reducing the extra element. Reducing the amount of descriptors needed ultimately.

Example:

<SignIn.Step asChild name="start">
  <Card.Root as="form">...</Card.Root>
</SignIn.Step>

BEFORE	AFTER

Fixes SDKI-641

Checklist

• npm test runs as expected.
• npm run build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

🦋 Changeset detected

Latest commit: 958f897

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/elements	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[joe-bell]

All working for me! Nice work @alexcarpenter