'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _style = require('styled-jsx/style.js');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _responsive = require('@vx/responsive');

var _page = require('../components/page');

var _page2 = _interopRequireDefault(_page);

var _footer = require('../components/footer');

var _footer2 = _interopRequireDefault(_footer);

var _bars = require('../components/tiles/bars');

var _bars2 = _interopRequireDefault(_bars);

var _Codeblock = require('../components/codeblocks/Codeblock');

var _Codeblock2 = _interopRequireDefault(_Codeblock);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/components/show.js';
exports.default = (0, _responsive.withScreenSize)(function (_ref) {
  var screenWidth = _ref.screenWidth,
      screenHeight = _ref.screenHeight,
      children = _ref.children,
      title = _ref.title,
      component = _ref.component,
      _ref$shadow = _ref.shadow,
      shadow = _ref$shadow === undefined ? false : _ref$shadow,
      _ref$margin = _ref.margin,
      margin = _ref$margin === undefined ? { top: 0, left: 0, right: 0, bottom: 80 } : _ref$margin;

  var padding = 40;
  var height = screenHeight * .6;
  var width = screenWidth - padding;
  if (width > 800) width = 800;

  return _react2.default.createElement(_page2.default, { title: title, __source: {
      fileName: _jsxFileName,
      lineNumber: 24
    }
  }, _react2.default.createElement('div', { className: 'container', 'data-jsx': 3642123984,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 25
    }
  }, _react2.default.createElement('div', { style: { width: width }, 'data-jsx': 3642123984,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 26
    }
  }, _react2.default.createElement('h1', {
    'data-jsx': 3642123984,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 27
    }
  }, title)), _react2.default.createElement('div', { className: (0, _classnames2.default)({
      'shadow': !!shadow
    }, title.split(' ').join('-'), 'chart'), 'data-jsx': 3642123984,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 29
    }
  }, component({ width: width, height: height, margin: margin })), _react2.default.createElement('div', { style: { width: width }, 'data-jsx': 3642123984,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 35
    }
  }, _react2.default.createElement('h2', {
    'data-jsx': 3642123984,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 36
    }
  }, 'Code')), _react2.default.createElement('div', { className: 'code', style: { width: width }, 'data-jsx': 3642123984,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 38
    }
  }, _react2.default.createElement(_Codeblock2.default, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 39
    }
  }, children))), _react2.default.createElement(_footer2.default, {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 44
    }
  }), _react2.default.createElement(_style2.default, {
    styleId: 3642123984,
    css: '.container[data-jsx="3642123984"] {display:-webkit-flex; display:flex;-webkit-flex-direction: column;-moz-flex-direction: column;flex-direction: column;align-items: center;}.container[data-jsx="3642123984"]:first-child {margin-top: 55px;}.container[data-jsx="3642123984"] h1[data-jsx="3642123984"] {margin-top: 15px;line-height: .9em;letter-spacing: -.03em;}.container[data-jsx="3642123984"] h2[data-jsx="3642123984"] {margin-top: 15px;margin-bottom: 5px;}.chart[data-jsx="3642123984"] {overflow: hidden;border-radius: 14px;}.shadow[data-jsx="3642123984"] {border-radius: 14px;box-shadow: 0 1px 6px rgba(0,0,0,0.1);}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc2hvdy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0Q2tCLEFBQ0UsbUNBQ0ksbUNBQ1Msa0ZBQ0gsb0JBQ3JCLENBQ3VCLCtDQUNMLGlCQUNsQixDQUNjLDZEQUNJLGlCQUNDLGtCQUNLLHVCQUN4QixDQUNjLDZEQUNJLGlCQUNFLG1CQUNwQixDQUNPLCtCQUNXLGlCQUNHLG9CQUNyQixDQUNRLGdDQUNhLG9CQUNrQixzQ0FDdkMiLCJmaWxlIjoiY29tcG9uZW50cy9zaG93LmpzIiwic291cmNlUm9vdCI6Ii9Vc2Vycy9oc2hvZmYvY29kZS92eC9wYWNrYWdlcy92eC1kZW1vIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBjeCBmcm9tICdjbGFzc25hbWVzJztcbmltcG9ydCB7IHdpdGhTY3JlZW5TaXplIH0gZnJvbSAnQHZ4L3Jlc3BvbnNpdmUnO1xuaW1wb3J0IFBhZ2UgZnJvbSAnLi4vY29tcG9uZW50cy9wYWdlJztcbmltcG9ydCBGb290ZXIgZnJvbSAnLi4vY29tcG9uZW50cy9mb290ZXInO1xuaW1wb3J0IEJhcnMgZnJvbSAnLi4vY29tcG9uZW50cy90aWxlcy9iYXJzJztcbmltcG9ydCBDb2RlYmxvY2sgZnJvbSAnLi4vY29tcG9uZW50cy9jb2RlYmxvY2tzL0NvZGVibG9jayc7XG5cbmV4cG9ydCBkZWZhdWx0IHdpdGhTY3JlZW5TaXplKCh7XG4gIHNjcmVlbldpZHRoLFxuICBzY3JlZW5IZWlnaHQsXG4gIGNoaWxkcmVuLFxuICB0aXRsZSxcbiAgY29tcG9uZW50LFxuICBzaGFkb3cgPSBmYWxzZSxcbiAgbWFyZ2luID0geyB0b3A6IDAsIGxlZnQ6IDAsIHJpZ2h0OiAwLCBib3R0b206IDgwIH1cbn0pID0+IHtcbiAgY29uc3QgcGFkZGluZyA9IDQwO1xuICBjb25zdCBoZWlnaHQgPSBzY3JlZW5IZWlnaHQgKiAuNjtcbiAgbGV0IHdpZHRoID0gc2NyZWVuV2lkdGggLSBwYWRkaW5nO1xuICBpZiAod2lkdGggPiA4MDApIHdpZHRoID0gODAwO1xuXG4gIHJldHVybiAoXG4gICAgPFBhZ2UgdGl0bGU9e3RpdGxlfT5cbiAgICAgIDxkaXYgY2xhc3NOYW1lPVwiY29udGFpbmVyXCI+XG4gICAgICAgIDxkaXYgc3R5bGU9e3t3aWR0aDogd2lkdGh9fT5cbiAgICAgICAgICA8aDE+e3RpdGxlfTwvaDE+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT17Y3goe1xuICAgICAgICAgICdzaGFkb3cnOiAhIXNoYWRvd1xuICAgICAgICAgIH0sIHRpdGxlLnNwbGl0KCcgJykuam9pbignLScpLCAnY2hhcnQnKVxuICAgICAgICB9PlxuICAgICAgICAgIHtjb21wb25lbnQoeyB3aWR0aCwgaGVpZ2h0LCBtYXJnaW4gfSl9XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IHN0eWxlPXt7d2lkdGg6IHdpZHRofX0+XG4gICAgICAgICAgPGgyPkNvZGU8L2gyPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJjb2RlXCIgc3R5bGU9e3t3aWR0aDogd2lkdGh9fT5cbiAgICAgICAgICA8Q29kZWJsb2NrPlxuICAgICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICAgIDwvQ29kZWJsb2NrPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPEZvb3RlciAvPlxuICAgICAgPHN0eWxlIGpzeD57YFxuICAgICAgICAuY29udGFpbmVyIHtcbiAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgICAgfVxuICAgICAgICAuY29udGFpbmVyOmZpcnN0LWNoaWxkIHtcbiAgICAgICAgICBtYXJnaW4tdG9wOiA1NXB4O1xuICAgICAgICB9XG4gICAgICAgIC5jb250YWluZXIgaDEge1xuICAgICAgICAgIG1hcmdpbi10b3A6IDE1cHg7XG4gICAgICAgICAgbGluZS1oZWlnaHQ6IC45ZW07XG4gICAgICAgICAgbGV0dGVyLXNwYWNpbmc6IC0uMDNlbTtcbiAgICAgICAgfVxuICAgICAgICAuY29udGFpbmVyIGgyIHtcbiAgICAgICAgICBtYXJnaW4tdG9wOiAxNXB4O1xuICAgICAgICAgIG1hcmdpbi1ib3R0b206IDVweDtcbiAgICAgICAgfVxuICAgICAgICAuY2hhcnQge1xuICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgICAgYm9yZGVyLXJhZGl1czogMTRweDtcbiAgICAgICAgfVxuICAgICAgICAuc2hhZG93IHtcbiAgICAgICAgICBib3JkZXItcmFkaXVzOiAxNHB4O1xuICAgICAgICAgIGJveC1zaGFkb3c6IDAgMXB4IDZweCByZ2JhKDAsMCwwLDAuMSk7XG4gICAgICAgIH1cbiAgICAgIGB9PC9zdHlsZT5cbiAgICA8L1BhZ2U+XG4gICk7XG59KTtcbiJdfQ== */\n/*@ sourceURL=components/show.js */'
  }));
});