import { __assign, __extends } from "tslib";
import * as React from 'react';
import { Button } from '@uifabric/experiments';
import { Customizer, Stack } from '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) {
    __extends(SlotsStyledExample, _super);
    function SlotsStyledExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SlotsStyledExample.prototype.render = function () {
        return (React.createElement(Stack, null,
            React.createElement(Stack, __assign({}, stackProps),
                React.createElement(Button, { icon: { iconName: 'share', style: ButtonTheme.scopedSettings.Icon.styles.root }, content: "Icon as IIconProps with style" }),
                React.createElement(Button, { icon: "share", content: { children: 'Text as ITextProps with styles', styles: ButtonTheme.scopedSettings.Text.styles } }),
                React.createElement(Button, { icon: { iconName: 'share', style: { color: 'red' } }, styles: getButtonStyles, content: "Button styles prop" }),
                React.createElement(Customizer, __assign({}, ButtonTheme),
                    React.createElement(Button, { icon: "share", content: "Button scopedSettings" })))));
    };
    return SlotsStyledExample;
}(React.Component));
export { SlotsStyledExample };
//# sourceMappingURL=Slots.Styled.Example.js.map