{
  "name": "PosMessage",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosMessage.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-theme-provider",
  "elName": "PosThemeProvider",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-theme-provider",
  "hasLiveDemo": false,
  "description": "",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "PosMessage",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosMessageProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosMessage } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "from",
      "optional": false,
      "type": "\"agent\" | \"user\"",
      "doc": ""
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-msg",
    "pos-msg-bubble"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-accent:#0D9EDF;--p-accent-fg:#FFFFFF;--p-secondary:#0E1B2E;--p-secondary-fg:#FFFFFF;--p-page:color-mix(in oklab, #0E1B2E 5.9%, #FFFFFF);--p-card:color-mix(in oklab, #0E1B2E 1%, #FFFFFF);--p-field:color-mix(in oklab, #0E1B2E 8.5%, #FFFFFF);--p-field-hover:color-mix(in oklab, #0E1B2E 14.3%, #FFFFFF);--p-bubble:color-mix(in oklab, #0E1B2E 12.4%, #FFFFFF);--p-fg:#191E32;--p-dim:rgba(25,30,50,0.66);--p-faint:rgba(25,30,50,0.48);--p-hair:rgba(25,30,50,0.12);--p-hair-soft:rgba(25,30,50,0.07);--p-font:var(--f-body);--p-font-display:var(--f-display);--p-accent-text:color-mix(in oklab, #0D9EDF 72%, var(--ink));--p-r-card:12px;--p-r-bubble:12px;--p-r-field:10px;--p-tap:42px;--p-safe:env(safe-area-inset-bottom, 0px);--p-side-width:380px\"><div class=\"pos-msg is-agent\"><div class=\"pos-msg-bubble\">Let&#x27;s get you priced. What are we doing today?</div></div><div class=\"pos-msg is-user\"><div class=\"pos-msg-bubble\">Buying a home</div></div></div>",
    "css": ".pos-msg { display: flex; flex-direction: column; animation: pos-in 380ms var(--ease) both; }\n\n.pos-msg-bubble { max-width: 88%; padding: 12px 15px; font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }"
  }
}