import { useDialog, Dialog } from '@kodiak-ui/dialog'

import { SharedSx } from 'kodiak-ui'
import { Dialog, useDialog } from '@kodiak-ui/dialog'
import { Button, Content, Footer, Header } from '@kodiak-ui/primitives'

const { getDialogProps, handleOpenDialog, handleCloseDialog } = useDialog()

<Button onClick={handleOpenDialog}>Trigger</Button>

<Dialog {...getDialogProps()}>
  <SharedSx sx={{ px: 5, py: 4 }}>
    <Header variants="dialog-header">Header</Header>
    <Content>
      <Text as="p">
        Contrary to popular belief, Lorem Ipsum is not simply random text.
        It has roots in a piece of classical Latin literature from 45 BC,
        making it over 2000 years old.
      </Text>
    </Content>
    <Footer variants="dialog-footer">
      <Button variants="secondary" onClick={handleCloseDialog}>
        Cancel
      </Button>
      <Button variants="danger">Proceed</Button>
    </Footer>
  </SharedSx>
</Dialog>