AlertDialog

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogCancel, AlertDialogAction } from "@styple/design-system";

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>Open alertdialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent
    aria-labelledby="alertdialog-heading"
    aria-describedby="alertdialog-desc"
  >
    <Heading id="alertdialog-heading" as="h4" css={{ mb: "$md" }}>Example Heading</Heading>
    <Text id="alertdialog-desc" css={{ lineHeight: "25px" }}>Here is some lorem ipsum example description text.</Text>
    <Flex
      css={{
        justifyContent: "flex-end",
        marginTop: "$lg",
        gap: "$md",
      }}
    >
      <AlertDialogCancel asChild>
        <Button highlight>Cancel</Button>
      </AlertDialogCancel>
      <AlertDialogAction asChild>
        <Button transparent variant="success">Save changes</Button>
      </AlertDialogAction>
    </Flex>
  </AlertDialogContent>
</AlertDialog>