define(["require", "exports", "@fluentui/react-make-styles", "@fluentui/react-provider", "@fluentui/react-theme", "react", "react-dom"], function (require, exports, react_make_styles_1, react_provider_1, react_theme_1, React, ReactDOM) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.Frame = exports.Nesting = exports.Overrides = exports.Basic = void 0;
    var useStyles = react_make_styles_1.makeStyles({
        root: function (theme) { return ({
            border: "5px solid " + theme.alias.color.neutral.neutralStroke1,
            backgroundColor: theme.alias.color.neutral.neutralBackground1,
            color: theme.alias.color.neutral.neutralForeground1,
            margin: '5px',
            padding: '5px',
        }); },
        primary: function (theme) { return ({
            borderColor: theme.alias.color.neutral.brandForeground,
            color: theme.alias.color.neutral.brandForeground,
        }); },
        overrides: {
            color: 'red',
            borderColor: 'red',
        },
    });
    var Container = function (props) {
        var classes = useStyles();
        var className = react_make_styles_1.mergeClasses(classes.root, props.primary && classes.primary, props.className);
        return React.createElement("div", { className: className }, props.children);
    };
    var ContainerWithOverrides = function (props) {
        var classes = useStyles();
        return (React.createElement(Container, { className: classes.root, primary: true }, props.children));
    };
    var PortalFrame = function (_a) {
        var children = _a.children;
        var _b = React.useState(null), frameRef = _b[0], setFrameRef = _b[1];
        return (React.createElement(React.Fragment, null,
            React.createElement("iframe", { ref: setFrameRef, style: { height: 300, width: 600, border: 0, padding: 20 }, title: "An example of Provider in iframe" }),
            frameRef &&
                ReactDOM.createPortal(children(frameRef.contentDocument), frameRef.contentDocument.body)));
    };
    var Basic = function () { return (React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.webLightTheme },
        React.createElement(Container, null, "Hello world!"),
        React.createElement(Container, { primary: true }, "Hello world!"))); };
    exports.Basic = Basic;
    var Overrides = function () { return (React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.webLightTheme },
        React.createElement(ContainerWithOverrides, null, "Hello world!"))); };
    exports.Overrides = Overrides;
    var Nesting = function () { return (React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.webLightTheme },
        React.createElement(react_provider_1.FluentProvider, { theme: react_theme_1.teamsLightTheme },
            React.createElement(Container, { primary: true }, "Hello world!")))); };
    exports.Nesting = Nesting;
    var Frame = function () { return (React.createElement(PortalFrame, null, function (externalDocument) { return (React.createElement(react_provider_1.FluentProvider, { targetDocument: externalDocument, theme: react_theme_1.webLightTheme },
        React.createElement(Container, null, "Hello world!"),
        React.createElement(Container, { primary: true }, "Hello world!"))); })); };
    exports.Frame = Frame;
});
//# sourceMappingURL=Basic.stories.js.map