GhostInput

    () => {
      const [value, setValue] = useState('200')
      return (
        <GhostInput 
          value={value}
          onChange={e => setValue(e.target.value)}
        />
      )
    }
  

    () => {
      const [value, setValue] = useState('')
      return (
        <GhostInput 
          value={value}
          onChange={e => setValue(e.target.value)}
          placeholder="000"
          type="number"
        />
      )
    }
  

    () => {
      const [value1, setValue1] = useState('39A36C')
      const [value2, setValue2] = useState('39A36C')
      return (
        <Stack gap="s">
          <GhostInput 
            value={value1}
            onChange={e => setValue1(e.target.value)}
            prefix="#"
          />
          <GhostInput 
            value={value2}
            onChange={e => setValue2(e.target.value)}
            prefix="HEX"
          />
        </Stack>
      )
    }
  

    () => {
      const [value, setValue] = useState(demoText.l)
      return (
        <GhostInput 
          value={value}
          onChange={e => setValue(e.target.value)}
          hasEllipsis
        />
      )
    }