var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import React from 'react';
import styled from '@monstrosity/utilities/themed-components';
import { openInNewTab } from '@monstrosity/utilities/open-in-new-tab/open-in-tab';
import { Ellipsis } from '@monstrosity/utilities/common-styles/ellipsis';
import { Clickable } from '../Clickable/clickable';
var HeadingStyle = styled.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 = styled.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 = styled.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;
});
export var BodyStyle = styled.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 = styled.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);
var ParagraphStyle = styled.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 = styled.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 = styled.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;
});
export var LinkStyle = styled.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;
});
export var Link = function (_a) {
    var children = _a.children, url = _a.url;
    var onClick = function () {
        openInNewTab(url);
    };
    return (React.createElement(LinkStyle, null,
        React.createElement(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.createElement(Component, null, children);
};
export var Heading = function (_a) {
    var children = _a.children;
    return (React.createElement(StyledText, { styler: HeadingStyle, children: children }));
};
export var Title = function (_a) {
    var children = _a.children;
    return (React.createElement(StyledText, { styler: TitleStyle, children: children }));
};
export var Section = function (_a) {
    var children = _a.children;
    return (React.createElement(StyledText, { styler: SectionStyle, children: children }));
};
export var Body = function (_a) {
    var children = _a.children;
    return (React.createElement(StyledText, { styler: BodyStyle, children: children }));
};
export var Paragraph = function (_a) {
    var children = _a.children;
    return (React.createElement(StyledText, { styler: ParagraphStyle, children: children }));
};
export var Soft = function (_a) {
    var children = _a.children;
    return (React.createElement(StyledText, { styler: SoftStyle, children: children }));
};
export var OptionItem = function (_a) {
    var children = _a.children;
    return (React.createElement(StyledText, { styler: OptionStyle, children: children }));
};
export var HorizontalRule = RuleStyle;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
