createStyledAttrsMixin = name => ({
  name,
  inheritAttrs: false,
  inject: ['$chakraTheme', '$chakraColorMode'],
  data () {
    return {
      attrs$: {},
      listeners$: {}
    }
  },
  props: {
    as: {
      type: [String, Object],
      default: 'div'
    },
    to: String
  },
  computed: {
    colorMode () {
      return this.$chakraColorMode()
    },
    theme () {
      return this.$chakraTheme()
    },
    /** Split style attributes and native attributes */
    splitProps () {
      const $attrs = this.$data.attrs$
      const { styleAttrs, nativeAttrs } = extractChakraAttrs($attrs)

      return {
        styleAttrs,
        nativeAttrs
      }
    },
    baseStyle () {
      const componentBaseStyleObjectOrFunction = __get(this.theme, `baseStyles.${name}`)
      return componentBaseStyleObjectOrFunction ? (
        runIfFn(componentBaseStyleObjectOrFunction, {
          ...this.splitProps.styleAttrs,
          ...this.splitProps.nativeAttrs,
          theme: this.theme,
          colorMode: this.colorMode
        })
      ) : {}
    },
    className () {
      const { styleAttrs } = this.splitProps
      const merged = {
        ...this.componentStyles || {},
        ...this.baseStyle,
        ...styleAttrs
      }
      const boxStylesObject = _css(merged)(this.theme)

      return css(boxStylesObject)
    },
    /** Computed attributes object */
    computedAttrs () {
      return {
        ...(name && { 'data-chakra-component': name }),
        ...this.splitProps.nativeAttrs
      }
    },
    /** Computed listeners object */
    computedListeners () {
      return this.$data.listeners$
    }
  },
  created () {
    this.$watch('$attrs', createWatcher('attrs$'))
    this.$watch('$listeners', createWatcher('listeners$'))
  }
})
Create mixin for style attributes
@param {String} name Component name