const StyleGuide = () => (
  <>
    {styleguide.map(({
      type, name, screens, data, pages,
    }) => (
      <>
        <Page name={name} key={name}>
          <LayoutProvider breakpoint={0}>
            {screens.map(({ name: screenName, component: Component, data: compData }) => (
              <Screen width={800} name={screenName}>
                <Component {...{ [type]: Object.assign({}, data, compData) }} />
              </Screen>
            ))}
          </LayoutProvider>
        </Page>
        {pages && pages.map(page => (
          <Page name={`    ↳ ${page.name}`} key={`${name} / ${page.name}`}>
            <LayoutProvider breakpoint={0}>
              {pages.map(({ name: screenName, component: Component, data: compData }) => (
                <Screen width={800} name={screenName}>
                  <Component {...{ [type]: Object.assign({}, data, compData) }} />
                </Screen>
              ))}
            </LayoutProvider>
          </Page>
        ))}
      </>
    ))}
  </>
);