{
  "name": "PosSubmitCard",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosSubmitCard.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-submit-card",
  "elName": "PosSubmitCard",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-submit-card",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosSubmitCard",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosSubmitCardProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosSubmitCard } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "consents",
      "optional": false,
      "type": "Record<PosConsentKey, boolean>",
      "doc": ""
    },
    {
      "name": "onToggleConsent",
      "optional": false,
      "type": "(key: PosConsentKey) => void",
      "doc": ""
    },
    {
      "name": "openDisclosure",
      "optional": false,
      "type": "PosConsentKey | null",
      "doc": ""
    },
    {
      "name": "onToggleDisclosure",
      "optional": false,
      "type": "(key: PosConsentKey) => void",
      "doc": ""
    },
    {
      "name": "onSubmit",
      "optional": false,
      "type": "() => void",
      "doc": ""
    },
    {
      "name": "submitLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": ""
    },
    {
      "name": "businessName",
      "optional": true,
      "type": "string",
      "doc": ""
    },
    {
      "name": "cardWhere",
      "optional": true,
      "type": "string",
      "doc": "\" on the right\" / \" below\" — where the card is."
    }
  ],
  "classesUsed": [
    "pos-btn",
    "pos-consent",
    "pos-consent-box",
    "pos-consent-disc",
    "pos-consent-label",
    "pos-consent-read",
    "pos-consent-row",
    "pos-consent-text",
    "pos-consents",
    "pos-submit",
    "pos-submit-eyebrow",
    "pos-submit-text",
    "pos-submit-title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><div class=\"pos-submit\"><div class=\"pos-submit-eyebrow\">Last step</div><div class=\"pos-submit-title\">Everything look right?</div><div class=\"pos-submit-text\">Check the card on the right and change anything that&#x27;s off — then send it to underwriting.</div><div class=\"pos-consents\"><div class=\"pos-consent\"><div class=\"pos-consent-row\"><button type=\"button\" class=\"pos-consent-box is-checked\" role=\"checkbox\" aria-checked=\"true\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 13 L10 18 L19 6\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"></path></svg></button><div class=\"pos-consent-text\"><div class=\"pos-consent-label\">You may pull my credit when I submit</div></div><button type=\"button\" class=\"pos-consent-read\">Read</button></div></div><div class=\"pos-consent\"><div class=\"pos-consent-row\"><button type=\"button\" class=\"pos-consent-box is-checked\" role=\"checkbox\" aria-checked=\"true\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 13 L10 18 L19 6\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"></path></svg></button><div class=\"pos-consent-text\"><div class=\"pos-consent-label\">Send my disclosures electronically</div></div><button type=\"button\" class=\"pos-consent-read\">Read</button></div></div><div class=\"pos-consent\"><div class=\"pos-consent-row\"><button type=\"button\" class=\"pos-consent-box\" role=\"checkbox\" aria-checked=\"false\"></button><div class=\"pos-consent-text\"><div class=\"pos-consent-label\">Northgate Mortgage may call or text me about this application</div><div class=\"pos-consent-disc\">TCPA consent: contact at the number provided, including autodialed text. Message and data rates may apply; reply STOP to opt out.</div></div><button type=\"button\" class=\"pos-consent-read\">Hide</button></div></div></div><button type=\"button\" class=\"pos-btn is-inline\" disabled=\"\">Submit application<svg width=\"17\" height=\"17\" 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>",
    "css": ".pos-btn { width: 100%; padding: 13px; min-height: var(--p-tap); box-sizing: border-box; border-radius: var(--r-pill); border: 0; cursor: pointer; background: var(--p-accent); color: var(--p-accent-fg); font: 600 15px/1.2 var(--p-font); display: flex; align-items: center; justify-content: center; gap: 9px; transition: all var(--dur-2) var(--ease); }\n\n.pos-consent { border-top: 1px solid color-mix(in oklab, var(--p-secondary-fg) 12%, transparent); padding: 9px 0 5px; }\n\n.pos-consent-box { width: 24px; height: 24px; flex-shrink: 0; margin-top: -1px; display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 1.5px solid color-mix(in oklab, var(--p-secondary-fg) 42%, transparent); background: transparent; cursor: pointer; color: var(--p-accent-fg); transition: all var(--dur-2) var(--ease); }\n\n.pos-consent-disc { font-size: 11.5px; line-height: 1.55; opacity: .74; margin-top: 6px; animation: pos-in 220ms var(--ease) both; }\n\n.pos-consent-label { font-size: 13.5px; line-height: 1.45; cursor: pointer; }\n\n.pos-consent-read { flex-shrink: 0; padding: 3px 8px; border: 0; background: transparent; cursor: pointer; font: 400 9.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: color-mix(in oklab, var(--p-secondary-fg) 62%, transparent); text-decoration: underline; text-underline-offset: 3px; }\n\n.pos-consent-row { display: flex; align-items: flex-start; gap: 11px; }\n\n.pos-consent-text { flex: 1; min-width: 0; }\n\n.pos-consents { display: flex; flex-direction: column; gap: 4px; margin: 16px 0 2px; }\n\n.pos-submit { background: var(--p-secondary); color: var(--p-secondary-fg); border-radius: var(--p-r-card); padding: 20px; animation: pos-in 400ms var(--ease) both; }\n\n.pos-submit-eyebrow { font: 400 9.5px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }\n\n.pos-submit-text { font-size: 14px; line-height: 1.5; opacity: .82; text-wrap: pretty; }\n\n.pos-submit-title { font: 700 21px/1.2 var(--p-font-display, var(--f-display)); letter-spacing: -.02em; margin: 8px 0; }"
  }
}