define(["require", "exports", "react", "@fluentui/react", "@fluentui/react/lib/Button", "@fluentui/react-hooks"], function (require, exports, React, react_1, Button_1, react_hooks_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.OverlayDarkExample = void 0;
    var exampleStyles = {
        root: [
            'OverlayExample-content',
            {
                background: 'blue',
                bottom: '0',
                color: 'white',
                left: '0',
                padding: '10px',
                position: 'absolute',
                right: '0',
            },
        ],
    };
    var getClassNames = react_1.classNamesFunction();
    var classNames = getClassNames(exampleStyles, {});
    var OverlayDarkExample = function () {
        var _a = react_hooks_1.useBoolean(false), isOverlayVisible = _a[0], toggleIsOverlayVisible = _a[1].toggle;
        return (React.createElement(React.Fragment, null,
            React.createElement(Button_1.DefaultButton, { onClick: toggleIsOverlayVisible, text: "Show the overlay" }),
            isOverlayVisible && (React.createElement(react_1.Overlay, { isDarkThemed: true, onClick: toggleIsOverlayVisible },
                React.createElement("div", { className: classNames.root },
                    React.createElement("p", null, "I am content within the overlay."))))));
    };
    exports.OverlayDarkExample = OverlayDarkExample;
});
//# sourceMappingURL=Overlay.Dark.Example.js.map