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

getPaneSpace() {
    this.paneSpace =
      outerWidth(true, this.instance.$panes[1]) -
      outerWidth(this.instance.$panes[1])
    return this.paneSpace
  }

getDropdownWidth() {
    return (
      outerWidth(this.$dropdown) +
      (this.options.ellipsisText ? outerWidth(this.$ellipsis) : 0)
    )
  }

getPaneSpace() {
    this.paneSpace =
      outerWidth(true, this.instance.$panes[1]) -
      outerWidth(this.instance.$panes[1])
    return this.paneSpace
  }

setDistance(vertical) {
    this.wrapDistance = vertical
      ? outerHeight(this.element)
      : outerWidth(this.element)
    this.innerDistance = vertical
      ? this.inner.scrollHeight
      : this.inner.scrollWidth
  }

updateOverflow() {
    if (this.options.overflow === false) {
      return
    }
    const containerWidth = getWidth(parent(this.$wrap))
    const width = getWidth(this.$wrap)
    let totalWidth
    const $items = []

    if (this.$wrap.scrollWidth > containerWidth) {
      append(this.$toggle, this.$wrap)

      totalWidth = outerWidth(this.$toggle)
      childrenMatchSelector('[data-value]', this.$wrap).forEach($item => {
        const itemWidth = outerWidth($item)
        setData('width', itemWidth, $item)
        totalWidth += itemWidth
        if (totalWidth > width) {
          $items.push($item)
        }
      })
      $items.reverse().forEach($item => {
        prepend($item, this.$dropdown)
      })

      if (
        childrenMatchSelector(`.${this.classes.SELECTED}`, this.$dropdown)
          .length > 0
      ) {

initialize() {
    if (!this.options.data || this.options.data.length < 0) {
      this.data = this.parseHtml()
    } else {
      this.data = this.options.data
    }

    if (this.options.breakpoint) {
      this.initBreakpoints()
    }

    this.modules = []
    this.axis = this.options.vertical ? 'translateY' : 'translateX'
    this.generate()

    this.width = outerWidth(this.box)
    this.height = outerHeight(this.box)
    this.distance = this.getDistance(this.box, this.options.vertical)

    this.setPos()
    this.initSwipeable()

    this.bind()

    if (this.options.autoPlay) {
      this.autoPlay()
    }

    this.enter('initialized')
    this.trigger(EVENTS.READY)
  }

this.distance = 0

    this.gutter =
      this.length > 0
        ? parseInt(
            window.getComputedStyle(this.items[1])[
              vertical ? 'margin-top' : 'margin-left'
            ],
            10
          )
        : 0

    if (this.length > 0) {
      this.distance = vertical
        ? outerHeight(this.items[0])
        : outerWidth(this.items[0])
    }
  }

getDropdownWidth() {
    return (
      outerWidth(this.$dropdown) +
      (this.options.ellipsisText ? outerWidth(this.$ellipsis) : 0)
    )
  }