<TextField name="password" type="password"/>

<TextField name="phone" required label="Телефон"/>

<TextField name="name" label="Имя" value="Константин"/>

<TextField name="name" label="Имя" value="Константин" hideIcon/>

<TextField hidePlaceholder label="Введите текст" />

<div style={{ display: 'grid', gap: '35px' }}>
  <TextField
      placeholder="+7 (999) 999-99-99"
      mask="+7 (999) 999-99-99"
      maskChar="_"
      label="Обычная"
      id="2"
      inputMode="numeric"
      classes={{input: 'parent__inputClass'}}
      style={{ width: '350px' }}
  />
  <TextField
      mask="+7 (999) 999-99-99"
      maskChar="_"
      type="tel"
      autoComplete="tel"
      inputMode="tel"
      label="С автозаполнением"
      style={{ width: '350px' }}
  />
  <div>
      <DemoTextFieldWithBeforeMaskChangeValue>
          {({ handleBeforeMaskChange }) =>
              <TextField
                  onBeforeMaskChange={handleBeforeMaskChange}
                  mask="+7 (999) 999-99-99"
                  maskChar="_"
                  label="С перехватом вводимого значения"
                  style={{ width: '350px' }}
              />
          }
      </DemoTextFieldWithBeforeMaskChangeValue>
      <p>
          В данном случае, при вставке телефона в формате +79998887766 выведет его сразу в нужном формате,
          за счет совпадения начальных символов маски и вставляемого значения, в остальных кейсах нужна обработка значения
          внутри коллбека и его возврат оттуда
      </p>
  </div>
</div>

<TextField noticeText="Comment" />

<TextField verification="error" noticeText="Name is required"/>
<TextField verification="valid" noticeText="You can write that field value is correct"/>

<TextField
  verification="error"
  noticeText="Error notice"
  customIcon={ <CustomIcon style={{width: "32", height: "32", display: "block", userSelect: "none"}} /> }
  onIconClick={ () => alert('Custom click handler') }
/>
<TextField
      customIcon={ <CustomIcon style={{width: "32", height: "32", display: "block", userSelect: "none"}} /> }
      onIconClick={ () => alert('Custom click handler') }
/>

<TextField maxLength={10} />

<TextField disabled={true} />

<TextField value='initial value' isControlled={true} />

<DemoTextFieldWithControlledValue>
  {({ value, onChange }) => <TextField value={value} onChange={onChange} isControlled={true} />}
</DemoTextFieldWithControlledValue>

<div style={{ display: 'flex', gap: '35px' }}>
  <div style={{ flex: 1, padding: '10px' }}>
      <TextField
          verification="valid"
          noticeText="Тема для светлого фона (по умолчанию)"
      />
  </div>
  <div style={{ flex: 1, padding: '10px', backgroundColor: '#00B956' }}>
      <TextField
          verification="valid"
          noticeText="Светлая тема для цветного фона"
          theme="white"
      />
  </div>
</div>

<TextField name="name" textarea placeholder="placeholder"/>

<TextField name="name" textarea="flexible"/>

<TextField textarea="flexible" hideResizeButton />

<TextField
  label="Required field"
  textarea
  required
  classes={{input: 'parent__inputClass'}}
/>

<TextField
  noticeText="Comment"
  textarea
/>

<TextField
  verification="error"
  noticeText="Name is required"
  textarea
/>
<TextField
  verification="valid"
  noticeText="Field passed validation"
  textarea
/>

<TextField maxLength={10} textarea isControlled={false}/>

<TextField symbolCounter={10} textarea value="Иванов Ива"/>
<TextField symbolCounter={10} textarea value="Иванов Иван Иванович"/>

<TextField symbolCounter={10} textarea graphemesCounter value="😀👩‍💻"/>
<TextField symbolCounter={10} textarea graphemesCounter value="⏏️ ▶️ ⏸ ⏯ ⏹"/>

<TextField
  textarea
  minTextareaHeight={24}
  label="fixed"
/>
<TextField
  textarea="flexible"
  minTextareaHeight={24}
  label="flexible"
/>

<TextField
  textarea
  label="fixed"
  disableEnterLineBreak
/>
<TextField
  textarea="flexible"
  label="flexible"
  disableEnterLineBreak
/>

<TextField
  disabled
  textarea
  value='disabled'
/>