// /* should not generate diagnostics */
const Component1 = () => {
	return <div>{customTitle || defaultTitle}</div>;
};

const Component2 = ({ elements }) => {
	return <div>{elements}</div>;
};

const Component3 = ({ elements }) => {
	return <div>There are {elements.length} elements</div>;
};

const Component4 = ({ elements, count }) => {
	return <div>{!count && 'No results found'}</div>;
};

const Component5 = ({ elements }) => {
	return <div>{!!elements.length && <List elements={elements} />}</div>;
};

const Component6 = ({ elements }) => {
	return <div>{Boolean(elements.length) && <List elements={elements} />}</div>;
};

const Component7 = ({ elements }) => {
	return <div>{elements.length > 0 && <List elements={elements} />}</div>;
};

const Component8 = ({ elements }) => {
	return <div>{elements.length ? <List elements={elements} /> : null}</div>;
};

const Component9 = ({ elements, count }) => {
	return <div>{count ? <List elements={elements} /> : null}</div>;
};

const Component10 = ({ elements, count }) => {
	return <div>{count ? <List elements={elements} /> : <EmptyList />}</div>;
};

const Component11 = ({ elements, count }) => {
	return <div>{!!count && <List elements={elements} />}</div>;
};

const Component12 = ({ elements, count }) => {
	return (
		<div>
			<div> {direction ? (direction === 'down' ? '▼' : '▲') : ''} </div>
			<div>{containerName.length > 0 ? 'Loading several stuff' : 'Loading'}</div>
		</div>
	);
};

const Component13 = ({ direction }) => {
	return (
		<div>
			<div>{!!direction && direction === 'down' && '▼'}</div>
			<div>{direction === 'down' && !!direction && '▼'}</div>
			<div>{direction === 'down' || (!!direction && '▼')}</div>
			<div>{(!display || display === DISPLAY.WELCOME) && <span>foo</span>}</div>
		</div>
	);
};

const isOpen1 = true;
const Component14 = () => {
	return <Popover open={isOpen1 && items.length > 0} />;
};

const isOpen2 = false;
const Component15 = () => {
	return <Popover open={isOpen2 && items.length > 0} />;
};
