{
  "name": "MortgagePos",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/MortgagePos.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "mortgage-pos",
  "elName": "MortgagePos",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#mortgage-pos",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "MortgagePos",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "MortgagePosProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { MortgagePos } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "embedded",
      "optional": true,
      "type": "boolean",
      "doc": "Render inside a container rather than filling the viewport."
    },
    {
      "name": "onSubmit",
      "optional": true,
      "type": "(answers: Record<string, string | undefined>) => void",
      "doc": "Called with the final answers on submit."
    }
  ],
  "classesUsed": [],
  "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\">Loan · 82% complete</span><span class=\"pos-progress\" role=\"progressbar\" aria-valuenow=\"82\" aria-valuemin=\"0\" aria-valuemax=\"100\"><span class=\"pos-progress-fill\" style=\"width:82%\"></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\">Quick check that this number is really yours — I just texted you a 6-digit code.</div></div><div class=\"pos-msg is-user\"><div class=\"pos-msg-bubble\">Verified</div></div><div class=\"pos-msg is-agent\"><div class=\"pos-msg-bubble\">Here is what 14 lenders came back with.</div></div><div class=\"pos-quotes\"><div class=\"pos-quotes-eyebrow\">Pricing engine · 14 lenders · updated just now</div><div class=\"pos-quote-grid\"><div class=\"quote-card is-pos is-edge-accent\"><div class=\"quote-card-head\"><span class=\"quote-card-term\">30-yr fixed</span><span class=\"quote-card-badge\">Lowest payment</span></div><div><div class=\"quote-card-rate-row\"><span class=\"quote-card-rate\">5.84%</span><span class=\"quote-card-rate-unit\">rate</span></div><div class=\"quote-card-meta\">5.91% APR · 0 points</div></div><div class=\"quote-card-rows\"><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Monthly</span><span class=\"quote-card-row-value\">$2,830</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Cash to close</span><span class=\"quote-card-row-value\">$14,120</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Lender</span><span class=\"quote-card-row-value\">Cardinal</span></div></div><button type=\"button\" class=\"quote-card-cta\">Choose this</button></div><div class=\"quote-card is-pos\"><div class=\"quote-card-head\"><span class=\"quote-card-term\">20-yr fixed</span></div><div><div class=\"quote-card-rate-row\"><span class=\"quote-card-rate\">5.61%</span><span class=\"quote-card-rate-unit\">rate</span></div><div class=\"quote-card-meta\">5.72% APR · 0.5 points</div></div><div class=\"quote-card-rows\"><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Monthly</span><span class=\"quote-card-row-value\">$3,340</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Cash to close</span><span class=\"quote-card-row-value\">$16,480</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Lender</span><span class=\"quote-card-row-value\">Pennymac</span></div></div><button type=\"button\" class=\"quote-card-cta\">Choose this</button></div><div class=\"quote-card is-pos\"><div class=\"quote-card-head\"><span class=\"quote-card-term\">7/6 ARM</span><span class=\"quote-card-badge\">Cheapest now</span></div><div><div class=\"quote-card-rate-row\"><span class=\"quote-card-rate\">5.12%</span><span class=\"quote-card-rate-unit\">rate</span></div><div class=\"quote-card-meta\">5.88% APR · 0 points</div></div><div class=\"quote-card-rows\"><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Monthly</span><span class=\"quote-card-row-value\">$2,610</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Cash to close</span><span class=\"quote-card-row-value\">$13,950</span></div><div class=\"quote-card-row\"><span class=\"quote-card-row-label\">Lender</span><span class=\"quote-card-row-value\">UWM</span></div></div><button type=\"button\" class=\"quote-card-cta\">Choose this</button></div></div></div><button type=\"button\" class=\"pos-help-cta\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" fill=\"currentColor\" opacity=\"0.14\"></circle><path d=\"M9.4 9.3 A2.7 2.7 0 1 1 12.6 12 C12.1 12.3 12 12.7 12 13.4\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" fill=\"none\"></path><circle cx=\"12\" cy=\"16.6\" r=\"1.15\" fill=\"currentColor\"></circle></svg>Not sure? Ask about this question</button><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\">82% 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><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">$120,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\">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 class=\"pos-row\"><span class=\"pos-row-label\">Occupancy</span><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">Primary 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><div class=\"pos-group\"><div class=\"pos-group-title\">Borrower</div><div class=\"pos-row\"><span class=\"pos-row-label\">Credit</span><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">760+</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\">Annual income</span><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">$145,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\">Employment</span><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">W-2 employee</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\">Monthly debts</span><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">$850</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\">Applying</span><button type=\"button\" class=\"pos-row-edit\" title=\"Edit\"><span class=\"pos-row-value\">Just me</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\">Declarations</span><span class=\"pos-row-fixed\">All clear</span></div><div class=\"pos-row\"><span class=\"pos-row-label\">Documents</span><span class=\"pos-row-empty\">—</span></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 class=\"pos-row\"><span class=\"pos-row-label\">Monitoring</span><span class=\"pos-row-empty\">—</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": null
  }
}
