import React from 'react';
import { Box, Flex } from '@looker/components';
import styled from 'styled-components';
import { SomethingWentWrongGraphic } from './components';
export var SomethingWentWrong = _ref => {
  var {
    header,
    actionMessage,
    altText
  } = _ref;
  return React.createElement(OuterFlex, null, React.createElement(SomethingWentWrongGraphic, {
    altText: altText
  }), React.createElement(HeaderText, null, header), React.createElement(Box, {
    width: 520
  }, React.createElement(ActionMessage, null, actionMessage)));
};
var OuterFlex = styled(Flex).withConfig({
  displayName: "SomethingWentWrong__OuterFlex",
  componentId: "sc-1xvmu4u-0"
})(["width:100%;margin-top:", ";justify-content:center;flex-direction:column;align-items:center;"], props => props.theme.space.xxxxlarge);
var HeaderText = styled.h1.withConfig({
  displayName: "SomethingWentWrong__HeaderText",
  componentId: "sc-1xvmu4u-1"
})(["margin-top:", ";text-align:center;font-family:", ";font-weight:", ";font-size:", ";color:", ";"], props => props.theme.space.large, props => props.theme.fonts.brand, props => props.theme.fontWeights.normal, props => props.theme.fontSizes.xxxxlarge, props => props.theme.colors.text5);
var ActionMessage = styled.h3.withConfig({
  displayName: "SomethingWentWrong__ActionMessage",
  componentId: "sc-1xvmu4u-2"
})(["margin-top:", ";text-align:center;font-family:", ";font-weight:", ";font-size:", ";color:", ";"], props => props.theme.space.small, props => props.theme.fonts.brand, props => props.theme.fontWeights.normal, props => props.theme.fontSizes.large, props => props.theme.colors.text3);
//# sourceMappingURL=SomethingWentWrong.js.map