// @themable FormGroup
import * as React from 'react';
import styled, { css } from 'styled-components';
import LabelMode from '../../enums/LabelMode';
function AbstractFormGroup({ component, labelMode, ...props, }) {
    const OuterComponent = component === 'div' ? 'div' : 'label';
    return <OuterComponent {...props}/>;
}
export default styled(AbstractFormGroup) `
  display: flex;
  flex-direction: ${props => props.labelMode === LabelMode.Normal ? 'column' : 'row'};
  margin-bottom: 1em;
  ${props => props.component !== 'div' ? css `touch-action: manipulation;` : ''}
`;