import templateOnly from '@ember/component/template-only';
import { setComponentTemplate } from '@ember/component';
import { precompileTemplate } from '@ember/template-compilation';
import { eq, not } from 'ember-truth-helpers';
import argOrDefault from '../../helpers/arg-or-default.js';
import classNames from '../../helpers/class-names.js';
import useState from '../../helpers/use-state.js';
import useIsWithinBreakpoints from '../../modifiers/use-is-within-breakpoints.js';
import EuiPanel from '../eui-panel.js';

const DEFAULT_SIZES = ['xs', 's'];
const EuiSplitPanelOuter = setComponentTemplate(precompileTemplate(`
    {{#let
      (argOrDefault @direction "column")
      (argOrDefault @responsive DEFAULT_SIZES)
      (useState false)
      as |direction responsive isResponsive|
    }}
      <EuiPanel
        class={{classNames
          "euiSplitPanel"
          (if (eq direction "row") "euiSplitPanel--row")
          (if isResponsive.value "euiSplitPanel-isResponsive")
        }}
        @grow={{argOrDefault @grow false}}
        @paddingSize={{argOrDefault @paddingSize "none"}}
        @hasShadow={{@hasShadow}}
        @color={{@color}}
        @borderRadius={{@borderRadius}}
        @hasBorder={{@hasBorder}}
        {{useIsWithinBreakpoints
          sizes=responsive
          isActive=(not (not responsive))
          setIsWithinBreakpointsValue=isResponsive.setState
        }}
        ...attributes
      >
        {{yield}}
      </EuiPanel>
    {{/let}}
  `, {
  strictMode: true,
  scope: () => ({
    argOrDefault,
    DEFAULT_SIZES,
    useState,
    EuiPanel,
    classNames,
    eq,
    useIsWithinBreakpoints,
    not
  })
}), templateOnly("outer", "EuiSplitPanelOuter"));

export { EuiSplitPanelOuter as default };
//# sourceMappingURL=outer.js.map
