DangerZone

import { state } from '@weft-js/core'import { Button, ConfirmDialog, DangerZone, SettingRow, TypeToConfirm } from '@weft-js/warp'export function Project() {  const remove = state(false)  const transfer = state(false)  return (    <SettingsWidth>    <DangerZone id="danger-demo" description="These change who can reach storefront. One can't be undone.">      <SettingRow title="Transfer project" description="Give storefront to another workspace."><Button emphasis="outline" tone="neutral" size="sm" onClick={() => (transfer.value = true)}>Transfer</Button></SettingRow>      <SettingRow title="Delete project" description="Deletes storefront and its 412 deploys for good."><Button emphasis="soft" tone="critical" size="sm" onClick={() => (remove.value = true)}>Delete project</Button></SettingRow>      <ConfirmDialog open={transfer} title="Transfer storefront?" description="You lose access until the new owner invites you." action="Transfer project" onConfirm={() => wait(600)} />      <TypeToConfirm open={remove} title="Delete storefront?" description="This permanently deletes the project." confirmText="storefront" items={['412 deploys and their logs', 'Its environment variables']} action="Delete project" onConfirm={() => wait(800)} />    </DangerZone>    </SettingsWidth>  )}const wait = (ms: number) => new Promise<void>(done => { setTimeout(done, ms) })const SettingsWidth = ({ children }: { children: unknown }) => <div style="container: settings / inline-size">{children}</div>