export const ComplexExample = component(() => (
  ​<Stack direction="vertical" gap="lg">
  ​  ​<Panel
  ​  ​  ​variant="dark"
  ​  ​  ​slots={{
  ​  ​  ​  ​header: (
  ​  ​  ​  ​  ​<DemoHeader>
  ​  ​  ​  ​  ​  ​<span class="title">Project Settings</span>
  ​  ​  ​  ​  ​  ​<div class="actions">
  ​  ​  ​  ​  ​  ​  ​<Button size="sm" variant="ghost">Help</Button>
  ​  ​  ​  ​  ​  ​  ​<Button size="sm" variant="primary">New Project</Button>
  ​  ​  ​  ​  ​  ​</div>
  ​  ​  ​  ​  ​</DemoHeader>
  ​  ​  ​  ​),
  ​  ​  ​}}
  ​  ​>
  ​  ​  ​<Stack direction="horizontal" gap="md">
  ​  ​  ​  ​<Panel variant="light">
  ​  ​  ​  ​  ​<DemoBlock>Navigation Menu</DemoBlock>
  ​  ​  ​  ​</Panel>
  ​  ​  ​  ​<Stack direction="vertical" gap="md" flex="1">
  ​  ​  ​  ​  ​<Panel>
  ​  ​  ​  ​  ​  ​<DemoBlock>Main Settings Area</DemoBlock>
  ​  ​  ​  ​  ​</Panel>
  ​  ​  ​  ​  ​<Panel variant="light">
  ​  ​  ​  ​  ​  ​<DemoBlock>Additional Options</DemoBlock>
  ​  ​  ​  ​  ​</Panel>
  ​  ​  ​  ​</Stack>
  ​  ​  ​</Stack>
  ​  ​</Panel>
  ​</Stack>
));