define(["require", "exports", "react", "@fluentui/react/lib/Icon", "@fluentui/react/lib/Styling", "@fluentui/react/lib/Utilities", "@fluentui/example-data"], function (require, exports, React, Icon_1, Styling_1, Utilities_1, example_data_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.IconImageSheetExample = void 0;
    var classNames = Styling_1.mergeStyleSets({
        image: {
            display: 'inline-block',
            position: 'relative',
        },
        one: {
            width: 48,
            height: 44,
            marginLeft: 27,
        },
        oneImage: {
            left: -6,
            top: -4,
        },
        check: {
            width: 35,
            height: 43,
            marginLeft: 55,
        },
        checkImage: {
            left: -60,
            top: -5,
        },
        lock: {
            width: 35,
            height: 42,
            marginLeft: 65,
        },
        lockImage: {
            left: -109,
            top: -5,
        },
    });
    var IconImageSheetExample = function () {
        // ImageIcon is an optimized variant of standard Icon.
        // You could also use the standard Icon here (adding the prop `iconType={IconType.image}`).
        // Provide an alt attribute using imageProps.alt for screen reader users if the icon is not
        // accompanied by text that conveys the same meaning.
        return (React.createElement("div", null,
            React.createElement(Icon_1.ImageIcon, { className: classNames.one, imageProps: {
                    src: example_data_1.TestImages.iconOne,
                    alt: 'OneNote file',
                    className: Utilities_1.css(classNames.image, classNames.oneImage),
                } }),
            React.createElement(Icon_1.ImageIcon, { className: classNames.check, imageProps: {
                    src: example_data_1.TestImages.iconOne,
                    alt: 'Printer ready',
                    className: Utilities_1.css(classNames.image, classNames.checkImage),
                } }),
            React.createElement(Icon_1.ImageIcon, { "aria-label": "Locked", className: classNames.lock, imageProps: {
                    src: example_data_1.TestImages.iconOne,
                    alt: 'Locked',
                    className: Utilities_1.css(classNames.image, classNames.lockImage),
                } })));
    };
    exports.IconImageSheetExample = IconImageSheetExample;
});
//# sourceMappingURL=Icon.ImageSheet.Example.js.map