fix(MultiSelect): Apply a temporary fix for Vanilla includes in MultiSelect component

[bartaz]

Done

• Updates Vanilla to 4.9.0
• Removes problematic @includes (vf-base and vf-b-forms) and@extend uses from MultiSelect.scss and replaces them with copies of relevant parts of Vanilla.

This is a temporary solution until we find better ways to reuse bigger parts of Vanilla styling. @extend usage by itself is not huge issue, but it does silently create a duplicate of Vanilla styling. Bigger problem was including vf-base and vf-lists (which contain required placeholders to extend) as they duplicate big chunks of Vanilla styling creating source order conflicts of old and new styles and breaking the styling of some other components.

QA steps

• Check if MultiSelect renders and works as expected:
  • https://react-components-1052.demos.haus/?path=/docs/multiselect--docs
• Check if previously broken slider component renders as expected:
  • https://react-components-1052.demos.haus/?path=/story/slider--with-input

Fixes

Fixes: #1041

[webteam-app]

Demo starting at https://react-components-1052.demos.haus

[bartaz]

Percy: https://percy.io/bb49709b/react-components/builds/33166994/

The expected changes are visible (Slider is fixed).

There are a lot of unrelated changes caused by Vanilla upgrade that includes new theming and new icon colours, etc.

There is also some weird behaviour in Percy that it shows new input border as lighter than before, which is weird because when checked in the browser it doesn't look lighter than before.

I'm ignoring it for now, assuming it's some Percy/Storybook glitch, but would be good to undestand the cause and if we can do anything about it, to avoid false negatives in future.

[github-actions[bot]]

:tada: This PR is included in version 0.50.6 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: