<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Badge, Button, Card, Container, DescriptionList, Fieldset, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Profile asset</Badge>
    <Heading level={1}>Use one designed summary asset for account, billing, and workspace metadata.</Heading>
    <Text as="p">Profile Summary packages DescriptionList, Heading, and Text into a reliable account summary pattern.</Text>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Workspace</DescriptionList.Term>
        <DescriptionList.Description>North America expansion</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Owner</DescriptionList.Term>
        <DescriptionList.Description>Elena Rossi</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Plan</DescriptionList.Term>
        <DescriptionList.Description>Growth annual</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• DescriptionList-based metadata</Text>
        <Text as="p">• Heading + body copy</Text>
        <Text as="p">• Card-ready summary pattern</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Copy summary asset</Button>
        <Button variant="outline">Use in settings starter</Button>
    </Stack>
  </Stack>
</Container>