Changed inline-blocks to flex for better centering

[XenorPLxx]

I've changed some display properties to flex, since centering was hard with inline-block. Height was always too high for me comparing to the component used. In the example below component is size 16 feather icon Star component from https://github.com/feathericons/react-feather. Before my changes span was height was 24px.

Btw.: There's many changes due to rebuilding and running yarn install. Should I remove those from PR?

[dreyescat]

Is this really necessary?

[XenorPLxx]

After some thought lineHeigth: unset might also work and definitely will be cleaner solution.
I'll check that and will get back to you in the evening.
It was necessary in my case: component I've pasted above can be used as inline-block next to some text that has high line-height and if span in react-rating inherits that line-height, then border around react-rating component becomes taller as well, as it has to stretch to accommodate for react-rating's height.
I'll post some screen in the evening along with results of my testing of unset param.

[dreyescat]

I see... Yes, just changing inline-block to flex removes this extra height.

The only thing I would like you to confirm is if the lineHeight: 0 rule is completely necessary or we could just live with the flex display change.

Btw.: There's many changes due to rebuilding and running yarn install. Should I remove those from PR?

Yes please. Exclude changes under the lib folder. They are files that are auto-generated on release.

Thanks!

[XenorPLxx]

Okay, I know why I've done this. Here's example of what happens when there's diplay: flex on span around fullSymbol. I wasn't able to make that use display: flex and not stretch to width: 50% at the same time.

lineHeight: unset didn't work.