Modal

<Modal
	open
	focusTrapOptions={{ disabled: true }}
	onClose={() => alert("closing")}
	title="Grand Moff Tarkin"
	footer={<Button primary>Close</Button>}
	portal={false}
>
	Don't worry, we'll deal with your rebel friends soon enough!
</Modal>

<State
	initial={{
		open: false,
	}}
>
	{([state, setState]) => (
		<div>
			<ButtonGroup>
				{[
					Modal.Sizes.XS,
					Modal.Sizes.S,
					Modal.Sizes.M,
					Modal.Sizes.L,
				].map((width, index) => (
					<Button
						key={index}
						onClick={() =>
							setState({ modalWidth: width, open: true })
						}
					>
						<span className="tt-uppercase m-r-half">{width}</span>{' '}
						Modal
					</Button>
				))}
			</ButtonGroup>
			<Modal
				open={state.open}
				size={state.modalWidth}
				onClose={() => setState({ open: false })}
				title={`${state.modalWidth} Modal`}
				footer={
					<Button primary onClick={() => setState({ open: false })}>
						Close
					</Button>
				}
			>
				Don't worry, we'll deal with your rebel friends soon enough!
			</Modal>
		</div>
	)}
</State>

<Modal
	open
	focusTrapOptions={{ disabled: true }}
	onClose={() => alert("closing")}
	title="Grand Moff Tarkin"
	footer={<Button primary>Close</Button>}
	portal={false}
>
	<p style={{marginTop: 0}}>
		Chia cillum etsy pabst, in paleo fashion axe.
		Gastropub pariatur tilde wayfarers chia laboris.
		Salvia cred franzen chambray cillum slow-carb.
		Beard letterpress distillery, knausgaard readymade YOLO in.
		Aesthetic ea aliqua, blog vaporware kombucha gluten-free art party VHS pariatur cray raclette.
	</p>
	<p>
		Pop-up kale chips four dollar toast gastropub you probably haven't heard of them prism tote bag.
		Paleo thundercats godard glossier +1, iceland anim.
		Readymade sriracha occaecat, crucifix bicycle rights retro seitan exercitation craft beer kale
		chips minim.
		Do post-ironic wayfarers, seitan etsy small batch hammock green juice hexagon whatever hoodie
		ipsum fashion axe copper mug.
		Fingerstache put a bird on it palo santo craft beer.
	</p>
	<p>
		Adaptogen officia cred ut enamel pin.
		Man bun fixie blue bottle minim proident franzen raw denim fanny pack, church-key edison bulb
		butcher lumbersexual vaporware ethical YOLO.
		Mlkshk elit austin succulents live-edge poke esse pork belly williamsburg consectetur
		helvetica craft beer put a bird on it pop-up aliqua.
		Viral irure synth laboris laborum.
	</p>
	<p>
		Ut blue bottle activated charcoal pickled meh.
		Forage esse occupy artisan aliquip scenester biodiesel street art actually truffaut succulents
		art party yr nulla ethical.
		Hell of waistcoat aliquip gochujang sunt, fashion axe sed ut photo booth cronut.
		Kogi tattooed semiotics cold-pressed adipisicing taiyaki.
	</p>
</Modal>

<State initial={false}>
	{([open, setOpen]) => (
		<>
			<Button onClick={() => setOpen(true)}>Open</Button>
			<Modal
				open={open}
				title="Accept Estimate"
				footer={
					<Button primary onClick={() => setOpen(false)}>
						I Accept
					</Button>
				}
			>
				<Form>
					<Form.Input value="John Smith" />
				</Form>
				<p>
					I understand this is a legal representation of my signature.
				</p>
			</Modal>
		</>
	)}
</State>

<Modal
	open={open}
	focusTrapOptions={{ disabled: true }}
	footer={<Button primary>Save</Button>}
	portal={false}
>
	Single Right Aligned Button
</Modal>

<Modal
	open={open}
	focusTrapOptions={{ disabled: true }}
	footer={<ButtonGroup>
		<Button>Cancel</Button>
		<Button primary>Save</Button>
	</ButtonGroup>}
	portal={false}
>
	Double Right Aligned Buttons
</Modal>

<Modal
	open={open}
	focusTrapOptions={{ disabled: true }}
	footer={<Button>Close</Button>}
	footerAlign="center"
	portal={false}
>
	Centered Button
</Modal>

<Modal
	open={open}
	focusTrapOptions={{ disabled: true }}
	footer={<React.Fragment>
		<Button>Cancel</Button>
		<Button primary>Save</Button>
	</React.Fragment>}
	footerAlign="space-between"
	portal={false}
>
	Split Buttons
</Modal>

import { Modal } from '@servicetitan/design-system';