var p=Object.defineProperty,m=Object.defineProperties;var g=Object.getOwnPropertyDescriptors;var n=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var r=(e,t,a)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a,i=(e,t)=>{for(var a in t||(t={}))l.call(t,a)&&r(e,a,t[a]);if(n)for(var a of n(t))c.call(t,a)&&r(e,a,t[a]);return e},s=(e,t)=>m(e,g(t));var d=(e,t)=>{var a={};for(var o in e)l.call(e,o)&&t.indexOf(o)<0&&(a[o]=e[o]);if(e!=null&&n)for(var o of n(e))t.indexOf(o)<0&&c.call(e,o)&&(a[o]=e[o]);return a};const layoutProps={},MDXLayout="wrapper";function MDXContent(a){var o=a,{components:e}=o,t=d(o,["components"]);return mdx(MDXLayout,s(i(i({},layoutProps),t),{components:e,mdxType:"MDXLayout"}),mdx("pre",null,mdx("code",i({parentName:"pre"},{className:"language-tsx"}),`import { Modal, SlabAction } from '@parametrig/ui' `)),mdx("p",null,`Render modals conditionally from page state. The shell composes `,mdx("inlineCode",{parentName:"p"},"CanonicalClose")," and ",mdx("inlineCode",{parentName:"p"},"SlabAction"),`, and uses a reduced-motion-safe open transition.`),mdx("p",null,`Use the playground below to open the canonical modal and its table, input, and checklist variants. Modal action rows use right-aligned slab actions; sheet action rows usually use text actions.`),mdx("pre",null,mdx("code",i({parentName:"pre"},{className:"language-tsx",metastring:"live=true",live:"true"}),` toggleState('modal-basic')}> Open modal toggleState('modal-table')}> Table variant toggleState('modal-input')}> Input variant toggleState('modal-checklist')} > Checklist variant {getState('modal-basic') && ( toggleState('modal-basic'), variant: 'secondary', }, { children: 'Submit for review', id: 'submit' }, ]} description="Submit evidence for Parametrig review before this program can process live traffic." eyebrow="Live review" title="Request live activation" onClose={() => toggleState('modal-basic')} > Payment proof, webhook delivery, support contacts, and signed commercial scope. )} {getState('modal-table') && ( toggleState('modal-table'), variant: 'secondary', }, { children: 'Approve scope', id: 'approve' }, ]} description="Use table variants for short review decisions where modal content must stay scannable." eyebrow="Review scope" title="Provider evidence" onClose={() => toggleState('modal-table')} > row.id} rows={[ { id: 'contract', item: 'Signed contract', status: 'Ready', owner: 'Legal', }, { id: 'capacity', item: 'Capacity letter', status: 'Review', owner: 'Ops', }, ]} selectedRowId="capacity" /> )} {getState('modal-input') && ( toggleState('modal-input'), variant: 'secondary', }, { children: 'Save draft', id: 'save' }, ]} description="Use form variants for draft requests, reserve adjustments, integration requests, and other submitted changes." eyebrow="Draft request" title="Create program draft" onClose={() => toggleState('modal-input')} > )} {getState('modal-checklist') && ( toggleState('modal-checklist'), variant: 'secondary', }, { children: 'Submit gate', id: 'submit' }, ]} description="Use checklist variants for go-live, evidence, publish, and activation gates." eyebrow="Publish gate" title="Version readiness" onClose={() => toggleState('modal-checklist')} > )} `)))}MDXContent.isMDXComponent=!0;