render (h, { props, data, slots, listeners, ...rest }) {
    const { attrs, domProps, on } = data
    const className = css({
      border: '0px',
      clip: 'rect(0px, 0px, 0px, 0px)',
      height: `${(attrs && attrs.w) || '1px'}`,
      width: `${(attrs && attrs.h) || '1px'}`,
      margin: '-1px',
      padding: '0px',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      position: `${(attrs && attrs.pos) || 'absolute'}`
    })

    return h(props.as, {
      class: [className],
      attrs: {
        ...(attrs || {}),
        'data-chakra-component': 'CVisuallyHidden'
      },
      domProps,
      on: {
        ...listeners,
        ...on
      }
    }, slots().default)
  }
CVisuallyHidden component

the visually hidden wrapper element