"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var style_1 = require("./style");
var Logo_1 = require("./Logo");
var Card_1 = require("./Card");
var appClassName = style_1.style({
    textAlign: "center"
});
var appHeaderClassName = style_1.style({
    backgroundColor: "#222",
    height: style_1.px(200),
    padding: style_1.px(20),
    color: "white"
});
var appTitleClassName = style_1.style({
    fontSize: style_1.em(1.5)
});
var App = /** @class */ (function (_super) {
    __extends(App, _super);
    function App() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    App.prototype.render = function () {
        return (<div className={appClassName}>
        <header className={appHeaderClassName}>
          <h1 className={appTitleClassName}>Create Typestyle Example</h1>
          <Logo_1.Logo />
        </header>
        <br />
        <Card_1.Card>Components created without JSX</Card_1.Card>
        <Card_1.Card selected>
          That can be additionally styled <br /> (try clicking)
        </Card_1.Card>
      </div>);
    };
    return App;
}(style_1.React.Component));
exports.default = App;
//# sourceMappingURL=App.jsx.map