Wrong CSS classes for Foundation 6.4.3

[belgoros]

I'm using Foundation 6.4.3 via ember-cli-foundation-6-sass and it seems like the generated HTML has wrong CSS classes. Here is the flash code in the application.hbs template:

<div class="grid-container">
  {{#each flashMessages.queue as |flash|}}
    {{flash-message flash=flash messageStyle='foundation' class='radius'}}
  {{/each}}
  {{outlet}}
</div>

When setting the flash message the flash like that:

import RSVP from 'rsvp';
import Service, { inject as service } from '@ember/service';

export default Service.extend({
  session: service('session'),
  store: service(),
  flashMessages: service('flash-messages'),

  loadCurrentUser() {
    this.get('flashMessages').clearMessages();
    if (this.get('session.isAuthenticated')) {
      return this.get('store').queryRecord('user', { me: true }).then((user) => {
        this.get('flashMessages').success("Successfully signed in as ${user.username}!");
        this.set('user', user);
      });
    } else {
      this.get('flashMessages').alert('You are not signed in!');
      return RSVP.resolve();
    }
  }
});

here is the generated HTML for flash div:

<div id="ember305" class="radius flash-message alert-box alert active ember-view">  You are not signed in!
<!----></div>

As for the Foundation docs, the class to use should be .callout with corresponding colors:

 .secondary, .primary, .success, .warning, or .alert

I'm using:

ember-cli: 2.16.2
node: 8.9.1
os: darwin x64
"ember-cli-flash": "^1.6.2",

[belgoros]

FIxed. The right class to use in case of Foundation is as follows (look at callout):

{{#each flashMessages.queue as |flash|}}
    {{flash-message flash=flash messageStyle='foundation' class='callout'}}
  {{/each}}