<div class={{this.classes}} ...attributes>
  {{yield
    (hash
      Icon=(component
        "ember-material-tailwind@emt-text-field/icon"
        color=@color
        focused=this.focused
        prefixIcon=@prefixIcon
      )
      Label=(component
        "ember-material-tailwind@emt-text-field/label"
        color=@color
        dense=@dense
        error=@error
        focused=this.focused
        labelOnTop=this.labelOnTop
        outlined=@outlined
        prefixIcon=@prefixIcon
      )
      Input=(component
        "ember-material-tailwind@emt-text-field/input"
        color=@color
        dense=@dense
        disabled=@disabled
        error=@error
        focused=this.focused
        hasValueInput=this.hasValueInput
        outlined=@outlined
        placeholder=@placeholder
        prefixIcon=@prefixIcon
        select=@select
        setFocused=this.setFocused
      )
      Textarea=(component
        "ember-material-tailwind@emt-text-field/textarea"
        color=@color
        dense=@dense
        disabled=@disabled
        error=@error
        focused=this.focused
        hasValueInput=this.hasValueInput
        outlined=@outlined
        placeholder=@placeholder
        prefixIcon=@prefixIcon
        select=@select
        setFocused=this.setFocused
      )
      Hint=(component
        "ember-material-tailwind@emt-text-field/hint"
        error=@error
        focused=this.focused
        hint=@hint
      )
    )
  }}

  <EmberMaterialTailwind@EmtTextField::Underline
    @color={{@color}}
    @error={{@error}}
    @focused={{this.focused}}
    @outlined={{@outlined}}
  />

</div>