{
  "name": "PosSubmitted",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PosSubmitted.tsx",
  "chapterTag": "26 Embed Extras",
  "chapter": "26-embed-extras.html",
  "sectionId": "pos-submitted",
  "elName": "PosSubmitted",
  "demoUrl": "https://brand.magicblocks.ai/components/26-embed-extras#pos-submitted",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PosSubmitted",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PosSubmittedProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { PosSubmitted } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "reference",
      "optional": false,
      "type": "string",
      "doc": ""
    },
    {
      "name": "steps",
      "optional": false,
      "type": "PosNextStep[]",
      "doc": ""
    },
    {
      "name": "onFiles",
      "optional": true,
      "type": "(names: string[]) => void",
      "doc": ""
    }
  ],
  "classesUsed": [
    "pos-step",
    "pos-step-action",
    "pos-step-dot",
    "pos-step-icon",
    "pos-step-label",
    "pos-step-sub",
    "pos-step-text",
    "pos-steps",
    "pos-submitted",
    "pos-submitted-head",
    "pos-submitted-text",
    "pos-submitted-title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"pos-theme-scope\" style=\"--p-side-width:380px\"><div class=\"pos-submitted\"><div class=\"pos-submitted-head\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 13 L10 18 L19 6\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"></path></svg><span class=\"pos-submitted-title\">Submitted · NG-48120</span></div><p class=\"pos-submitted-text\">An underwriter has it. Here is exactly what happens next:</p><div class=\"pos-steps\"><div class=\"pos-step\"><span class=\"pos-step-icon is-done\"><svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 13 L10 18 L19 6\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"></path></svg></span><span class=\"pos-step-text\"><span class=\"pos-step-label\">Application received</span><span class=\"pos-step-sub\">Reference NG-48120</span></span></div><div class=\"pos-step\"><span class=\"pos-step-icon is-now\"><span class=\"pos-step-dot\"></span></span><span class=\"pos-step-text\"><span class=\"pos-step-label\">Credit check &amp; rate lock</span><span class=\"pos-step-sub\">Running now</span></span></div><div class=\"pos-step\"><span class=\"pos-step-icon is-todo\">!</span><span class=\"pos-step-text\"><span class=\"pos-step-label\">Income document</span><span class=\"pos-step-sub\">Waiting on you — photo is fine</span></span><label class=\"pos-step-action\">Add now<input type=\"file\" multiple=\"\" accept=\"image/*,.pdf\"/></label></div><div class=\"pos-step\"><span class=\"pos-step-icon is-wait\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"8.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\"></circle><path d=\"M12 7.5 V12 L15 14\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" fill=\"none\"></path></svg></span><span class=\"pos-step-text\"><span class=\"pos-step-label\">Conditional decision</span><span class=\"pos-step-sub\">By email today</span></span></div></div></div></div>",
    "css": ".pos-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--p-hair-soft); }\n\n.pos-step-action { flex-shrink: 0; padding: 8px 13px; min-height: 36px; display: flex; align-items: center; border-radius: var(--r-pill); border: 1px solid var(--p-hair); background: var(--p-field); font: 600 12.5px/1.2 var(--p-font); color: var(--p-fg); cursor: pointer; }\n\n.pos-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-accent); animation: pos-dot 1.2s var(--ease) infinite; }\n\n.pos-step-icon { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }\n\n.pos-step-label { display: block; font-size: 13.5px; font-weight: 600; }\n\n.pos-step-sub { display: block; font-size: 12px; color: var(--p-dim); margin-top: 1px; }\n\n.pos-step-text { flex: 1; min-width: 0; }\n\n.pos-steps { display: flex; flex-direction: column; }\n\n.pos-submitted { background: var(--p-card); border: 1px solid var(--p-hair); border-top: 2px solid var(--success); border-radius: var(--p-r-card); padding: 20px; animation: pos-in 400ms var(--ease) both; }\n\n.pos-submitted-head { display: flex; align-items: center; gap: 10px; color: var(--success-text); }\n\n.pos-submitted-text { font-size: 14px; line-height: 1.6; margin: 10px 0 14px; color: var(--p-dim); }\n\n.pos-submitted-title { font: 600 17px/1.3 var(--p-font-display, var(--f-display)); color: var(--p-fg); }"
  }
}