"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var experiments_1 = require("@uifabric/experiments");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var stackProps = { tokens: { childrenGap: 16 }, padding: 8, maxWidth: 400 };
var ButtonTheme = {
    scopedSettings: {
        Icon: {
            styles: {
                root: {
                    fontSize: 24,
                    color: 'purple',
                },
            },
        },
        Text: {
            styles: {
                root: {
                    color: 'purple',
                },
            },
        },
    },
};
var getButtonStyles = {
    icon: ButtonTheme.scopedSettings.Icon.styles.root,
    content: ButtonTheme.scopedSettings.Text.styles.root,
};
var SlotsStyledExample = /** @class */ (function (_super) {
    tslib_1.__extends(SlotsStyledExample, _super);
    function SlotsStyledExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SlotsStyledExample.prototype.render = function () {
        return (React.createElement(office_ui_fabric_react_1.Stack, null,
            React.createElement(office_ui_fabric_react_1.Stack, tslib_1.__assign({}, stackProps),
                React.createElement(experiments_1.Button, { icon: { iconName: 'share', style: ButtonTheme.scopedSettings.Icon.styles.root }, content: "Icon as IIconProps with style" }),
                React.createElement(experiments_1.Button, { icon: "share", content: { children: 'Text as ITextProps with styles', styles: ButtonTheme.scopedSettings.Text.styles } }),
                React.createElement(experiments_1.Button, { icon: { iconName: 'share', style: { color: 'red' } }, styles: getButtonStyles, content: "Button styles prop" }),
                React.createElement(office_ui_fabric_react_1.Customizer, tslib_1.__assign({}, ButtonTheme),
                    React.createElement(experiments_1.Button, { icon: "share", content: "Button scopedSettings" })))));
    };
    return SlotsStyledExample;
}(React.Component));
exports.SlotsStyledExample = SlotsStyledExample;
//# sourceMappingURL=Slots.Styled.Example.js.map