define(["require", "exports", "react", "office-ui-fabric-react", "@fluentui/react-flex"], function (require, exports, React, office_ui_fabric_react_1, react_flex_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    // Styles definition
    var flexStyle = {
        background: office_ui_fabric_react_1.DefaultPalette.themeTertiary,
    };
    var flexItemStyle = {
        background: office_ui_fabric_react_1.DefaultPalette.themePrimary,
        color: office_ui_fabric_react_1.DefaultPalette.white,
        padding: 5,
    };
    var itemAlignmentsFlexStyles = {
        background: office_ui_fabric_react_1.DefaultPalette.themeTertiary,
        height: 100,
    };
    // Tokens definition
    var containerFlexTokens = { gap: '5px' };
    var horizontalGapFlexTokens = {
        gap: '10px',
        padding: '10px',
    };
    var itemAlignmentsFlexTokens = {
        gap: '5px',
        padding: '10px',
    };
    var clickableFlexTokens = {
        padding: '10px',
    };
    exports.HorizontalFlexBasicExample = function () {
        return (React.createElement(react_flex_1.Flex, { column: true, tokens: containerFlexTokens },
            React.createElement("span", null, "Default horizontal flex"),
            React.createElement(react_flex_1.Flex, { disableShrink: true, style: flexStyle },
                React.createElement("span", null, "Item One"),
                React.createElement("span", null, "Item Two"),
                React.createElement("span", null, "Item Three")),
            React.createElement("span", null, "Ordered flex"),
            React.createElement(react_flex_1.Flex, { disableShrink: true, style: flexStyle },
                React.createElement(react_flex_1.FlexItem, { tokens: { order: '2' } },
                    React.createElement("span", null, "Item One")),
                React.createElement(react_flex_1.FlexItem, { tokens: { order: '3' } },
                    React.createElement("span", null, "Item Two")),
                React.createElement(react_flex_1.FlexItem, { tokens: { order: '1' } },
                    React.createElement("span", null, "Item Three"))),
            React.createElement("span", null, "Horizontal gap between items"),
            React.createElement(react_flex_1.Flex, { disableShrink: true, style: flexStyle, tokens: horizontalGapFlexTokens },
                React.createElement("span", null, "Item One"),
                React.createElement("span", null, "Item Two"),
                React.createElement("span", null, "Item Three")),
            React.createElement("span", null, "Item alignments"),
            React.createElement(react_flex_1.Flex, { disableShrink: true, style: itemAlignmentsFlexStyles, tokens: itemAlignmentsFlexTokens },
                React.createElement(react_flex_1.FlexItem, { align: "auto", style: flexItemStyle },
                    React.createElement("span", null, "Auto-aligned item")),
                React.createElement(react_flex_1.FlexItem, { align: "stretch", style: flexItemStyle },
                    React.createElement("span", null, "Stretch-aligned item")),
                React.createElement(react_flex_1.FlexItem, { align: "baseline", style: flexItemStyle },
                    React.createElement("span", null, "Baseline-aligned item")),
                React.createElement(react_flex_1.FlexItem, { align: "start", style: flexItemStyle },
                    React.createElement("span", null, "Start-aligned item")),
                React.createElement(react_flex_1.FlexItem, { align: "center", style: flexItemStyle },
                    React.createElement("span", null, "Center-aligned item")),
                React.createElement(react_flex_1.FlexItem, { align: "end", style: flexItemStyle },
                    React.createElement("span", null, "End-aligned item"))),
            React.createElement("span", null, "Clickable flex"),
            React.createElement(react_flex_1.Flex, { disableShrink: true, onClick: _onClick, style: flexStyle, tokens: clickableFlexTokens },
                React.createElement("span", null, "Click inside this box"))));
    };
    function _onClick() {
        alert('Clicked Flex');
    }
});
//# sourceMappingURL=FlexHorizontalBasic.stories.js.map