{
  "name": "PosHelp",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosHelp.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-help",
  "elName": "PosHelp",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-help",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosHelp",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosHelpProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "PosHelpMessage",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosHelp } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "title",
      "optional": false,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "messages",
      "optional": false,
      "type": "PosHelpMessage[]",
      "doc": ""
    },
    {
      "name": "draft",
      "optional": false,
      "type": "string",
      "doc": ""
    },
    {
      "name": "onDraft",
      "optional": false,
      "type": "(value: string) => void",
      "doc": ""
    },
    {
      "name": "onSend",
      "optional": false,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "onClose",
      "optional": false,
      "type": "() => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-help",
    "pos-help-close",
    "pos-help-head",
    "pos-help-input",
    "pos-help-msg",
    "pos-help-msgs",
    "pos-help-row",
    "pos-help-send",
    "pos-help-title",
    "title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><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 class=\"pos-help\"><div class=\"pos-help-head\"><span class=\"pos-help-title\">Side chat with Ava · does not touch your application</span><button type=\"button\" class=\"pos-help-close\" aria-label=\"Close help\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 6 L18 18 M18 6 L6 18\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"></path></svg></button></div><div class=\"pos-help-msgs\"><div class=\"pos-help-msg is-agent\"><div class=\"pos-help-bubble\">A range is enough to price accurately — this is NOT a credit pull and will not touch your score. The exact score gets checked only after you submit.</div></div><div class=\"pos-help-msg is-user\"><div class=\"pos-help-bubble\">So it won&#x27;t ding my credit?</div></div></div><div class=\"pos-help-row\"><input class=\"pos-help-input\" placeholder=\"Ask anything about this…\" aria-label=\"Ask a question\" value=\"\"/><button type=\"button\" class=\"pos-help-send\" aria-label=\"Send\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 12 H18 M13 6 L19 12 L13 18\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"></path></svg></button></div></div></div>",
    "css": ".pos-help { border: 1px dashed var(--p-hair); border-radius: var(--p-r-card); background: color-mix(in oklab, var(--p-field) 55%, transparent); padding: 13px 14px; animation: pos-in 300ms var(--ease) both; }\n\n.pos-help-close { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 8px; cursor: pointer; color: var(--p-faint); }\n\n.pos-help-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }\n\n.pos-help-input { flex: 1; min-width: 0; box-sizing: border-box; padding: 9px 12px; min-height: 38px; border-radius: var(--r-pill); border: 1px solid var(--p-hair); background: var(--p-card); font: 400 13.5px/1.3 var(--p-font); color: var(--p-fg); outline: none; }\n\n.pos-help-msg { display: flex; flex-direction: column; animation: pos-in 260ms var(--ease) both; }\n\n.pos-help-msgs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 11px; }\n\n.pos-help-row { display: flex; align-items: center; gap: 7px; }\n\n.pos-help-send { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--p-secondary); color: var(--p-secondary-fg); transition: all var(--dur-2) var(--ease); }\n\n.pos-help-title { font: 400 9.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--p-faint); }\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}