How to use the @pluginjs/decorator.styleable function in @pluginjs/decorator

} from '@pluginjs/decorator'
import Preview from './components/preview'
import Collection from './collection'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'
let DATA = {}
@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class ColorSelector extends Component {
  constructor(element, options = {}) {
    super(element)
    // options
    this.setupOptions(options)
    if (options.module) {
      this.options.module = options.module
    }

optionable
} from '@pluginjs/decorator'

import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'

@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class ScrollTop extends GlobalComponent {
  /* eslint consistent-return: "off" */
  constructor(options = {}) {
    super()

    this.setupOptions(options)
    this.setupClasses()

    this.setupI18n()

// import startOfWeek from 'date-fns/start_of_week'
import getDay from 'date-fns/get_day'
// import getDate from 'date-fns/get_date'
import subDays from 'date-fns/sub_days'
import subWeeks from 'date-fns/sub_weeks'
import subMonths from 'date-fns/sub_months'
import addDays from 'date-fns/add_days'
import addMonths from 'date-fns/add_months'
import addWeeks from 'date-fns/add_weeks'
// import format from 'date-fns/format'

// const COMPONENTS = {}

@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class TimeTable extends Component {
  constructor(element, options = {}) {
    super(element)
    this.setupOptions(options)
    this.setupClasses()

    this.wrap = wrap(
      `<div class="${this.classes.NAMESPACE}"></div>`,
      this.element

eventable,
  register,
  stateable,
  styleable,
  themeable,
  optionable
} from '@pluginjs/decorator'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  events as EVENTS,
  namespace as NAMESPACE
} from './constant'

@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, false)
@register(NAMESPACE)
class Notice extends GlobalComponent {
  constructor(options = {}) {
    super()
    this.setupOptions(options)
    this.setupClasses()
    this.setupStates()
    this.initialize()
  }

  show() {
    const instances = Pj.notice.getInstances()

events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE
} from './constant'

import Circle from './shapes/circle'
import Hexagon from './shapes/hexagon'
import Pentagon from './shapes/pentagon'
import Rectangle from './shapes/rectangle'
import Semicircle from './shapes/semicircle'
import Triangle from './shapes/triangle'

const shapes = {}

@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS
})
class SvgProgress extends Component {
  constructor(element, options = {}) {
    super(element)

    this.setupOptions(options)
    this.setupClasses()
    this.setupStates()

    if (
      !isSupportedSvg() ||

} from '@pluginjs/decorator'
import Keyboard from './keyboard'
import Popper from 'popper.js'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE
} from './constant'

const isInput = el => el.tagName === 'INPUT'

@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class Dropdown extends Component {
  constructor(element, options = {}) {
    super(element)

    this.$trigger = this.element
    this.setupOptions(options)

    this.$reference = this.getReference()

events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'
import List from './components/list'
import Total from './components/total'
import Next from './components/next'
import Prev from './components/prev'
import Jumper from './components/jumper'

const COMPONENTS = {}

@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS
})
class Paginator extends Component {
  constructor(element, options = {}) {
    super(element)
    this.setupOptions(options)

    this.currentPage = this.options.currentPage || 1
    this.itemsPerPage = this.options.itemsPerPage
    this.totalItems = this.options.totalItems
    this.totalPages = this.getTotalPages()

themeable,
  translateable,
  optionable
} from '@pluginjs/decorator'
import {
  classes as CLASSES,
  defaults as DEFAULTS,
  dependencies as DEPENDENCIES,
  events as EVENTS,
  methods as METHODS,
  namespace as NAMESPACE,
  translations as TRANSLATIONS
} from './constant'
@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class VideoPicker extends Component {
  constructor(element, options = {}) {
    super(element)
    this.setupOptions(options)
    this.setupClasses()
    this.setupI18n()
    addClass(this.classes.NAMESPACE, this.element)
    this.data = {}
    this.data.source = this.options.sources[0]

import Dropdown from '@pluginjs/dropdown'
import {
  query,
  insertAfter,
  appendTo,
  html,
  parseHTML,
  detach,
  children
} from '@pluginjs/dom'
import { deepClone, triggerNative } from '@pluginjs/utils'
import Tooltip from '@pluginjs/tooltip'

@translateable(TRANSLATIONS)
@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS,
  dependencies: DEPENDENCIES
})
class SvgPicker extends Component {
  constructor(element, options = {}) {
    super(element)

    this.setupOptions(options)
    this.setupClasses()
    this.setupStates()
    this.setupI18n()
    this.initialize()

defaults as DEFAULTS,
  methods as METHODS,
  events as EVENTS,
  namespace as NAMESPACE,
  KEY_MAP
} from './constant'

import Times from './times'
import simple from './modes/simple'
import Progress from './modes/progress'
import Flip from './modes/flip'

const MODES = {}

@themeable()
@styleable(CLASSES)
@eventable(EVENTS)
@stateable()
@optionable(DEFAULTS, true)
@register(NAMESPACE, {
  methods: METHODS
})
class CountDown extends Component {
  _interval = {
    createTimer: time => {
      this.timer = () => {
        this.update()
      }
      return window.setInterval(this.timer, time)
    },
    removeTimer: () => {
      window.clearInterval(this.timer())