"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var themed_components_1 = __importDefault(require("@monstrosity/utilities/themed-components"));
var open_in_tab_1 = require("@monstrosity/utilities/open-in-new-tab/open-in-tab");
var ellipsis_1 = require("@monstrosity/utilities/common-styles/ellipsis");
var clickable_1 = require("../Clickable/clickable");
var HeadingStyle = themed_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tfont-size: 2.5rem;\n\tline-height: 4rem;\n\tcolor: ", ";\n\tletter-spacing: 0.05rem;\n\tfont-weight: ", ";\n"], ["\n\tfont-size: 2.5rem;\n\tline-height: 4rem;\n\tcolor: ", ";\n\tletter-spacing: 0.05rem;\n\tfont-weight: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.heavy;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.weight.strong;
});
var TitleStyle = themed_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tfont-size: 1.875rem;\n\tline-height: 2.875rem;\n\tcolor: ", ";\n\tfont-weight: ", ";\n"], ["\n\tfont-size: 1.875rem;\n\tline-height: 2.875rem;\n\tcolor: ", ";\n\tfont-weight: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.heavy;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.weight.regular;
});
var SectionStyle = themed_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tfont-size: 1.5rem;\n\tline-height: 2.25rem;\n\tcolor: ", ";\n\tfont-weight: ", ";\n"], ["\n\tfont-size: 1.5rem;\n\tline-height: 2.25rem;\n\tcolor: ", ";\n\tfont-weight: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.title;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.weight.regular;
});
exports.BodyStyle = themed_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\tfont-size: 1rem;\n\tline-height: 1.5rem;\n\tcolor: ", ";\n\tfont-weight: ", ";\n"], ["\n\tfont-size: 1rem;\n\tline-height: 1.5rem;\n\tcolor: ", ";\n\tfont-weight: ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.body;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.weight.regular;
});
var OptionStyle = themed_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\tdisplay: flex;\n    padding: 0.5rem 1rem;\n\tfont-size: 1rem;\n\tline-height: 1.5rem;\n\tcolor: ", ";\n\tfont-weight: ", ";\n\n\t", "\n"], ["\n\tdisplay: flex;\n    padding: 0.5rem 1rem;\n\tfont-size: 1rem;\n\tline-height: 1.5rem;\n\tcolor: ", ";\n\tfont-weight: ", ";\n\n\t", "\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.body;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.weight.regular;
}, ellipsis_1.Ellipsis);
var ParagraphStyle = themed_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\tfont-size: 1rem;\n\tline-height: 1.5rem;\n\tcolor: ", ";\n\tfont-weight: ", ";\n\tmargin-bottom: 1rem;\n\tmargin-top: 0.25rem;\n"], ["\n\tfont-size: 1rem;\n\tline-height: 1.5rem;\n\tcolor: ", ";\n\tfont-weight: ", ";\n\tmargin-bottom: 1rem;\n\tmargin-top: 0.25rem;\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.paragraph;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.weight.regular;
});
var RuleStyle = themed_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\theight: 1px;\n\tbackground: ", ";\n\tmargin: ", ";\n"], ["\n\theight: 1px;\n\tbackground: ",
    ";\n\tmargin: ", ";\n"])), function (_a) {
    var theme = _a.theme, light = _a.light;
    return light ? theme.style.colour.text.light : theme.style.colour.text.body;
}, function (_a) {
    var full = _a.full;
    return (full ? '1rem 0' : '1rem 2rem');
});
var SoftStyle = themed_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n\tcolor: ", ";\n\tline-height: 1rem;\n\tfont-size: 1rem;\n\tfont-weight: ", ";\n\tdisplay: flex;\n\tflex: 1;\n\tjustify-content: center;\n"], ["\n\tcolor: ", ";\n\tline-height: 1rem;\n\tfont-size: 1rem;\n\tfont-weight: ", ";\n\tdisplay: flex;\n\tflex: 1;\n\tjustify-content: center;\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.light;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.weight.light;
});
exports.LinkStyle = themed_components_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n\tfont-size: 1rem;\n\tline-height: 1rem;\n\tcolor: ", ";\n\tmargin: 0 0.4rem;\n\tfont-weight: 400;\n\n\t&:hover {\n\t\tfont-weight: ", ";\n\t\tmargin: 0 0.375rem;\n\t}\n"], ["\n\tfont-size: 1rem;\n\tline-height: 1rem;\n\tcolor: ", ";\n\tmargin: 0 0.4rem;\n\tfont-weight: 400;\n\n\t&:hover {\n\t\tfont-weight: ", ";\n\t\tmargin: 0 0.375rem;\n\t}\n"])), function (_a) {
    var theme = _a.theme;
    return theme.style.colour.text.link;
}, function (_a) {
    var theme = _a.theme;
    return theme.style.weight.strong;
});
exports.Link = function (_a) {
    var children = _a.children, url = _a.url;
    var onClick = function () {
        open_in_tab_1.openInNewTab(url);
    };
    return (react_1.default.createElement(exports.LinkStyle, null,
        react_1.default.createElement(clickable_1.Clickable, { onClick: onClick, id: children, ariaLabel: children, tabbable: true }, children)));
};
var StyledText = function (_a) {
    var children = _a.children, styler = _a.styler;
    var Component = styler;
    return react_1.default.createElement(Component, null, children);
};
exports.Heading = function (_a) {
    var children = _a.children;
    return (react_1.default.createElement(StyledText, { styler: HeadingStyle, children: children }));
};
exports.Title = function (_a) {
    var children = _a.children;
    return (react_1.default.createElement(StyledText, { styler: TitleStyle, children: children }));
};
exports.Section = function (_a) {
    var children = _a.children;
    return (react_1.default.createElement(StyledText, { styler: SectionStyle, children: children }));
};
exports.Body = function (_a) {
    var children = _a.children;
    return (react_1.default.createElement(StyledText, { styler: exports.BodyStyle, children: children }));
};
exports.Paragraph = function (_a) {
    var children = _a.children;
    return (react_1.default.createElement(StyledText, { styler: ParagraphStyle, children: children }));
};
exports.Soft = function (_a) {
    var children = _a.children;
    return (react_1.default.createElement(StyledText, { styler: SoftStyle, children: children }));
};
exports.OptionItem = function (_a) {
    var children = _a.children;
    return (react_1.default.createElement(StyledText, { styler: OptionStyle, children: children }));
};
exports.HorizontalRule = RuleStyle;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
