Closes #8043 , #7600

?? Description

This PR allows to set a style-src CSP without unsafe-inline

?? Current behavior (updates)

Chakra currently uses both the style attribute on HTML elements and an injected style element. Both require unsafe-inline style-src.

?? New behavior

• Uses direct style props like flex={1} instead of style={{ flex: 1 }} .
• Uses __css instead of style where an style object is used.
• Adds the option to pass a nonce to the ColorModeProvider where the style element is injected.

?? Is this a breaking change:

No

?? Additional Information

I was unable to test the behaviour locally, because I had issues linking to the local directory from my package.json. I haven't tested all changes myself, so please take a good look.

Also, there are some places where a style attribute is set on motion.div . I was not sure how to handle this, so I haven't fixed those issues.