define(["require", "exports", "react", "@fluentui/react-theme"], function (require, exports, React, react_theme_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.GlobalTextAlignment = exports.GlobalFontWeight = exports.GlobalLineHeight = exports.GlobalFontSize = exports.GlobalFontFamily = void 0;
    exports.default = {
        title: 'Fluent UI Theme/Global/Type',
    };
    var global = react_theme_1.teamsLightTheme.global;
    var GlobalFontFamily = function () { return (React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px', alignItems: 'center' } }, Object.keys(global.type.fontFamilies).map(function (fontFamily) { return [
        React.createElement("div", { key: fontFamily }, fontFamily),
        React.createElement("div", { key: fontFamily + "-value", style: { fontFamily: "" + global.type.fontFamilies[fontFamily] } },
            global.type.fontFamilies[fontFamily],
            "Font family ",
            fontFamily),
    ]; }))); };
    exports.GlobalFontFamily = GlobalFontFamily;
    var GlobalFontSize = function () { return (React.createElement("div", { style: { fontFamily: global.type.fontFamilies.base } }, Object.keys(global.type.fontSizes).map(function (fontSizeGroup) { return [
        React.createElement("h3", { key: fontSizeGroup }, fontSizeGroup),
        React.createElement("div", { key: fontSizeGroup + "-value", style: { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px', alignItems: 'center' } }, Object.keys(global.type.fontSizes[fontSizeGroup]).map(function (fontSize) { return [
            React.createElement("div", { key: fontSize }, fontSize),
            React.createElement("div", { key: fontSize + "-value", style: { fontSize: global.type.fontSizes[fontSizeGroup][fontSize] } },
                "Font size ",
                fontSizeGroup,
                ".",
                fontSize),
        ]; })),
    ]; }))); };
    exports.GlobalFontSize = GlobalFontSize;
    var GlobalLineHeight = function () { return (React.createElement("div", { style: { fontFamily: global.type.fontFamilies.base } }, Object.keys(global.type.lineHeights).map(function (lineHeightGroup) { return [
        React.createElement("h3", { key: lineHeightGroup }, lineHeightGroup),
        React.createElement("div", { key: lineHeightGroup + "-value", style: { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px', alignItems: 'center' } }, Object.keys(global.type.lineHeights[lineHeightGroup]).map(function (lineHeight) { return [
            React.createElement("div", { key: lineHeight }, lineHeight),
            React.createElement("div", { key: lineHeight + "-value", style: { lineHeight: global.type.lineHeights[lineHeightGroup][lineHeight], backgroundColor: '#eee' } },
                "Line height ",
                lineHeightGroup,
                ".",
                lineHeight),
        ]; })),
    ]; }))); };
    exports.GlobalLineHeight = GlobalLineHeight;
    var GlobalFontWeight = function () { return (React.createElement("div", { style: { fontFamily: global.type.fontFamilies.base } },
        React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px', alignItems: 'center' } }, Object.keys(global.type.fontWeights).map(function (fontWeight) { return [
            React.createElement("div", { key: fontWeight }, fontWeight),
            React.createElement("div", { key: fontWeight + "-value", style: { fontWeight: global.type.fontWeights[fontWeight] } },
                "Font weight ",
                fontWeight),
        ]; })))); };
    exports.GlobalFontWeight = GlobalFontWeight;
    var GlobalTextAlignment = function () { return (React.createElement("div", { style: { fontFamily: global.type.fontFamilies.base } },
        React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '10px', alignItems: 'center' } }, Object.keys(global.type.alignment).map(function (alignment) { return [
            React.createElement("div", { key: alignment }, alignment),
            React.createElement("div", { key: alignment + "-value", style: {
                    textAlign: global.type.alignment[alignment],
                    backgroundColor: '#eee',
                } },
                "Alignment: ",
                alignment),
        ]; })))); };
    exports.GlobalTextAlignment = GlobalTextAlignment;
});
//# sourceMappingURL=GlobalType.stories.js.map