{
  "name": "DangerZoneBlock",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/DangerZoneBlock.tsx",
  "chapterTag": "Kit chrome",
  "chapter": null,
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Red-bordered container for destructive actions. Takes children — consumers\ncompose any number of `<DangerZoneAction>` rows inside. Used as a footer\nblock on Account, Workspace, and Integration settings pages.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "DangerZoneBlock",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "DangerZoneAction",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "DangerZoneBlockProps",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "DangerZoneActionProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { DangerZoneBlock } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "btn",
    "btn-danger",
    "btn-secondary",
    "danger-zone-action",
    "danger-zone-action-cta",
    "danger-zone-action-desc",
    "danger-zone-action-text",
    "danger-zone-action-title",
    "danger-zone-block",
    "danger-zone-block-actions",
    "danger-zone-block-desc",
    "danger-zone-block-head",
    "danger-zone-block-title",
    "title"
  ],
  "examples": {
    "react": "<DangerZoneBlock description=\"These actions are permanent.\">\n  <DangerZoneAction\n    title=\"Transfer ownership\"\n    description=\"Move workspace ownership to another admin.\"\n    action={<button type=\"button\" className=\"btn btn-secondary\">Transfer</button>}\n  />\n  <DangerZoneAction\n    title=\"Delete account\"\n    description=\"Permanently delete this account and all associated data.\"\n    action={<button type=\"button\" className=\"btn btn-danger\">Delete</button>}\n  />\n</DangerZoneBlock>",
    "html": null,
    "css": ".btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: var(--s-2);\n  font: 600 14.5px/1 var(--f-display);\n  letter-spacing: -0.005em;\n  padding: 11px var(--s-5);\n  border: 1px solid transparent;\n  border-radius: var(--r-md);\n  cursor: pointer;\n  text-decoration: none;\n  transition: background var(--dur-2) var(--ease),\n              border-color var(--dur-2) var(--ease),\n              transform var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease),\n              color var(--dur-2) var(--ease);\n  user-select: none;\n  white-space: nowrap;\n  appearance: none; -webkit-appearance: none;\n}\n.btn { padding: 11px var(--s-5); font-size: 14.5px; }\n\n.btn-danger { background: var(--error); color: var(--paper); }\n\n.btn-secondary {\n  background: var(--bg-paper);\n  color: var(--fg);\n  border-color: var(--hair);\n}\n\n.danger-zone-action {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--s-4);\n  padding: var(--s-4) var(--s-5);\n  border-bottom: 1px solid color-mix(in oklab, var(--error) 12%, var(--hair));\n}\n\n.danger-zone-action-cta { flex-shrink: 0; }\n\n.danger-zone-action-desc {\n  font: 400 13px/1.5 var(--f-body);\n  color: var(--fg-soft);\n  margin: 0;\n  max-width: 60ch;\n}\n\n.danger-zone-action-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.danger-zone-action-title {\n  font: 500 14px/1.3 var(--f-body);\n  color: var(--fg);\n}\n\n.danger-zone-block {\n  border: 1px solid var(--error);\n  border-radius: var(--r-md);\n  background: color-mix(in oklab, var(--error) 4%, var(--bg-paper));\n  display: flex;\n  flex-direction: column;\n}\n\n.danger-zone-block-actions {\n  display: flex;\n  flex-direction: column;\n}\n\n.danger-zone-block-desc {\n  font: 400 13px/1.5 var(--f-body);\n  color: var(--fg-soft);\n  margin: 0;\n  max-width: 60ch;\n}\n\n.danger-zone-block-head {\n  padding: var(--s-4) var(--s-5);\n  border-bottom: 1px solid color-mix(in oklab, var(--error) 25%, var(--hair));\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-2);\n}\n\n.danger-zone-block-title {\n  font: 600 14px/1.3 var(--f-body);\n  color: var(--error-text);\n  margin: 0;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}