define(["require", "exports", "react", "@fluentui/react"], function (require, exports, React, react_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.HorizontalStackSpacingExample = void 0;
    // Styles definition
    var stackStyles = {
        root: {
            background: react_1.DefaultPalette.themeTertiary,
            width: 300,
        },
    };
    var itemStyles = {
        alignItems: 'center',
        background: react_1.DefaultPalette.themePrimary,
        color: react_1.DefaultPalette.white,
        display: 'flex',
        height: 50,
        justifyContent: 'center',
        width: 50,
    };
    // Tokens definition
    var sectionStackTokens = { childrenGap: 10 };
    var numericalSpacingStackTokens = {
        childrenGap: 10,
        padding: 10,
    };
    var customSpacingStackTokens = {
        childrenGap: '10%',
        padding: 's1 15%',
    };
    var themedExtraSmallStackTokens = {
        childrenGap: 's2',
        padding: 's2',
    };
    var themedSmallStackTokens = {
        childrenGap: 's1',
        padding: 's1',
    };
    var themedMediumStackTokens = {
        childrenGap: 'm',
        padding: 'm',
    };
    var themedLargeStackTokens = {
        childrenGap: 'l1',
        padding: 'l1',
    };
    var themedExtraLargeStackTokens = {
        childrenGap: 'l2',
        padding: 'l2',
    };
    var HorizontalStackSpacingExample = function () {
        return (React.createElement(react_1.Stack, { tokens: sectionStackTokens },
            React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, horizontalAlign: "space-between" },
                React.createElement(react_1.Stack, null,
                    React.createElement("span", null, "Numerical spacing"),
                    React.createElement(react_1.Stack, { horizontal: true, styles: stackStyles, tokens: numericalSpacingStackTokens },
                        React.createElement("span", { style: itemStyles }, "1"),
                        React.createElement("span", { style: itemStyles }, "2"),
                        React.createElement("span", { style: itemStyles }, "3"))),
                React.createElement(react_1.Stack, null,
                    React.createElement("span", null, "Custom spacing"),
                    React.createElement(react_1.Stack, { horizontal: true, styles: stackStyles, tokens: customSpacingStackTokens },
                        React.createElement("span", { style: itemStyles }, "1"),
                        React.createElement("span", { style: itemStyles }, "2"),
                        React.createElement("span", { style: itemStyles }, "3")))),
            React.createElement(react_1.Stack, { horizontal: true, disableShrink: true, horizontalAlign: "space-between" },
                React.createElement(react_1.Stack, null,
                    React.createElement("span", null, "Themed spacing (extra small)"),
                    React.createElement(react_1.Stack, { horizontal: true, styles: stackStyles, tokens: themedExtraSmallStackTokens },
                        React.createElement("span", { style: itemStyles }, "1"),
                        React.createElement("span", { style: itemStyles }, "2"),
                        React.createElement("span", { style: itemStyles }, "3"))),
                React.createElement(react_1.Stack, null,
                    React.createElement("span", null, "Themed spacing (small)"),
                    React.createElement(react_1.Stack, { horizontal: true, styles: stackStyles, tokens: themedSmallStackTokens },
                        React.createElement("span", { style: itemStyles }, "1"),
                        React.createElement("span", { style: itemStyles }, "2"),
                        React.createElement("span", { style: itemStyles }, "3"))),
                React.createElement(react_1.Stack, null,
                    React.createElement("span", null, "Themed spacing (medium)"),
                    React.createElement(react_1.Stack, { horizontal: true, styles: stackStyles, tokens: themedMediumStackTokens },
                        React.createElement("span", { style: itemStyles }, "1"),
                        React.createElement("span", { style: itemStyles }, "2"),
                        React.createElement("span", { style: itemStyles }, "3")))),
            React.createElement(react_1.Stack, { horizontal: true, horizontalAlign: "space-between" },
                React.createElement(react_1.Stack, null,
                    React.createElement("span", null, "Themed spacing (large)"),
                    React.createElement(react_1.Stack, { horizontal: true, styles: stackStyles, tokens: themedLargeStackTokens },
                        React.createElement("span", { style: itemStyles }, "1"),
                        React.createElement("span", { style: itemStyles }, "2"),
                        React.createElement("span", { style: itemStyles }, "3"))),
                React.createElement(react_1.Stack, null,
                    React.createElement("span", null, "Themed spacing (extra large)"),
                    React.createElement(react_1.Stack, { horizontal: true, styles: stackStyles, tokens: themedExtraLargeStackTokens },
                        React.createElement("span", { style: itemStyles }, "1"),
                        React.createElement("span", { style: itemStyles }, "2"),
                        React.createElement("span", { style: itemStyles }, "3"))))));
    };
    exports.HorizontalStackSpacingExample = HorizontalStackSpacingExample;
});
//# sourceMappingURL=Stack.Horizontal.Spacing.Example.js.map