"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("@storybook/react");
var _1 = require("../");
var styled_components_1 = require("styled-components");
var S = function (_a) {
    var style = _a.style, border = _a.border, theme = _a.theme;
    var _b = theme.colors[style], main = _b.main, light = _b.light, dark = _b.dark, semilight = _b.semilight;
    return (React.createElement(_1.Box, { style: {
            minWidth: 120,
            maxWidth: 160,
            borderRadius: 4,
            overflow: 'hidden',
            border: border ? "1px solid " + main : 'none'
        }, fontSize: 10, flex: 1, m: 15 },
        React.createElement(_1.Flex, { style: { height: 75, backgroundColor: main }, align: 'center', justify: 'center' }, main),
        semilight && (React.createElement(_1.Flex, { style: { height: 45, backgroundColor: semilight }, align: 'center', justify: 'center' }, semilight)),
        React.createElement(_1.Flex, { style: { height: 45 } },
            React.createElement(_1.Flex, { flex: 1, style: { backgroundColor: light }, align: 'center', justify: 'center' }, light),
            React.createElement(_1.Flex, { flex: 1, style: { backgroundColor: dark }, align: 'center', justify: 'center' }, dark))));
};
var Swatch = styled_components_1.withTheme(S);
react_1.storiesOf('Swatches', module).addWithInfo('All', function () {
    return (React.createElement("div", null,
        React.createElement(_1.Box, { is: 'section', m: 15 },
            React.createElement(_1.Box, { is: 'h2', mx: 15 }, "Primary"),
            React.createElement(_1.Flex, { wrap: true },
                React.createElement(Swatch, { style: 'primary' }),
                React.createElement(Swatch, { style: 'secondary' }),
                React.createElement(Swatch, { style: 'tertiary' }),
                React.createElement(Swatch, { style: 'quartenary' }))),
        React.createElement(_1.Box, { is: 'section', m: 15 },
            React.createElement(_1.Box, { is: 'h2', mx: 15 }, "Secondary"),
            React.createElement(_1.Flex, { wrap: true },
                React.createElement(Swatch, { border: true, style: 'success' }),
                React.createElement(Swatch, { border: true, style: 'danger' }),
                React.createElement(Swatch, { border: true, style: 'warning' }),
                React.createElement(Swatch, { border: true, style: 'info' })))));
});
