componentStyles () {
      const bg = { dark: 'whiteAlpha.300', light: 'gray.100' }
      const _placement = {
        left: {
          mr: '-1px',
          roundedRight: 0,
          borderRightColor: 'transparent'
        },
        right: {
          order: 1,
          roundedLeft: 0,
          borderLeftColor: 'transparent'
        }
      }

      return {
        ...useInputStyle({
          size: this.size,
          variant: 'outline',
          colorMode: this.colorMode,
          theme: this.theme
        }),
        flex: '0 0 auto',
        whiteSpace: 'nowrap',
        bg: bg[this.colorMode],
        ..._placement[this.placement]
      }
    }
CInputAddon component

allows addition of addons to the left and right of the CInput component

@extends CBox
@see Docs https://vue.chakra-ui.com/input