{
  "name": "PosHmdaCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosHmdaCard.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-hmda-card",
  "elName": "PosHmdaCard",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-hmda-card",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosHmdaCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosHmdaCardProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "PosHmdaGroup",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosHmdaCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "groups",
      "optional": true,
      "type": "PosHmdaGroup[]",
      "doc": ""
    },
    {
      "name": "value",
      "optional": false,
      "type": "Record<string, string>",
      "doc": ""
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(key: string, value: string) => void",
      "doc": ""
    },
    {
      "name": "onSkip",
      "optional": false,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onContinue",
      "optional": false,
      "type": "() => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-btn",
    "pos-btn-row",
    "pos-card",
    "pos-card-sub",
    "pos-eyebrow",
    "pos-hmda-group",
    "pos-hmda-opt",
    "pos-hmda-opts"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><div class=\"pos-card is-dashed\"><div class=\"pos-eyebrow is-faint\">Optional · government monitoring (HMDA)</div><p class=\"pos-card-sub\">Collected industry-wide to check for fair lending. Answering or skipping can never affect your rate or approval.</p><div class=\"pos-hmda-group\"><span class=\"pos-eyebrow\">Ethnicity</span><div class=\"pos-hmda-opts\"><button type=\"button\" class=\"pos-hmda-opt\" aria-pressed=\"false\">Hispanic or Latino</button><button type=\"button\" class=\"pos-hmda-opt\" aria-pressed=\"false\">Not Hispanic or Latino</button><button type=\"button\" class=\"pos-hmda-opt\" aria-pressed=\"false\">Prefer not to say</button></div></div><div class=\"pos-hmda-group\"><span class=\"pos-eyebrow\">Race</span><div class=\"pos-hmda-opts\"><button type=\"button\" class=\"pos-hmda-opt\" aria-pressed=\"false\">American Indian</button><button type=\"button\" class=\"pos-hmda-opt\" aria-pressed=\"false\">Asian</button><button type=\"button\" class=\"pos-hmda-opt\" aria-pressed=\"false\">Black</button><button type=\"button\" class=\"pos-hmda-opt\" aria-pressed=\"false\">Pacific Islander</button><button type=\"button\" class=\"pos-hmda-opt\" aria-pressed=\"false\">White</button><button type=\"button\" class=\"pos-hmda-opt\" aria-pressed=\"false\">Prefer not to say</button></div></div><div class=\"pos-hmda-group\"><span class=\"pos-eyebrow\">Sex</span><div class=\"pos-hmda-opts\"><button type=\"button\" class=\"pos-hmda-opt is-on\" aria-pressed=\"true\">Female</button><button type=\"button\" class=\"pos-hmda-opt\" aria-pressed=\"false\">Male</button><button type=\"button\" class=\"pos-hmda-opt\" aria-pressed=\"false\">Prefer not to say</button></div></div><div class=\"pos-btn-row\"><button type=\"button\" class=\"pos-btn is-ghost\">Skip this section</button><button type=\"button\" class=\"pos-btn is-sm\">Continue</button></div></div></div>",
    "css": ".pos-btn { width: 100%; padding: 13px; min-height: var(--p-tap); box-sizing: border-box; border-radius: var(--r-pill); border: 0; cursor: pointer; background: var(--p-accent); color: var(--p-accent-fg); font: 600 15px/1.2 var(--p-font); display: flex; align-items: center; justify-content: center; gap: 9px; transition: all var(--dur-2) var(--ease); }\n\n.pos-btn-row { display: flex; gap: 8px; margin-top: 4px; }\n\n.pos-card { background: var(--p-card); border: 1px solid var(--p-hair); border-radius: var(--p-r-card); padding: 16px; box-shadow: var(--sh-1); animation: pos-in 380ms var(--ease) both; }\n\n.pos-card-sub { font-size: 12.5px; line-height: 1.55; color: var(--p-dim); margin: 0 0 13px; text-wrap: pretty; }\n\n.pos-eyebrow { display: block; font: 400 10px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--p-dim); margin-bottom: 7px; }\n\n.pos-hmda-group { margin-bottom: 12px; }\n\n.pos-hmda-opt { padding: 8px 13px; min-height: 36px; border-radius: var(--r-pill); border: 1px solid var(--p-hair); cursor: pointer; font: 500 12.5px/1.2 var(--p-font); background: var(--p-field); color: var(--p-dim); transition: all var(--dur-1) var(--ease); }\n\n.pos-hmda-opts { display: flex; flex-wrap: wrap; gap: 6px; }"
  }
}