.test {
  color: red;
}

.mgnl-form-field {
  border: 1px solid var(--mgnl-color-gray-30);
  z-index: 10;
  padding: 10px;
  transition: all var(--mgnl-animation-duration-50) var(--mgnl-animation-timing-50);
  border-radius: 5px;
  font-family: var(--mgnl-typography-ui-default-md-font-family);
  font-size: var(--mgnl-typography-ui-default-md-font-size);
}
.mgnl-form-field:hover {
  border: 1px solid var(--mgnl-color-gray-60);
}
.mgnl-form-field:focus {
  outline: 0;
  background-color: #fff;
  border: 1px solid var(--mgnl-color-emerald-50);
  box-shadow: 0 0 0 var(--mgnl-dimension-2) var(--mgnl-color-emerald-50);
}
.mgnl-form-field:focus + .mgnl-form-label {
  font-weight: bold;
}
.mgnl-form-field.is-invalid, .mgnl-form-field:invalid {
  border: var(--mgnl-input-neutral-border-error);
}
.mgnl-form-field.is-invalid:focus, .mgnl-form-field:invalid:focus {
  border: var(--mgnl-input-neutral-border-default);
}

/**


<div className="InputWrapper" style={{width: 240, height: 38, paddingLeft: 12, background: 'white', boxShadow: '0px 0px 0px rgba(0, 0, 0, 0)', borderRadius: 8, overflow: 'hidden', border: '1px #C8C5CD solid', justifyContent: 'flex-start', alignItems: 'center', display: 'inline-flex'}}>
  <div className="DescriptiveIcon" style={{width: 22, alignSelf: 'stretch', paddingTop: 10, paddingBottom: 10, paddingRight: 8, justifyContent: 'flex-start', alignItems: 'center', gap: 10, display: 'flex'}}>
    <div className="DescriptiveIconWrapper" style={{width: 14, height: 18, position: 'relative'}}>
      <div className="IconStar" style={{width: 16, height: 16, left: -1, top: 1, position: 'absolute'}}>
        <div className="Color" style={{width: 13.33, height: 12.68, left: 1.33, top: 1.33, position: 'absolute', border: '1.50px #C8C5CD solid'}}></div>
      </div>
    </div>
  </div>
  <div className="TextWrapper" style={{flex: '1 1 0', height: 38, paddingTop: 10, paddingBottom: 10, paddingRight: 12, justifyContent: 'flex-start', alignItems: 'center', display: 'flex'}}>
    <div className="Text" style={{color: '#28252E', fontSize: 14, fontFamily: 'Inter', fontWeight: '400', lineHeight: 18, wordWrap: 'break-word'}}>Input text</div>
  </div>
  <div className="IconButton" style={{paddingLeft: 12, paddingRight: 12, paddingTop: 10, paddingBottom: 10, background: 'rgba(0, 0, 0, 0)', border: '0px rgba(0, 0, 0, 0) solid', justifyContent: 'flex-start', alignItems: 'center', gap: 10, display: 'flex'}}>
    <div className="IconWrapper" style={{width: 14, height: 18, position: 'relative'}}>
      <div className="IconEye" style={{width: 16, height: 16, left: -1, top: 1, position: 'absolute'}}>
        <div className="Color" style={{width: 13.33, height: 9.33, left: 1.33, top: 3.33, position: 'absolute', border: '1.50px #756D82 solid'}}></div>
      </div>
    </div>
  </div>
  <div className="Button" style={{borderTopLeftRadius: 8, borderTopRightRadius: 8, justifyContent: 'flex-start', alignItems: 'center', gap: 8, display: 'flex'}}>
    <div className="ButtonWrapper" style={{paddingLeft: 12, paddingRight: 12, paddingTop: 10, paddingBottom: 10, background: '#F4F4F5', boxShadow: '0px 0px 0px rgba(0, 0, 0, 0)', borderTopLeftRadius: 8, borderTopRightRadius: 8, overflow: 'hidden', border: '0px rgba(0, 0, 0, 0) solid', justifyContent: 'flex-start', alignItems: 'center', gap: 8, display: 'flex'}}>
      <div className="Label" style={{color: '#28252E', fontSize: 14, fontFamily: 'Inter', fontWeight: '600', lineHeight: 18, wordWrap: 'break-word'}}>Select</div>
    </div>
  </div>
</div>


- title: Default Input XS
   description: Default input
   code: 
<div class="input-wrapper">
  <div class="descriptive-icon">
    <div class="descriptive-icon-wrapper" >
      <div class="icon-star">
        <div class="color" ></div>
      </div>
    </div>
  </div>
  <div class="text-wrapper">
    <div class="text" >sadf text</div>
  </div>
  <div class="icon-button" >
    <div class="icon-wrapper" >
      <div class="icon-eye" >
        <div class="color"></div>
      </div>
    </div>
  </div>
  <div class="button"> 
    <div class="button-wrapper">
      <div class="label">Select</div>
    </div>
    </div>
</div>
 - title: Default Input MD
   description: Default input
   code:
   <input type="text" class="mgnl-input mgnl-input--md mgnl-input--danger">
- title: Default InputSM
   description: Default input
   code:
   <input type="text" class="mgnl-form-field mgnl-input mgnl-input--sm mgnl-input--danger">
*/