{
  "name": "PosApplicationCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosApplicationCard.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-shell",
  "elName": "PosShell",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-shell",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosApplicationCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosApplicationCardProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosApplicationCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "hint",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "progressLabel",
      "optional": false,
      "type": "ReactNode",
      "doc": "\"68% complete\"."
    },
    {
      "name": "groups",
      "optional": false,
      "type": "PosCardGroup[]",
      "doc": ""
    },
    {
      "name": "onEdit",
      "optional": true,
      "type": "(key: string, value: string) => void",
      "doc": ""
    },
    {
      "name": "onEditChange",
      "optional": true,
      "type": "(value: string) => void",
      "doc": ""
    },
    {
      "name": "onEditCommit",
      "optional": true,
      "type": "(key: string) => void",
      "doc": ""
    },
    {
      "name": "canSubmit",
      "optional": true,
      "type": "boolean",
      "doc": ""
    },
    {
      "name": "submitted",
      "optional": true,
      "type": "boolean",
      "doc": ""
    },
    {
      "name": "onSubmit",
      "optional": true,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "submitLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "footer",
      "optional": true,
      "type": "ReactNode | null",
      "doc": "The NMLS / Equal Housing line. `null` hides it (the sheet omits it)."
    }
  ],
  "classesUsed": [
    "pos-application",
    "pos-btn",
    "pos-eyebrow",
    "pos-group",
    "pos-group-title",
    "pos-nmls",
    "pos-pending",
    "pos-row",
    "pos-row-edit",
    "pos-row-empty",
    "pos-row-fixed",
    "pos-row-input",
    "pos-row-label",
    "pos-row-value",
    "pos-side-head",
    "pos-side-hint",
    "pos-side-title",
    "title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><div class=\"pos is-embedded\"><header class=\"pos-header\"><span class=\"pos-header-mark\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"3\" y=\"10\" width=\"2\" height=\"4\" rx=\"1\" fill=\"currentColor\" opacity=\"0.55\"></rect><rect x=\"6\" y=\"8\" width=\"2\" height=\"8\" rx=\"1\" fill=\"currentColor\" opacity=\"0.7\"></rect><rect x=\"9\" y=\"5\" width=\"2\" height=\"14\" rx=\"1\" fill=\"currentColor\"></rect><rect x=\"12\" y=\"3\" width=\"2\" height=\"18\" rx=\"1\" fill=\"currentColor\"></rect><rect x=\"15\" y=\"6\" width=\"2\" height=\"12\" rx=\"1\" fill=\"currentColor\"></rect><rect x=\"18\" y=\"9\" width=\"2\" height=\"6\" rx=\"1\" fill=\"currentColor\" opacity=\"0.7\"></rect><rect x=\"21\" y=\"11\" width=\"2\" height=\"2\" rx=\"1\" fill=\"currentColor\" opacity=\"0.45\"></rect></svg></span><div class=\"pos-header-text\"><div class=\"pos-header-title\">Northgate Mortgage</div><div class=\"pos-header-meta\">Apply with Ava · 4 min</div></div><div class=\"pos-header-actions\"><button type=\"button\" class=\"pos-save-btn\">Save &amp; finish later</button><span class=\"pos-progress-label\">Property · 32% complete</span><span class=\"pos-progress\" role=\"progressbar\" aria-valuenow=\"32\" aria-valuemin=\"0\" aria-valuemax=\"100\"><span class=\"pos-progress-fill\" style=\"width:32%\"></span></span></div></header><div class=\"pos-grid\"><div class=\"pos-stream\"><div class=\"pos-thread\"><div class=\"pos-secure\">Secure application · nothing shared until you submit</div><div class=\"pos-msg is-agent\"><div class=\"pos-msg-bubble\">What property are we talking about?</div></div><div style=\"height:8px\"></div></div></div><aside class=\"pos-side\"><div class=\"pos-application\"><div class=\"pos-side-head\"><span class=\"pos-side-title\">Your application</span><span class=\"pos-eyebrow is-count\">32% complete</span></div><p class=\"pos-side-hint\">Fills in as you answer. Click any value to change it.</p><div class=\"pos-group\"><div class=\"pos-group-title\">Loan</div><div class=\"pos-row\"><span class=\"pos-row-label\">Goal</span><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">Buying a home</span><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 20 H8 L19 9 A2.1 2.1 0 0 0 16 6 L5 17 Z\" fill=\"currentColor\" opacity=\"0.3\"></path><path d=\"M4 20 H8 L19 9 A2.1 2.1 0 0 0 16 6 L5 17 Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\"></path></svg></button></div><div class=\"pos-row\"><span class=\"pos-row-label\">Purchase price</span><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">$600,000</span><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 20 H8 L19 9 A2.1 2.1 0 0 0 16 6 L5 17 Z\" fill=\"currentColor\" opacity=\"0.3\"></path><path d=\"M4 20 H8 L19 9 A2.1 2.1 0 0 0 16 6 L5 17 Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\"></path></svg></button></div><div class=\"pos-row\"><span class=\"pos-row-label\">Down payment</span><span class=\"pos-row-empty\">—</span></div><div class=\"pos-row\"><span class=\"pos-row-label\">Product</span><span class=\"pos-row-empty\">—</span></div></div><div class=\"pos-group\"><div class=\"pos-group-title\">Property</div><div class=\"pos-row\"><span class=\"pos-row-label\">Address</span><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">1420 Fillmore St, San Francisco, CA 94115</span><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 20 H8 L19 9 A2.1 2.1 0 0 0 16 6 L5 17 Z\" fill=\"currentColor\" opacity=\"0.3\"></path><path d=\"M4 20 H8 L19 9 A2.1 2.1 0 0 0 16 6 L5 17 Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\"></path></svg></button></div><div class=\"pos-row\"><span class=\"pos-row-label\">Type</span><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">Condo</span><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 20 H8 L19 9 A2.1 2.1 0 0 0 16 6 L5 17 Z\" fill=\"currentColor\" opacity=\"0.3\"></path><path d=\"M4 20 H8 L19 9 A2.1 2.1 0 0 0 16 6 L5 17 Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\"></path></svg></button></div></div><div class=\"pos-group\"><div class=\"pos-group-title\">Contact</div><div class=\"pos-row\"><span class=\"pos-row-label\">Contact</span><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">Maria Alvarez</span><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 20 H8 L19 9 A2.1 2.1 0 0 0 16 6 L5 17 Z\" fill=\"currentColor\" opacity=\"0.3\"></path><path d=\"M4 20 H8 L19 9 A2.1 2.1 0 0 0 16 6 L5 17 Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" stroke-linejoin=\"round\"></path></svg></button></div><div class=\"pos-row\"><span class=\"pos-row-label\">Phone</span><span class=\"pos-row-fixed\">(415) 555-0134 · verified</span></div></div><div class=\"pos-pending\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"4\" y=\"10\" width=\"16\" height=\"11\" rx=\"2\" fill=\"currentColor\" opacity=\"0.35\"></rect><path d=\"M7 10 V7 A5 5 0 0 1 17 7 V10\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\"></path><circle cx=\"12\" cy=\"15.5\" r=\"1.6\" fill=\"currentColor\"></circle></svg>Nothing is submitted until you press the button.</div><div class=\"pos-nmls\"><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 3 L21 10 H19 V20 H5 V10 H3 Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linejoin=\"round\"></path><path d=\"M12 8.5 L16 11.5 V17 H8 V11.5 Z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"></path><path d=\"M10.5 17 V13.5 H13.5 V17\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"></path></svg>NMLS #1824561 · Equal Housing Lender</div></div></aside></div></div></div>",
    "css": ".pos-application { display: block; }\n\n.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-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-group { margin-bottom: 18px; }\n\n.pos-group-title { font: 400 9.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--p-faint); padding-bottom: 7px; border-bottom: 1px solid var(--p-hair-soft); margin-bottom: 4px; }\n\n.pos-nmls { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--p-hair-soft); font: 400 9.5px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--p-faint); }\n\n.pos-pending { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--p-r-field); background: var(--p-field); font-size: 12.5px; color: var(--p-dim); text-wrap: pretty; }\n\n.pos-row { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 3px 0; }\n\n.pos-row-edit { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; margin: 0 -8px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; font-family: var(--p-font); animation: pos-pop 300ms var(--ease) both; transition: background var(--dur-1) var(--ease); }\n\n.pos-row-empty { flex: 1; font-size: 13.5px; color: var(--p-faint); }\n\n.pos-row-fixed { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--p-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: pos-pop 300ms var(--ease) both; }\n\n.pos-row-input { flex: 1; min-width: 0; box-sizing: border-box; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--p-accent); background: var(--p-field); font: 600 13.5px/1.3 var(--p-font); color: var(--p-fg); outline: none; }\n\n.pos-row-label { width: 108px; flex-shrink: 0; font-size: 12.5px; color: var(--p-dim); }\n\n.pos-row-value { font-size: 13.5px; font-weight: 600; color: var(--p-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.pos-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }\n\n.pos-side-hint { font-size: 12.5px; line-height: 1.5; color: var(--p-dim); margin: 0 0 16px; }\n\n.pos-side-title { font: 700 17px/1.2 var(--p-font-display, var(--f-display)); letter-spacing: -.015em; }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}