"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BadgeAppearanceExample = void 0;
var React = require("react");
var react_badge_1 = require("@fluentui/react-badge");
var BadgeAppearanceExample = function () { return (React.createElement("div", { style: {
        display: 'flex',
        flexDirection: 'column',
        gap: '8px',
    } },
    React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: 400,
        } },
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "filled" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "ghost" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "outline" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "tint" }, "999+")),
    React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: 400,
        } },
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "filled", color: "danger" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "ghost", color: "danger" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "outline", color: "danger" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "tint", color: "danger" }, "999+")),
    React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: 400,
        } },
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "filled", color: "severe" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "ghost", color: "severe" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "outline", color: "severe" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "tint", color: "severe" }, "999+")),
    React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: 400,
        } },
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "filled", color: "warning" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "ghost", color: "warning" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "outline", color: "warning" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "tint", color: "warning" }, "999+")),
    React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: 400,
        } },
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "filled", color: "success" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "ghost", color: "success" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "outline", color: "success" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "tint", color: "success" }, "999+")),
    React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: 400,
        } },
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "filled", color: "important" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "ghost", color: "important" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "outline", color: "important" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "tint", color: "important" }, "999+")),
    React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: 400,
        } },
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "filled", color: "informative" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "ghost", color: "informative" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "outline", color: "informative" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "tint", color: "informative" }, "999+")),
    React.createElement("div", { style: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: 400,
        } },
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "filled", color: "subtle" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "ghost", color: "subtle" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "outline", color: "subtle" }, "999+"),
        React.createElement(react_badge_1.Badge, { shape: "rounded", appearance: "tint", color: "subtle" }, "999+")))); };
exports.BadgeAppearanceExample = BadgeAppearanceExample;
//# sourceMappingURL=BadgeAppearance.stories.js.map