How to use the @pluginjs/styled.showElement function in @pluginjs/styled

openPanel() {
    addClass(this.classes.OPENPANEL, this.$panelWrap)
    addClass(this.classes.OPENACTIVE, this.element)
    showElement(this.$mask)
    // update scollable height
    if (this.scrollable) {
      this.scrollable.update()
    }

    this.POPPER.scheduleUpdate()
    // this.element.openPanel = true
    this.enter('openPanel')
    this.trigger(EVENTS.OPENPANEL)

    this.oldColor = this.color
  }

openPanel() {
    const colorArr = Object.entries(this.info)
    this.oldColor = {
      collection: colorArr[0][1],
      solid: colorArr[1][1],
      gradient: colorArr[2][1]
    }
    addClass(this.classes.OPENPANEL, this.$panel)
    addClass(this.classes.OPENACTIVE, this.element)
    showElement(this.$mask)
    // update scollable height
    if (this.scrollable) {
      this.scrollable.update()
    }

    this.POPPER.scheduleUpdate()
    // this.element.openPanel = true
    this.enter('openPanel')
    this.trigger(EVENTS.OPENPANEL)
  }

destroy() {
    if (this.is('initialized')) {
      this.unbind()
      this.$wrap.remove()
      showElement(this.$element)
      this.leave('initialized')
    }

    this.trigger(EVENTS.DESTROY)
    super.destroy()
  }
}

isShowButton() {
    if (this.$element.value) {
      showElement(this.$close)
    } else {
      hideElement(this.$close)
    }
  }

triggerCloseButten() {
    if (this.is('disabled')) {
      hideElement(this.$close)
      return
    }
    showElement(this.$close)

    if (this.is('hover') || this.is('focus')) {
      this.isShowButton()
    } else {
      hideElement(this.$close)
    }
  }

destroy() {
    if (this.is('initialized')) {
      this.unbind()
      this.$wrap.remove()
      if (this.options.theme) {
        removeClass(this.getThemeClass(), this.$wrap)
      }

      showElement(this.element)
      removeClass(`${this.classes.NAMESPACE}-input`, this.element)
      this.element.value = ''
      this.leave('initialized')
    }

    this.trigger(EVENTS.DESTROY)
    super.destroy()
  }
}

setImage(image) {
    let thumbnailUrl
    this.setState(image)
    this.returnInfo(image)
    if (image === '' || is.undefined(image)) {
      showElement(this.$infoImageName)
      setStyle({ 'background-image': 'none' }, this.$image)

      setStyle({ 'background-image': 'none' }, this.$infoImage)
    } else if (image || image !== this.options.image) {
      thumbnailUrl = this.options.thumbnail ? this.options.thumbnail : image
      const IMG = new Image()
      IMG.onload = () => {
        this.value.image = thumbnailUrl
        this.returnInfo(this.value.image)
        setStyle(
          { 'background-image': `url('${this.value.image}')` },
          this.$image
        )

        setStyle(
          { 'background-image': `url('${this.value.image}')` },

onChange: value => {
        this.data.source = value
        if (value === 'Local File') {
          showElement(closest(`.${this.classes.FIELD}`, this.$localUrl))
          hideElement(closest(`.${this.classes.FIELD}`, this.$videoUrl))
        } else {
          hideElement(closest(`.${this.classes.FIELD}`, this.$localUrl))
          showElement(closest(`.${this.classes.FIELD}`, this.$videoUrl))
        }
        if (this.$videoPoster) {
          setStyle('backgroundImage', null, this.$videoPoster)
        }
        removeClass(this.classes.POSTERSELECTED, this.$poster)
        if (this.videoApi) {
          if (query('.pj-video', this.$wrap)) {
            this.removeVideo()
          }
        }
      }
    })