import * as React from 'react';
import { DefaultPalette } from 'office-ui-fabric-react';
import { Flex, FlexItem } from '@fluentui/react-flex';
// Styles definition
var flexStyles = {
    background: DefaultPalette.themeTertiary,
};
var flexItemStyles = {
    alignItems: 'center',
    background: DefaultPalette.themePrimary,
    color: DefaultPalette.white,
    display: 'flex',
    height: 50,
    justifyContent: 'center',
};
// Tokens definition
var flexTokens = {
    gap: '5px',
    padding: '10px',
};
export var HorizontalFlexGrowExample = function () {
    return (React.createElement(Flex, { style: flexStyles, tokens: flexTokens },
        React.createElement(FlexItem, { tokens: { grow: '3' }, style: flexItemStyles }, "Grow is 3"),
        React.createElement(FlexItem, { tokens: { grow: '2' }, style: flexItemStyles }, "Grow is 2"),
        React.createElement(FlexItem, { tokens: { grow: '1' }, style: flexItemStyles }, "Grow is 1")));
};
//# sourceMappingURL=FlexHorizontalGrow.stories.js.map