import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import argOrDefault from '../helpers/arg-or-default.js';
import classNames from '../helpers/class-names.js';
import EuiFlexGroup from './eui-flex-group.js';
import EuiFlexItem from './eui-flex-item.js';
import EuiTextComponent from './eui-text.js';
import EuiTitle from './eui-title.js';

const EuiDescribedFormGroup = setComponentTemplate(precompileTemplate(`
    <div
      role="group"
      class={{classNames
        "euiDescribedFormGroup"
        (if @fullWidth "euiDescribedFormGroup--fullWidth")
      }}
      ...attributes
    >
      <EuiFlexGroup @gutterSize={{argOrDefault @gutterSize "l"}}>
        <EuiFlexItem @grow={{@descriptionFlexItemProps.grow}}>
          <EuiTitle
            class="euiDescribedFormGroup__title"
            @size={{@titleSize}}
            @tagName={{@titleTagName}}
          >
            {{yield to="title"}}
          </EuiTitle>
          <EuiText
            class="euiDescribedFormGroup__description"
            @size="s"
            @color="subdued"
          >
            {{yield to="description"}}
          </EuiText>
        </EuiFlexItem>
        <EuiFlexItem
          class={{classNames
            "euiDescribedFormGroup__fields"
            componentName="EuiDescribedFormGroup"
            paddingSize=(argOrDefault @titleSize "xs")
          }}
          @grow={{@fieldFlexItemProps.grow}}
        >
          {{yield}}
        </EuiFlexItem>
      </EuiFlexGroup>
    </div>
  `, {
  strictMode: true,
  scope: () => ({
    classNames,
    EuiFlexGroup,
    argOrDefault,
    EuiFlexItem,
    EuiTitle,
    EuiText: EuiTextComponent
  })
}), templateOnly("eui-described-form-group", "EuiDescribedFormGroup"));

export { EuiDescribedFormGroup as default };
//# sourceMappingURL=eui-described-form-group.js.map
