define(["require", "exports", "tslib", "react", "@fluentui/react-experiments", "@fluentui/react", "@fluentui/react-experiments/lib/common/TestImages"], function (require, exports, tslib_1, React, react_experiments_1, react_1, TestImages_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.PersonaCoinSizeAndColorExample = void 0;
    var tokens = {
        sectionStack: {
            childrenGap: 32,
        },
        headingStack: {
            childrenGap: 16,
        },
        personaCoinStack: {
            childrenGap: 12,
        },
    };
    var PersonaCoinSizeAndColorExample = /** @class */ (function (_super) {
        tslib_1.__extends(PersonaCoinSizeAndColorExample, _super);
        function PersonaCoinSizeAndColorExample() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        PersonaCoinSizeAndColorExample.prototype.render = function () {
            return (React.createElement(react_1.Stack, { tokens: tokens.sectionStack },
                React.createElement(react_1.Stack, { tokens: tokens.headingStack, padding: 8 },
                    React.createElement(react_1.Stack, { tokens: tokens.personaCoinStack },
                        React.createElement(react_1.Text, null, "Sizes"),
                        React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, tokens: tokens.personaCoinStack },
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 10 }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 24 }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 28 }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 40 }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 48 }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 56 }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 72 }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 100 })),
                        React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, tokens: tokens.personaCoinStack },
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 10, imageUrl: TestImages_1.PersonaTestImages.personMale }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 24, imageUrl: TestImages_1.PersonaTestImages.personMale, presence: 1 }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 28, imageUrl: TestImages_1.PersonaTestImages.personMale }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 40, imageUrl: TestImages_1.PersonaTestImages.personMale, presence: 2 }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 48, imageUrl: TestImages_1.PersonaTestImages.personMale }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 56, imageUrl: TestImages_1.PersonaTestImages.personMale, presence: 3 }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 72, imageUrl: TestImages_1.PersonaTestImages.personMale }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", size: 100, imageUrl: TestImages_1.PersonaTestImages.personMale, presence: 4 }))),
                    React.createElement(react_1.Stack, { tokens: tokens.personaCoinStack },
                        React.createElement(react_1.Text, null, "Custom colors"),
                        React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, tokens: tokens.personaCoinStack },
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", coinColor: "red", initialsColor: "black" }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", coinColor: "beige", initialsColor: "black" }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", coinColor: "blue" }),
                            React.createElement(react_experiments_1.PersonaCoin, { text: "Kevin Jameson", coinColor: "orange" }))))));
        };
        return PersonaCoinSizeAndColorExample;
    }(React.Component));
    exports.PersonaCoinSizeAndColorExample = PersonaCoinSizeAndColorExample;
});
//# sourceMappingURL=PersonaCoinSizeAndColor.Example.js.map