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

this.$handle = parseHTML(`<div class="${this.classes.HANDLE}"></div>`)

    this.$inner.append(this.$on, this.$handle, this.$off)

    this.$wrap.append(this.$inner)

    this.initIcon()

    if (this.options.size !== null) {
      addClass(
        this.getClass(this.classes.SIZE, 'size', this.options.size),
        this.$wrap
      )
    }
    // get components width
    this.distance = this.$wrap.clientWidth - getWidth(this.$handle)

    if (!this.distance) {
      const clientWidth =
        parseInt(getStyle('width', this.$wrap).replace(/px|pt|em/gi, ''), 0) -
        Math.abs(getWidth(this.$wrap))
      this.distance =
        clientWidth -
        parseInt(getStyle('width', this.$handle).replace(/px|pt|em/gi, ''), 0)
    }

    setStyle('marginLeft', `-${this.distance}`, this.$inner)

    this.bind()
    this.set(this.checked, false)
    if (this.element.disabled || this.options.disabled) {
      this.disable()

if (videoConfig.type === 'html5') {
      videoConfig.url = `${url}`
    }
    this.videoApi = Video.of(this.$video, videoConfig)
    this.videoApi.options.onLoad = () => {
      addClass(this.classes.VIDEOLOADING, this.$videoAction)
    }

    this.videoApi.options.onLoaded = () => {
      removeClass(this.classes.VIDEOLOADING, this.$videoAction)
      addClass(this.classes.VIDEOPLAYING, this.$videoAction)
    }

    // this.videoApi.load()
    this.videoApi.setSize(getWidth(this.$video), getHeight(this.$video))

    this.enter('loaded')
    this.enter('playing')
    return false
  }

resizeInit() {
    this.width = getWidth(this.element)
    this.itemWidth = this.width / Number(this.options.visibleItems)

    if (hasClass(this.classes.HORIZONTAL, this.element)) {
      setStyle(
        {
          width: `${this.itemWidth * this.$itemAll.length}px`,
          height: 'auto'
        },
        this.$list
      )

      this.height = this.$itemAll
        .map(item => getHeight(item))
        .sort()
        .reverse()[0]

initialize() {
    if (this.options.theme) {
      addClass(this.getThemeClass(), this.element)
    }

    addClass(this.classes.HORIZONTAL, this.element)

    this.$list = query(`.${this.classes.LIST}`, this.element)
    this.$itemAll = queryAll(`.${this.classes.ITEM}`, this.element)

    this.width = getWidth(this.element)
    this.itemWidth = this.width / Number(this.options.visibleItems)

    this.maxIndex = this.$itemAll.length - this.options.visibleItems
    this.currentIndex = 0

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

    this.init()

    this.bind()

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

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)
        }
      })

getWidth() {
    if (this.inline) {
      return compose(
        getWidth,
        parent
      )(this.element)
    }
    return getWidth(this.element)
  }

updateSize() {
    const width = getWidth(this.element)
    this.width = width
    this.size = width
  }