{
  "name": "PosSheet",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosSheet.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-sheet",
  "elName": "PosSheet",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-sheet",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosSheet",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosSheetProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosSheet } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "open",
      "optional": false,
      "type": "boolean",
      "doc": ""
    },
    {
      "name": "onClose",
      "optional": false,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-backdrop",
    "pos-sheet",
    "pos-sheet-handle",
    "pos-sheet-wrap"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".pos-backdrop { position: absolute; inset: 0; background: rgba(25,30,50,.36); animation: pos-fade-in 220ms var(--ease) both; }\n\n.pos-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; background: var(--p-card); border-radius: 22px 22px 0 0; padding: 10px 18px calc(22px + var(--p-safe)); animation: pos-sheet-in 340ms var(--ease) both; }\n\n.pos-sheet-handle { display: flex; justify-content: center; padding: 6px 0 12px; cursor: pointer; }\n\n.pos-sheet-wrap { position: fixed; inset: 0; z-index: 50; }"
  }
}