{
  "name": "PosQuoteGrid",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosQuoteGrid.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-quote-grid",
  "elName": "PosQuoteGrid",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-quote-grid",
  "hasLiveDemo": false,
  "description": "",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "PosQuoteGrid",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosQuoteGridProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosQuoteGrid } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "quotes",
      "optional": false,
      "type": "PosQuote[]",
      "doc": ""
    },
    {
      "name": "eyebrow",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "onSelect",
      "optional": true,
      "type": "(quote: PosQuote) => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos",
    "pos-quote-grid",
    "pos-quotes",
    "pos-quotes-eyebrow"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><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></div>",
    "css": ".pos { height: 100dvh; background: var(--p-page); color: var(--p-fg); font-family: var(--p-font); display: flex; flex-direction: column; overflow: hidden; }\n\n.pos-quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 11px; }\n\n.pos-quotes { animation: pos-in 400ms var(--ease) both; }\n\n.pos-quotes-eyebrow { font: 400 9.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--p-dim); margin-bottom: 9px; }"
  }
}