Some components are not compatible with styled-components v6

[arturmiglio]

Some components that use react-select can break (or fail in test environmets) when using styled-components latest (tested with 6.0.5).

• @freenow/wave version: 1.32.0 (and probably may minors before)

What was expected to happen?

Eg.: PhoneInput, when user opens the Country select, makes the example app (below) crash with:

Cannot read properties of undefined (reading 'borderRadius')

Reproduction

https://codesandbox.io/s/styled-components-6-issue-gffvqg

[arturmiglio]

Using styled-components v6 also generates a ton of console.errors since it doesn't check if a prop should be forwarded to the DOM element anymore. All custom props should be using the $ transient prop prefix.

Examples:

• Warning: React does not recognize thetextAlignprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasetextaligninstead. If you accidentally passed it from a parent component, remove it from the DOM element. from Month (/Users/artur.miglio/Projects/partner-dashboard/node_modules/@freenow/wave/lib/cjs/components/Datepicker/Month.js:21:19);
• Warning: React does not recognize theisWithinHoverRangeprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseiswithinhoverrangeinstead. If you accidentally passed it from a parent component, remove it from the DOM element. from Day (/Users/artur.miglio/Projects/partner-dashboard/node_modules/@freenow/wave/lib/cjs/components/Datepicker/Day/index.js:43:23);