setOpen(false)} type="secondary"> Cancel setOpen(false)} prefix={} type="secondary" > Previous

setOpen(false)}>Submit ); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button, Modal, Text } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { ArrowLeft } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/icons'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState, "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" JSX } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Open Modal"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Modal"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{open} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClickOutside"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"sticky"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Body"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Header"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Title"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Create Token"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Actions"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Cancel"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Action"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"prefix"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{<"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"ArrowLeft"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"secondary"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Previous"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}>Submit"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,n.jsxs)(l.div,{className:"component-preview",children:[(0,n.jsx)(l.h2,{children:"Single button"}),` `,(0,n.jsx)(s,{name:"modal-single-button",children:(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { Button, Modal, Text } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { useState, "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" JSX } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Open Modal"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Modal"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{open} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClickOutside"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"sticky"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Body"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Header"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Title"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">Create Token"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Actions"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"fullWidth"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")}>"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Cancel"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Button, Modal, Text } from 'geist/components'; import { useState, type JSX } from 'react'; export function Component(): JSX.Element { const [open, setOpen] = useState(false); return ( <> setOpen(false)} sticky> Create Token Some content contained within the modal. setOpen(false)}> Cancel ); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button, Modal, Text } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState, "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" JSX } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Open Modal"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Modal"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{open} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClickOutside"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"sticky"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Body"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Header"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Title"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Create Token"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Actions"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"fullWidth"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}>"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Cancel"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,n.jsxs)(l.div,{className:"component-preview",children:[(0,n.jsx)(l.h2,{children:"Disabled actions"}),` `,(0,n.jsx)(s,{name:"modal-disabled-actions",children:(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { Button, Modal, Text } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { useState, "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" JSX } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Open Modal"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Modal"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{open} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClickOutside"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Body"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Header"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Title"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">Modal"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Subtitle"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">This is a modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Actions"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Cancel"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")}>"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Submit"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Button, Modal, Text } from 'geist/components'; import { useState, type JSX } from 'react'; export function Component(): JSX.Element { const [open, setOpen] = useState(false); return ( <> setOpen(false)}> Modal This is a modal. Some content contained within the modal. setOpen(false)} type="secondary"> Cancel setOpen(false)}> Submit ); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button, Modal, Text } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState, "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" JSX } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Open Modal"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Modal"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{open} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClickOutside"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Body"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Header"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Title"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Modal"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Subtitle"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">This is a modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Some content contained within the modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Actions"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Cancel"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"disabled"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}>"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Submit"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,n.jsxs)(l.div,{className:"component-preview",children:[(0,n.jsx)(l.h2,{children:"Inset"}),` `,(0,n.jsx)(s,{name:"modal-inset",children:(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { Button, Modal, Text } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { useState, "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" JSX } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Open Modal"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Modal"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{open} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClickOutside"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Body"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Header"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Title"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">Modal"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Subtitle"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">This is a modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Inset"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">Content within the inset."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#22863A"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"pt-6"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">Content outside the inset."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Actions"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Cancel"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")}>Submit"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Button, Modal, Text } from 'geist/components'; import { useState, type JSX } from 'react'; export function Component(): JSX.Element { const [open, setOpen] = useState(false); return ( <> setOpen(false)}> Modal This is a modal. Content within the inset.

Content outside the inset.

setOpen(false)} type="secondary"> Cancel setOpen(false)}>Submit ); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button, Modal, Text } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useState, "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" JSX } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Open Modal"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Modal"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{open} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClickOutside"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}>"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Body"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Header"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Title"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Modal"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Subtitle"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">This is a modal."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Inset"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Content within the inset."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"pt-6"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Text"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Content outside the inset."})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Actions"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Cancel"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}>Submit"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]}),` `,(0,n.jsxs)(l.div,{className:"component-preview",children:[(0,n.jsx)(l.h2,{children:"Control initial focus"}),` `,(0,n.jsx)(s,{name:"modal-initial-focus",children:(0,n.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"light",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"light",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { Button, Modal } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" { useRef, useState, "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" JSX } "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"initialFocusRef"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"HTMLButtonElement"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Open Modal"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Modal"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{open}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"initialFocusRef"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{initialFocusRef}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClickOutside"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Body"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Header"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Title"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">Initial Focus"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Subtitle"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" This Modal is set up to programmatically move the focus onto the"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Submit button, making it possible to promptly continue with the"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Enter key."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Actions"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#032F62"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Cancel"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#005CC5"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#6F42C1"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#D73A49"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"{initialFocusRef}>"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" Submit"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#24292E"},children:"}"})})]})}),(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"dark",__rawString__:`import { Button, Modal } from 'geist/components'; import { useRef, useState, type JSX } from 'react'; export function Component(): JSX.Element { const [open, setOpen] = useState(false); const initialFocusRef = useRef(null); return ( <> setOpen(false)} > Initial Focus This Modal is set up to programmatically move the focus onto the Submit button, making it possible to promptly continue with the Enter key. setOpen(false)} type="secondary"> Cancel setOpen(false)} ref={initialFocusRef}> Submit ); } `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dark",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button, Modal } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'geist/components'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useRef, useState, "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" JSX } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"'react'"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"function"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"JSX"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"Element"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useState"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"initialFocusRef"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"useRef"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"HTMLButtonElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"size"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"small"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Open Modal"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Modal"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"active"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{open}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"initialFocusRef"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{initialFocusRef}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClickOutside"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Body"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Header"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Title"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Initial Focus"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Subtitle"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" This Modal is set up to programmatically move the focus onto the"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Submit button, making it possible to promptly continue with the"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Enter key."})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Actions"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"secondary"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Cancel"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Modal.Action"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"onClick"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"setOpen"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"false"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")} "}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"ref"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{initialFocusRef}>"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Submit"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})]})})]})]})}function x(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(d,e)})):d(e)}var M=x;function u(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return B(S);})(); ;return Component;

Modal

Default

Sticky

Single button

Disabled actions

Inset

Control initial focus