#### Sizes

```jsx
import Flex from '@ui/components/Flex';

const sizes = ['sm', 'md', 'lg'];

<Flex justify="between" inline="true">
  <Input
    onChange={e => console.log(e.target.value)}
    placeholder="Small"
    size="sm"
  />
  <Input
    onChange={e => console.log(e.target.value)}
    placeholder="Medium"
  />
  <Input
    onChange={e => console.log(e.target.value)}
    placeholder="Large"
    size="lg"
  />
</Flex>
```

<!-- 
### State Change Example

```jsx
import Flex from '@ui/components/Flex';
class StateChangeExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Initial value' };
    this.triggerStateChange = this.triggerStateChange.bind(this);
  }
  triggerStateChange(e) {
    return this.setState({ text: 'New value' })
  }
  render() {
    return (
      <Flex justify="center" align="center">
        <Input value={this.state.text} size="sm" />
        <button onClick={this.triggerStateChange}>Trigger State Change in Parent</button>
      </Flex>
    );
  }
};

<StateChangeExample/>
```
-->