define(["require", "exports", "react", "@fluentui/react/lib/SpinButton"], function (require, exports, React, SpinButton_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.SpinButtonCustomStyledExample = void 0;
    var styles = function (props) {
        var isFocused = props.isFocused, theme = props.theme;
        return {
            spinButtonWrapper: [
                { width: 75 },
                // Example of conditional styling based on component state
                isFocused && {
                    outline: '5px solid ' + theme.palette.yellow,
                },
            ],
        };
    };
    var upArrowButtonStyles = {
        rootChecked: {
            backgroundColor: 'green',
        },
        rootPressed: {
            backgroundColor: 'green',
        },
    };
    var downArrowButtonStyles = {
        rootChecked: {
            backgroundColor: 'red',
        },
        rootPressed: {
            backgroundColor: 'red',
        },
    };
    var SpinButtonCustomStyledExample = function () {
        return (React.createElement(SpinButton_1.SpinButton, { styles: styles, upArrowButtonStyles: upArrowButtonStyles, downArrowButtonStyles: downArrowButtonStyles, defaultValue: "0", label: "Custom styled SpinButton", min: 0, max: 100, step: 1, incrementButtonAriaLabel: "Increase value by 1", decrementButtonAriaLabel: "Decrease value by 1" }));
    };
    exports.SpinButtonCustomStyledExample = SpinButtonCustomStyledExample;
});
//# sourceMappingURL=SpinButton.CustomStyled.Example.js.map