define(["require", "exports", "@fluentui/react-provider", "@fluentui/react-theme", "react"], function (require, exports, react_provider_1, react_theme_1, React) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.ThemesMerge = exports.DifferentThemes = exports.Direction = void 0;
    var containerStyles = {
        border: "5px solid var(--neutralColorTokens-neutralStroke1)",
        backgroundColor: 'var(--neutralColorTokens-neutralBackground1)',
        color: 'var(--neutralColorTokens-brandForeground1)',
        margin: '5px',
        padding: '5px',
    };
    var Direction = function () { return (React.createElement(React.Fragment, null,
        React.createElement("p", null, "This example shows usage of \"dir\" attribute to change text direction."),
        React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.teamsLightTheme },
            React.createElement("div", { style: containerStyles }, "Hello World!")),
        React.createElement(react_provider_1.FluentProvider, { dir: "rtl", theme: react_theme_1.teamsLightTheme },
            React.createElement("div", { style: containerStyles }, "\u0645\u0631\u062D\u0628\u0627 \u0628\u0627\u0644\u0639\u0627\u0644\u0645!")))); };
    exports.Direction = Direction;
    var DifferentThemes = function () { return (React.createElement(React.Fragment, null,
        React.createElement("p", null, "This example shows usage of different themes with the same tokens set."),
        React.createElement("h2", null, "Teams Light Theme"),
        React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.teamsLightTheme },
            React.createElement("div", { style: containerStyles }, "Hello World!")),
        React.createElement("h2", null, "Teams Dark Theme"),
        React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.teamsDarkTheme },
            React.createElement("div", { style: containerStyles }, "Hello World!")),
        React.createElement("h2", null, "Web Light Theme"),
        React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.webLightTheme },
            React.createElement("div", { style: containerStyles }, "Hello World!")))); };
    exports.DifferentThemes = DifferentThemes;
    var ThemesMerge = function () { return (React.createElement(React.Fragment, null,
        React.createElement("p", null, "This example shows theme composition and partial overrides of tokens."),
        React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.teamsLightTheme },
            React.createElement(react_provider_1.FluentProvider, { theme: {
                    alias: {
                        color: {
                            neutral: {
                                neutralBackground1: 'salmon',
                                brandForeground1: 'white',
                            },
                        },
                    },
                } },
                React.createElement("div", { style: containerStyles }, "Hello World!"))))); };
    exports.ThemesMerge = ThemesMerge;
});
//# sourceMappingURL=FluentProvider.stories.js.map