{# @description The form as the tall middle tile of a grid, with the reasons to sign up in the tiles around it. On a narrow screen the form comes first and the tiles follow. #}
{# @prop title:text | default:"Create your account" | description:"The heading of the form tile. Use the title slot instead when it contains markup." #}
{# @prop lead:text | description:"The sentence under the heading" #}
{# @prop level:select['1', '2', '3', '4', '5', '6'] | default:"1" | description:"Heading level. 1 is right when this is the whole page." #}
{# @prop divider:text | description:"The word between the provider buttons and the form. Left empty, it is a translated or." #}
{# @prop class:text | description:"Extra classes on the outer section. A plain surface colour goes here: bg-base-200." #}
{# @slot:background — A background block, rendered into a layer behind the grid #}
{# @slot:logo — The application's logo, at the leading end of the top bar #}
{# @slot:nav — The trailing end of the top bar. The link to the sign-in page. #}
{# @slot:tiles — The tiles around the form. Four fill the grid: each direct child is one tile, so write four cards. #}
{# @slot:providers — Buttons that skip the form, one full-width button each: third-party providers, a passkey, an emailed code #}
{# @slot:footer — The foot of the form tile. The terms the reader is agreeing to. #}
{# @slot The form — The application's own sign-up form, with its fields, its errors and its submit button. #}
{% if background %}